det finns tre typer av rubriker jag brukar se används på ol’ interwebs — navigation headers, full photo headers och welcome mat headers. Om du är intresserad av hur man gör en blogghuvud måste du veta för-och nackdelar för varje typ innan vi kommer ner till skapelsens nitty gritty.

navigeringshuvuden

Navigeringshuvuden är icke-fotobaserade. Till exempel högst upp på min webbplats har jag min logotyp, plus länkar till viktiga sidor eller registreringsformulär. Kika.

Navigationsrubriker som dessa är perfekta om du är ett fan av minimalism och vill få människor att verkligen fokusera på ditt skrivande utan att bli distraherade av bilder.

det är också en bra väg att gå om du är ny, inte har räknat ut ditt varumärke eller bara behöver komma igång online.

layouten är inte inställd i sten-navigeringshuvuden kan läggas ut på alla möjliga sätt. Du har förmodligen sett några där logotypen är i mitten ovanför textlänkar, eller det kan bara ha logotypen utan länkar (eller vice versa).

den här rubriken lever ofta i harmoni med ytterligare bloggrubriker (min webbplats har faktiskt en annan rubrik under den också), som fulla fotohuvuden och välkomstmattor.

Photo headers

photo header-stilen är väldigt iögonfallande och drar dig verkligen in. Om du vill ha en bildrubrik på din blogg, tänk på vad ämnet kommer att bli. Kommer det att vara ett foto av en person? Som du, eller du och din familj, eller någon representation av din ideala kund? Eller kommer det att vara ett foto med någon form av landskap, mönster, tecknad/ikoner eller till och med en video?

kolla in det här exemplet från AlexTooby.com. Alex använder ett foto av sig själv plus lite av välkomstmattan med en stark uppmaning att anmäla sig till sin kurs.

bilden fungerar, både för nykomlingar och återkommande besökare. Varför? Eftersom hon använder ett par subtila visuella element (mer om dessa senare) som tjänar till att förstärka styrkan i denna rubrik. Hon håller sin telefon ut, med Instagram-gränssnittet hånat på det, och hon tittar mot texten som hon vill att du ska läsa. Ditt öga dras naturligt till hennes ansikte, sedan över till orden, sedan ner till den ljusrosa knappen för att klicka. Detta skulle vara mindre effektivt om hon tittade på vänster sida av skärmen.

Pro-Tip: Att ha någon som står inför ” in ” mot kopian eller knappen är ett ninja-designtrick du kan använda också.

Photo headers kan ställa in en stämning och hjälpa till att driva dina läsare att vidta åtgärder. Eftersom fotohuvuden är stora blockerar de andra distraktioner på sidan och hjälper till att fokusera läsarna på exakt vad du vill att de ska göra (som Alexs ”Start Free Course” – knapp).

Welcome mat headers

den typiska ”welcome mat” som du kan se på internet är en helskärmsövertagande, och det finns verktyg som hjälper dig att göra detta.

eller, om du inte vill ta över hela sidan, kan du också ställa in en del för att fungera som en välkomstmatta eller ett registreringsformulär för någon speciell freebie du erbjuder. Inte säker på hur det skulle se ut? Kolla in bilden nedan från min hemsida. Jag erbjuder en gratis e-kurs som jag vill att alla besökare ska se först så att jag kan bygga min e-postlista med rätt publik för framtida e-postmeddelanden och kampanjer. Mina blogginlägg visas under detta så besökare kan bara bläddra ner för att se mina senaste inlägg.

nu när du har sett de tre olika stilar, är det dags att tala om att skapa en blogg header för din webbplats.

hur man gör en blogghuvud som ser märkt ut

jag vet att termen” märkt ” låter officiellt och skrämmande, men aldrig rädd! Det är faktiskt ganska enkelt om du bara fokuserar på ett par viktiga saker. Namnlösa: färger (finns ofta i din logotyp) och teckensnitt.

Pro Tips: Sätt ihop en varumärkesguide för dig själv i en mapp så att du kan hålla reda på denna information (tillsammans med din logotyp) för enkel åtkomst när som helst.

även om du inte gör någon snygg tryckt guide kan du skriva ner den här informationen på en klisterlapp och hålla den på din bildskärm. Det kommer att spara massor av tid på lång sikt! Låt oss nu bryta ner några designelement.

Välj dina färger

du kanske har några färger du har valt att använda för ditt varumärke, men ett bra ställe att börja är med din logotyp. Din logotyp färg (s) är en stor att använda över din webbplats, branding och blogg header. Konsistens är nyckeln-om du har en hetrosa, kanske dina foton har ett element av rosa till dem eller en övergripande rosa gjutning, eller kanske du använder svartvitt och drar i färg på andra sätt.

Aby av YouBabyMeMummy.com gör detta vackert genom att infoga en vacker, fullfärgsversion över hennes logotyp som ett överlägg på ett svartvitt foto av sig själv med sin dotter. Denna bildhuvud drar dig verkligen in i hennes berättelse på ett djärvt och engagerande sätt. Klicka runt på hennes webbplats om du vill se fler exempel på fantastiska helskärmsbilder.

och om du fortfarande försöker ta reda på vilka färger du ska använda i ditt varumärke är den här artikeln om färgpsykologi mycket avslöjande!

Välj ett teckensnitt

införliva en snygg eller märkesvaror teckensnitt direkt i din header kan vara en riktigt relevant och snabbt sätt att få ditt budskap. Som i denna mycket unika och iögonfallande bild från Luci over on ByLucinda.co.uk.

denna marinmålning passar rätt in i hennes varumärke, som innehåller massor av naturliga element, och visar upp sin eleganta, men ändå sassy vibe. Inga Times New Roman för den här damen! Hon har också ett smart sätt att visa sina sociala medier länkar på höger sida i en ljusgrön rektangulär remsa. Den ansluter toppnavigeringen med det stora djärva fotot och hjälper till att dra ögat ner på sidan på ett avsiktligt sätt.

du kan hitta några riktigt roliga, gratis teckensnitt online från platser som Font Squirrel och Dafont. Många av dessa gratis teckensnitt är inbyggda direkt i program som Canva och PicMonkey. Men eftersom de är gratis finns det en större chans att någon annan (en konkurrent till och med) kan använda den du vill ha.

om du vill använda snyggare teckensnitt i kroppen eller rubriker på din webbplats (dvs inte i en bild), bör du ta lite tid att lära sig om Google Fonts. Och för vägledning om vilka teckensnitt som ska användas för webbdesign, kolla in dessa tre bud.

inkorporera visuella element

när du komponerar din märkesblogghuvud bör du tänka på vilka visuella element du vill inkludera. Vi har granskat exempel med en logotyp, ett foto och en stor klar knapp.

Jen från ToastMeetsJam.com gör just det. Hon släppte inte bara i ett bord som du skulle ha i ett tråkigt kalkylblad — hon använde konstnärliga gränser och bra teckensnitt tillsammans med sina formulärfält och en cirkulär ”GO” – knapp.

se hur hon sömlöst integrerar sin e-postregistrering i designen? Inte bara engagerar hon dig med fotot av sig själv och ser animerat och vänligt ut, men hon utnyttjar också en ren, grå bakgrund för att hålla dig fokuserad på texten och formuläret. Inga distraherande mönster eller bilder för att locka dig bort från den viktigaste uppgiften att fylla i formuläret och gå vidare. Det kunde inte vara tydligare vad du behöver göra för att få henne fri, fem dagars kurs.

gör dig redo att designa

du har sett några exempel på bra blogghuvud, men vad gör du nästa? För att komma igång med din egen blogghuvud måste du samla in några designverktyg och bildstorleksinformation.

designverktyg

de väsentliga designverktygen för att skapa din egen anpassade blogghuvud behöver inte vara svåra att använda eller dyra. Prova några ut och se vad du är bekväm med, sedan gå för det! Oroa dig inte om de känner sig besvärliga först — du blir bättre ju mer du använder dem. Här är några du kan börja utforska, i ordning från enklaste till svåraste.

Canva. Detta är förmodligen den enklaste på marknaden, och det är gratis! Det finns en betald version som heter Canva för arbete om du vill dyka djupare, men gratisversionen är riktigt rolig och lätt att lära sig. Det är ett webbaserat designverktyg, så du loggar bara in på webbplatsen och använder den direkt i din webbläsare.

PicMonkey. Om du verkligen redigerar foton och spelar med filter är PicMonkey värt att försöka. Det finns många roliga effekter inbyggda. Liksom Canva är PicMonkey webbaserad och har en gratis version plus en betald med ytterligare funktionalitet.

Photoshop. Du kan inte nämna designprogramvara och inte ta upp Photoshop! Det är ett kraftverk i ett program och kan göra mycket mer än bara göra en blogghuvud, men det är definitivt bra för det. Det är ett program du laddar ner, och du betalar med månadsabonnemang (en GRATIS Provperiod finns också).

som professionell designer har jag använt Photoshop under hela min karriär och jag älskar det. De flesta av mina läsare tycker att Photoshop är skrämmande först, men det är helt genomförbart när du lär dig några grunder. Jag måste dock säga, sedan jag upptäckte Canva, använder jag ofta en kombination av Photoshop och Canva för att göra min grafik. Canva är bara så kul!

Pro tips: om du hämtar fotograferingsplanen från Adobe kan du få Photoshop + Lightroom till en ganska låg månadskostnad. Inte för illa.

WordSwag. Om du gillar att göra grafik på din telefon är det här för dig. Denna mobilapplikation är inte gratis, men är bara några dollar och har en iOS-och Android-version. Dessutom är den ansluten till en gratis creative commons stock photo-webbplats, så du är aldrig förlorad för bildval i din blogghuvud. Den har alla möjliga färger, texturer och teckensnitt att välja mellan. Allt du behöver göra är att spara din slutliga grafik till ”molnet” eller ansluta den till din dator så att du kan ladda upp den till din webbplats.

bildstorlekar

när du skapar din blogghuvud måste du överväga bildstorleken i förhållande till din webbplatsplattform. Storleken på ditt WordPress-tema kan skilja sig från nästa persons Squarespace-sida eller GoDaddy GoCentral webbplatsbyggare. Här är några saker att tänka på:

pixeldimensioner. Storlekar listas vanligtvis som ett antal breda med ett antal höga och i pixeldimensioner. Till exempel: 1000 400 (eller 1000px x 400px) betyder att din bild är 1000 pixlar bred och 400 pixlar hög.

upplösning. För internet är din upplösning lätt-det är alltid 72! Högre upplösningar som 300, 600 eller mer är för utskrift. Skärmupplösningar för bildskärmar är alltid bara 72. Så med hjälp av våra exempeldimensioner ovanifrån skulle din slutliga bild vara 1000px bred och 400px lång, 72 dpi (eller ppi).

filtyp. PNG-filer förlorar aldrig kvalitet oavsett hur många gånger du sparar dem, men är större i MB (megabyte) storlek. JPG-filer (jpeg) kan sparas på olika kvalitetsnivåer så att du kan hålla filstorleken (MB) liten, men varje gång du sparar dem förlorar de lite kvalitet. A.jpg-fil som sparas två gånger ser bra ut, men när du har sparat den fem eller 10 gånger börjar den se pixelerad och kornig ut.

optimering innebär att spara dem för att vara mer kompakta med en mindre filstorlek, men försiktigt så att du inte tappar kvalitet. Du kan göra detta enkelt genom att använda en gratis webbplats som heter TinyPNG. Titta på den söta panda komprimera dina bilder på ett sätt som håller dem ser fantastiska men sparar megabyte!

hur man gör en blogghuvud i Canva

1. registrera dig för ett konto.

2. Använd anpassade dimensioner.

3. Välj ett gratis foto.

4. Lägg till anpassad text.

5. anpassa din design.

6. Lägg till en logotyp.

7. ladda ner din blogg header.

nu för den roliga delen! Låt oss gräva i att göra en anpassad blogghuvud från början med Canva. Jag använder resurser som är tillgängliga gratis, så du kan helt göra detta på egen hand tillsammans med mig. Registrera dig bara för ett gratis konto så är du redo att gå.

här är blogghuvudet vi kommer att göra:

1. Registrera dig för ett konto.

när du registrerar dig för ett konto på Canva, får du en skapa en designsida där du kommer att vilja klicka på Använd anpassade dimensioner i det övre högra hörnet.

Använd anpassade dimensioner.

fyll i önskad bredd och höjd i fälten som visas och välj ”px” för pixlar. Klicka sedan på designen! knapp.

ett nytt projekt visas med en tom skärm och fliken layouter vald till vänster. Observera att projektnamnet inte angavs, så det heter själv” 1000px x 400px — Untitled Design ” i toppen bredvid Dela-knappen.

Välj ett gratis foto.

klicka på element och välj ett gratis foto från de som tillhandahålls. Alla de fria säger ”gratis” i nedre hörnet. Du kan också ladda upp ditt eget foto, men för vår handledning kommer vi att arbeta med en av dessa gratis foton.

när du klickar på fotot visas det direkt i designområdet för ditt projekt. Låt oss gå vidare och byta namn på det här projektet medan vi håller på med det. Klicka på det tillfälliga namnet upp bredvid knappen Dela och skriv in ett nytt. Jag kallar detta ”resedagböcker” för min Låtsas reseblogg.

när din bild sitter i designområdet kan du göra den större genom att dra cirklarna i hörnen. Gå vidare och ändra storlek på den här bilden så att den passar dokumentet.

Lägg till anpassad text.

bra! Nu behöver vi lite text. Klicka på fliken Text i den vänstra kolumnen så ser du några alternativ att välja mellan. Du kan klicka på fördefinierade textarrangemang i det nedre avsnittet i det fönstret eller på enskilda textrader högst upp. Gå vidare och klicka på Lägg till rubrik. Den här texten visas i bilden, som standard till svart.

nu för lite kul! Låt oss välja ett annat teckensnitt. Bläddra igenom teckensnitt val och plocka något som slår din fantasi. Jag valde en borstformad. Det är svårt att se i svart ovanpå den bilden, så låt oss ändra den till vit. Klicka på den färgglada rutan högst upp för att få fram färgval och välj den vita rutan. Jag justerade också storleken till 104.

nästa, gå vidare och dra den rubriken på plats på bilden så att den är mer centrerad.

anpassa din design.

det är lite svårt att läsa och fokusera på texten på den här upptagna bakgrunden, så låt oss lägga till en suddighetseffekt. Klicka bara på bakgrundsfotoet för att välja det, välj sedan Filter och klicka på Avancerade alternativ.

filterfönstret expanderar för att visa dig några andra saker du kan göra. Du kan spela med mättnad, färgtoning, lägga till en vignett och mer.

klicka på den svarta pricken i avsnittet oskärpa och dra den till höger. Jag valde +22 på suddighetsskalan.

Lägg till en logotyp.

Klicka nu ut ur det fönstret för att se din design. Ser bra ut! Låt oss nu märka det genom att lägga till en logotyp. Du kan ladda upp din logotyp genom att klicka på fliken uppladdningar till vänster och sedan på den stora gröna knappen Ladda upp dina egna bilder.

välj en transparent .PNG-version av din logotyp så att den inte plattas ut på en solid färg (såvida inte din Logotypstil är inuti en vit rektangel eller något liknande).

när den är laddad ser du den i området under den gröna knappen. Det stannar där för dig att använda på framtida projekt. Praktiskt! Jag hade redan min falska logotyp uppladdad, så jag rullade bara ner för att hitta den.

klicka på logotypen och sedan visas den i din design.

nu kan du ändra storlek på den, flytta den runt och till och med bli snygg och spela med transparensen om du vill.

ladda ner din blogg header.

Yay! Nu är din design klar, så allt som finns kvar är att ladda ner det. Klicka på knappen Hämta högst upp på skärmen och välj din filtyp. Jag brukar gå med den rekommenderade PNG-typen.

när din design har laddats ner till din dator kan du öppna den och beundra den och sedan ladda den till din blogg.

och det är allt som finns till det! Förhoppningsvis har du ett bra grepp om hur man gör en blogghuvud och vikten av en stjärnbild. Nu kan du lägga till en till din blogg. Glad branding!