Tutorial: Gör en bloggheader – del 2 av 2

bloggheader 2 blogg
Om du inte redan kollat in del 1 i den här serien så föreslår jag att du går dit först för lite inledande info om vad en bloggheader är, hur du kan tänka när du planerar hur den ska se ut, hur du tar reda på rätt storlek för din blogg och andra bra grejor.
I den här andra delen ska vi kolla på hur du använder en bild i din header. Alla bilder passar nämligen inte lika bra för att använda till en header och det är viktigt att tänka efter redan vid fotograferingen för att få till ett bra resultat.

I dag ska vi lära oss att göra en bloggheader som ser ut såhär:

bloggheader exempel teknifik tutorial
Det är vår fiktiva kompis Elisabeth Pettersson-Karlsson som precis startat en blogg för att skriva om sitt stora intresse: blomsterarrangemang, odling och trädgård. Hon har nu bett om vår hjälp att designa en snygg header.
Elisabeth har inget företag och ingen grafisk profil så vi väljer själva ut två typsnitt, men vi har gått till Google Fonts för att se till att välja typsnitt som finns tillgängliga där så samma typsnitt kan användas på bloggen om Elisabeth vill. Än så länge har Elisabeth en gratis-blogg på en större bloggplattform och kan inte ändra speciellt mycket i designen själv förutom själva headern.

Att tänka på gällande fotografering och val av bild

? Tänk på formatet redan när du fotograferar, en header bör helst vara avlång och inte så hög för att inte ta upp för mycket av skärmen, tycker jag. Eftersom du har cirka en halv sekund på dig att fånga intresset hos någon som klickat sig in på din blogg så vill du såklart att denne snabbt ska se dina lockade rubriker och ditt snygga innehåll, så de förhoppningsvis börjar läsa direkt och fastnar.

bloggheader foto exempel
Bilden visar hur lite av originalbilden som ryms i själva headern.

? Om du har ett väldigt brett tema på din blogg så blir det ännu viktigare att ha mycket bredd i bilden.
bloggheader atilio exempel
Sandra Hjort som gör bloggen Atilio har en väldigt fin headerbild som funkar väldigt fint i det breda formatet!

? Har du en lite smalare design på din blogg kan du också ha en lite högre headerbild, som t.ex. Miriam Parkman har här:
bloggheader miriam parkman exempel
Bloggen ”Miriams Kafferep”.

? Tänk på att om du vill ha text på din header, vilket vi ska ha i det här exemplet, så behövs det finnas en bra yta för detta. T.ex. en tom vägg eller ett område som är väldigt oskarpt.
bloggheader Nevnarien exempel
Nevnarien har fotat mot en vit bakgrund som tack vare skärpedjupet i bilden blir lite suddig vilket gör det enkelt att läsa texten ovanpå.

Bilden nedan är den vi ska använda i exemplet – den är fotad med kort skärpedjup och mot en vit vägg.
bloggheader tutorial exempelbild
Spara ned bilden om du vill använda den för att följa mina steg genom att högerklicka och välj ”Spara bild som…”

Förberedelser

  1. Ladda ned gratisprogrammet GIMP om du inte redan gjort det när du gick igenom del 1.
  2. Ladda ned typsnitten Lato och Lora (låter som ett barnprogram! ?) och installera dem.
  3. Ladda ned bilden ovan på tulpanerna om du vill följa mitt exempel!

Så här gör du:

Beskär bilden

Öppna bilden i GIMP med Arkiv > Öppna…
Vi börjar med att skala bilden till rätt bredd. Vi utgår från samma storlek som i del 1:
2400 x 600 px.
Välj Bild > Skala bild…
Se till att höjd och bredd är hoplänkade med kedjan och skriv sedan in 2400 för bredd, då bör höjden anpassas automatiskt. Tryck: ”Skala”.
bloggheader bild 1
Välj nu beskärningsverktyget.
bloggheader bild 7bloggheader bild 2
Klicka i ”Fast: Aspektförhållande” > Skriv 2400:600 i rutan.
Klicka och dra i bilden så beskärningsrutan är lika bred som bilden. Håll in och flytta rutan så att du får med den delen av bilden som du vill ha till din header. Klicka en gång i rutan för att beskära.
Nu har vi kommit så här långt:
bloggheader så här långt

Justera bilden (valfritt)

Jag vill att min bild ska vara lite mer färgstark så jag väljer Färger > Ljusstyrka/Kontrast och drar upp reglagen lite.
bloggheader bild 4
Jag väljer även Färger > Nyans/Mättnad och drar upp reglagen för mättnad och ljussstyrka något.
bloggheader bild 6

Lägg till bloggrubrik och underrubrik

Välj textverktyget > Skriv in Lato i typsnittsrutan och välj ”Thin” eller ”Light” (beroende på vad du har för alternativ på typvikt). Sätt storleken till 120 px. Skriv bloggtiteln: ”BLOMMOR OCH BLAD” om du vill följa mitt exempel.
bloggheader bild 9
Välj Flyttningsverktyget och dra texten ungefärligt dit där du vill ha den.
flyttningsverktyget
Välj textverktyget igen > Skriv in Lora i typsnittsrutan och välj Lora Italic, storlek 58 px > Skriv ”Elisabeth Pettersson-Karlsson” om du vill följa mitt exempel.
bloggheader bild 8
Välj Flyttningsverktyget igen och dra texten till ett lagom avstånd under huvudrubriken.

Justera texten

Nu ska vi justera texten så att rubriken och underrubriken är exakta i förhållande till varandra.
Välj rektangulär markering och dra en triangel som ramar in den vita delen av headern.
bloggheader bild 12
bloggheader bild 5
Välj Arrangeringsverktyget.
arrangeringsverktyget
Klicka på bloggrubriken i bilden så den får vita rutor i hörnen och shift-klicka på underrubriken så båda text-rutorna är valda med vita rutor i hörnen.
bloggheader bild 11
I Arrangera-dialogen välj ”Relativ till: markering” och välj ”Arrangera mot centrum av målet” (mittenknappen i översta raden).
bloggheader bild 3
Om det behövs använd Flyttningsverktyget och klicka på underrubriken och använd nedåt-pilen på tangentbordet för att justera avståndet mellan över och underrubrik.
För att ta bort markeringen och se resultatet välj ”Markera” i Arkiv-menyn och ”Inget” (shift+cmd+A) – välj bakgrundsbilden i lagermenyn och något annat verktyg, t.ex. flyttningsverktyget, och se om du är nöjd med resultatet.

Exportera din färdiga bloggheader

I Arkiv-menyn välj: Arkiv > Exportera som… > Ta fram filtyps-menyn genom att klicka på den lilla pilen och välj ”JPEG”.
Välj kvalitet 100 i dialogrutan som poppar upp och klicka på exportera.
filtyp jpegkvalitet 100

Nu är det klart! ?✨

#23

Prenumerera på Teknifik

Teknifik är nyhetsbrevet och bloggen för dig som vill inspireras till en smartare och enklare digital vardag. Som prenumerant får du nya inlägg som det här direkt till din inkorg cirka en gång i veckan. Tips, guider och fördjupande insikter om teknik, internet och sociala medier.

Denna prenumeration är gratis och du kan avsluta när du vill.

5 reaktioner på ”Tutorial: Gör en bloggheader – del 2 av 2”

  1. Pingback: Medlemspepp - om samarbeten, SEO och design - betterbloggers.se

Lämna en kommentar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

SÖK

Guider, tips och fördjupande insikter om teknik, internet och sociala medier.

Som prenumerant får du nya inlägg direkt till din inkorg cirka en gång i veckan. Gratis och avsluta när du vill. 

ELIN HÄGGBERG

Hej och välkommen till Teknifik!

Jag heter Elin Häggberg och är kommunikatör, teknikjournalist och föreläsare.

Teknifik är för dig som är kreativ, engagerad och nyfiken…

… och trött på att känna att tekniken i ditt liv känns tråkig, krånglig och svår. 

Börja prenumerera

Teknifik är ett nyhetsbrev och en blogg. Som prenumerant får du ett nytt inlägg till din inkorg cirka en gång i veckan. Hela arkivet hittar du här på Teknifik.se.

Tre populära inlägg just nu

Klicka vidare för lästips!
En guide till det nya sociala mediet som alla pratar om! Är det värt att gå med?
Här är steg-för-steg vad du ska göra och hur du undviker att det händer (igen)!
Bli fri från skräp och en överfull inkorg!