Tutorial: Gör en bloggheader – del 1 av 2 En guide för hur du gör en enkel bloggheader med enbart text i gratisprogrammet Gimp.

bloggheader

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.

header exempel la linda
Ett exempel från eminenta Linda Hörnfeldts blogg lalinda.se (fotad av Emily Dahl).

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:

header exempel

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:

header exempel grafisk profil

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.

header storlek bild

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.

header storlek inspektera

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.

header gimp storlek dokument

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

förgrundsfärg  välj färg header

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.

nytt lagerförgrundsfärg nytt lager

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

rosa bakgrund

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.

textverktyget

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”

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.

arrangera installning

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

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.

pennan

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:

header exempel streck

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:

flytta underrubrik

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.

filtyp jpegkvalitet 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

Psst... join the club!

Vill du ha mer? Få steg-för-steg-guider, gratis resurser, tech-tips, förhandsvisningar, tutorials, bakom kulisserna-snack och mycket mer – helt gratis.

Gå med i min mailklubb genom att skriva upp din mailadress nedan.

Inte ett nyhetsbrev, inget spam. Lovar <3

Powered by ConvertKit

Om du gillade det här inlägget så får du gärna visa det genom att klicka på hjärtat, så jag vet vad jag ska göra mer av!

0
(Visited 61 times, 1 visits today)

10 Kommentarer

  1. Mediemänniskan 12 mars, 2016 at 11:45

    Spännande blogg! Här hittar jag en hel del läsvärt! Hoppas inspirationen håller i, för det här är bra 🙂

    Svara
  2. Nadine 12 mars, 2016 at 12:39

    När blir bloggen en bok?

    Med andra ord: e hänförd som vanligt!  😘

    Svara
    1. Elin Häggberg // Teknifik 12 mars, 2016 at 13:24

      Lite icke-långsiktigt att trycka sådana här grejer. Fördelen med blogg är att jag kan uppdatera allt eftersom 🙂

      Svara
  3. Annie - lättlagat vegokäk 13 mars, 2016 at 14:26

    Älskar att kunna gå in på en blogg för att LÄRA! Mest brukar det ju vara tidsfördriv, men du har verkligen höjt nivån på hjärnaktivitet under mitt bloggsurfande <3

    Svara
  4. La Linda / Better Bloggers 20 mars, 2016 at 21:45

    Alltså, du är så bra, jag tuppar av konstant. Och TACK att jag fick vara med på ett hörn! :))

    Svara

Skriv en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *