Nak buat header senang je senang ke ==''
yang penting korang semua ada Photoscape dan Adobe photoshop.
Siapa yang tade boleh tekan link ni untuk install okay :
Photoscape ; Adobe Photoshop
Step One
Cari saiz header korang. Senang je, pergi kat
Design >> Edit HTML >> picit ctrl + F >> dan copy paste code di bawah
#header-wrapper {
contoh macam tiqa punya ;
width: 940px;
height: 500px;
Step Two
Lepas tu korang boleh buat base header korang. Caranya bukak Adobe Photoshop, tekan File, pilih New dan akan keluar box yang macam ni.
Masuk kan width dan height header korang.Jangan lupa dalam unit pixels ye ! macam dalam gambar tuh.Tukar pada Transparent kalau nak header tu transparent macam tiqa punya.Lepas tu tekan Ok !
Step Three
Google gambar gambar yang korang nak letak dalam header.
Reka Tulisan yang nak diletakkan pada header.
Caranya : BUKAK PHOTOSCAPE,
Sebelum tu, cari plain background untuk korang edit letak nama blog. Contoh nya :
 |
| click gambar kalau tak nampak ! |
Kalau boleh saiznya sama dengan header korang, senang korang nak design header cantik cantik.Lepas tu, tekan simbol T macam kat bawah ni untuk masukkan nama blog.
Masukkan nama blog, tekan Ok. pandai pandai lah design ye.. Contoh ;
Step Four
Masa untuk design !
Buka Adobe Photoshop tadi. Minimize kan base header yang korang buat tadi. macam ni :
Lepas tu, pergi kat File, pilih Open, dan buka design header korang yang korang buat di Step Three tadi.
macam ni :
Sekarang masa untuk buat magic !
Pilih Quick Selection Tool, dan pilih Add to selection. Macam ni :
Lepas tu crop kat bahagian dalam tulisan tadi. buat kemas kemas. contoh : ni tak kemas ==''
Lepas tu pilih refine edge untuk kemaskan dia. Gunakan ke kreatifan diri. Dah siap, tekan Ok !
Lepas tu restore balik base header yang dah minimize tadi, dan pilih Move Tool untuk gerakkan tulisan yang telah di crop ke dalam base header tadi. macam ni :
Lepas tu, move kan je tulisan tadi.
Ulang semua step secara kreative untuk masukkan gambar gambar yang telah di google tadi !Bila dah siap , save !
Cara save : Pilih File, pilih Save for the web and device, pilih save !
Dah siap !
Nak upload header cantik tadi,
pergi Dashboard, pilih Design, pilih Page Elements, dekat header tekan edit dan upload image header tadi!
BERJAYA ! Wooohoo~!!
Kalau tak faham, tanya okayy ! ;D
eh ! Base Header ke Header Base ehh??
Ahh! lantak lah kan.. hihihi
17 comments:
ermm,,, pning jgak nk bt bnda nie.. huhu..
xpe2.. cbe lg.. tp mcm mne nk bt klo xda adobe phthshop??.. pe la.. =.="
Donlod lah adobe photoshop kat link tu yeee... :)
oo.. tp bsar xdia pnye mb?
klo bsar lmbt plak nk siap dwnload.. huhu.. xpe2.. kuatkn smngat.. hehe :)
antar kedai je senang! hehe
thanks eyyy . i love youuu
tuto ni utk classic template or template designer ?
template designer syg.. template classic pon boleh.. kene pandai cari coding tempat letak header..... :)
yg nk msk knn gambar tuu x phm..nk ulg mcm mner ??
iLa : kalau nk msuk kn gambar, sama je cara mcm nak masuk kan header tu sayang, ulang je step step crop header n masuk kan header tu... sama je :)
okeyh ! kak tiqah cri layout dkat mner ?? canti lha !
*ila*
akak cari kat sini -----> www.snazzyspace.com
tengok la, cantik2 ;P
apa mksud pcit ctrl + f eh ? sowry noob sket .. hikhik !
maksud nya :
kat keybord tu kan ada huruf "ctrl" kat bawah shift tu... tekan yang tu serentak dengan huruf F ..
akan keluar 1 kotak sama ada kat bawah atau atas screen tu... paste kan perkataan yg tiqa suruh paste kat dalam kotak tu...
benda ni untuk kita search / find perkataan yang kita paste tu dalam screen ni.. so senang sikit nak cari apa apa code..
tade la berpinar mata cari code yg diingini..
okay? paham dah ? ;)
sy ngah wt step 1 tue..yg transparent tue...tp bile sy search...dy kte xad..kuar warne merah.tp bile sy search wrapper..sy jmpe header tue..tp sy xjmpe length n width tue pn...pe yg sy jmpe kt header cume yg nie
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
tiQa mcm mna nk buat klo bnda yg kita search tu xda?.? xjmpe la. .huhu
mr. bob : sorry sangat... mungkin awk bukan guna classic template...tiqa tak arif sgt pasal html tuk template lain... template classic tiqa bole lah godek godek lagi kalau yg lain tak reti sbb tiqa tak guna yg tu...
aris : apa benda yg tak jumpa???
yg nie sya xjmpe #header-wrapper {
puas sya cari xjmpe jgak. .
n saya nk upload header tu pn xbleh. mcm mna ye?.?
Post a Comment