Dynamische banner VKontakte. Hoe u een effectieve reclamebanner voor VKontakte maakt

IN de laatste tijd specialisten in gesloten chats, newbie-targetologen, SMM-specialisten, maar ook ondernemers die het zelf proberen V promotionele berichten, stellen ze heel vaak de vraag “welke maat is nodig? voor een promotiepost?. Daarom besloot ik aan de hand van voorbeelden in detail te beschrijven welk formaat zou moeten zijn banner voor promotionele post, zodat deze mooi en zo volumineus mogelijk wordt weergegeven op pc's, mobiele telefoons en tablets. Nou, laten we gaan :)

Voor duidelijk voorbeeld Ik zal twee banners vergelijken met de maten 1280*720 en 800*525. Ja, trouwens, de grootte en kwaliteit van de banner kunnen verschillen - het belangrijkste hier zijn de verhoudingen. Zo ziet zo’n banner eruit in de nieuwsfeed op verschillende apparaten:

PC - OUD ONTWERP VKONTAKTE



Zoals u ziet heeft een banner met een formaat van 800*525 aan de rechterkant een veel grotere inspringing dan bij gebruik van een formaat van 1280*720. Hoewel het breder is en een groter gebied bestrijkt voor weergave via de nieuwsfeed. Laten we eens kijken hoe deze banners eruit zullen zien in het nieuwe VKontakte-ontwerp.

PC - NIEUW DESIGN VKONTAKTE


Welnu, in het nieuwe VKontakte-ontwerp verschillen beide maten alleen in hoogte, terwijl de breedte hetzelfde blijft. En in tegenstelling tot oude versie VK, we zien het niet aan de rechterkant grote inkeping. Maar de banner van 800*525 bestrijkt een veel groter zichtbaar gebied in de nieuwsfeed dan het formaat 1280*720 - de afbeelding is hoger en groter!

Laten we nu eens kijken hoe deze banners er uit zullen zien mobiele versie VKontakte-applicaties op iOS.

MOBIEL - NIEUWSFEED


Net als in het nieuwe VKontakte-ontwerp ziet een bannerformaat van 800*525 er veel groter (hoger) uit dan een banner met een formaat van 1280*720. En dit is een heel groot pluspunt voor de mobiele versie, omdat het nieuwsweergavegebied daar klein is en advertenties met dit bannerformaat het grootste deel ervan zullen overnemen!

Laten we nu eens kijken hoe een vierkante afbeelding eruit zal zien in de nieuwsfeed! Voor de duidelijkheid zal ik een tabel maken.

pc- oud ontwerp VKontaktepc- nieuw ontwerp VKontakteMobiel - VKontakte-applicatie







Nou, daar zijn we nu duidelijk van overtuigd groter overzicht ze krijgen foto's met een formaat van 800*525 en hoger, die een vierkante vorm benaderen. Maar! Vergeet niet dat promoposts ook tekst bevatten, dus als je het afbeeldingsformaat kiest, vergeet dat dan niet om de tekst te bekijken verschillende apparaten, mag de foto niet alle zichtbare ruimte in de nieuwsfeed in beslag nemen! Dit is belangrijk!

Sindsdien "zit" een deel van het publiek op VKontakte via het nieuwe ontwerp, en meest via de oude is het beter om maat 800*525 te gebruiken. Ja, we hebben geprobeerd en gesleuteld aan andere formaten, in een poging de inkeping vanaf de rechterrand te verkleinen, maar deze werd alleen maar groter en de kleinste inkeping (rekening houdend met grotere weergave via mobiel) bleek 800*525 te zijn.

Nou, dat is alles voor vandaag. Bedankt voor uw aandacht en kwaliteitspromoties! 😉

Bedankt voor uw aandacht!

Velen van ons gebruiken sociale netwerken omdat ze ons een beetje dichter bij familie, vrienden en kennissen brengen. Op deze platforms zijn er groepen en communities waarin we kunnen communiceren met mensen die op ons lijken, dus in dit artikel we zullen praten over hoe je een banner maakt in de VK-groep, waarom deze banner überhaupt nodig is en wanneer deze verscheen. Deze informatie zal degenen helpen die zichzelf willen realiseren in het creëren van gemeenschappen en groepen. Veel mensen letten het vaakst op de banner, omdat deze het gezicht van de pagina is.

Wat u moet weten om een ​​VK-banner te maken

Eerst moet je begrijpen wat groepen zijn: dit zijn speciale gemeenschappen waar mensen alleen lid van kunnen worden naar believen. Gemeenschappen zijn onderverdeeld in twee typen: gesloten en open. Het is duidelijk dat u alleen op uitnodiging of via een directe link met de gemeenschap toegang kunt krijgen tot gesloten projecten, waarna de projectadministratie uw lidmaatschapsaanvraag enige tijd in overweging zal nemen.

Voor de eerste keer grote spandoeken verscheen in groepen in 2016, daarna de volgende grote update"VK", maar gebruikers vonden het zelfs leuk, in tegenstelling tot de vorige die eraan verbonden waren volledige verandering sitekleuren, ontwerp en nog veel meer. Na de update begonnen er onmiddellijk berichten aan moderators over hoe te doen groot spandoek in de VK-groep. Dit verzoek velen waren geïnteresseerd, omdat een banner een extra plek voor reclame is, maar er was toen nog weinig informatie over hoe je er een kon maken.

Als u niet weet hoe u uw eigen afbeeldingen kunt maken met populaire apps voor bijvoorbeeld beeldverwerking Adobe Photoshop, dan raden we je aan de volgende paragraaf van het artikel te lezen, waar we je in detail vertellen hoe je een banner maakt. Als jij gevorderde gebruiker, dan is het de moeite waard om te zeggen dat de vereisten voor de afbeelding als volgt zijn: 1590 x 400 px, en het afbeeldingsformaat is JPG.

Hoe je een banner maakt in de VK-groep bovenaan

Eerst moet u een leeg canvas maken; het is raadzaam een ​​applicatie te gebruiken waar u min of meer vertrouwd mee bent, maar het is raadzaam om te leren hoe u Photoshop gebruikt. Het implementeert veel functies die een meesterwerk kunnen creëren, maar het is niet essentieel. Het belangrijkste is om het canvas strikt 1590 x 400 pixels te maken, dat wil zeggen 1590 breed en 400 hoog - deze verhoudingen zullen er op elke monitor goed uitzien. Als u niet weet hoe u dit moet doen, vindt u hieronder instructies.

Zo maak je een banner in de groep “VK” in Adobe Photoshop:

  1. Open de foto-editor en klik op de knop "Bestand" en vervolgens op "Maken".
  2. Voer in het veld "Breedte" de waarde 1590 in en in het veld "Hoogte" - 400, en klik vervolgens op OK.
  3. Nu kunt u elke afbeelding in dit canvas plaatsen en aanpassen met de Alt+T-toetsencombinatie.
  4. Zoek in het veld "Bestand" de knop "Opslaan als" en selecteer JPG als formaattype.

Op een vergelijkbare manier kun je in elke foto-editor een foto maken, behalve de locatie functieknoppen kan variëren. Nu moet je deze foto naar je groep uploaden.

Hoe maak je een banner in de VK-groep:

  1. Meld u aan bij uw groep. Onder de avatar staat het opschrift "Acties". Nadat u erop hebt geklikt, wordt een venster geopend waarin u “Beheer” moet selecteren.
  2. Onder alle mogelijke opties we moeten een “Community Cover” vinden - dit is wat we nodig hebben. Daar vindt u het veld "Download", waarin u onze kant-en-klare versie moet downloaden JPG-afbeelding.
  3. Klaar, nu wordt de banner op de hoofdpagina van de community geplaatst.

Tot slot

We hopen dat je begrijpt hoe je een banner maakt in de VK-groep, omdat deze kennis vereist is voor degenen die gaan maken eigen groep. Vergeet niet dat u een advertentie in een banner kunt plaatsen en daarvoor betaald kunt krijgen.

Avatar en banner voor de VK-groep.

Nu is het belangrijk geworden bij het maken van een groep sociaal netwerk Het is ook een goed idee om het mooi te ontwerpen, vooral als de groep is opgericht voor zaken, waarbij goederen of diensten worden verkocht. Het is heel belangrijk dat het ontwerp een lust voor het oog is en uw groep onderscheidt van de concurrentie. Mooi ontwerp verhoogt het percentage nieuwe leden en mogelijke potentiële klanten die zich bij uw groep aansluiten.

Heel vaak, bijna altijd, zorgen ze ervoor dat je via de banner bovenaan de pagina naar het menu kunt gaan. En ze vragen vaak dat de foto van de avatar in een banner verandert.

Dit is wat we nu gaan doen. Zodat alles mooi is en niet kromtrekt, bepalen we de maten. Deze afbeelding demonstreert ze perfect, rekening houdend met het feit dat we bovenaan een status hebben die niet langer dan één regel lang is, als er in sommige gevallen geen status is. browsers gaat schuine rand, zal de foto niet soepel verlopen.


Er zitten 10 pixels tussen de banner en de avatar. Als u meer informatie boven de banner wilt plaatsen, raad ik u aan de mySize-liniaal te gebruiken en alles uit te meten, zoiets als dit.

Hier is de afstand bijvoorbeeld niet 50 pixels zoals aangegeven in de vorige afbeelding, maar 206. Met dit alles houden we rekening bij het tekenen van richtlijnen in Photoshop.

Dus laten we aan de slag gaan: Open Photoshop -> Bestand -> Nieuw of Ctrl+N.
Er wordt een venster geopend, schrijf de naam en de maat, maar waarom heb ik in 2000 2420 genomen. Ik heb onze maten gewoon 4 keer vergroot, naar mijn mening ziet het er op deze manier beter uit in VK.

Nu tekenen we de hulplijnen. Als er geen linialen langs de randen staan, schakel deze dan in: Beeld -> Linialen of Ctrl+R. Hulplijnen kunnen eruit worden getrokken, rekening houdend met het feit dat ze pixels weergeven. Klik hiervoor op de liniaal klik met de rechtermuisknop muis en selecteer pixels als er iets anders is geselecteerd.

Er is een andere manier om hulplijnen toe te voegen: Beeld -> Nieuwe gids. Er wordt een venster geopend, u kiest eerst welke geleider u nodig heeft, horizontaal of verticaal, en vervolgens waar u deze wilt plaatsen.

Stel de volgende horizontale hulplijnen in: 0, 2000 (buitenste), 200, 1360 pixels; verticaal: 0, 2420 (buitenste), 1580, 1620 pixels. En we hebben een sjabloon voor onze avatar en banner.

Vanaf rechts bovenste hoek Ik heb de afronding ingesteld op 30 pixels, je kunt instellen wat je wilt. Laten we een andere kleur dan wit kiezen, ik heb blauw, en onze avatar en banner langs de hulplijnen tekenen.

Laten we nu een foto selecteren. Ik heb een groep over design, laat de foto er zo uitzien.

Laten we het naar ons document slepen.

Nu kopiëren en verplaatsen we één laag naar de laag boven de ava.

Neem het rechthoekgereedschap en teken twee rechthoeken aan de boven- en onderkant van de afbeelding. We plaatsen de naam van de groep bovenaan en een call-to-action onderaan.

Laten we hetzelfde doen met de rechthoeken en ze vervolgens op de afbeelding met de afbeeldingen plakken. En we schilderen het opnieuw in de kleur die we mooi vinden. Ik heb blauw.

De call-to-action mist een knop en pijlen. En voor de titel zullen we een onderstreping maken.

We tekenen de pijlen met witte lijnen, of downloaden ze van internet en plakken ze erin. Neem voor de knop opnieuw een rechthoek met afgeronde hoeken. We doen alles op de laag onder onze inscriptie! Verlaag de vulling naar 0.

Open de laagstijl en ga naar de streek, maak deze ongeveer 4 pixels wit. Nogmaals, het is naar eigen goeddunken.

Onder de naam tekenen we twee rechte lijnen. We schilderen ze in kleuren: één - een beetje donkerder dan de hoofdkleur, de tweede - een beetje lichter.

Ik ben van plan om wat inscripties op de foto te hebben, dus ik moet ervoor zorgen dat deze niet zo opvalt. Laten we een homogeen toepassen doorschijnende achtergrond. Ik heb lang gespeeld met kleuren en applicatiemethodes en kwam tot het volgende resultaat. Beige achtergrond - dekking 80%, overvloeimodus - vermenigvuldigen.

Nu lijkt het mij dat er niet genoeg kader rond de randen is, ik maak een kopie van de afbeelding, maak deze kleiner en voer dezelfde acties uit als voor de knop, verwijder de vulling en maak een streek. Hetzelfde doe ik met het spandoek.

Nu kunt u het in een groep installeren. Om te downloaden klikt u gewoon op downloaden nieuwe foto en downloaden. Voor het spandoek. We plaatsen een link naar het menu. We verwijderen deze wanneer de link hieronder verschijnt, zoals in de schermafbeelding, en klikken op de foto uploaden. Klik op verzenden en zorg ervoor dat het namens de groep is. Klik vervolgens op het tijdstip van verzenden en er verschijnen knoppen onder het bericht: bewerken, verwijderen, vastzetten. Klik - vastzetten.

En hier is ons voltooide ontwerp.

Ik hoop dat ik het min of meer duidelijk heb uitgelegd. Als je vragen hebt, beantwoord ik ze graag en probeer ik je te helpen erachter te komen. Ik zal gerechtvaardigde kritiek dankbaar aanvaarden, aangezien ik dit allemaal nog maar net aan het leren ben en niet zoveel ervaring heb als ik zou willen.

P.S. Bonus - avatar en banner + lettertype, die we in het artikel hebben gemaakt. We veranderen de tekst, kleuren en afbeelding en krijgen een cool afgewerkt ontwerp.

In de zomer van 2016 verrasten de ontwikkelaars van het sociale netwerk VKontakte hun gebruikers eindelijk volledig bijgewerkt ontwerp. In werkelijkheid reageerden de vaste klanten van deze site zeer gemengd op het nieuwe ontwerp; dit gold meer voor de eigenaren van communities met een gelekte afbeelding als ontwerp (avatar + banner). De afstand tussen het vastgezette nieuws en de avatar is letterlijk verdubbeld, de banner is merkbaar groter en verlaagd geworden en de thumbnail van de community is nu geen vierkant, maar een rond gebied - al deze ongemakkelijke momenten veroorzaakten veel problemen voor mensen die bestelden en installeerden eerder het ontwerp voor hun groepen. De enige uitweg in deze situatie was om het oude ontwerp te herwerken om aan de nieuwe eisen te voldoen, terwijl het concept behouden bleef.

Hoewel het ontwerpen van VKontakte-gemeenschappen behoorlijk lastig lijkt (vooral in vergelijking met andere sociale netwerken, waar een rechthoekige omslag en een vierkante avatar over het algemeen voldoende zijn), is dit eigenlijk niet helemaal waar. Hieronder worden de vereisten beschreven voor grafische afbeeldingen en in het algemeen manieren om de groep als zodanig te formaliseren.

De eerste manier om uw community verkopend en aantrekkelijk te maken is: standaard schema“avatar+banner+menu”.

Avatar

De avatar bleef 200 bij 500 pixels groot (maar nog steeds beter dan 400 bij 1000 met een kwaliteitsmarge), hoewel aanvankelijk tijdens de bètatests van het nieuwe ontwerp een formaatoptie van 200 bij 300 werd overwogen is nu rond, maar als deze cirkel in een vierkant is ingeschreven, zijn de afmetingen 200 bij 200 pixels, zoals voorheen.

Banner (vastgezette post)

Optimale maat banner is 1024 bij 680 pixels (met een kwaliteitsmarge). Ik heb op internet veel varianten gezien. perfecte maat banner, maar toch worden delen van de banner met 1024 bij 680 niet afgesneden wanneer deze wordt bekeken vanaf een computer, vanuit de gewone mobiele versie of vanuit een applicatie op Android. Het is ook vermeldenswaard dat de banner nu lager is vanwege de duplicatie van de gemeenschapsnaam in het gebied boven de afbeelding en de overdracht van de postdatum van het gebied onder de afbeelding naar de plaats onder de dubbele naam. Een andere belangrijk punt- dit is het gebrek aan klikbaarheid op een banner vanaf een mobiel apparaat. Die. Vanaf een telefoon moeten mensen op de link onder de foto klikken, in plaats van op de foto zelf.

Menu

Wat betreft menuontwerp en wiki-opmaak is er in het algemeen niets veranderd. Net als voorheen gebruik ik een menubreedte van 606 pixels en elke lengtewaarde. Voor aanpassingsvermogen aan mobiele apparaten Het is beter om de navigatie in de tabel te plaatsen. Op deze manier wordt deze, wanneer deze op een telefoon wordt bekeken, eenvoudigweg proportioneel gecomprimeerd zodat deze op het scherm past. Maar als u een navigatie hebt gemaakt waarbij de items eenvoudigweg onder elkaar zijn geplaatst, hoeft u dit niet te doen - de tabelmethode is alleen nodig voor dat soort menu's waar het aantal knoppen op een rij meer dan één is . Over het algemeen is het voor het gemak van gebruikers beter om geen menu's alleen te maken in de vorm van links naar materialen, maar om wikipagina's te maken met een complexe structuur.

Als je één afbeelding nodig hebt voor ontwerp, upload dan eerst een avatar en een banner in de vorm van vastgezet nieuws naar een groep voor experimenten. Kopieer alle gegevens uit de voorbeeldcommunity naar uw groep: status, naam (dit is belangrijk, omdat deze gegevens dubbel voorkomen in het nieuws) en vraag de klant om een ​​tekst die boven de banner komt te staan.
Hierna kunt u een voorbeeld nemen aan de hand van een screenshot, die in Photoshop moet worden geplaatst.

Er is ook zo'n ontwerpmethode als "omslag + banner + menu". Over het algemeen kunt u alleen de hoes achterlaten en deze het beste aantrekken belangrijke informatie. Maar in ieder geval moet de avatar worden ingesteld: deze zal niet zichtbaar zijn in de groep zelf, maar de gemeenschapsminiatuur zal eruit worden gehaald. De optimale omslaggrootte is 1590 bij 400 pixels en u kunt de afbeelding uploaden met de opdracht “Communitybeheer” - “Communityomslag: Uploaden”.

Afbeeldingsformaten voor VKontakte-ontwerp

  • Avatar: 200 bij 500 pixels (kwaliteit 400 bij 1000 pixels);
  • Avatarminiatuur 200 bij 200px
  • Banner of grootte van een vastgezet bericht in een groep: 1024 bij 680 pixels, maar niet minder dan 510px breed;
  • Menu: breedte 606px;
  • Bedek 1590 bij 400 pixels.

Het onderwerp van dit artikel is het nieuwe ontwerp van VKontakte. Opnieuw gewijzigd, nu kunt u een horizontale dekking in een groep plaatsen. Het is veel interessanter om je VK-community met zo'n header te ontwerpen. Eerlijk gezegd is hier geen Photoshop-kennis vereist. Kun je het zonder speciale vaardigheden? prachtig beeld zelfs in PowerPoint, Fotor, Canva, Pixlr Editor.

Als je naar de groep gaat, zul je merken dat in die groepen de knoppen “ Vastgezet bericht", "Informatie" en "Druk op menu". En voordat ze verborgen waren. Uiteraard begon alle registratie van de groepen onmiddellijk.

Een nieuwe omslag uploaden

Laten we nu eens kijken hoe we de mogelijkheid kunnen inschakelen om een ​​horizontale header te installeren. Laten we op de knop "Beheren" klikken.

Klik vervolgens op de laatste en download nieuwe dekking VKontakte-groepen. Hier kunt u begrijpen dat het downloadbestand elke grootte kan hebben! Maar niet minder dan het formaat 1590x400 px. We maken een omslagprototype in elke editor. Vervolgens kunnen we het gebied selecteren en opslaan dat aan de VK-vereisten voldoet. Hier volgt een tip over waar u een omslagafbeelding kunt vinden en welke editor u moet gebruiken

Wat is er interessant aan het nieuwe ontwerp van VKontakte?

Het belangrijkste: er is meer ruimte voor informatie. Nu kunt u hier de naam van de groep schrijven, het doel van de oprichting ervan, een oproep tot actie, enzovoort. Een dergelijk ontwerp zal logisch compleet en functioneler zijn. Maar je kunt het oude ontwerp laten staan, het is een kwestie van ieders smaak.

Wanneer je een horizontale hoes ontwerpt, merk je dat interne menukaart valt nu op de een of andere manier buiten de algemene context. Ik denk dat het beter zou zijn om de afbeelding vast te pinnen om naar het menu te gaan. En gebruik het om wikipagina's in de groep te hosten.

Tegelijkertijd zou ik graag willen dat de ontwikkelaars een andere optie toevoegen voor het opzetten van een mooie overgang naar Wiki-pagina's.

Ik zou willen opmerken dat de ontwikkelaars van het sociale netwerk VKontakte sinds 2016 actief proberen dit netwerk op te zetten om zaken te promoten. Maak het handiger voor zaken of zoiets. Vanuit mijn oogpunt is dit erg goed en er is veel vraag naar bij veel internetondernemers.

Maar het allerbelangrijkste is dat ze naar mijn mening het "Bans" -systeem zorgvuldig moeten overwegen, zodat ondernemers rustig kunnen werken zonder de gebruikers te hinderen die plezier kwamen maken op het sociale netwerk.

Hoe u online een VKontakte-groepscover kunt maken

Gebruik je creativiteit en kies wat je het leukst vindt horizontale dekking of het al bekende VKontakte-ontwerp. Het online aanmaken en installeren van een nieuwe hoes wordt stap voor stap duidelijk uitgelegd in de video onder het artikel.

P.S. Ik hoop dat deze informatie nuttig voor u is.

P.S.S. Gebruik je creativiteit en veel succes bij al je inspanningen!