Hur man gör en ”snygg” header


Jag fick en förfrågan om hur man gör en snygg header och det är ju svårt att veta med tanke på att man har olika smak. När jag sedan frågade er var det lika svårt att svara. Och det är ju klart. Helheten ska vara proffsig, inga webcambilder, stilren, personlig..enligt det som har sagts.

Så jag börjar med att förklara hur jag har gjort en design & sedan får man tycka till och fråga på det. Bra, dåligt?

Först ut är Cecilia.
Önskemål: rosa, bilderna, namnet samt bakgrundsfärgen som går från rosa till vitt i headern.
Det jag la till i headern: penseln (photoshop brush), kategorierna i headern samt lite effekter på korten.

Header
Klicka för att se större.

Vi börjar från start!

Gör en print screen av din blogg, ex (klicka för att se större):
Print screen
Då vet du vad du kan utgå ifrån, d v s storleken på menyn till vänster samt inläggssidan till höger och vad du ska ha för mellanrum.

Nästa grej är photoshop:
Boxarna i header (klicka för större):
Boxar

Sedan får man lägga in bilder i headern där man vill ha dem (om det är några frågor på det kommentera inlägget så gör jag en fortsättning på detta). När jag redigerar i photoshop brukar jag alltid ha bakgrunden framme för att se ”helheten” sen gör jag den transparent och sparar i .png (kommer inte ihåg om man kan ladda upp .png filer på blogg.se/webblogg.se men om det inte går är det bara att kontakta mig så slänger jag upp den och du får adressen. Det finns även sidor t ex http://www.deviantart.com/ där du kan skapa konto och ladda upp). Då är det lättare att byta bakgrund i stilmallen då du inte behöver göra om headern.

Nu ska du ladda upp headern på ditt konto. Här kan du läsa mer om hur man laddar upp bilder på en blogg.se-blogg.

När du sedan laddat upp bilden kopiera länken och lägg in under stilmall i #header (d v s ”background: url(adressen till bilden) no-repeat;”). Nu bör du tänka på att width (bredd) och (höjd) ska vara samma storlek som headern i ”#header”. Men eftersom att vi fixar allting annat först (se nr 1 – print screen på designen i bloggen) så ska detta inte behövas.

KLART! Som sagt, om det finns frågor så ställ dem gärna. Det kan vara så att jag inte förklarar så tydligt som du vill att jag ska göra. Hur man lägger in kategorier eller flikar i headern återkommer jag med i ett annat inlägg. Sedan kan du alltid gå in här och kika bland designers jag har gjort så förklarar jag hur jag har gått tillväga :yes:

Taggar:,
Tescho

Jag föredrar att skriva i ljus - att uttrycka mig med hjälp av en kamera. När jag inte fotograferar på uppdrag av mig själv tar jag emot bokningar som fotograf via Formrikt. I och med att jag har en kärlek för DIY och formgivning kan det också komma att ta plats här på bloggen.

Du kanske också gillar

83 kommentarer

  • JULIA AMANDA
    13 mars, 2009 at 14:59

    Haha, så du löste klurigheterna kring hur en snygg header ska se ut ;)

  • D
    15 mars, 2009 at 17:51

    Grym tutorial. ;D

  • Sara
    29 maj, 2009 at 20:04

    Hejsan. Jag vill ha en headerr som är samma färg som bakrunden så den passar ihop. Det är bara det att det blir en vit ram runt den. Hur fick du bort den? <3

    Svar från Tescho: Svaret på frågan hittar du här [ länk ]

  • Jennie
    11 juni, 2009 at 12:38

    Tack!

  • agnes
    20 juni, 2009 at 18:42

    asså jag försöker läsa mig igenom instruktionerna på designadinblogg.se men det tar stopp vid ‘se om det finns en kodrad som heter background’ seriöst jag har ingen sån . vad ska jag göra ?!

    Svar från Tescho: Lägg till den kodraden :)

  • elin
    23 juni, 2009 at 22:09

    HEj!
    Jag får in headern på min blogg…men när jag ska fixa min syrras….så funkar det inte! Å då gör jag precis samma som med min!
    Lust att hjälpa?

    Svar från Tescho: Kika hos designadinblogg.se´s förklaring [ länk ] :yes:

  • Da Tjoff
    1 juli, 2009 at 10:37

    Kan man göra en haeder för Blogger?
    Och vilka sajter kan man göra headers för?

    Svar från Tescho: Jag har aldrig haft blogger men de flesta fungerar det på. Om du inte kommer fram till hur du går tillväga kan du maila kundservice :)

  • Frida
    3 juli, 2009 at 14:24

    Skulle du kunna berätta hur man får in en bild i headern?

    Svar från Tescho: Menar du klickbara bilder? Det kommer komma upp en gratis bloggdesign om det senast ikväll (måndag kväll). Den kan du ladda ner och kika efter hur jag har gjort :)

  • Melinda
    25 juli, 2009 at 14:55

    Hur gör då så att bilderna blir klickbara?:)

    Svar från Tescho: Det kan du läsa mer om här: http://tescho.se/webdesign-hur-gor-man-moouseovers/ :)

  • sofie
    1 augusti, 2009 at 14:18

    hej, skulle bli super duper glad om du lärde mig hur man gör ”boxarna” vid menyn?? :)
    jätte fin blogg har du oxå :)
    kram :*

    Svar från Tescho: Svaret på din fråga kommer troligtvis publiceras antingen i en ny gratis bloggdesign eller i ett enskilt inlägg då det är fler som undrar över just det :)

  • kattis
    4 augusti, 2009 at 00:20

    hejsan :) , jag behöver verkligen hjälp med designen, men förstår dock ingenting på några hjälpsidor alls, skulle uppskatta lite tipser och sånt om hur man kan fixa headern när man inte har någon photoshop.
    i bloggen står det inte heller header eller något när man ska designa, utan bara en massa stilmallar och kodmallar.
    hjälp mig snälla, puss! <3

    Svar från Tescho: Jag vet inte om jag kan tipsa om något annat program som jag tycker är bra. Vissa tycker att paint duger men jag skulle aldrig tips om det. Jag tipsar om det jag tycker är bra och för att redigera t ex en header är det bäst med ett bra bildprogram :)

  • Linn
    12 september, 2009 at 18:54

    Hej, jag har letat och letat överallt efter på något sätt installera photoshop.Jag har sökt runt på google och gått in på en massa olika hemsidor.
    Men det står bara köp.Och det är ju inte billigt precis.Jag har ingen lust att betala för att göra om mina bilder.Jag använder paint och picnik.com just nu.Men det blir inte så bra.När jag tittar på andras bloggar och på deras header’s så är dom ju sjukt snygga! (din med) Och min ser ju bara enkel ut.
    Snälla kan du inte tipsa om vilken photoshop du använder och om det går att installera den, isåfall vilken sida?

    Tack på förhand :love:

    Svar från tescho
    : Jag har photoshop CS3 som är köpt :) Det finns även ”nerkapade” versioner av photoshop som kallas för Photoshop Elements. De kostar ca 1000 kr och ska enligt källor fungera bra! Leta på google så hittar du säkert något billigare du kan köpa (samt hur det fungerar)!

    Moderskeppet har en bra beskrivning: [ länk ]

  • Sandra
    16 oktober, 2009 at 19:22

    hej hej du har en son himla snygg header hur gör jag en snygg header för jag har set på bloggar te.x (kisse) hej då :)

  • Jessica
    29 oktober, 2009 at 11:14

    Hej! :)
    Asså jag fattar ingenting på photoshop
    Hur kommer man in på boxar så man kan göra header?

    Svar från Tescho: Jag rekommenderar moderskeppet.se som en början.

  • Sanna
    23 november, 2009 at 17:48

    Hej!
    Tack för bra tips! Är ny med photoshop, hur gör man om man nu gjort en ruta till headern och vill sätta in bilder på plats där man vill att de ska vara? :)

    Svar från Tescho: Man klistrar in bilden och får då ett nytt lager. Det kan man dra hur som helst tills man är nöjd. Man kan även rotera m.m. genom att använda snabbkommando ctrl + t :)

  • Engsliga tjejen
    29 december, 2009 at 13:47

    Hej Tescho!!
    Jag har photoshop och allt men en sak fattar ja inte: Hur kommer man in på PhotoShop Brush!!??
    Snälla hjälp!!
    Kramar från en engslig tjej!

    Svar från Tescho: Svaret på frågan finner du här [ länk ]

  • Engsliga tjejen
    29 december, 2009 at 13:53

    Lol :P

  • Julia
    10 januari, 2010 at 16:13

    Jag undrar över vilken stilmall man ska använda när man vill ha hela headern en färg? Asså jag menar på guiden så är det rosa på hela header området. Jag undrar hur man gör så och vilken stilmall man ska ha som grund mall? Väldigt tacksam för svar!

    Svar från Tescho: Man får välja själv vilken grundmall man ska använda. För att få en färg på headern får man byta bakgrundsfärg under #header i stilmallen.

  • Sarah
    11 januari, 2010 at 19:57

    Hej, jag skulle så hemskt gärna vilja ha en snygg blogg men vet verkligen inte hur jag gör för att få till den med alla dessa koder, kan du snälla hjälpa mig på traven?

    Svar från Tescho: Det är precis det jag gör genom att samla tutorials under webbdesign & tutorials > besvarade frågor.

  • Sarah
    11 januari, 2010 at 20:40

    Jo men det är så att jag har hittat en stilmall som jag vill ha och har klistrat in den och när jag förhandsgranskar så är sidan som jag vill ha den men när jag sedan går in och kollar på bloggen som andra ser den finns det inte där.. har provat loggat in och ut men ingen skillnad :S vad gör jag för fel? :S

    Svar från Tescho: Svaret hittar du (ang hur man lägger in en designmall) under webbdesign & tutorials > besvarade frågor.

  • Miley
    17 januari, 2010 at 08:59

    vilken photoshop använder du?

    Svar från Tescho: CS4 :)

  • Ella
    28 januari, 2010 at 16:56

    Heeej , jag har ingen aning om hur jag ska göra för att få en snygg header .
    Jag skaffade blogg nyss så jag ä inte så inne i det än .
    Snälla kan du hjälpa mig ? :D
    Krammarr från en usel bloggare (;

    Svar från Tescho: Som jag har skrivit överallt så tar jag inte emot beställningar av något slag och ingen vill jobba gratis.

  • Malin
    30 januari, 2010 at 08:22

    Hej Tescho!
    Kan man änvända någon annan photoshop än cs4 till att göra det här?

    Svar från Tescho: Nej, man behöver inte ha cs4 för att göra en header :)

  • Maja
    1 februari, 2010 at 12:41

    hejj Tescho !
    Jag tycker din blogg är jätte fin & bra . :)

    Men nu till min fråga , jag brukar göra min header på picnik.com , men det funkar typ inte längre på min data , så jag undrar om du vet någon annan hemsida som man kan göra header i , förutom photoshop .

    Kram / Maja .

    Svar från Tescho: Svaret på frågan finner du här: [ länk ]

  • Louise
    3 april, 2010 at 23:03

    Vad är det för typsnitt som du använt när du skrev ”Cecilia”? letar och letar men hittar det inte :(

    Svar från Tescho: Jag kommer tyvärr inte ihåg det :( Du kan alltid fråga henne om hon kommer ihåg (ceciliasdrommar.blogg.se)

  • filippa
    20 april, 2010 at 16:01

    jag förstår inte hur man lägger till bilder när man använder sig av en tom fil??

    Svar från Tescho: Jag förstår inte vad du menar med använda en tom fil. Här står det mer om hur man laddar upp en bild om det var det du hade problem med: http://tescho.se/fraga-ladda-upp-en-bild/

  • Elyy
    23 april, 2010 at 19:02

    Jag förstår inte .
    Jag hittar inte den koden som man ska lägga in headern på .
    Jag fattar inte .
    Jag vill gärna ha hjälp med att lägga in en header istället .
    Skulle du kunna hjälpa mig ?
    Isåfall mejla på min epost eller jag mejlar dig istället :D

    Svar från Tescho: Jag tar tyvärr inte emot beställningar via min blogg men via mitt företag kan jag hjälpa dig (www.designyou.se).

  • Cecilia
    3 juni, 2010 at 11:06

    Jag gillar verkligen din kreativitet när det gäller design!
    Men jag har en liten fråga:
    Hur går man till väga om man vill ha alla rutor med rundade hörn, och inte bara headern? :)

    Svar från Tescho: Tack! Jag har tagit upp det förr och hänvisar dig till Web design – Guider, Gratis bloggmallar m.m. > Besvarade frågor (guider) där jag samlar alla guider jag gör.

  • ice thorslund
    7 juni, 2010 at 22:22

    kan du hjälpa mig snällaa ?????????????????? :`(

    Svar från Tescho: Om du har en fråga inom bloggdesign kan du ställa den här: http://tescho.se/designhjalp-har-kommer-den/

  • elin
    27 juni, 2010 at 13:56

    hejsan! Jag undrar hur man göra så att menyn inte sitter ihop med inlägget. Jag har kollat på designadinblogg.se men där blir mellanrummet bara vitt, jag vill ha det i samma färg som bakgrunden! Tacksam om du svarar på min blogg :)

    Svar från Tescho: Ta bort bakgrunden på ”wrapper” i stilmallen. Jag har skrivit om detta och det finns instruktioner om det under ”Web design – Guider, Gratis bloggmallar m.m. > Besvarade frågor (guider)”.

  • Matildaaaaa.
    10 juli, 2010 at 17:29

    Hej!
    På photoshop, hur killer jag ut saker ifrån bilden som du själv verkar har gjort på inläggsbilden?
    Tack på förhand.

  • Tescho
    Tescho
    11 juli, 2010 at 22:23

    Jag förstår inte..

  • Timmy Engström
    17 juli, 2010 at 02:51

    Ja man kan ha egen header på blogger,
    Bara bakgrunden man måste göra ett javascript för att ändra:)

  • Timmy Engström
    17 juli, 2010 at 02:54

    Jag kan göra en design åt dig!:) Men en hel design kostar från 100kr till 300kr..
    Beror helt på vad som ska göras:)
    Du får: Header, bakgrund, stil/kod mallen :)

  • ice thorslund
    21 juli, 2010 at 20:27

    åhhhhhhhhhhhh kan du göra en header till mig ?<3

  • Tescho
    Tescho
    22 juli, 2010 at 14:57

    Nej, det kan jag inte. För tillfället har jag sommarstängt för nya beställningar via mitt företag (designyou.se).

  • Carol
    28 augusti, 2010 at 16:54

    Heej!

    undrar hur du vet vilken storlek och sånt hur man ger plats in i bloggen :) och när du har svarat kan du kommentera på min blogg att du har svarat och hemsidan men s jag kommer in hit igen xD<3

  • elin
    29 augusti, 2010 at 18:56

    Hej Jag undrar hur man kollar hur stor bilden ska vara för att passa bra som header? Den ska liksom smälta ihop med resten av bloggen? ah, hoppas att du förstår
    kram elin

  • Tescho
    Tescho
    30 augusti, 2010 at 20:16

    Det är olika men kika på width under #header.

  • Tescho
    Tescho
    31 augusti, 2010 at 09:25

    Spana in mina guider, jag besvarar inga designfrågor som sagt.

  • Emelie
    11 september, 2010 at 20:22

    Jag skulle vilja lära mig mer om boxarna. hur stort mellanrummet ska vara så att det passar in till själva designen osv? :)

  • Tescho
    Tescho
    12 september, 2010 at 11:33

    Det är helt olika från design till design. Det bästa är att du gör en print screen på din design och gör headern lika stor som den är nu (om du är osäker på hur man ändrar storlek). Jag tänkte nog göra ett nytt, ganska långt, inlägg om header. Vi får se när det dyker upp :)

  • Therese
    24 september, 2010 at 11:22

    Hejsan!

    Jagundrar om du även jobbar med att hjälpa någon med att designa sin blogg ?

    Mvh Therese

  • Tescho
    Tescho
    24 september, 2010 at 11:47

    Ja, det gör jag. Dock tar jag inte emot beställningar för tillfället då jag är uppe i flyttkaos.

  • my
    26 september, 2010 at 15:45

    Hej, jag fattar inte ett enda skit om hur man klipper ut en bild på bara dig själv, asso inte bakrunden på en bild,
    som att jag har en bild på mig m kanske träd bakom & så & jag fattar inte hur man gör så att mnan kan klippa bort träden & d så d bara är på sig själv som du har gjort på den headern, bilden t höger, aja du fattar nog :). men skulle vart kul om du berätta eller hjälpete mig :]

    kram / myee

  • linnea
    10 oktober, 2010 at 17:27

    just nu så ligger min sidomeny under headern, kan man fixa så att headern är kortare så att sidomenyn är bredvid? hoppas att du förstår vad jag menar :)

  • Tescho
    Tescho
    11 oktober, 2010 at 15:33

    Jag har svar på det vid guiderna.

  • Fillankarlssonl
    26 oktober, 2010 at 16:35

    Betalar du för ditt photoshop ?
    Om inte skicka sidan som du ladda ner ifrån är du snäll ! :D

    Kramar // Fillankarlssonl

  • Tescho
    Tescho
    26 oktober, 2010 at 17:09

    Ja då, jag betalar. Du kan alltid ladda ner en testversion som är gratis i 30 dagar :)

  • Maja
    1 november, 2010 at 12:45

    Hej jo jag tänkte bara fråga om du har möjlighet att hjälpa mig lite ? Det är nämligensåhära att jag inte hittar vad jag ska lägga in min header . Jag har klistrat in en ny stillmall i bloggen nu för jag ville verkligen komma i gång och blogga emn jag ville lägga in min egna header man hittar den inte har du mörlighet att hjälpa mig ? skulle vara så himla snällt :D
    Jätte tacksam för snabbt svar
    många kramar maja <3

  • Tescho
    Tescho
    1 november, 2010 at 12:53

    Jag har tyvärr inte tid till att hjälpa andra. Då skulle jag få en himla massa att göra. Därav finns alla guider så att alla kan ta del av min hjälp :)

  • matilde
    5 november, 2010 at 16:16

    skulle du kunna hjälpa mig att fixa en header? :)

  • Tescho
    Tescho
    5 november, 2010 at 18:45

    Du har hjälp ovan :)

  • Yasse
    11 december, 2010 at 03:54

    Linn, har du testat Wix.com? den är inte världens bästa men i allafall bättre än paint/picnik.

  • Olivia
    21 december, 2010 at 12:01

    jag har inte en sån där ”spalt” :S

  • Olivia
    21 december, 2010 at 12:21

    jag fixade det :)

  • Jasmin
    13 januari, 2011 at 10:43

    Kan du fixa min blogg, med betalning såklart :D

  • Tescho
    Tescho
    13 januari, 2011 at 11:48

    Spana in min hemsida. Där erbjuder jag auktioner :)

  • Julia
    20 mars, 2011 at 15:17

    Vart gör du dina headers? :)

  • Tescho
    Tescho
    20 mars, 2011 at 20:19

    Photoshop :)

  • Olliw
    6 juli, 2011 at 13:05

    Hej!
    Detta är första gången som jag är inne på din blogg.
    Den verkar grym!
    Men det jag egentligen ville säga var:
    Vilka program använder du till headern?
    Jag är rätt ny på detta och undrar om du kan förklara lite lättare och tydligare hur man gör en header? =) tacksam för svar =)

  • yasemin
    20 juli, 2011 at 11:12

    vilken underbar blogg, skulle du kunna hjälpa mig med en header? :o
    svara gärna på min mail

  • Tescho
    Tescho
    20 juli, 2011 at 11:23

    Tack! Jag tar tyvärr inte emot beställningar på bloggdesign.

  • Max o Danne;>
    21 juli, 2011 at 20:40

    Hejj!:D Snälla kan du hjälpa oss med en(a, Våran ser lite wannabe ut..:/

  • Mimmi Boellke
    1 augusti, 2011 at 14:05

    Hej, har läst din blogg ett tag och undrar om du skulle kunna lägga upp hur du har gjort din header för jag vill också ha olika blinkande bilder, elr om du kan göra en header till mig.

  • Caroline♥
    18 september, 2011 at 17:35

    hejhej, jättefin blogg!
    men jag undrar om du skulle vilja fixa min blogg lite?
    KRAM!♥

  • Tescho
    Tescho
    19 september, 2011 at 06:34

    Tack! Jag tar tyvärr inte emot beställningar på bloggdesign. Kram!

  • anna
    16 oktober, 2011 at 16:57

    Jag fattar inte det där med gradinat overlay, hur ska jag göra för att få så?:)

    Annars var det en jättebra turorital!

  • Tescho
    Tescho
    16 oktober, 2011 at 17:41

    Om du dubbelklickar på lagret i PS så kan du lägga in gradient :)

  • Fanny
    18 oktober, 2011 at 17:57

    Hej ! jag har några frågor till dig !
    jag har just nu Soclog som bloggportal, men vill ändra till nån annan, så tänkte, vilken vet du som du tycker e bäst ? , sen tänkte jag se ifall du kunde göra en design o header till just den nya bloggen , skulle va snällt!:)

  • Tescho
    Tescho
    25 oktober, 2011 at 22:49

    Jag rekommenderar att använda WordPress på egen plattform :) Tyvärr tar jag inte emot beställningar på bloggdesign.

  • Liv
    11 maj, 2012 at 21:19

    finns det någon bra sida där man kan göra headers som rör på sig typ eller byter bild typ?:P
    tacksam för svar

  • Zizzi
    24 juni, 2012 at 16:58

    Bra gjord!! :P

  • Jossan
    24 oktober, 2012 at 21:26

    Hur sätter jag in en header? :)

  • Selma
    24 mars, 2013 at 17:10

    Hej, jag har skaffat blogg men jag har inte en blekaste arning om hur jag får till en header! Skulle någon kunna hjälp mej med det? Tack i förhand :)

  • Ebbaa
    8 maj, 2013 at 14:33

    Skulle du kunna hjälpa mig med en header? Förstår fortfarande inte? Skulle varit sjukt snällt om du gjorde min header? :)

  • yolo
    16 juni, 2013 at 11:21

    Finns det något annat pogram som är gratis man kan andväna om man vill göra en header

  • Tescho
    Tescho
    9 augusti, 2013 at 23:49

    Googla på ”online photo program” eller ”online photoshop” så kan du nog få upp något bra. Lycka till!

  • Tescho
    Tescho
    9 augusti, 2013 at 23:59

    Hej Ebba, det vore superkul att hjälpa till men jag gör tyvärr inte det längre. Det finns säkert någon där ute som kan hjälpa dig med det. Lycka till!

LEAVE A COMMENT