er zijn drie soorten headers die ik meestal zie gebruikt op de ol’ interwebs — navigatie headers, volledige foto headers en welkom mat headers. Als je geïnteresseerd bent in hoe je een blog header te maken, moet je de voors en tegens voor elk type weten voordat we naar beneden naar de nitty gritty van de schepping.

Navigatiekoppen

Navigatiekoppen zijn niet gebaseerd op foto ‘ s. Bijvoorbeeld, aan de bovenkant van mijn website, Ik heb mijn logo, plus links naar belangrijke pagina ‘ s of inschrijfformulieren. Kijk maar.

navigatie headers zoals deze zijn ideaal als je een fan bent van minimalisme en mensen echt wilt laten focussen op je schrijven zonder afgeleid te worden door afbeeldingen.

het is ook een geweldige route om te gaan als je nieuw bent, je branding nog niet hebt bedacht, of gewoon online wilt beginnen.

de lay-out is niet ingesteld in steen-navigatie headers kunnen op allerlei manieren worden aangelegd. Je hebt waarschijnlijk gezien waar het logo is in het midden boven tekstlinks, of het kan gewoon het logo zonder links (of vice versa).

deze header leeft vaak in harmonie met extra blog headers (mijn site heeft eigenlijk ook een andere header eronder), zoals full photo headers, en welcome mats.

Fotoheaders

de stijl van de fotoheader is zeer opvallend en trekt je echt aan. Als u wilt dat een foto header op uw blog, na te denken over wat het onderwerp zal zijn. Zal het een foto van een persoon zijn? Zoals u, of u en uw familie, of een vertegenwoordiging van uw ideale klant? Of zal het een foto met een soort van landschap, patroon, cartoon/pictogrammen of zelfs een video?

Bekijk dit voorbeeld van AlexTooby.com. Alex maakt gebruik van een foto van zichzelf plus een beetje van de welkomstmat idee met een sterke call-to-action aan te melden voor haar cursus.

de foto werkt, zowel voor nieuwkomers als terugkerende bezoekers. Waarom? Omdat ze gebruik maakt van een paar subtiele visuele elementen (meer hierover later) die dienen om de kracht van deze header te versterken. Ze houdt haar telefoon buiten, met de Instagram-interface bespot erop, en ze kijkt naar de tekst die ze wil dat je leest. Je oog wordt natuurlijk naar haar gezicht getrokken, dan naar de woorden, dan naar beneden naar de felroze knop om te klikken. Dit zou minder effectief zijn als ze naar de linkerkant van het scherm keek.

Pro-Tip: Het hebben van iemand geconfronteerd ” in ” in de richting van de kopie of knop is een ninja ontwerp truc die u kunt gebruiken, ook.

Photo headers kunnen een stemming instellen en uw lezers helpen actie te ondernemen. Aangezien photo headers zijn groot, ze blokkeren andere afleidingen op de pagina en helpen focus lezers op precies wat je wilt dat ze doen (zoals Alex ‘ S “Start gratis cursus” knop).

Welcome mat headers

de typische “welcome mat” die u op het internet ziet, is een overname op Volledig scherm, en er zijn hulpmiddelen die u hierbij helpen.

of, als u niet uw hele pagina wilt overnemen, kunt u ook een gedeelte instellen dat fungeert als een welkomstmat of een inschrijfformulier voor een speciale freebie die u aanbiedt. Weet je niet zeker hoe dat eruit zou zien? Bekijk de onderstaande afbeelding van mijn website. Ik ben het aanbieden van een gratis e-course die Ik wil dat alle bezoekers eerst te zien, zodat ik mijn e-maillijst met de juiste doelgroep voor toekomstige e-mails en promoties kan bouwen. Mijn blogberichten verschijnen hieronder, zodat bezoekers gewoon naar beneden kunnen scrollen om mijn laatste berichten te zien.

Nu u de drie verschillende stijlen hebt gezien, is het tijd om te praten over het maken van een blog header voor uw website.

Hoe maak je een blog header die ziet er branded

ik weet dat de term “branded” klinkt officieel en intimiderend, maar wees niet bang! Het is eigenlijk best makkelijk als je je concentreert op een paar belangrijke dingen. Namelijk kleuren (vaak te vinden in uw logo) en lettertypen.

Pro tip: Stel een brand guide voor jezelf samen in een map, zodat u deze informatie (samen met uw logo) kunt bijhouden voor gemakkelijke toegang op elk gewenst moment.

zelfs als u geen mooie gedrukte gids maakt, kunt u deze informatie noteren op een sticky note en deze op uw monitor bewaren. Het bespaart u veel tijd op de lange termijn! Laten we nu wat ontwerpelementen opsplitsen.

Kies uw kleuren

u hebt misschien een paar kleuren gekozen om te gebruiken voor uw merk, maar een goede plek om te beginnen is met uw logo. Uw logo kleur (s) zijn een geweldig te gebruiken op uw website, branding en blog header. Consistentie is de sleutel – als u een hot pink, dan misschien uw foto ‘ s hebben een element van roze om hen of een algemene roze cast, of misschien gebruik je Zwart en wit en trek in kleur op andere manieren.

Aby van YouBabyMeMummy.com doet dit prachtig door het invoegen van een prachtige, full-color versie over haar logo als een overlay op een zwart-wit foto van zichzelf met haar dochter. Deze foto header trekt je echt in haar verhaal op een gedurfde en boeiende manier. Klik rond haar site als u meer voorbeelden van prachtige zien, full-screen beelden.

en als je nog steeds probeert uit te vinden welke kleuren je in je merk moet gebruiken, is dit artikel over kleurpsychologie zeer onthullend!

selecteer een lettertype

een stijlvol of branded lettertype direct in uw header kan een echt relevante en snelle manier zijn om uw bericht over te brengen. Zoals in dit zeer unieke en opvallende beeld van Luci over op ByLucinda.co.uk.

dit zeegezicht past precies bij haar merk, dat veel natuurlijke elementen bevat en haar elegante, maar toch sassy vibe laat zien. Geen Times New Roman voor deze dame! Ze heeft ook een slimme manier om haar social media links aan de rechterkant te tonen in een lichtgroene rechthoekige strip. Het verbindt de bovenste navigatie met de grote vet foto en helpt om je oog naar beneden te trekken van de pagina op een opzettelijke manier.

je kunt een aantal echt leuke, gratis lettertypen online vinden van plaatsen als Font Squirrel en Dafont. Veel van deze gratis lettertypen zijn ingebouwd in programma ‘ s zoals Canva en PicMonkey. Echter, omdat ze gratis zijn, is er een grotere kans dat iemand anders (een concurrent zelfs) zou kunnen worden met behulp van degene die u wilt.

als u meer liefhebbende lettertypen wilt gebruiken in de hoofdtekst van uw website (dus niet in een afbeelding), dan moet u de tijd nemen om meer te weten te komen over Google Fonts. En voor begeleiding over welke lettertypen te gebruiken voor web design, check out deze drie geboden.

Incorporeer visuele elementen

terwijl u uw branded blog header samenstelt, moet u nadenken over welke visuele elementen u wilt opnemen. We hebben voorbeelden bekeken met behulp van een logo, een foto en een grote duidelijke knop.

Jen vanaf ToastMeetsJam.com dat doet hij wel. Ze heeft niet alleen vallen in een tabel zoals je zou hebben in een saaie spreadsheet-ze gebruikt artistieke grenzen en grote lettertypen samen met haar vormvelden en een cirkelvormige “GO” knop.

zie hoe ze naadloos haar e-mail aanmelden integreert in het ontwerp? Niet alleen is ze je te betrekken met de foto van zichzelf op zoek geanimeerd en vriendelijk, maar ze is ook gebruik te maken van een schone, grijze achtergrond om u gefocust op de tekst en de vorm te houden. Geen afleidende patronen of beelden om u weg te lokken van de belangrijkste taak van het invullen van dat formulier en vooruit te gaan. Het kan niet duidelijker zijn wat je moet doen om haar een gratis vijfdaagse cursus te geven.

maak je klaar om

te ontwerpen je hebt enkele voorbeelden gezien van geweldige blogheaders, maar wat doe je nu? Om aan de slag te gaan op uw eigen blog header, je nodig hebt om een aantal ontwerp tools en beeldformaat informatie te verzamelen.

ontwerpgereedschappen

de essentiële ontwerpgereedschappen voor het maken van uw eigen aangepaste blogheader hoeven niet moeilijk of duur te zijn. Probeer een paar uit en zie wat je comfortabel met bent, ga er dan voor! Maak je geen zorgen als ze zich ongemakkelijk voelen in het begin — je zult beter worden hoe meer je ze gebruikt. Hier zijn een paar U kunt beginnen met het verkennen, in volgorde van makkelijkste tot moeilijkste.

Canva. Dit is waarschijnlijk de makkelijkste op de markt, en het is gratis! Er is een betaalde versie genaamd Canva for Work als je dieper wilt duiken, maar de gratis versie is echt leuk en makkelijk te leren. Het is een web-based design tool, dus je gewoon inloggen op de website en gebruik het recht in uw browser.

PicMonkey. Als je echt in het bewerken van foto ‘ s en het spelen met filters, dan PicMonkey is het proberen waard. Er zijn veel leuke effecten ingebouwd. Net als Canva, PicMonkey is web-based en heeft een gratis versie plus een betaalde met extra functionaliteit.

Photoshop. U kunt niet vermelden ontwerpsoftware en niet brengen Photoshop! Het is een krachtpatser van een programma en kan veel meer doen dan alleen een blog header, maar het is zeker geweldig voor dat. Het is een applicatie die u downloadt en u betaalt per maandelijks abonnement (een gratis proefperiode is ook beschikbaar).

als professioneel ontwerper gebruik ik Photoshop al mijn hele carrière en ik vind het geweldig. De meeste van mijn lezers denken dat Photoshop is intimiderend op het eerste, maar het is volledig te doen als je eenmaal een paar basics leren. Ik moet echter zeggen, sinds het ontdekken van Canva, gebruik ik vaak een combinatie van Photoshop en Canva om mijn graphics te maken. Canva is gewoon zo leuk!Tip voor experts :als u het fotografieplan van Adobe ophaalt, kunt u Photoshop + Lightroom krijgen voor een vrij lage maandelijkse kosten. Niet slecht.

Woordswag. Als je graag afbeeldingen op je telefoon maakt, is dit iets voor jou. Deze mobiele applicatie is niet gratis, maar is slechts een paar dollar en heeft een iOS-en Android-versie. Plus, het is aangesloten op een gratis creative commons stock Foto site, dus je bent nooit op een verlies voor beeld keuzes in uw blog header. Het heeft allerlei kleuren, texturen en lettertypen om uit te kiezen. Het enige wat u hoeft te doen is uw definitieve afbeelding opslaan in “de cloud” of het aansluiten op uw computer, zodat u het kunt uploaden naar uw site.

afbeeldingsgroottes

wanneer u uw blogheader aanmaakt, moet u rekening houden met de afbeeldingsgrootte in relatie tot uw siteplatform. De grootte voor uw WordPress thema zou kunnen verschillen van de volgende persoon Squarespace pagina of GoDaddy GoCentral Website Builder. Hier zijn enkele dingen om in gedachten te houden:

Pixeldimensies. Maten worden meestal vermeld als een aantal breed door een aantal hoog en in pixel afmetingen. Bijvoorbeeld: 1000×400 (of 1000px x 400px) betekent dat uw afbeelding 1000 pixels breed bij 400 pixels hoog is.

resolutie. Voor het internet is uw resolutie eenvoudig-het is altijd 72! Hogere resoluties zoals 300, 600 of meer, zijn voor het afdrukken. Schermresoluties voor monitors zijn altijd slechts 72. Dus met behulp van onze voorbeeld afmetingen van bovenaf, uw uiteindelijke beeld zou 1000px breed door 400px hoog, 72 dpi (of ppi).

bestandstype. PNG-bestanden verliezen nooit kwaliteit, ongeacht hoe vaak je ze opslaat, maar zijn groter in MB (megabyte) grootte. JPG (jpeg) – bestanden kunnen worden opgeslagen op verschillende niveaus van kwaliteit, zodat u de bestandsgrootte (MB) klein kunt houden, maar elke keer dat u ze opslaat, verliezen ze een beetje kwaliteit. A.jpg-bestand dat twee keer is opgeslagen ziet er goed uit, maar nadat u het vijf of 10 keer opslaat, zal het beginnen te kijken pixelated en korrelig.

optimaliseren betekent ze opslaan om compacter te zijn bij een kleinere bestandsgrootte, maar voorzichtig zodat u de kwaliteit niet verliest. U kunt dit eenvoudig doen door gebruik te maken van een gratis website genaamd TinyPNG. Bekijk de schattige panda comprimeren uw beelden op een manier die houdt ze op zoek fantastisch, maar bespaart u megabytes!

een blogheader maken in Canva

1. meld je aan voor een account.

2. Gebruik aangepaste afmetingen.

3. selecteer een gratis foto.

4. aangepaste tekst toevoegen.

5. Personaliseer uw ontwerp.

6. voeg een logo toe.

7. Download je blog header.

nu het leuke gedeelte! Laten we graven in het maken van een aangepaste blog header vanaf nul met behulp van Canva. Ik gebruik middelen die gratis beschikbaar zijn, dus je kunt dit helemaal zelf doen, samen met mij. Meld je aan voor een GRATIS account en je bent klaar om te gaan.

hier is de blog header die we gaan maken:

1. Meld je aan voor een account.

zodra u zich aanmeldt voor een account bij Canva, komt u bij een pagina Maak een ontwerp waar u wilt klikken op aangepaste afmetingen gebruiken in de rechterbovenhoek.

Gebruik aangepaste afmetingen.

vul de gewenste breedte en hoogte in in de velden die verschijnen en selecteer “px” voor pixels. Daarna, klik op het ontwerp! knop.

een nieuw project verschijnt met een leeg scherm en het tabblad Lay-outs geselecteerd aan de linkerkant. Merk op dat de projectnaam niet is opgegeven, dus het noemt zichzelf “1000px x 400px — Untitled Design” in de bovenkant naast de Share knop.

selecteer een vrije foto.

klik op elementen en kies een vrije foto uit de meegeleverde. Alle vrije mensen zeggen “vrij” in de onderste hoek. U kunt ook uw eigen foto uploaden, maar voor onze tutorial werken we met een van deze gratis foto ‘ s.

zodra u op de foto klikt, verschijnt deze direct in het ontwerpgedeelte van uw project. Laten we dit project een andere naam geven. Klik op de tijdelijke naam naast de knop Delen en typ een nieuwe. Ik noem dit” reisdagboeken ” voor mijn nep reisblog.

nadat uw afbeelding zich in het ontwerpgebied bevindt, kunt u deze groter maken door de cirkels in de hoeken te slepen. Ga je gang en formaat van deze afbeelding aanpassen aan het document.

aangepaste tekst toevoegen.

geweldig! Nu hebben we een sms nodig. Klik op het tabblad Tekst in de linkerkolom en u ziet een aantal opties om uit te kiezen. U kunt klikken op vooraf ontworpen tekstarrangementen in het onderste gedeelte van dat venster of op afzonderlijke regels tekst bovenaan. Ga je gang en klik op kop toevoegen. Deze tekst verschijnt in de afbeelding, standaard op zwart.

nu voor wat plezier! Laten we een ander lettertype kiezen. Blader door het lettertype keuzes en kies iets dat uw fantasie slaat. Ik koos een borstelvormige. Het is moeilijk te zien in zwart op de top van dat beeld, dus laten we het veranderen in Wit. Klik op het kleurrijke vak aan de bovenkant om kleurkeuzes te brengen en kies het witte vierkant. Ik heb ook de grootte aangepast naar 104.

ga je gang en sleep die kop op zijn plaats op de afbeelding zodat het meer gecentreerd is.

Personaliseer je ontwerp.

het is een beetje moeilijk om te lezen en te focussen op de tekst op deze drukke achtergrond, dus laten we een vervagend effect toevoegen. Klik gewoon op de achtergrond foto om het te selecteren, kies dan Filter, en klik op Geavanceerde opties.

het filtervenster breidt uit om u enkele andere dingen te laten zien die u kunt doen. U kunt spelen met verzadiging, kleurtinten, voeg een vignet, en meer.

klik op de zwarte stip in het gedeelte vervagen en sleep het naar rechts. Ik koos voor +22 op de vervagende schaal.

een logo toevoegen.

klik nu uit dat venster om uw ontwerp te zien. Ziet er goed uit! Laten we het nu brandmerken door een logo toe te voegen. U kunt uw logo uploaden door te klikken op het tabblad Uploads aan de linkerkant en vervolgens op de knop big green Upload uw eigen afbeeldingen.

kies een transparante kleur .png-versie van uw logo, zodat het niet wordt afgevlakt op een effen kleur (tenzij uw logo stijl is in een witte rechthoek of iets dergelijks).

als het geladen is, zie je het in het gebied onder de groene knop. Het blijft er voor u om te gebruiken op toekomstige projecten. Handy! Ik had mijn nep-logo al geüpload, dus ik scrollde naar beneden om het te vinden.

klik op het logo en dan verschijnt het in uw ontwerp.

nu kunt u het formaat wijzigen, verplaatsen, en zelfs fancy en spelen met de transparantie als je wilt.

Download uw blogheader.

Yay! Nu is je ontwerp klaar, dus alles wat overblijft is om het te downloaden. Klik op de Download knop aan de bovenkant van het scherm en kies uw bestandstype. Ik ga meestal met het aanbevolen PNG type.

zodra uw ontwerp is gedownload naar uw computer, kunt u het openen en bewonderen en vervolgens laden op uw blog.

en dat is alles wat er is! Hopelijk heb je een goede grip op hoe je een blog header en het belang van een stellaire afbeelding te maken. Nu, u kunt gaan over het toevoegen van een aan uw blog. Fijne branding!