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:


Kommentarer ( 83 )

  • JULIA AMANDA säger:

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

    [Svara]

  • D säger:

    Grym tutorial. ;D

    [Svara]

  • Sara säger:

    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 ]

    [Svara]

  • agnes säger:

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

    [Svara]

  • elin säger:

    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:

    [Svara]

  • Da Tjoff säger:

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

    [Svara]

    Timmy Engström svarar:

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

    [Svara]

  • Frida säger:

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

    [Svara]

  • Melinda säger:

    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/ :)

    [Svara]

  • sofie säger:

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

    [Svara]

  • kattis säger:

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

    [Svara]

    Timmy Engström svarar:

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

    [Svara]

  • Emelie säger:

    Jaghar inte print screen :(
    så hur gör jag då?

    [Svara]

  • Emelie säger:

    hej, jag undrar hur du klipper in bilden så fint i en annan bild. Så som du gjort på bilden ovan. hoppas du förstod frågan och jag skulle bli jätteglad för svar för jag har undrat så länge. kram! :)

    [Svara]

  • Linn säger:

    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 ]

    [Svara]

    Yasse svarar:

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

    [Svara]

  • Sandra säger:

    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å :)

    [Svara]

  • Jessica säger:

    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.

    [Svara]

  • LARA säger:

    Asså hur klipper man ut bilderna i photoshop utan att dem blir hackiga?! :)

    [Svara]

  • Sanna säger:

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

    [Svara]

  • Engsliga tjejen säger:

    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 ]

    [Svara]

  • ja säger:

    hur klipper man ut bara kroppen och ansiktet?

    [Svara]

  • Julia säger:

    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.

    [Svara]

  • Sarah säger:

    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.

    [Svara]

  • Sarah säger:

    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.

    [Svara]

  • Miley säger:

    vilken photoshop använder du?

    Svar från Tescho: CS4 :)

    [Svara]

  • Ella säger:

    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.

    [Svara]

  • Malin säger:

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

    [Svara]

  • Maja säger:

    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 ]

    [Svara]

  • Louise säger:

    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)

    [Svara]

  • filippa säger:

    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/

    [Svara]

  • Elyy säger:

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

    [Svara]

  • Cecilia säger:

    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.

    [Svara]

  • ice thorslund säger:

    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/

    [Svara]

  • elin säger:

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

    [Svara]

  • Matildaaaaa. säger:

    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.

    [Svara]

    Tescho svarar:

    Jag förstår inte..

    [Svara]

  • ice thorslund säger:

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

    [Svara]

    Tescho svarar:

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

    [Svara]

  • Carol säger:

    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

    [Svara]

    Tescho svarar:

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

    [Svara]

  • elin säger:

    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

    [Svara]

    Tescho svarar:

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

    [Svara]

  • Emelie säger:

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

    [Svara]

    Tescho svarar:

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

    [Svara]

  • Therese säger:

    Hejsan!

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

    Mvh Therese

    [Svara]

    Tescho svarar:

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

    [Svara]

  • my säger:

    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

    [Svara]

  • linnea säger:

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

    [Svara]

    Tescho svarar:

    Jag har svar på det vid guiderna.

    [Svara]

  • Fillankarlssonl säger:

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

    Kramar // Fillankarlssonl

    [Svara]

    Tescho svarar:

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

    [Svara]

  • Maja säger:

    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

    [Svara]

    Tescho svarar:

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

    [Svara]

  • matilde säger:

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

    [Svara]

    Tescho svarar:

    Du har hjälp ovan :)

    [Svara]

  • Olivia säger:

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

    [Svara]

    Olivia svarar:

    jag fixade det :)

    [Svara]

  • Jasmin säger:

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

    [Svara]

    Tescho svarar:

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

    [Svara]

  • Julia säger:

    Vart gör du dina headers? :)

    [Svara]

    Tescho svarar:

    Photoshop :)

    [Svara]

  • Olliw säger:

    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 =)

    [Svara]

  • yasemin säger:

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

    [Svara]

    Tescho svarar:

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

    [Svara]

  • Max o Danne;> säger:

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

    [Svara]

  • Mimmi Boellke säger:

    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.

    [Svara]

  • Caroline♥ säger:

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

    [Svara]

    Tescho svarar:

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

    [Svara]

  • anna säger:

    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!

    [Svara]

    Tescho svarar:

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

    [Svara]

  • Fanny säger:

    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!:)

    [Svara]

    Tescho svarar:

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

    [Svara]

  • Liv säger:

    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

    [Svara]

  • Zizzi säger:

    Bra gjord!! :P

    [Svara]

  • Jossan säger:

    Hur sätter jag in en header? :)

    [Svara]

  • Selma säger:

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

    [Svara]

  • Ebbaa säger:

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

    [Svara]

    Tescho svarar:

    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!

    [Svara]

  • yolo säger:

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

    [Svara]

    Tescho svarar:

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

    [Svara]

Kommentera