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

I några inlägg framöver tänkte jag fokusera lite på det här med bloggdesign. Jag har fått ett önskemål på att göra ett inlägg om att göra en bloggheader så det tänkte jag såklart göra. Denna guide kan ju givetvis användas även för hemsidor för ett företag, förening eller liknande.

Vad är en header?

En header är själva sidhuvudet på en webbsida eller blogg. Den är viktig för designen då det är det första som en besökare ser när den kommer till en sida. Bloggheadern brukar också vara en av de enklaste sakerna att lägga till och byta själv i en bloggdesign vilket gör det till ett enkelt sätt att sätta sin egen prägel på ett i övrigt fördefinierat tema.

Viktigt att tänka på:

✏️ Headern är det första en besökare på din blogg/hemsida ser – så tänk på vad du vill kommunicera! Det är viktigt med första intryck.
✏️ Om du inte redan har en grafisk profil att utgå från så rekommenderar jag att du börjar fundera på den först. Här är ett inlägg om hur du kan gå till väga och vad en grafisk profil bör innehålla.

Idag ska vi lära oss att göra en header som ser ut såhär:

Vår påhittade blogg är ”Bakeriet”, ett café som bestämt sig för att starta en blogg med baktips och recept för att öka sin digitala närvaro. De har en väldigt enkel grafisk profil som ser ut typ såhär:

Förberedelser

Innan vi sätter igång behöver vi ladda ned programmet vi ska använda och två typsnitt.

1. Först ska vi ladda ned gratisprogrammet GIMP som är ett gratis program liknande Photoshop men mycket enklare. Ladda ned programmet här och installera det. Om du använder Mac och datorn säger att du inte få öppna programmet pga nedladdat från internet behöver du gå till: Systeminställningar > Säkerhet och integritet > Klicka på låset för att ändra inställningar > Välj: Tillåt program från ”var som helst”!
2. Gå till Font Squirrel och ladda ned typsnitten Alex Brush och Aleo, om du vill testa med samma typsnitt som i exemplet. Eller ladda ned de typsnitten du vill använda. Installera typsnitten (packa upp .zip-filen och dubbelklicka på filerna som heter .otf eller .ttf)

Sedan behöver vi ta reda på hur stor din bloggheader behöver vara. På WordPress kan du hitta detta genom att gå till Anpassa > Bild för sidhuvud.
Här kan vi se att den rekommenderade storleken för en bloggheader på min blogg är 1200 x 300 pixlar.

Du kan även, om du använder webbläsaren chrome, högerklicka på din nuvarande bloggheader och välja ”Inspektera” (eller ”Granska”). Kolla sedan i koden som dyker upp efter header och img-taggen så kan du se vilken storlek den har.

Som ni kan se så är den faktiska storleken på min bloggheader dubbelt så stor som den behöver vara. Detta är för att den ska bli högupplöst på Retina-skärmar (som den jag har på min Macbook).

Så här gör du:

Öppna Gimp och välj Arkiv > Ny
Eftersom vi vill att headern ska bli högupplöst så gör vi dokumentet dubbelt så stort som vi behövde – det vill säga 2400×600 pixlar. Upplösningen (bildpunkter/in) har ingen betydelse för bilder som visas på webben.

Välja bakgrundsfärg

Dubbelklicka på färgrutan för förgrundsfärg och välj den färg du vill ha som bakgrund på din bloggheader. I det här fallet väljer jag den ljusrosa färgen från Bakeriets grafiska profil, den har hex-koden #FDF7F4. Om du vill spara färgrutan du väljer trycker du på den lilla knappen med en liten pil ▶️ bredvid färgrutorna.
Dubbelklicka på den svarta rutan för att få fram ”Ändra förgrundsfärg”:
 
Med färgen vald som förgrundsfärg gå till verktygsfältet till höger och välj ”Nytt lager” och Fyll med förgrundsfärg.

Nu har vi kommit så här långt:

Skriva bloggtiteln

Textmenyn i GIMP är inte superbra så det underlättar att ta fram teckensnitts-panelen. Den hittar du under Fönster > Dockningsbara dialoger > Typsnitt
Välj Textverktyget i den vänstra menyn.

Tryck mitt på bilden och skriv in blogg-titeln. Välj svart textfärg och storlek, i det här fallet väljer jag storlek 280px. Skriv in typsnittet du vill ha eller markera texten och scrolla fram typsnittet i typsnittsmenyn. Jag väljer typsnittet Alex Brush.
När texten är klar ska vi centrera texten i mitten av headern, då använder vi ”Arrangeringsverktyget”

Tryck på texten så den får små vita rutor i hörnen på markerings-rutan. Välj sedan att arrangera mot ”bild” och tryck på centrera horisontellt-knappen.

För att flytta runt texten fritt använder du flyttningsverktyget:

Dra ett streck

Gör ett nytt lager och fyll med transparens.
För att dra ett horisontellt streck väljer vi pennverktyget och gör storleken till 1,00 och Pensel: hardness 100.

Tryck på stället i bilden där du vill att strecket börjar. Håll sedan in shift+cmd (på Mac, kanske ctrl+shift på PC?) för att dra ett horisontellt streck. Släpp där du vill att strecket ska sluta. Om det blir fel är det bara att ångra med cmd+z (ctrl+z på pc) och prova igen.
När du är färdig – klicka och dra det nya lagret med strecket så det hamnar under lagret som innehåller bloggtitel-texten. Nu har vi kommit så här långt:

Lägg till underrubriken

Välj textverktyget igen och klicka på bilden under strecket. Skriv den text du vill ha som underrubrik, välj storlek (i mitt fall blev det 80px), markera texten och leta fram typsnittet i typsnitts-menyn, jag använde Aleo Light. Välj textfärg – jag valde den ljuslila färgen från den grafiska profilen som hade hex-koden #BCBAC6.
Flytta texten med ”Flyttningsverktyget” så det är på ett lagom avstånd under linjen. Välj sedan arrangeringsverktyget, klicka på texten så de små vita fyrkanterna dyker upp:

Centrera texten så det ser symmetriskt ut. Symmetri = viktigt ?

Exportera din färdiga header

Välj Arkiv > Exportera som…
Skriv in ett namn på filen och fäll sedan ut ”Välj filtyp (via ändelse)” och scrolla fram jpeg. Välj Exportera. I dialogen som sedan kommer fram drar du upp reglaget till 100.

Nu är det klart! ?

I nästa del får du lära dig att göra en header av en bild – det inlägget hittar du här. Om du har några frågor eller idéer lämna dem i kommentarerna.
#12