Grafisch menu VKontakte. Hoe je een mooi menu maakt voor een VKontakte-groep

Vandaag ga ik verder met mijn “Onderdompeling in VK-groepen”. In het derde deel van de “serie” vertelde en liet ik zien. Laten we het vandaag hebben over het ontwerpen van het VKontakte-groepsmenu!

In het eerste artikel over het maken van een menu stonden veel vragen in de reacties, dus voordat ik een nieuw onderwerp start, zal ik de veelgestelde vragen beantwoorden.

Vraag 1: De eerste en meest voorkomende: “Waar is de code in het menu?” of “Als er geen bladwijzer is bij het bewerken van “Broncode”, hoe kan ik dan een interne pagina toevoegen?” of “Ik begrijp nog steeds niet wat ik moet doen als de code niet verschijnt!”

Antwoord 1: VK heeft de editor gewijzigd, nu kun je met slechts één klik wisselen tussen de visuele editor en de code (rechterbovenhoek van de editor):

Om te controleren in welke editor u zich bevindt: beweeg uw muis over deze knop, schrijf wat tekst en markeer deze vetgedrukt - als er ongebruikelijke tekens verschijnen, dan is dit code

Vraag 2: De tweede, echt problematisch: “ Hoe verwijder ik spaties tussen afbeeldingen?»

Antwoord 2: Ik geef toe dat ik zelf bang was toen het menu van de klant voor het eerst begon te werken. Nu edit ik het snel, maar toen was het niet leuk. Zien:

Voeg de nopadding-tag toe; en alles zal op zijn plek vallen!

Er kruipt ruimte tussen de afbeeldingen en het menu ziet er kapot uit. Voor onwetenden is dit misschien niet normaal, maar voor onwetenden is dit op zijn minst onprofessioneel. Dus wat is het probleem? Ach, het is heel simpel! In VK vinden er voortdurend enkele updates plaats, worden er nieuwe algoritmen geïntroduceerd... en zelfs de editor is krom... soms vallen, zonder duidelijke reden, belangrijke tags uit de code en dan zien we deze afbeelding. Om dit op te lossen, moet u de code bekijken en de nodige aanpassingen aanbrengen. Het codeformaat zou er als volgt uit moeten zien:

Sjabloon: [] Voorbeeld: []

Meestal worden menuafbeeldingen uitgevouwen omdat de code weggelaten wordt geen vulling; – we hebben het op zijn plaats gezet en alles is op één lijn gebracht. Voordat u het resultaat opslaat, klikt u op de knop "Voorbeeld" om er zeker van te zijn dat alles soepel verloopt.

Vraag 3: Nieuws. In oktober 2012 sloot VKontakte met geweld de avatars van groepen en openbare pagina's af. Nu heeft hun formaat een gemeenschappelijke standaard van 200x500 pixels. Dus als je een grotere avatar in je groep had, voer dan een update uit (update de avatar).

Trouwens, naast het bijsnijden introduceerde VK nog een innovatie met betrekking tot groepsfoto's: door nu op de avatar te klikken, kunnen we, net als in het account, alle albums van de community zien. Het is comfortabel! En hieruit wordt nieuwe functionaliteit gehaald in de communicatie van de groep.

Zoooo, we zijn klaar met de vragen... laten we nu verder gaan met het maken van het menu zelf!

Stap 1. Een menu in contact maken en geneste pagina's maken:

Laten we er eerst voor zorgen dat u weet hoe u een groepsmenu in contact kunt maken en een paar instructies kunt doorlopen:

Wat vind je van mijn spiekbriefje?

Dit is het spiekbriefje dat ik bedacht heb! Voor meer duidelijkheid zal ik elk nummer beschrijven:

Voer deze handeling uit met alle subpagina's en uw menu is gereed.

Eten! We hebben het menu gemaakt, de interne pagina's gemaakt, ze ingevuld en laten we nu verder gaan met het maken van een prachtig grafisch menu.

Stap 2. Hoe maak je een mooi grafisch menu in Contact en installeer je het:

Ik zal je niet de hele theorie geven over hoe wiki-markeringen in contact werken, we hebben nu andere doelen. Om een ​​visueel menu in een VK-groep te maken, hoef je niet alle wiki-opmaak te kennen. Laten we verder gaan met het maken van een visueel menu!

Eerst laat ik je de code en het resultaat van mijn menu zien:

Ik geef toe dat ik het speciaal heb gemaakt om dit artikel te schrijven. Iedereen ‘kwam er niet aan toe’, weet je, zoals ‘een schoenmaker zonder laarzen’. Maar nu heb ik een visueel menu in de VK-groep!

Ik zal je niet vertellen hoe je een afbeelding voor het menu moet tekenen, dat is aan de ontwerpers, ik teken het zelf, maar niet zo professioneel. , aan het einde van het artikel gaf ik een video over hoe je een eenvoudig menu tekent in Photoshop, bekijk het eens, misschien kun je het zelf doen. Zo niet, bestel dan de menuafbeelding via .

Ik zal je een redelijk complexe menu-installatieoptie laten zien. Het verschil zit in het aantal elementen. Een menu dat eenvoudigweg in reepjes wordt geknipt, is de eenvoudigste uitvoering. Hoe meer knoppen op een regel kunnen worden aangeklikt, hoe complexer de uitvoering ervan. Hoewel, als je de eigenaardigheid kent, alles eenvoudig is! Het is gewoon een kwestie van tijd. De breedte van de afbeelding moet dus zijn:

370 px – als je twee of meer objecten op een rij hebt, zoals ik sociale netwerkknoppen heb

En max 388 px – als we de afbeelding op een eenvoudige manier knippen, alleen in lijnen, zonder deze in kleine objecten te verdelen. Dit is de functie die u moet kennen als u een menu in knoppen opdeelt. Mijn afbeeldingsgrootte voor het hele menu bleek 370x456 px te zijn.

Nadat de afbeelding in het vereiste aantal objecten is geknipt en in een apart album is opgeslagen, uploaden we dit album naar VK. We uploaden naar het accountprofiel, niet naar de groep! Omdat groepsalbums niet langer de mogelijkheid hebben om albums te verbergen. Een technisch album in een bedrijfsgroep (bijvoorbeeld) is helemaal niet nodig, dus verbergen we de menu-items in het accountalbum:

Technisch album VK

Zodra u de privacy "Only Me" hebt ingesteld. Laten we verder gaan met het installeren van het menu zelf. Ik zal je een codevoorbeeld geven dat een sjabloon voor je zou zijn en laten we eens kijken waaruit het bestaat:

[]

Waar, foto7632142_296911699– dit is het adres van de foto! We bekijken het in de adresbalk van de afbeelding:

Laten we vanaf de eerste afbeelding beginnen met het invoegen van een menu in de VKontakte-groep

Je hebt een kort adres van de afbeelding nodig, ga hiervoor naar het album zelf:

Ga naar het album zelf om het gewenste afbeeldingsadres te krijgen!

...en verplaats ze vanaf de eerste foto naar het groepsmenu.

Afbeeldingsgrootte toevoegen aan de menucode!

Dus het adres van de afbeelding is toegevoegd, de maat is aangegeven, nu plaatsen we de tag geen vulling;- het is nodig zodat onze foto's strak op elkaar passen. En de laatste stap is het plaatsen van een link naar de pagina waar de bezoeker naartoe gaat nadat hij op de foto heeft geklikt.

Even een verduidelijking hier! We schrijven externe links, links naar VK-albums en volledige discussies, en links naar interne pagina's in het formaat pagina-32734125_44298120. Vergeet niet om aan het begin en einde van de regel twee vierkante aanhalingstekens en geen spaties te plaatsen.

Verduidelijking 2: wanneer we naar interne pagina's zonder afbeeldingen linken, gebruiken we enkele vierkante aanhalingstekens voor discussies, albums en externe links.

Regels waarin u twee of meer elementen heeft, worden zonder spaties in de code ingevoegd. Voeg elke regel van de afbeelding één voor één in. Want als je na de regel met de afbeelding op Enter drukt, springt de afbeelding naar een nieuwe regel en verplaatst het menu zich. We willen dat het menu als geheel wordt weergegeven, dus we hebben geen extra spaties of “interters” nodig!

Nadat je alle foto's naar het menu hebt overgebracht en ontworpen (grootte, link), sla je het resultaat op en bewonder je je werk! Alle! Klaar!

Dan bent u bij het juiste artikel beland. Hier zullen we bespreken hoe je een groep kunt maken [eh, ik corrigeer je, community] op het sociale netwerk VK en gebruikers zullen een goede indruk van je krijgen. Tijden veranderen en mensen worden slimmer en kunnen onmiddellijk problemen oplossen

Zoals je waarschijnlijk al weet, biedt VK 3 opties voor het maken van groepen [communities]:

  • Groep
  • Openbare pagina
  • Evenement

Bepaal op basis van uw doelen en doelstellingen voor uzelf welke optie het beste bij u past. Voor bepaalde evenementen worden uiteraard evenementen aangemaakt. Laten we het uitzoeken - wat te kiezen - een groep of een publiek?

In feite zijn de mogelijkheden van een VKontakte-groep en het publiek niet zo verschillend.

Maak een openbare pagina, geen groep.

Er zijn een aantal voordelen voor een publiek in plaats van voor een groep. Het publiek is eenvoudiger te ontwerpen en te gebruiken en wordt ook opgenomen in het blok met interessante gebruikerspagina's. Op basis hiervan kunt u de interesses van de gebruiker achterhalen. In dit geval is het fotografie en alles wat daarmee samenhangt.

Wat de groep betreft, potentiële klanten kunnen vragen stellen aan de muur. In eerste instantie lijkt dit een voordeel, maar alleen als je geen contentplan hebt en je doel alleen is dat mensen erom gaan vragen. Maar in zulke groepen is de betrokkenheid erg zwak.


Ook in groepen is er de mogelijkheid om vrienden uit te nodigen. Bij het publiek is deze functie verminderd. Maar het is onwaarschijnlijk dat uw vrienden uw doelgroep zijn aan wie u diensten of goederen gaat verkopen. Daarom heeft het ook weinig zin om je te concentreren op het uitnodigen.

Een ander voordeel van de groep is de mogelijkheid om via een iframe-applicatie een online winkelapplicatie toe te voegen die gebruik maakt van het beveiligde https-protocol, waardoor de gebruiker een bestelling kan plaatsen zonder het sociale netwerk te verlaten.


Communitykop

Laten we nu eens ingaan op het onderwerp van de titel van onze community. Hoe u een kop correct kunt maken, zodat deze voor ons bedrijf werkt en verkeer genereert. Uw type activiteit is bijvoorbeeld het verkopen van dameskleding in Nizjni Novgorod.

Door in te loggen op Yandex kun je dat zien...


De groep kwam bovenaan de zoekresultaten voor dit verzoek terecht en wordt op de een of andere manier gerangschikt voor dit verzoek. Dienovereenkomstig zou het redelijk zijn om uw groep op deze manier een naam te geven om in de zoekresultaten van zowel Yandex- als VKontakte-zoekopdrachten te komen.

Beroep - een trefwoord waarmee gebruikers mogelijk naar u kunnen zoeken - als uw beroep aan een stad is gekoppeld, kunt u in de groep zelf ook de stad aangeven waar u zich bevindt. Zoekmachines zullen uw groep identificeren op basis van geolocatie.

Idealiter ziet het titelformaat er als volgt uit:

Online dameskledingwinkel | Lovandzoo

waarbij “Online dameskledingwinkel” de belangrijkste vraag is

Lovandzzoo is de naam van uw merk

Avatar en dekking

Design is geen belangrijk radertje in het mechanisme van een online bedrijf, maar een mooi vormgegeven groep zonder verdacht of goedkoop ontwerp wekt meer vertrouwen. En het ontwerp van de community begint met een goed ontworpen avatar en communitycover.

Een community-avatar is het gezicht van uw bedrijf en moet zowel de positionering als de contactgegevens van het bedrijf weerspiegelen. U moet het volgende aangeven:

  • bezigheid
  • logo en merknaam
  • telefoon
  • oproep tot actie, bijvoorbeeld: 'Abonneer u om voor uw gezondheid en uiterlijk te zorgen.'
  • pijl die aangeeft dat u zich abonneert.
  • geef ook het adres en de externe bron aan - website.

Een voorbeeld van een goede ava:

Laten we het nu hebben over het omslagontwerp, dat nu populair is geworden na de innovaties op VKontakte. In principe is de aanpak hetzelfde als bij het ontwerpen van een avatar, alleen verplaatsen we nu alles naar een horizontale positie. Hier zijn enkele voorbeelden van goede covers met verschillende ontwerpstijlen. Eén ding hebben ze gemeen: het is duidelijk waar iemand terecht is gekomen en wat hij ziet. De omslag moet vragen beantwoorden "Wat is dit?".





Let op de achterkant en de pijlen die wijzen naar:

  • logo
  • merk
  • waar gaat het publiek over?
  • hoe inhoud nuttig is voor abonnees
  • en wat de gebruiker ontvangt als hij zich abonneert

U kunt hetzelfde doen - dit is een standaardwerkstructuur voor het vakkundig ontwerpen van de dekking van gemeenschappen.

Wiki-menu

U kunt populaire wiki-menu's in uw communityontwerp implementeren. Het belangrijkste is om na te denken over de menustructuur, want door een menu te maken met behulp van wiki-opmaak creëer je in zekere zin een minisite op een sociaal netwerk en de gebruiker mag daarin niet verdwalen. Kijk hiernaar wiki-menu en begrijpen wat een competente wiki-menustructuur betekent.

Een voorbeeld van een goed en aantrekkelijk menu.


Afhankelijk van de niche kan het wikimenu de volgende secties bevatten

  • als het een verkoop aan particulieren betreft. goederen en diensten - leveringsvoorwaarden, productcategorieën, prijslijsten, bestelwijze, beschrijving, etc.
  • als de verkoop van informatieproducten
    is een gestructureerde inhoudsbasis, zoals

Nog een voorbeeld van een goed menu:


Koppelingen

Geef in de links al uw externe bronnen aan: leadmagneten, hoofdsites, kanalen op andere sociale netwerken waar het publiek naartoe gaat. Dit zal helpen het verkeer naar uw bron via sociale netwerken te vergroten.

Lees ook>>>>

Inhoud is koning

Inhoud is koning

Bill Gates zei het ooit en hij had gelijk. Sociale netwerken bestaan ​​en worden gepopulariseerd vanwege de aanwezigheid van voortdurend gegenereerde inhoud erop. Zonder hem is de groep opgebrand en vergeten. Daarom moet je regelmatig berichten plaatsen om jezelf eraan te herinneren.

Maar hoe formatteer je berichten op de juiste manier, zodat ze geliked en gedeeld worden?

Alles is hier heel eenvoudig - je hoeft geen afbeeldingen met een goedkoop ontwerp en saaie copywriting in berichten te gebruiken - niet alleen vinden gebruikers ze niet leuk, het sociale netwerk zelf negeert dit inhoudsformaat. Dit is ongeveer hoe de afbeelding eruit zou moeten zien.

Niemand eist ontwerpwerk van u, maar alleen een ontwerp dat prettig is en niet irriterend voor het oog. Als de inhoud visueel goed wordt waargenomen, is de kans groot dat deze wordt gedeeld.

CHPS (Humanly Understandable Links) in berichten

Probeer geen originele links of links met UTM-tags aan te geven, maar verkort ze met behulp van de dienst vk.com/cc in de kop, onder de titel van het bericht. VK-gebruikers negeren berichten met lange links (vooral in het begin). Ze zijn geïnteresseerd in de inhoud. Comprimeer links in berichten met behulp van vk. com/ cc

Hier kun je in een specifiek voorbeeld zien hoe zo’n link er in een bericht uitziet:

Probeer ook geen voor de hand liggende en triviale kopjes te gebruiken. Het doel van krantenkoppen is om de aandacht van communityabonnees in de nieuwsfeed te trekken. Titel bijvoorbeeld “16+1 effectieve en genezende eigenschappen van pompoenpitolie waar 95% van de mensen op aarde niets van weten” zal beter werken om de aandacht van het publiek te trekken dan de onopvallende ‘Eigenschappen van Pompoenzaadolie’. Probeer cijfers en details aan de titel toe te voegen. Dan zal de post de aandacht trekken.

Ben je klaar om je droom uit te dagen en je ideeën en ideeën op internet te realiseren, en online serieus geld te gaan verdienen?

Diversifieer uw inhoud

Identificeer ten minste 30 onderwerpen (behoeften) die mogelijk nauw verband houden met uw richting en gebruik een timer om te beginnen met posten.

Creëer interessante inhoud over uw niche. Op het gebied van sport kunt u bijvoorbeeld motiverende inhoud, educatieve inhoud en deskundige inhoud schrijven. De lijst met behoeften kan eindeloos worden gemaakt en het probleem is het kiezen van een formaat zodat het posten vanzelf verdwijnt. Gebruik in elk bericht verschillende call-to-actions met een motivering van de reden: 'Vind het leuk als het nuttig was', 'Post opnieuw als je vindt dat al je vrienden ervan op de hoogte moeten zijn.'

Voeg emoji toe aan je berichten om ze kleurrijker en aantrekkelijker te maken. Maar spam niet te veel.


Er achter komen,

Video

Voeg in alle video's die naar YouTube worden geüpload een omslag toe, zodat de verpakking de aandacht van de gebruiker trekt. Video's zonder verpakking zien er erg grof uit, waarbij al duidelijk is dat er geen interesse zal zijn om ze te downloaden.

Hier is een voorbeeld van hoe een video-omslag eruit zou moeten zien:


De klikfrequentie van een video met cover is vele malen hoger, omdat er sprake is van een verpakking: een verpakking die het publiek aantrekt. De afbeelding moet zijn rol spelen: interesse wekken voor wat erin zit.

Implementeren!

Goederen

Productensectie - prijzen worden weergegeven in oplopende volgorde - de laagste prijzen moeten op het display verschijnen.


Gedetailleerde beschrijving op de productkaart zelf. En als er een website is, voeg dan een link toe naar de productkaart. De knop ‘Schrijf naar de verkoper’ is gekoppeld aan persoonlijke berichten van de persoon die de groep leidt, of de manager die de groep bewaakt


We bereiken de gemeenschap

We vullen het discussiegedeelte in en maken er subsecties in: “Uw vragen”, “Hoe bestellen”, “Vacatures”. U kunt ook een vragenlijst maken voor variatie.


Vergeet ook niet uw contactgegevens in te vullen. Zodat iemand begrijpt met wie hij contact moet opnemen - over het bestellen van goederen, reclame of uw diensten.

Om te begrijpen aan wie u een vraag moet stellen, noteert u de functie: de manager en de verantwoordelijkheden van de persoon. Zo laat u de gebruiker snel weten bij wie hij met zijn vraag terecht kan.

Het belangrijkste was ik bijna vergeten :) - we vullen de groepsbeschrijving met de nodige informatie bij alle uitgaande links. Zorg ervoor dat u de beschrijving opdeelt in tekstblokken van 3-4 regels, zodat de tekst leesbaar is - nog niemand heeft de regels voor copywriting voor de leesbaarheid van tekst geannuleerd.

Hier is een voorbeeld van hoe goed een beschrijving in een community zou moeten zijn:


P.S.

Nou, wat zeg je ervan? Was de inhoud nuttig?

Begrijp je hoe je een groep op VKontakte maakt?

Zo ja, dan wacht ik op feedback in de reacties - ik antwoord onmiddellijk. Je hebt geen tijd om te knipperen. Ik bespreek graag het onderwerp promotie op sociale netwerken. Als ik geen tijd heb, schrijf dan

Allereerst moet je het prachtig versieren. Zoals u weet beoordelen we tenslotte alles ‘aan de hand van onze kleding’. Dit artikel zal je helpen ontwerp prachtig een VKontakte-groep op zichzelf.

Hoe de naam van een VKontakte-groep formaliseren?

Het eerste waar u op moet letten bij het maken van een VKontakte-groep is Naam. Er zijn drie belangrijke parameters waarmee u rekening moet houden bij het kiezen van een naam:

Het zoeken naar het sociale netwerk VKontakte werkt als volgt: er zijn twee groepen met de namen 'Werk op internet' en 'Werk op internet zonder investeringen'. Wanneer een VKontakte-gebruiker de vraag 'werk op internet' invoert, zal de groep met de bijbehorende naam hoger zijn, zelfs als het aantal abonnees gelijk is of de tweede groep een klein voordeel heeft.

Laten we concluderen: de eigenaren van de beroemde online winkel Ali Express hoeven bij het maken van een groep ervoor het onderwerp niet in de naam aan te geven; Voor een minder populaire site, online winkel, forum is het bij het aanmaken van een groep beter om het onderwerp in de naam aan te geven, zoals we hierboven deden..

Hoe registreer ik een status voor een VKontakte-groep?

De status van een VKontakte-groep is minder belangrijk dan de naam, maar het is de moeite waard om op te letten. Laten we uitzoeken hoe we het goed kunnen doen maak een status voor een VKontakte-groep? Het belangrijkste is om het niet te veel te overbelasten; het mag alleen de belangrijkste informatie bevatten:

Als u op dit moment niet weet hoe u de status van een VKontakte-groep moet registreren, is het beter om deze uit te stellen. Je moet er niet zomaar iets in stoppen. Het ontbreken van een status zal het ontwerp van uw groep niet schaden, maar betekenisloze informatie daarin kan bezoekers in verwarring brengen. Trouwens, Voor openbare pagina's is status belangrijker, omdat het als beschrijving in het menu 'Interessante pagina's' verschijnt.

Hoe schrijf je een beschrijving van een VKontakte-groep?

Nu gaan we het uitzoeken hoe je een beschrijving van een VKontakte-groep schrijft, of beter gezegd de tekst die kan worden ingevoerd in de community-instellingen. Hiervoor zijn verschillende oplossingen:

Bovendien heeft VKontakte een limiet voor de tekstgrootte in de groepsbeschrijving die zonder samenvouwen wordt weergegeven: 600 tekens met spaties. Na overschrijding van deze limiet wordt de beschrijving geminimaliseerd, waardoor deze er lelijk uitziet. Je kunt deze situatie op de onderstaande afbeelding zien.


In dit opzicht raad ik aan vastgezette berichten in de koptekst te gebruiken bij het maken van een beschrijving van een VKontakte-groep, door er een afbeelding voor te maken met een beschrijving, emoticons, tekst en zelfs een menu. Dit alles zal kleur toevoegen aan uw gemeenschap.

Hoe maak je een avatar voor een VKontakte-groep?

Nu zullen we proberen een van de belangrijkste aspecten van het ontwerpen van een VKontakte-groep te achterhalen: hoe maak je een avatar? Voor degenen die over eigen geld beschikken, kunt u zich inschrijven op een freelance-uitwisseling en een avatar en andere elementen voor de groep (banner, menu, etc.) bestellen bij een ervaren webdesigner. Maar je kunt ook een andere kant op gaan, maak zelf een avatar voor de VKontakte-groep.

Allereerst moet je beslissen welke maat je nodig hebt om een ​​avatar voor de VKontakte-groep te maken. De maximale breedte van een groepsavatar is 200 pixels (hierna eenvoudigweg px) en de maximale hoogte is 500 px. Grotere avatars worden verkleind volgens de opgegeven verhoudingen. Avatars die kleiner zijn dan de opgegeven formaten worden daarentegen vergroot en vervormd weergegeven in de weergave. Maak daarom een ​​avatar voor de VKontakte-groep met een breedte van 200 px en een hoogte van 200 tot 500 px.


Wanneer u een avatar voor een VKontakte-groep maakt, moet u de miniatuur onthouden, die 200 px breed en hoog is. De belangrijkste informatie van de avatar (naam of beschrijving van de groep, motto, call-to-action, etc.) moet dus in één gebied worden geplaatst dat overeenkomt met de gegeven afmetingen.

De makkelijkste manier maak een avatar voor een VKontakte-groep in Photoshop. Bovendien is het niet nodig om het te kennen en alle functies te kunnen gebruiken. Het is voldoende om de basishulpmiddelen te leren gebruiken (elementen selecteren, met lagen werken, enz.). Hieronder zie je een voorbeeld van een avatar die ik heb gemaakt voor een VKontakte-groep.


Deze avatar bestaat uit twee gecombineerde afbeeldingen, een tekstelement en een achtergrond. Het kostte niet veel tijd of moeite om het te maken. Elke groepseigenaar kan, indien gewenst, een dergelijke taak aan.

En als u complexe en prachtige avatars voor VKontakte-groepen, teken elk detail helemaal opnieuw, leer vervolgens Photoshop en leer hoe u het professioneel kunt gebruiken. Dit kan op verschillende manieren:

  • Probeer alles zelf met vallen en opstaan.
  • Lees artikelen over dit programma en bekijk video's.
  • Lees een boek of bekijk een training.

De eerste optie is niet effectief, omdat maar weinig mensen het geduld hebben om op deze manier resultaten te bereiken. De tweede optie is mogelijk. Er zijn inmiddels veel websites en YouTube-kanalen op internet die gericht zijn op het aanleren van Photoshop.

Het zal echter lastig zijn om de ontvangen informatie op deze manier te structureren. Bovendien kost het voortdurend zoeken naar informatie veel tijd. Maar het is gratis, net als de eerste methode.

De eenvoudigste manier om Photoshop te leren is via een videocursus. Omdat daarin alle informatie wordt gepresenteerd van eenvoudig tot complex, wordt het in detail beschreven en leert u alle basisprincipes van het programma. En ik kan je een soortgelijke videocursus aanbevelen.

"" – trainingsvideocursus voor beginners. Hiermee kunt u op elk gewenst moment, thuis achter uw computer, beginnen met het leren van Photoshop.

In deze cursus leert u gedetailleerd alle functies van Photoshop gebruiken. Waarna je eenvoudig helemaal opnieuw avatars kunt maken en VKontakte-groepen prachtig kunt ontwerpen. Als je geïnteresseerd was in dit artikel, ontvang dan als eerste nieuwe informatie.

Wij hebben bedacht hoe je voor jouw groep een mooi menu kunt tekenen. En vandaag zullen we leren hoe we een menu rechtstreeks op een VKontakte-pagina kunnen plaatsen en er interne pagina's voor kunnen maken. Dus laten we gaan!

Stap 1. Upload menu-items naar vk.com

We gaan naar de groep en maken er een album in, waarin we de menu-items uploaden die we hebben verkregen bij het voltooien van de opdracht uit de vorige les. Om dit te doen, klikt u op Albums in het fotoblok op de hoofdpagina en in het geopende venster selecteert u Maak een album. Laten we hem bellen Album voor beheerder.

Opmerking: als je geen fotoblok op de hoofdpagina hebt, ga dan naar het item Gemeenschap beheer(dit deden we al in de eerste en tweede les) en daar tegenover het punt Foto's kiezen Open of Beperkt(we vertellen je meer over albums en hoe ze zijn in een van de volgende lessen).

Je ziet een nieuw gemaakt leeg album. Klik Voeg foto's toe aan album en laad de menuonderdelen die u hebt getekend.

Het enige dat overblijft is om uit deze onderdelen het groepsmenu samen te stellen.

Stap 2. Een menu samenstellen uit elementen

Ga naar de menubewerkingspagina (hoe u dit doet). Controleer of de bewerkingsmodus is ingeschakeld Wiki-opmaakmodus. Nu heb je hier (als je de taken van de tweede les hebt voltooid) je menu-items, tussen vierkante haken. We raken ze nog niet aan, maar schrijven hieronder:

uniek nummer - dit is het fotonummer dat eraan wordt toegewezen bij het uploaden naar de website vk.com. Om deze te bekijken, opent u de gedownloade foto door erop te klikken en in de adresbalk van de browser te kijken:

388px- dit is de breedte van uw menu

Geen grens- betekent dat uw menu-items geen zwarte omtrek krijgen

Geen vulling- betekent dat er geen afstand tussen de afbeeldingen zal zijn (wat we nodig hebben om het menu naadloos te laten zijn).

Er is een spatie aan het einde nodig, anders werkt niets.

Je zou uiteindelijk net zoveel regels moeten hebben als er items in je menu staan ​​(en, dienovereenkomstig, hoeveel afbeeldingen je hebt getekend):

Zorg ervoor dat u de volgorde van de afbeeldingen niet verwisselt.

We gaan naar de hoofdpagina van de groep, werken deze bij (klik op de knop Update in de browser of gewoon F5). Wij bewonderen het resultaat!

Stap 3. Voeg interne pagina's toe aan het menu

Toen we in de tweede les een menu maakten voor een groep in de materiaalbewerkingsmodus, schreven we de items tussen vierkante haken. Nu zie je ze boven je mooi vormgegeven menu in de vorm van links: in ons voorbeeld zijn dit links Hoe te bestellen, Hoe te betalen enz.

Klikken op de knop Vul met inhoud, bevinden we ons op de pagina voor het bewerken van materiaal dat ons al bekend is.

We controleren onmiddellijk welke toegang we tot de pagina hebben (onthoud dat toegang om de pagina te bekijken moet worden ingesteld - Alle gebruikers, en bewerkingsrechten zijn Alleen redacteuren en beheerders), en vul het met informatie.

Terwijl u de pagina met informatie vult, kunt u het tekstopmaakpaneel gebruiken om nadruk toe te voegen en de tekst vet of cursief te maken, uitlijning toe te voegen of een lijst weer te geven:

Tekst opmaken met dit paneel is niet moeilijker dan werken in Word: u selecteert eenvoudig de tekst met de muis en drukt op de knop die u nodig heeft.

Omdat je in de wiki-opmaakmodus bent, worden bepaalde tekens aan je tekst toegevoegd als je opmaakopdrachten toepast. Als u bijvoorbeeld de opdracht cursief selecteert, wordt het woord dat u cursief wilt maken, tussen aanhalingstekens geplaatst. Deze symbolen zijn de elementen van de wiki-opmaaktaal. Om te zien hoe de tekst er op de pagina uit komt te zien, klikt u op de knop Voorbeeld:

En dit is wat er gebeurt:

Opmerking: we raden aan om tekst te leren bewerken in de wiki-opmaakmodus, omdat het geeft voorspelbare resultaten, in tegenstelling tot de visuele bewerkingsmodus, die in verschillende browsers onstabiel is. Soms verbreekt zelfs een eenmalige overschakeling naar de visuele bewerkingsmodus het paginaontwerp.

Met behulp van de opgedane kennis leggen wij de nadruk op onze pagina en klik Sla pagina op. Dit is wat we hebben (onthoud, dit is slechts een voorbeeld):

We herhalen deze stap voor elk van onze pagina's (we hebben dit Hoe te bestellen, Hoe te betalen, Hoe u de juiste maat kiest En Hoe lang duurt de levering?) behalve de pagina

Ik denk dat iedereen die actief gebruik maakt van het sociale netwerk VKontakte al prachtig ontworpen groepen en openbare pagina's is tegengekomen. Velen van hen hebben, naast het menu, ook veel gestileerde subpagina's, catalogi, enz., waardoor in feite een kleine website binnen het sociale netwerk ontstaat.

Hier zijn een paar voorbeelden, zodat iedereen begrijpt waar we het over hebben.




Met dergelijke groepen kunt u zich onderscheiden van uw concurrenten en meer gebruikers aantrekken. Vooral als de inhoud ook interessant is :)
In dit artikel zullen we praten over hoe dit allemaal wordt gedaan. Laten we een specifiek voorbeeld nemen om alles in meer detail te analyseren en in alle subtiliteiten te duiken. Er zal een kleine masterclass plaatsvinden over groepsontwerp.

De allereerste fase van ons werk is het idee. We moeten begrijpen wat we willen vertellen en aan wie. Er zijn verschillende communityformaten in VKontakte, en u moet kiezen op basis van uw doelen. Hoewel de groep in de toekomst kan worden overgedragen naar een openbaar formaat en omgekeerd.

Ik leg het uit met mijn vingers. Openbaar- dit is zoiets als een blog. Nieuwsfeed. Met andere woorden, we vertellen onze abonnees over bepaalde dingen en zij zullen niet in staat zijn om op de muur van onze gemeenschap te schrijven. Het maximum is om commentaar te geven.

Groep Hiermee kunt u een community creëren die meer openstaat voor conversatie en discussie, waar mensen namens zichzelf berichten in de feed kunnen plaatsen. Je kunt er ook vrienden uit je lijst aan toevoegen. In het openbaar bestaat zo'n optie niet. Bovendien heeft de groep iets meer opties voor het integreren van wiki-markeringen (er is een sectie "Nieuws" waarin u een menu kunt integreren).

Wereldwijd kunnen we als volgt denken: als we een community voor een winkel moeten creëren, dan zou ik het ‘openbare’ formaat nemen. Als we het bijvoorbeeld over visliefhebbers hebben, is het beter om een ​​​​"groep" te nemen. Hoewel iedereen vrij is om te doen wat hij of zij wil. Het formaat kan immers op elk moment worden gewijzigd. Houd er echter rekening mee dat VKontakte een beperking introduceert voor het opnieuw wijzigen van het communityformaat en dat u na de eerste keer enkele dagen moet wachten totdat u alles indien nodig kunt terugsturen. Daarom is het beter om de functionaliteit te testen voordat de groep zich begint te vullen met inhoud.

Als onderdeel van deze masterclass neem ik als uitgangspunt het spel Mad Max, gebaseerd op de gelijknamige film, die pas een paar weken geleden is uitgebracht, en zal ik een community voor spelers creëren met verschillende materialen over dit spel . Het belangrijkste doel is om verkeer naar uw gamingsite af te leiden.

Het formaat zal 'Groep' zijn, omdat het noodzakelijk is om een ​​natuurlijke toestroom van publiek te creëren en de communicatie binnen de gemeenschap te maximaliseren. Laat ik meteen verduidelijken dat ik een universele techniek zal gebruiken die zowel in groepsverband als in het openbaar kan worden gebruikt. Dit werkt overal.

Er is veel inhoud, laten we het idee tot leven brengen!

Een groep maken

Om een ​​groep aan te maken, ga je naar “Mijn Groepen” in het rechtermenu van je VKontakte-account en klik je op de blauwe knop bovenaan “Een community aanmaken”.

Een venster als dit zou moeten verschijnen, waarin we de naam voor onze groep invoeren en het formaat selecteren.

Nadat we de nodige informatie hebben ingevoerd, wordt ons community-configuratiescherm voor ons geopend. In mijn geval ziet het er zo uit.

Zoals je kunt zien, heb ik een paar parameters toegevoegd: ik heb video-, audio-opnamen, discussies en een aantal andere functies toegevoegd die voor mij nuttig zullen zijn bij toekomstig werk bij het verzamelen van inhoud. Dit alles kan in de toekomst zonder enige beperking worden gewijzigd. Ik heb ook het adres van mijn website opgeschreven. Als u geen website heeft, of als het onderwerp niet overeenkomt met het format van de community (ze gaan over verschillende dingen en hebben op geen enkele manier verband met elkaar), dan kan deze regel leeg worden gelaten.

In dit geval heb ik de leeftijdsbeperkingen ingesteld vanaf 18 jaar, vergelijkbaar met de leeftijdsbeperkingen die de ontwikkelaars voor de game hebben ingesteld. Al twijfel ik er niet aan dat kinderen ook spelen.

Alle. De groep is aangemaakt!

Nu kunt u beginnen met het ontwerpen ervan.

Een VKontakte-groep formatteren

Deze fase kan worden onderverdeeld in 2 componenten: grafisch en technisch. Om te werken hebben we een sjabloon nodig voor het maken van een groepsavatar en -menu, evenals een beetje fantasie en basiskennis van Photoshop (ook wel Adobe Photoshop genoemd).

Opmaaksjabloon

Wat is een sjabloon en wat is het eigenlijk? Een sjabloon is een soort blanco. In dit geval hebben we in *.psd-formaat gebieden voor de afbeelding gemarkeerd onder het menu en de groepsavatar.

Zoals je kunt zien in het tweede voorbeeld aan het begin van dit artikel, kunnen we de avatar en de menuafbeelding in dezelfde stijl ontwerpen. Tegelijkertijd wordt het visueel in 2 delen gesneden. Met de sjabloon kunt u dus een afbeelding zo vormen dat de verplaatsing van afbeeldingen wordt geëlimineerd en de afbeeldingen zoveel mogelijk op hetzelfde niveau passen.

Om het duidelijker te maken, is hier een voorbeeld.

We zien dat er in beide delen van de foto een strook is met uitzicht op een woonwijk. Zonder een sjabloon te gebruiken is het bijna onmogelijk om het precies de eerste keer te doen. U moet de afbeeldingen aanpassen en afwijkingen tot 1px meten. Terwijl we bij het gebruik van een sjabloon er eenvoudig afbeeldingen aan toevoegen binnen de opmaak en onmiddellijk het gewenste resultaat krijgen.

Ik wil er rekening mee houden dat dit sjabloon is ontworpen voor 1 regel uitleg. In het voorbeeldscreenshot zijn er telefoons. Als er een tweede regel verschijnt, moet u een ander sjabloon gebruiken of het ontwerp handmatig corrigeren.

Intussen gaan we direct over tot de grafische vormgeving van onze nieuwe groep. Dit is waar ik de weg van de minste weerstand bewandel en naar Google Afbeeldingen ga om delen van het ontwerp te vinden. Je kunt ook Yandex gebruiken. Wie vindt wat nog leuker?

Ik heb geen ontwerpopleiding, dus we zullen niet in detail ingaan op de kwesties van het kiezen van lettertypen en andere details. Na een beetje magie in Photoshop te hebben gedaan, kreeg ik dit resultaat.

Op het linkerfragment (waar ‘Menu’ staat) kun je ook meerdere triggers toevoegen. In dit geval besloot ik het zonder hen te doen. Alle. Het avatarontwerp is klaar. Druk in Photoshop op de sneltoetscombinatie Shift+Ctrl+Alt+S en sla onze fragmenten op in een map op uw harde schijf.

De eerste fase van het werken met afbeeldingen is voltooid. Laten we weer contact opnemen.

Een avatar en menu instellen voor een groep

We klikken op de twee typen in plaats van de ava van onze groep en uploaden onze afbeelding daar. Deze jongens, onder hen staat ook 'Upload een foto'.

Voeg een afbeelding toe. Geef de velden op en selecteer een miniatuur. Alles is hier eenvoudig en er mogen geen problemen zijn.

Zoals we kunnen zien, moet je de community-ID weten. Het is heel gemakkelijk om hem te herkennen. Zoek het menu in jouw groep (direct onder de avatar) en open “Community Statistics”. In dit geval verschijnt er iets soortgelijks in de adresbalk van de browser (de cijfers zullen anders zijn).

Deze cijfers na “?gid=” zijn het gewenste groeps-ID. We plakken de resulterende waarde in het scriptformulier en schrijven de naam voor de pagina die we willen maken. In dit geval typ ik “Menu”.

Het is vermeldenswaard dat de pagina alleen wordt gemaakt als het venster met de groep geopend is op het aangrenzende tabblad. Simpel gezegd: u moet in dezelfde browser bij VK zijn ingelogd. Alleen de groepsbeheerder en de door hem aangewezen personen hebben immers toegang tot dergelijke manipulaties. Een willekeurige voorbijganger zal niet gemakkelijk de instellingen kunnen wijzigen van een groep waartoe hij geen toegang heeft tot het beheerderspaneel.

Als alles correct is gedaan, wordt een pagina als deze geopend.

Dit is hetzelfde venster waarin we later een wiki-opmaak zullen maken en een intern menu voor onze groep zullen creëren. Voorlopig hoeven we hier alleen maar iets te schrijven. Klik vervolgens op de blauwe knop ‘Pagina opslaan’ en klik bovenaan op de link Terug naar pagina.

Ik schreef "Menu" en mijn pagina begon er na het opslaan zo uit te zien.

Er is nog geen ontwerp, maar nu hebben we alleen een link naar deze pagina nodig. We selecteren het in de adresbalk van de browser en keren terug naar de hoofdpagina van onze groep. Naar het voer.

Hier maken we een bericht met de volgende inhoud: voeg een afbeelding in en een link naar de menupagina voor de groep.

Klik op verzenden. Klik vervolgens op het tijdstip waarop het bericht is verzonden en selecteer 'Pin' uit alle opties. We werken de pagina bij (F5-toets op het toetsenbord) en als alles correct is gedaan, krijgen we het eerste resultaat: de groep heeft een avatar gevonden en een link om naar het menugedeelte te gaan.

Wiki-opmaak voor VKontakte-groepsmenu

Laten we nu beginnen met het ontwerpen van het menu zelf. Laten we opnieuw naar Photoshop gaan en een ontwerp voor ons menu maken. Bij het ontwerpen van de interface moet u de mensen onthouden die via de applicatie vanaf mobiele telefoons toegang hebben tot VK. Met andere woorden: we mogen geen kleine elementen hebben en bovendien moeten we proberen alles zo duidelijk mogelijk te maken. Zodat we niet hoeven te raden hoe alles hier werkt en waar we moeten klikken... maar gewoon het juiste item aanwijzen en de informatie bestuderen die we zoeken.

Ik zal nu niet in detail treden over hoe ik het menu precies heb samengesteld. Dit is wat ik heb.

Minimale velden. Verticale indeling. Ideaal formaat voor een responsief menu. Dat wil zeggen dat niets op mobiele telefoons ergens naartoe gaat. Alles zal precies zijn zoals op de schermen van computers en tablets. Ik heb de breedte ingesteld op 500 px, zodat er later niets zal krimpen en ik de kwaliteit van de afbeelding niet twee keer zal verliezen. Hoogte is niet belangrijk.

We snijden de afbeelding in fragmenten en bewaren deze.

Alle. Het is tijd voor het slotakkoord: we verzamelen het menu in de groep zelf.

Om dit te doen, keren we terug naar de hoofdpagina van de groep (waar de feed staat en onze fotolink die naar het menu leidt). We klikken op de menuafbeelding en komen op dezelfde pagina die we eerder voor het menu hebben gemaakt.

Bent u beheerder of maker van een groep (in ons geval is dit het geval), dan vindt u bovenaan de pagina een link 'Bewerken'. Laten we erop klikken.

Vervolgens gaan we naar de wiki-opmaakmodus (onder de knop Sluiten in de rechterbovenhoek van de pagina staat zo'n frame met<>binnen). Wanneer de gewenste modus is geactiveerd, wordt deze knop grijs omlijnd.

Vervolgens klikken we op het camerapictogram en voegen alle fragmenten van ons menu in één keer toe. In de wikimodus zien we niet de afbeeldingen zelf, alleen de code van deze afbeeldingen met afmetingen en parameters.

Ik wil het menu in het midden plaatsen, zodat er geen gaten tussen de fragmenten zitten. Daarom verpakken we elk van de elementen in een tag

en aan de reeds geneste parameter “noborder” voeg ik de tweede parameter “nopadding” toe. De eerste schakelt de omtrek van fragmenten en randen van tabelcellen uit. De tweede verwijdert de marges van de rand.

De eerste en laatste menu-elementen mogen geen knoppen zijn - in mijn afbeelding zijn ze slechts een grafisch element zonder een link naar de interne pagina, dus voegen we er de parameter "nolink" aan toe. Hierdoor wordt de mogelijkheid verwijderd om op dit element te klikken om een ​​deel van de afbeelding in een apart venster te openen. Nu gebeurt er niets met een muisklik. Dit is de normale pagina-achtergrond. Inactief.

In mijn geval ziet de menucode er zo uit.

Afzonderlijk zou ik willen opmerken dat het ingebouwde systeem na het importeren van afbeeldingen in VK soms de afbeeldingsformaten verkeerd aangeeft. Daarom moeten we dit zorgvuldig in de gaten houden en precies degene weergeven die we in de ontwerpfase hadden gepland. Anders valt alles misschien uit elkaar en komt de puzzel uiteindelijk niet samen.

Wanneer we de code hebben geschreven en alle elementen hebben uitgelijnd, slaan we de pagina op en zien we hetzelfde als in Photoshop.

De laatste hand blijft nog: we moeten de pagina's maken waar ons menu mensen naartoe zal sturen. Laten we, om dit te doen, opnieuw kijken naar het script voor het genereren van wikipagina's en deze keer drie pagina's tegelijk bestellen. In dit geval moet u ook iets op elk ervan schrijven en vergeet niet om hun adressen ergens in de adresbalk van de browser op te slaan.

Vervolgens voegen we links naar nieuwe pagina's in de wikicode van het menu in de vorm page-102302049_51013384, waarbij het eerste nummer de groeps-ID is en het tweede het paginanummer. Hoewel dit over het algemeen niet belangrijk is. We hoeven tenslotte alleen maar dit URL-fragment te kopiëren en in de markup te plakken.

Als gevolg hiervan heeft de menucode de volgende vorm.

Uiterlijk is er niets veranderd. Maar als we op de menu-items klikken, kunnen we zien dat het nu werkt!

Wat betreft de markup zelf en de regels waarmee de code wordt geschreven, raad ik u aan de VKontakte-groep te lezen die specifiek aan deze kwestie is gewijd. De jongens hebben alle belangrijke punten beschreven en in hun catalogus kun je gemakkelijk het benodigde element vinden en uitzoeken hoe je het aan je wikipagina kunt toevoegen.