Hur gör man en egen header?

Innan jag fick till en header letade jag Överallt på en beskrivning.
Det ända som fanns var hur man lägger in en header i bloggen, jag ville ju veta
hur man Gör en... så nu ska jag förklara för er!

Hur man gör en enkel header:
Header är "huvudet" på bloggen, där jag har har en bild på mig mm...
Mer förklaringar om vad olika delar i din blogg heter, hänvisar jag till Designa din blogg

Detta är som sagt en Enkel förklaring, själva grunden. Sen finns det tusentals olika
saker du kan lägga till, bilder, brushes mm.

-För att göra din header roligare hittar du en förklaring till
hur man lägger in penslar i PS  här >>> ( Nytt och uppdaterat )

Du måste ha Adobe Photoshop installerat för att följa min tutrioal.



- Välj Nytt > Fyll i rutan som kommer upp med bredd 800 pixlar och 400 pixlar i höjd.
Du väljer den storlek som passar dig bäst.



Upp får du en vit ruta i de pixlar du valt.
Nu ska vi fylla rutan med en färg, exemplivs den färg som bloggen har.
Välj färgpyts.



Nu är min grå/brun Vilken färg valde du?
Dra sedan ut kanterna ( i detta fall behövs det inte men så "lär" du dig det )
Om du "rör" vid den blå kanten kommer en pil upp, dra i den.
( detta är inte storleken i verkligheten )



Nu ska vi lägga i ett kort i headern.
Välj Fil/Arkiv > Öppna



Gör din bild i den storlek du önskar. Här är min.
Det finns många sätt att göra fotot roligare på med bla ramar osv.
Leta dig fram genom google.se



Nu ska vi skriva dit en text också.
Välj textverktyget och textsnitt > storlek



Ta sedan textverktyget ut i din bild.
Dra i den lite för att skapa själva ramen ( syns ej sedan )
Skriv dit valfri text.



Nu ska vi ska skugga på texten.
Detta gör det lite roligare.
Markera texten och välj lager > lagerstil >skugga
Det finns olika varianter och du får testa dig fram.
Lycka till!


Så här blev min!


#1 - Alexandra

Jätte fin blogg du har!

#2 - lydia :)

vilken bra blogg du har !

#3 - zzeii

Hej! Din blogg är sjukt fin men jag undrar en sak om det du har skrivit . jag kan inte ladda upp photoshop:( Så jag skulle vilja fråga om du kunde fixa en till mej ? Snälla

#4 - Emelie

hej hur gör man en riktig header typ en sån som du har????







ps. hoppas du kan svara på mina frågor på min blogg www.testadig.blogg.se

#5 - Julia

Hur laddar man ner textstilar och brushes ?

#6 - Isabella

frågestund i min bogg

#7 - McCartney

Vart får man tag på fotoshop? Kostar det?

#8 - melinda

hejsan :)

tack för att du svarade! :D

ja borde ha en headerkod, men vet inte vart de är(A)

kan kopiera hela min stilmall! hittar inte den texten du hade skrivit där man skulle skriva i headern för bakgrunden(A) :)



html,body,h1,h2,h3,h4,h5,h6,p,dl,dd,dt,ul,li,img,table,caption,tr,th,td,tt,span,fieldset,legend, form { margin: 0; padding: 0; border: 0; }

input, select, textarea { margin: 0; padding: 0; }



/

play around with these to change settings on your blog!

/



/
link colors /

a {

color: #369;

}

a:hover {

color: #025;

}



/
font & border /

body {

font: 12px/16px 'Lucida Grande', Arial, Sans-serif;

border-top: 5px solid #369;

}



h1,h3,h4,h5,h6, div.navheader, div.default {

font-family: 'Times New Roman', Georgia, Serif;

color: #222;

}



div#side h3 div.navheader {

color: #666;

}



/


do not alter these if you don't know what you're doing

/



body {

background: #fff;

}



div#wrapper {

margin: 0 auto 20px auto;

width: 750px;

}



div#header {

float: left;

clear: left;

display: inline;

padding: 0 20px 20px 20px;

border-bottom: 1px solid #ddd;

width: 710px;

}



div#content {

float: left;

clear: left;

display: inline;

padding: 0 20px 20px 20px;

width: 540px;

}



div#side {

width: 150px;

padding: 0 20px 0 0;

float: right;

display: inline;

}



div#side div.navheader, div#side h4, div.default {

padding: 20px 0 5px 0;

font-size: 16px;

font-weight: normal;

}



/ hide calender - doesn't work anyway /

div#side div#calendar {

display: none;

}



div#header h1 {

font-size: 45px;

letter-spacing: -2px;

font-weight: bold;

margin: 50px 0 15px 0;

}



div#header h1 a {

text-decoration: none;

color: #222;

cursor: default;

}



div#header h2 {

font-size: 10px;

margin-left: 15px;

color: #666;

}



div#content h3 {

font-size: 24px;

font-weight: normal;

margin: 20px 0 10px 0;

}



div#content div.entrybody {

margin: 0 15px 0 15px;

}



div#content div.entrybody ul {

margin: 10px 0 10px 15px;

}



div#content div.entrybody li {

font-size: 12px;

color: #222;

list-style-type: square;

}



div.default {

margin: 0 0 15px 0;

}



div.nav input {

margin-right: 5px;

}



div.nav li {

list-style: none;

padding: 2px 0;

}



div.nav ul li strong {

line-height: 37px;

font-size: 11px;

}



div.entrymeta {

font-size: 11px;

margin: 0 0 0 15px;

padding: 10px 0 10px 0;

color: #666;

line-height: 7px;

}



div.commentheader, p.commenttext {

margin: 0 0 0 15px;

font-weight: bold;

color: #222;

}



p.commenttext {

font-weight: normal;

}



div.commentmeta {

color: #666;

margin: 5px 0 20px 15px;

font-size: 11px;

}



form.commentform {

font-size: 11px;

}



form.commentform input, form.commentform textarea {

margin: 0 5px 10px 0;

vertical-align: middle;

}



input.formbutton {

margin-top: 10px;

}



.separator {

display:none;

}



.subside {}



.image {

border: 0;

margin: 0 6px 6px 0;

}



.thumbnail {

margin: 0 6px 6px 0;

}



.video {

padding: 0;

}



.xmlButton {

border: 1px solid;

border-color: #FC9 #630 #330 #F96;

padding: 0 3px;

font: bold 10px Verdana, Arial, Helvetica, Sans-serif;

color: #FFF;

background: #F60;

text-decoration: none;

margin:0;

}

#9 - Anonym

tack så jätte jättemycket för hjälpen, uppskattar det verkligen! :D

om jag vill lägga in en egen bild längst upp på sidan, vart skriver jag adressen till bilden då? :) är det i headern där nere det med? =)





div#header {

>>> Här är background + headerbild!

float: left;

clear: left;

display: inline;

padding: 0 20px 20px 20px;

border-bottom: 1px solid #ddd;

width: 710px;

#10 - Anonym

det var jag som skrev kommentaren innan, glömde skriva adress (A)!

#11 - Ida

Hej!, jag undrar hur man laddar upp headern?? Jag kan inte allt med alla koder och sånt, snälla kan du inte skriva hur man gör i nåt inlägg??

#12 - wilma

Hej du har värkligen jätte fin blogg !

Du skrev ju en enkel beskrivning hur man gör en header jag prövade och när jag kom till att lägga till bild i header då hamnar inte bilden i headern utan då kommer den upp som ny instället snälla skicka tillbaka jag vill värkligen veta för jag har hållt på med det här i flera veckor nu !

#13 - Linn

Tack så jätte mycket du! <3 kram

Ha det gott!

#14 - undrar

fattar inte det där med Ps i början kan du förklara vad den fins?

#15 - The Pink Gnulv

Du var verkligen superbra på att förklara! Men jag fattar verkligen inte hur man laddar uppd en :S

#16 - f i l i p p a ♥

hej! Jag har bara en liten fråga eller jag hoppas att den är enkel att svara på & att du förstår :)

När jag har gjort min header i Ps så sparar jag den då. Sen när jag ska ladda upp den på blogg.se så tar jag den adressen till bilden & laddar upp den till en header på Redigera stilmall. Men sen håller jag på jätte länge med att bredden & höjden ska vara bra men de går aldrig. Det blir alltid en vit kant runt min header om du förstår vad jag menar. Som alla andra kan få det så det blir exakt så header & bakgrunden hänger liksom ihop. Men på mig blir det bara en vit kan runt header vad jag än gör. Skulle varit jätte snällt om du förklarade det hur man får det så det inte blir den där vita kanten runt bilden som jag valt som header. Detta blev väldigt långt, haha. Ha det bra! :)

#17 - f i l i p p a ♥

hej de är jag igen, det var jag som frågade om den där vita kanten runt header osv. skulle bara säga att om du inte riktigt förstår vad jag menar kan jag skicka en bild & visa :)

#18 - a

är de gratis å ladda ner de dära programmet?

#19 - johanna

hej, ja undrade bara vilket photoshop du har? ja har försökt med mitt men det är inget som funkar där... glad för svar : )

#20 - jazmine

Jag har laddat hem det du gjorde så att man kunde klicka på men jag fattar inte vilken av alla mappar och sånt jag ska öppna och använda ?..