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

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:

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.

? Om du har ett väldigt brett tema på din blogg så blir det ännu viktigare att ha mycket bredd i bilden.

? 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:

? 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.

Bilden nedan är den vi ska använda i exemplet – den är fotad med kort skärpedjup och mot en vit vägg.

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”.

Välj nu beskärningsverktyget.

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:

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.

Jag väljer även Färger > Nyans/Mättnad och drar upp reglagen för mättnad och ljussstyrka något.

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.

Välj Flyttningsverktyget och dra texten ungefärligt dit där du vill ha den.

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.

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.


Välj 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.

I Arrangera-dialogen välj ”Relativ till: markering” och välj ”Arrangera mot centrum av målet” (mittenknappen i översta raden).

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.

Nu är det klart! ?✨

#23