televizory

Krásné skupinové menu VK. Příprava obrázků pro nabídky a avatary ve Photoshopu

Krásné skupinové menu VK.  Příprava obrázků pro nabídky a avatary ve Photoshopu

Aby byla vaše skupina mezi uživateli oblíbená, musíte pravidelně přidávat nové publikace, nahrávat fotografie, videa atd. A aby se lidé mohli snadněji orientovat na stránce skupiny, je lepší vytvořit nabídku, která bude označovat hlavní body.

Máte například vlastní společnost, která nabízí určitý produkt nebo službu. Na internetu existuje i webová stránka. Pak skupina VKontakte pro tuto společnost pomůže přilákat nové zákazníky a zvýšit prodej. Nabídka může obsahovat následující položky: Okna, Dveře, Vrata, Zabezpečovací systémy, Doplňkové materiály, Akce a slevy. Odkazy vytváříme tak, že kliknutím na jednu z položek se člověk dostane do odpovídající sekce na webu.

Menu lze vytvořit bez odkazování na stránky třetích stran na internetu. Vaše skupina se například věnuje hudbě. V odstavcích můžete uvést žánry: klasika, rock, rap, z indických filmů, pro novorozence, z kreslených filmů. Když uživatel klikne na jednu z položek, mělo by se otevřít album s odpovídajícími skladbami. V tomto případě je položka odkazem na konkrétní album ve skupině.

Existuje mnoho příkladů pro vytvoření navigace ve skupině. No a teď přejděme ke cvičení.

Vytvoření jídelníčku

Nutná nastavení ve skupině

Než se pustíte do tvorby samotného menu, je potřeba zkontrolovat některá nastavení ve skupině. Musíte být tvůrcem skupiny, jinak jednoduše nebudete mít dostatečná práva k vytvoření navigace.

Na stránce VKontakte v levém sloupci klikněte na „Skupiny“ a vyberte svou skupinu ze seznamu. Poté pod svým avatarem klikněte na tři svislé tečky a ze seznamu vyberte „Spravovat komunitu“.

Nyní v nabídce vpravo přejděte na kartu „Sekce“ a v polích „Diskuse“ a „Materiály“ vyberte „Otevřený“ nebo „Omezený“. Klikněte na "Uložit".

Příprava obrázků pro nabídky a avatary ve Photoshopu

Poté, co zkontrolujete a změníte nastavení ve skupině, můžete začít vytvářet obrázky pro avatara a nabídku. Zde může být několik možností:

Nabídka může být pokračováním obrázku, který se objeví na avataru;

Může být vytvořen na samostatném obrázku nebo na obyčejném pozadí, avatar s ním nebude spojen, může na něm být například vyobrazeno logo společnosti.

První možnost podrobně zvážíme. Náš avatar a navigace se budou skládat z jednoho obrázku, který je potřeba správně rozřezat na části.

Otevřete Photoshop a vytvořte v něm nový soubor – Ctrl+N. Nastavte šířku na 760 a výšku na 500 pixelů.

Nyní pomocí nástroje Slice Tool musíte rozřezat list na několik oblastí. Nástrojem vyberte oblast napravo a poklepáním na ni otevřete okno s nabídkou. Nastavte šířku na 200 a výšku na 500. Toto bude avatar naší skupiny.

Pomocí stejného nástroje vyberte jinou oblast vlevo od předchozí. U něj je šířka 50, výška 500. To je vzdálenost mezi budoucími body a avatarem, tuto část obrázku nebudeme potřebovat.

Vyberte oblast vlevo nahoře. Pro něj je šířka 510, výška 182. Tato oblast našeho obrázku odpovídá ve skupině oblasti, ve které je zapsán název skupiny, stav a některé karty. To znamená, že to také nepotřebujeme.

V důsledku toho byste měli získat následující - obrázek je rozdělen do 4 oblastí. Oblast napravo je avatar skupiny, vlevo dole budou položky nabídky a další 2 oblasti, které nebudou potřeba.

Aby to bylo úplně jasné. Vyřízli jsme prázdný list. Poté k němu přidejte vybraný obrázek. Po uložení budeme mít tolik malých obrázků tvaru, kolik potřebujeme, kolik vyřízneme. Dále na stránku ve skupině vložíme určité části obrázku na správná místa.

Dále otevřete obrázek ve Photoshopu, který jste vybrali pro svého avatara a nabídku. Pomocí nástroje Přesunout přetáhněte obrázek na dříve vyříznutý list. Obrázek můžete posunout tak, aby byla viditelná požadovaná oblast.

Například velikost mého obrázku je větší než velikost, kterou jsme zvolili pro bílý list. Tak jsem to posunul tak, aby byly trochu vidět palmy a nebylo tam nahoře tolik nebe.

Po přidání obrázku si opět vezměte Slice Tool a vyřízněte oblast vlevo dole, kterou jsme si nechali pro body, na požadovaný počet kusů. Kolik bodů chcete udělat, bude tolik částí.

Nyní vezmeme textový nástroj a do každé části napíšeme položky nabídky.

To je vše, vše je připraveno. Vpravo je náš avatar, vlevo dole jsou navigační body. Další dvě části obrázku nebudou potřeba.

V této fázi můžete do oblasti vpravo přidat logo společnosti (avatar), nebo krásně napsat její název.

Uložte zachycený obrázek: Soubor – Uložit pro web a zařízení nebo použijte klávesovou zkratku Alt+Shift+Ctrl+S.

To je to, co jsem dostal: složka „menu“ na ploše. Obsahuje vybrané obrázky rozřezané na kousky požadované velikosti. Největší z nich je avatar, existuje mnoho malých stejných - položek nabídky a dvě nepotřebné - smažte je ze složky.

Nyní musíte nahrát pořízené obrázky, které odpovídají bodům, na vaši stránku VKontakte. Vyberte „Fotografie“ a vytvořte nové album, nazval jsem to „pro skupinové menu“. Nastavte album jako soukromé, abyste jej mohli zobrazit pouze vy – „Upravit album“. Přidejte do alba obrázky, které odpovídají vašim položkám nabídky.

Poté se vraťte na hlavní stránku skupiny a vyberte avatara - „Nahrát fotografii“. Toto je jeden z těch obrázků, které jsme právě vytvořili ve Photoshopu.

V této fázi byste tedy měli na stránce vytvořit uzavřené album s obrázky navigačních položek a nahrát avatar pro skupinu.

Vytvoření menu pomocí wiki značek

Pustíme se do tvorby samotného menu. Přejděte do skupiny a přejděte na kartu „Nejnovější zprávy“. Poté klikněte na tlačítko „Upravit“.

Název samotné karty můžete přejmenovat. Napíšu takto „MENU“. Nyní zde musíte přidat obrázky, které odpovídají bodům. Chcete-li to provést, klikněte na ikonu fotoaparátu.

Klikněte na jeden z obrázků, které jste právě přidali do svého profilu.

Poté se zobrazí na stránce úprav.

Přidejte tedy všechny ostatní obrázky, abyste získali požadovaný obrázek nabídky.

Po přidání všech položek klikněte na dvě šipky v pravém horním rohu pro přepnutí do režimu označování wiki.

Zde odstraňte všechny nepotřebné značky jako

a odstraňte mezery mezi všemi řádky. Nyní se podívejte na horní snímek obrazovky - mezi přidanými obrázky máme mezery. Chcete-li je odstranit, napište před velikost obrázku nopadding a vložte „;“.

Za velikost obrázku a hodnoty svislé tyče vložte kliknutím na příslušnou položku nabídky odkaz na stránku, kam se osoba dostane. Jak jsem již napsal, odkaz může být na nějakou stránku VKontakte nebo na zdroj třetí strany na internetu.

Takto bude kód vypadat po přidání „nopadding;“ a odkaz.

Výsledek by měl být takový: název záložky (MENU) byl změněn, mezery mezi řádky byly odstraněny, mezery mezi obrázky odstraněny (nopadding;), přidány odkazy. Klikněte na „Uložit stránku“ a vraťte se na hlavní stránku ve skupině.

Tím je proces vytváření navigace pro skupinu VKontakte dokončen. Udělal jsem to takhle. Obrázek avatara a nabídka jsou jedno. Přechodem na kartu „MENU“ si uživatel může vybrat, co ho zajímá, a přejít na odkaz, který jsem uvedl.

Pokud se obáváte, že nabídka ve skupině nemusí být viditelná, pak přiložte fotografii, na které například pomocí šipek naznačíte přítomnost záložky. Pokud máte dotazy, zeptejte se jich v komentářích.

Zdravím vás, milí přátelé a hosté blogu. Dnes budeme hovořit o vytváření nabídek ve VK a jak to udělat v novém designu sociální sítě. Jsou tam opravdu výrazné změny, na které je potřeba si dát pozor, protože pokud je menu uděláno ve starém designu, o kterém jsem psal, tak obrázky mohou vypadat nakřivo.

Nabídka skupiny VKontakte- tohle je její tvář. Právě to vidí uživatel, když poprvé vstoupí do komunity, a to, jak přístupně a atraktivně je vše navrženo, do značné míry rozhoduje o tom, zda se stane stálým členem skupiny.

DŮLEŽITÉ: Po změně obecného designu ve VK se změnily i velikosti obrázků pro menu na sociální síti. Zkontrolujte svou práci a proveďte změny v níže uvedených skupinách.

Typy menu a jejich vlastnosti

Prvním krokem při vytváření komunity je rozhodnutí o jejím hlavním cíli. Na tom závisí budoucí design menu a jeho funkční vlastnosti.
V závislosti na cílech skupiny může být nabídka:

  • pro informační platformu;
  • ;
  • pro tréninkové místo.

Hlavní část se týká informací. Jedná se o komunity, kde je uživateli poskytován nějaký druh zábavného nebo vzdělávacího obsahu. Pro takovou skupinu je nejlepší použít nabídku, která zobrazuje hlavní témata. Populární veřejnost tak vytváří sekce: zprávy, nejnovější publikace, populární publikace a také sekce specificky na téma skupiny.

Jídelní lístky obchodní a vzdělávací veřejnosti mohou být podobné. Cílem obou je pomoci svému uživateli zorientovat se v nabídce zboží či služeb. Nabídka pro prodej zpravidla obsahuje sekce jako Katalog produktů, Platba, Doručení, Akce a slevy a pro školení může být omezena na sekce popisující služby, protože zde jde především o to, aby uživatel našel školicí program resp. materiál, který potřebuje.

Jak vytvořit nabídku ve skupině VKontakte: pokyny krok za krokem

Celý proces lze rozdělit do 2 fází:

  • Práce ve Photoshopu;
  • Přidávání sekcí a obrázků do samotné skupiny.

Chcete-li přesně odpovědět na otázku, jak vytvořit nabídku ve skupině VKontakte, měli byste si vizuálně představit budoucí design se všemi sekcemi a poté v tomto procesu můžete přidat položky, které vás stále napadají.

V první fázi se vytvoří skupinový avatar a obrázky pro samotné menu. Jeden obrázek pro avatara i nabídku bude vypadat harmoničtěji.

Výběr nebo vytvoření avatara je třeba brát velmi vážně, protože mnoho uživatelů mu věnuje zvláštní pozornost. Můžete si najít vhodný obrázek na internetu a přidat k němu nápis nebo nějaké prvky ve Photoshopu, nebo si můžete udělat naprosto jedinečný obrázek sami.

Vzhledem k tomu, že potřebujeme udělat i rozbalovací nabídku, hledáme nebo vytváříme obrázek, který se nejlépe hodí k tématu skupiny nebo jen vezmeme krásné pozadí. Práce s obrázkem bude probíhat v Adobe Photoshopu, protože funkčnost běžných fotoeditorů na všechny potřebné operace nestačí. Všechny velikosti jsou nastaveny samotnou sociální sítí VKontakte a výrazné odchylky nahoru nebo dolů povedou k tomu, že se avatar buď vůbec nenačte, nebo nebude v nabídce.

Algoritmus akcí:

  • Otevřete Photoshop a přejděte na „soubor“ - „vytvořit“ a nastavte šířku a výšku: 760X500.

  • Vyberte nástroj „řezání“ a poté „rozdělit fragment“. Rozdělte obrázek na 3 části vodorovně. Pro fragment z levého nebo pravého okraje v rozevíracím okně (podle toho, kterou část chcete na avataru vidět), napište hodnoty šířky a výšky – 200XX a Y) – 560 a 0. To bude avatar skupiny.

  • U dalšího fragmentu nastavte šířku a výšku na 50X500 a do souřadnic napište 510 a 0. Toto je mezera mezi avatarem skupiny a nabídkou. Tato část nebude později potřeba.

  • Opět vyberte „rozdělit fragment“ a rozdělte svisle na 2 části. Pro fragment nahoře nastavíme následující hodnoty: šířka – 510, výška – 182, souřadnice – 0. Toto je prostor nad nabídkou. Tato část také nebude ve skupině viditelná.

  • Nyní zkopírujeme vybraný nebo vytvořený obrázek na vytvořený a rozdělený objekt. Pokud klávesové zkratky CTRL+V nefungují, jednoduše otevřete umístění v počítači, kde je obrázek uložen, a přetáhněte jej do Photoshopu.

  • Zbývající prostor rozdělíme svisle na tolik fragmentů, kolik je sekcí v nabídce. Nemusíte pro ně nastavovat hodnoty.
    Napíšeme název každé sekce.

  • Posledním krokem je uložení obrázků. Obrázky musíte uložit takto: soubor – uložit pro web. Tato metoda je vhodná pro novější verze Photoshopu. Pokud v sekci „soubor“ není žádné „uložit pro web“, postupujeme následovně:

Přejděte na položku „soubor“, vyberte „export“ - „uložit pro web“. Všechny parametry necháme tak, jak jsou. Znovu klikněte na „uložit“.

Vyberte složku v počítači a uložte tam obrázky. Měly by skončit takto:

Nyní přejdeme do druhé fáze, abychom přesně zjistili, jak vytvořit nabídku ve skupině VKontakte - přímo přidat nabídku veřejnosti. Pro tohle:

  • Nejprve musíte připojit materiály, protože je to jediný způsob, jak přidat jakékoli sekce na hlavní stránku. Chcete-li to provést, přejděte do správy komunity a úplně dole na stránce vyberte „Materiály“ a poté „otevřít“. Uložte změny.

  • Všechny fotografie nahrajeme do skupiny, kromě avatara a těch částí, které nejsou potřeba. Aby se fotografie zobrazily na hlavní stránce, musíte se vrátit do správy komunity a kliknout na záložku „fotografie“ - „otevřít“.
  • Nahrávání avatara.
  • Dalším krokem je aktivace režimu značkování wiki. Můžete to udělat kliknutím na ikonu kosočtverce na pravé straně stránky v sekci „upravit“.

  • Zde vložíme značkovací kód: [], kde [] je odkaz na sekci nebo stránku, kam přejdete kliknutím na fotografii. Můžete přidat jak odkazy na sekce na samotném VKontakte, tak na externí zdroje.
  • Tento kód je duplikován tolikrát, kolikrát je sekcí v nabídce, při každém vkládání odkazů.
    Na přání také změníme záložku „nejnovější zprávy“ například na „menu.

  • Klikněte na „uložit stránku“, vraťte se do hlavní části skupiny a obnovte stránku. Nabídka je ve výchozím nastavení uzavřena, ale uživatel kliknutím na odpovídající název bude moci otevřít její sekce a procházet jimi.

Tím je celý proces dokončen, ale určitě byste měli zkontrolovat, zda fungují odkazy a zda se okraje fotografie shodují.

Služby pro vytvoření skupinového menu

Pokud stále nechápete, jak vytvořit nabídku ve skupině VKontakte a podrobné pokyny vám nepomohly, můžete použít speciální služby, které vytvoří a dokonce krásně přidají
navržené menu pro skupinu.

Jednou z nejoblíbenějších služeb je MenuMake. Po odeslání přihlášky bude objednávka připravena do 5 minut a poté bude na přání přidáno menu do skupiny. Zároveň jsou zohledněna všechna přání zákazníka ohledně designu a počtu sekcí.

S pozdravem Galiulin Ruslan.

5 hlasů

Dobrý den, milí čtenáři mého blogu. Tímto článkem otevírám sérii publikací na téma krásného designu skupin VKontakte. Nyní budeme pracovat na vytvoření menu, poté přejdeme k vytvoření stylového jediného obrázku a na závěr se naučíme, jak udělat obrázky klikacími.

Nakonec skončíte s komunitou, která vypadá nějak takto. Když kliknete na tlačítko přechodu, ve skutečnosti se otevře další stylová stránka.

Práce před námi není tak náročná, podrobně vysvětlím, jak postupovat. Práce nezabere více než pár hodin. Promluvme si o všem v pořádku.

1. Příprava na práci. Nástroje, bez kterých se neobejdete

Než se tedy dostanu k hlavní otázce a začneme se zabývat tím, jak vytvořit menu ve skupině VKontakte, pojďme si promluvit o tom, co budete potřebovat.

1.1. Photoshop

Samozřejmě se obejdete i bez Photoshopu, podívejte se na toto video, které vše podrobně vysvětluje. Pokud chceš. Pokud však dovednosti nemáte, pak důrazně doporučuji, abyste se potrápili a prošli všechny tři mé publikace.

Pokud chcete normální skupinu, tak vám nezbývá, než se naučit Photoshop. Bez kvalitních snímků se nikam nedostanete. Mohu Vás doporučit kurz Zinaidy Lukyanové . Na svou novou profesi si zvyknete rychle a bez nudy a můžete si dokonce vydělávat peníze pomocí svých designérských dovedností. Dost znalostí!


Tak dobře, pokračujme. Je k dispozici vše, co potřebujete? Pak jste připraveni jít dál.

2. Práce ve Photoshopu nebo menu pro kutily

No a nyní můžete postupovat podle pokynů krok za krokem přímo pro vytvoření menu. Otevřete Photoshop a poté ilustraci s nabídkou. Doufám, že nebudou žádné problémy. V pravém horním rohu vyberte „Soubor“ a poté „Otevřít“. Dokument najdeme v počítači. Co bude dál?

Obrázek je potřeba vystřihnout. Vyberte nástroj „Řezání“. Jak vidíte, je skryta pod „Rámcem“. Stačí na něj kliknout a podržet levé tlačítko myši několik sekund, dokud se neobjeví další nabídka.

Nyní na samotný obrázek klikněte pravým tlačítkem myši a najděte „Rozdělit fragment“.

V tomto konkrétním případě rozdělím obrázek na 4 části. proč tomu tak je? Jakékoli tlačítko na internetu je obrázek, kterému je přiřazen specifický kód. Namíříte šipku na požadovaný fragment obrázku a váš prohlížeč odešle informaci do počítače: „Chlapče, tady jsou další funkce.“

Někdy se změní celý obraz. Například tlačítka, která se při stisku potopí, jsou jen druhý obrázek, žádná animace tam není.

V mém případě je potřeba jeden obrázek rozdělit na více částí a každé z nich přiřadit vlastní akci. Někde je odkaz na seznam produktů, někde odkaz na web. Na obrázku je také část označená jako „Menu“. Při najetí myší by se nemělo nic stát.

V dobrém slova smyslu jsem měl zvýraznit 5 částí, abych tlačítka rovnoměrněji oddělil, ale ospravedlňuji se tím, že když člověk netrefí, stejně si udělá, co chtěl, a když mačká správně, nepozná cokoliv.

Není problém udělat více kategorií nebo je seřadit do dvou sloupců. Pokud rozumíte základním informacím, zvládnete vše ostatní.

Linky jsem posunul, aby to bylo hladší. Není to těžké, provádí se to pomocí kurzoru.

Ujistěte se, že jsou obrázky uloženy jako jpeg (nejvyšší kategorie vpravo). Dále klikněte na „Uložit“.

Dobře, teď je po všem.

Tím jsme skončili, nyní můžeme přejít k samotné skupině a práci s kódem.

3. Rozložení ve VK pro figuríny

Dříve jsem si myslel, že označení wiki lze použít pouze pro komunity. Nevím, jestli se něco změnilo, nebo to tak bylo vždycky, ale teď je úplně jedno, jestli vytvoříte skupinu nebo veřejnou stránku. Stránky se dají vytvořit jak sem, tak tam.

No, zbývá už jen drobná záležitost rozvržení. Otevřete „Seznam wiki stránek“.

A přidejte nový.

Dejte tomu jméno. V našem případě jídelníček.

A přejděte k úpravám.

Prvním krokem je přidat všechny části našeho obrázku.

Načítání.

Udělejte to ze složky zdola nahoru v seznamu. Od úplně posledního (spodního, v mém případě „Napsat adminovi“) až po horní („Nabídka“), pak bude vše správně sedět, i když není tak obtížné přetahovat fragmenty myší. Co je pro vás výhodnější.

Nyní musíme odstranit odsazení a vytvořit různé odkazy na fragmenty a na některých místech zcela odstranit možnost kliknutí. Pojďme se přepnout do režimu kódu.

Značky „střed“ označují, že fotografie a její fragmenty jsou umístěny uprostřed. Odstraním je, abych vám usnadnil vnímání informací.

Pokud chcete, můžete udělat totéž, ale mějte na paměti, že ilustrace se posune doprava.

Znovu se vrátíme ke kódu, abychom odstranili odsazení mezi fragmenty výkresu.

Chcete-li po změně velikosti obrázek znovu sjednotit, vložte středník a napište značku nopadding (;nopadding).

Bude to vypadat takto.

Za každým fragmentem by přirozeně nemělo být žádné odsazení, a proto je třeba značky duplikovat.

Nyní ilustrace vypadá jednotně. Pokud to nefunguje, zkontrolujte, zda jste slovo napsali správně, a vložte středník, v případě potřeby odstraňte mezery, aby to bylo jako v mém příkladu. Pro výsledek je důležitý každý malý detail.

Nyní, když kliknete na různé části obrázku, otevřou se v novém okně.

Abyste tomu zabránili, budete potřebovat další značku. Nolink. Nezapomeňte na středník.

Pouze na prvním obrázku nebude přechod, ale zbytek můžete nahradit vlastními URL.

Čtenáře můžete přesměrovat na jiné wiki stránky, příspěvky, blogy a další sociální sítě. Nyní to není těžké udělat, můžete dělat všechno. Nezbývá než ušetřit.

Takto vypadá naše menu.

A zde je požadovaný odkaz.

4. Závěrečná fáze registrace

Konečně nastal čas rozhodnout se, zda máte veřejnou stránku nebo skupinu. Na tom závisí budoucí strategie.

Pokud nevíte, co máte, přejděte do sekce správy z kategorie „Moje skupiny“.

Pokud to chcete udělat jako já a dát to do nabídky, tak přejděte na druhý díl a budeme pokračovat v krásném designu veřejnosti. Výsledkem bude něco takového.

Nejsem zastáncem toho, aby se menu stalo pouze stavovým obrázkem, ale někteří lidé to chtějí. Nemám právo nikoho kritizovat, a pokud máte skupinu, můžete svůj úkol realizovat.

5. Video návod

Podívejte se na video, veškerou hlavní práci už máme za sebou, zbývá jen maličkost.

6. Alternativní metoda pro Dummies za 100 rublů.

Pokud máte nějaké potíže s vytvářením menu sami, neváhejte využít tuto službu - VkMenu.ru , kde za skromnou cenu 100 rublů. (dnes je to takhle), můžete si vytvořit menu prostřednictvím online konstruktoru.

Podle mého názoru je to skvělá alternativa k ruční práci a proklínání všech a všeho, když nic nevyjde s označením wiki.


Tímto se loučím, ale ne na dlouho. Trochu si odpočiňte a přejděte k další části.

Přihlásit se k odběru mých skupina VKontakte . Bavte se a brzy na viděnou!

A opět vás rád vítám!

V dnešním článku budeme hovořit výhradně o skupině VKontakte, i když z větší části preferuji práci s veřejnými stránkami. Ale když jsem se v minulém článku dotkl příkladu své veřejnosti, mnozí měli dotazy, konkrétně na menu pro skupinu.

Jak vytvořit nabídku ve skupině VKontakte

Tady je to, co jsem dostal.

Menu jsem udělal pouze jako příklad. Abyste to pochopili pro skupiny, zvažte podrobněji všechny jemnosti pro vás.

Tak. Zde jsou základní kroky:

  • Zamyslete se nad hlavním menu
  • Vyberte obrázek
  • Photoshop (nikde bez Photoshopu, jako vždy 🙂)
  • Řezání obrazu
  • Nahrání obrázku do alba kontaktu

Aktivovat Nedávné záznamy(pro vaše budoucí menu), musíte jít do správy komunity a zapnout položku - „Materiály“

Po zahrnutí materiálů se v horní části skupiny objeví položka „Nejnovější zprávy“, ve které budete muset vytvořit nabídku. Stejně jako u každé kontaktní stránky se ocitneme v editoru, do kterého můžeme buď ručně nahrát obrázky nebo tlačítka nabídky, nebo pomocí označení wiki (tlačítko v pravém horním rohu).

Jak jste uhodli, nejjednodušším způsobem je nejprve nakreslit potřebný obrázek ve Photoshopu a předem na něj umístit tlačítka, v budoucnu to budou odkazy.

V mém příkladu jsem použil pozadí dívky a umístil 3 tlačítka nalevo od ní. Každé tlačítko mělo svůj název.

Můj jídelníček se skládal z následujících položek:

Aby byl hotový obrázek integrován do kontaktu, musí být nejprve vyříznut. K tomu používáme nástroj „Cutting“ ve Photoshopu. Myslím, že s tím nebudou žádné potíže. Všechno je tam jednoduché... Pro jistotu jsem vyfotila :)

Vybereme tento nástroj a začneme „řezat“. Mám 4 díly. (to nejjednodušší, co mě napadlo :), i když to můžete nakrájet na kousky)

Všechny potřebné práce k vytvoření menu byly dokončeny. Nyní můžete začít vytvářet nabídku VKontakte. Chcete-li to provést, nahrajte obrázky do kontaktu jeden po druhém. Zde je to, čím jsme skončili:

Nyní klikněte na každé tlačítko (nebo část obrázku) a přiřaďte požadovanou adresu (odkaz). Chcete-li odstranit další mezery, musíte použít značku „nopadding“ (v nabídce značek Wiki)

Značka „nopadding“ odstraňuje mezery mezi obrázky, to znamená, že je pomáhá „spojit“ těsně k sobě.

V důsledku přidání značky byl výsledek následující:

Zdá se, že je vše jasné a není nic složitého. A pokud se najednou rozhodnete vytvořit si to sami, tak jděte do toho, pravděpodobně to nakonec uděláte krásnější... V mém příkladu to nedopadlo tak cool, jak bych chtěl, ale podíval jsem se na pracovní část pro vás. Jistě, pokud strávíte více času a dokonce se obrátíte na nezávislé pracovníky, můžete vytvořit velmi cool menu.

Viděl jsem mnoho lidí dělat pokračování hlavního avatara. Ukazuje se to jako jeden celý obrázek. Vypadá dobře. Ale abyste něco takového vytvořili, musíte lépe rozumět Photoshopu :)

Také jsem si všiml, že mnoho lidí se zajímá o otázku - jak otevřít skupinovou nabídku, to znamená, že nabídka skupiny VKontakte je zpočátku otevřena při vstupu do skupiny.

Odpovědět: Pokud vím, tato funkce byla odstraněna správci Vkontakte. Dříve bylo samostatné tlačítko, aby bylo menu opraveno - otevřít. Poté byla tato funkce odstraněna a nyní se musí nabídky otevírat samostatně.

I když jsem viděl některé, které jsou ve výchozím nastavení otevřené... a někdo dokonce řekl, že existuje nějaký kód, který se s tímto problémem vyrovná. Ale nedoporučoval bych to používat. Soudě podle diskusí na mnoha fórech to administrátoři nevítají!

To je pro dnešek vše. Uvidíme se v kontaktu!

Dnes budu pokračovat ve svém „Ponoření do skupin VK“. Ve třetí části „seriálu“ jsem řekl a ukázal. Dnes si promluvme o návrhu skupinového menu VKontakte!

V prvním článku o tvorbě jídelníčku bylo v komentářích hodně dotazů, takže před založením nového tématu odpovím na často kladené otázky.

Otázka 1: První a nejčastější: "Kde je kód v nabídce?" nebo „Pokud při úpravě „Zdrojového kódu“ není žádná záložka, jak přidat interní stránku? nebo "Stále nechápu, co dělat, když se kód neobjeví!"

Odpověď 1: VK změnil editor, nyní můžete přepínat mezi vizuálním editorem a kódem jediným kliknutím (pravý horní roh editoru):

Chcete-li zkontrolovat, v jakém editoru se nacházíte: najeďte myší na toto tlačítko, napište nějaký text a zvýrazněte jej tučným písmem – pokud se objeví neobvyklé znaky, jedná se o kód

Otázka 2: Druhá, opravdu problematická: „ jak odstranit mezery mezi obrázky?»

Odpověď 2: Přiznám se, že jsem se sám vyděsil, když klientovo menu poprvé začalo fungovat. Teď jsem to rychle upravil, ale tehdy to nebyla sranda. Vidět:

Přidejte značku nopadding; a všechno zapadne na své místo!

Mezi obrázky se vkrádá mezera a menu vypadá rozbitě. Pro neznalého to možná není normální, ale pro neznalého je to přinejmenším neprofesionální. Takže o co jde? Ach, to je velmi jednoduché! Ve VK jsou neustále nějaké aktualizace, zavádějí se nové algoritmy... a dokonce i editor je pokřivený... občas z kódu bez zjevného důvodu vypadnou důležité značky a pak vidíme tento obrázek. Chcete-li to opravit, musíte se podívat do kódu a provést potřebné úpravy. Formát kódu by měl být tento:

Šablona: [] Příklad: []

Obvykle jsou obrázky nabídky rozšířeny, protože kód vynechává nopadding; — vložíme na místo a vše je zarovnáno. Před uložením výsledku klikněte na tlačítko „Náhled“, abyste se ujistili, že je vše hladké.

Otázka 3: Zprávy. V říjnu 2012 VKontakte násilně odřízl avatary skupin a veřejných stránek. Nyní má jejich velikost běžný standard 200x500 pixelů. Pokud jste tedy měli ve skupině většího avatara, proveďte aktualizaci (aktualizujte avatara).

Mimochodem, spolu s oříznutím VK představil další novinku týkající se skupinových fotografií: nyní kliknutím na avatar budeme moci, stejně jako v účtu, vidět všechna alba komunity. Je to pohodlné! A z toho plynou nové funkce v komunikaci skupiny.

Tááák, s otázkami jsme skončili... nyní přejdeme k samotné tvorbě menu!

Krok 1. Jak vytvořit menu v kontaktu a vytvořit vnořené stránky:

Nejprve se ujistěte, že víte, jak vytvořit skupinové menu v kontaktu, a projděte si několik pokynů:

Co si myslíte o mém cheat sheetu?

Tohle je ten cheat, se kterým jsem přišel! Pro větší přehlednost popíšu každé číslo:

Proveďte tuto operaci se všemi podstránkami a vaše menu bude připraveno.

Jíst! Vytvořili jsme menu, vytvořili interní stránky, vyplnili je, nyní přejdeme k vytvoření krásného grafického menu.

Krok 2. Jak vytvořit krásné grafické menu v Kontaktu a nainstalovat jej:

Nebudu vám dávat celou teorii o tom, jak funguje značkování wiki v kontaktu, teď máme jiné cíle. Chcete-li vytvořit vizuální nabídku ve skupině VK, nemusíte znát všechna označení wiki. Pojďme k vytvoření vizuálního menu!

Nejprve vám ukážu kód a výsledek mého menu:

Přiznám se, že jsem se rozhodl napsat tento článek. Všichni se k tomu „nedostali“, víte, jako „obuv bez bot“. Ale teď mám vizuální menu ve skupině VK!

Neřeknu vám, jak nakreslit obrázek pro menu, to je na designérech, kreslím to sám, ale ne tak profesionálně. , na konci článku jsem dal video, jak nakreslit jednoduché menu ve Photoshopu, mrkněte na to, třeba to zvládnete sami. Pokud ne, objednejte si obrázek menu z .

Ukážu vám středně složitou možnost instalace menu. Rozdíl je v počtu prvků. Menu, které je jednoduše nakrájeno na proužky, je nejjednodušší implementace. Čím více klikacích tlačítek v řádku, tím složitější je jeho provedení. I když, s vědomím zvláštnosti, je vše jednoduché! Je to jen otázka času. Šířka obrázku by tedy měla být:

370 px – pokud máte dva nebo více objektů v řadě, jako já mám tlačítka sociálních sítí

A max 388 px – pokud obrázek nařežeme jednoduchým způsobem, pouze na čáry, bez dělení na drobné předměty. Toto je funkce, kterou potřebujete vědět, když rozdělujete nabídku na tlačítka. Moje velikost obrázku pro celé menu byla 370x456 px.

Poté, co je obrázek rozřezán na požadovaný počet objektů a uložen do samostatného alba, nahrajeme toto album do VK. Nahráváme do profilu účtu, ne do skupiny! Protože ve skupinových albech již není možnost skrýt alba. Technické album ve firemní (například) skupině není vůbec potřeba, takže položky nabídky v albu účtu skryjeme:

Technické album VK

Jakmile nastavíte soukromí „Pouze já“. Přejděme k instalaci samotného menu. Dám vám příklad kódu, který by pro vás byl šablonou, a podívejme se, z čeho se skládá:

[]

Kde, foto7632142_296911699– toto je adresa obrázku! Podíváme se na to v adresním řádku obrázku:

Od prvního obrázku začneme vkládat nabídku do skupiny VKontakte

Potřebujete krátkou adresu obrázku, k tomu přejděte do samotného alba:

Přejděte do samotného alba a získejte požadovanou adresu obrázku!

...a počínaje prvním obrázkem je přesuňte do skupinového menu.

Přidání velikosti obrázku do kódu nabídky!

Takže byla přidána adresa obrázku, byla uvedena velikost, nyní vložíme značku nopadding;- je potřeba, aby naše obrázky k sobě těsně přiléhaly. A posledním krokem je vložení odkazu na stránku, kam se návštěvník dostane po kliknutí na obrázek.

Zde je malé upřesnění! Externí odkazy, odkazy na alba a diskuze VK píšeme v plném znění a odkazy na interní stránky ve formátu strana-32734125_44298120. Na začátek a konec řádku nezapomeňte dát dvě hranaté uvozovky a žádné mezery.

Upřesnění 2: když odkazujeme na interní stránky bez obrázků, používáme jednoduché čtvercové uvozovky pro diskuze, alba a externí odkazy.

Řádky, ve kterých máte dva nebo více prvků, se do kódu vkládají bez mezer. Vložte každý řádek obrázku jeden po druhém. Protože pokud po řádku s obrázkem stisknete Enter, obrázek přeskočí na nový řádek a nabídka se přesune. Potřebujeme, aby se menu zobrazovalo jako celek, takže nepotřebujeme žádné další mezery nebo „intertery“!

Poté, co přenesete všechny obrázky do nabídky a navrhnete je (velikost, odkaz), uložte výsledek a obdivujte svou práci! Všechno! Připraveno!