Jan 27, 2011

Tutorial buat header transparent step by step

Ini adalah tutorial membuat header transparent dengan menggunakan Photoscape dan Adobe Photoshop.
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 {

dah jumpa? tengok apa kat bawah dia, tulah saiz header korang.
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 ;

 Dah siap? Save lah, apa lagi ! ;D


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:

aris nor mohamad said...

ermm,,, pning jgak nk bt bnda nie.. huhu..
xpe2.. cbe lg.. tp mcm mne nk bt klo xda adobe phthshop??.. pe la.. =.="

atiqah said...

Donlod lah adobe photoshop kat link tu yeee... :)

aris nor mohamad said...

oo.. tp bsar xdia pnye mb?
klo bsar lmbt plak nk siap dwnload.. huhu.. xpe2.. kuatkn smngat.. hehe :)

atiqah said...

antar kedai je senang! hehe

asmyydaedrus said...

thanks eyyy . i love youuu

beebooterguling-guling said...

tuto ni utk classic template or template designer ?

atiqah said...

template designer syg.. template classic pon boleh.. kene pandai cari coding tempat letak header..... :)

iLa said...

yg nk msk knn gambar tuu x phm..nk ulg mcm mner ??

atiqah said...

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

shie ayein said...

okeyh ! kak tiqah cri layout dkat mner ?? canti lha !
*ila*

atiqah said...

akak cari kat sini -----> www.snazzyspace.com

tengok la, cantik2 ;P

the only xeyra ,,, said...

apa mksud pcit ctrl + f eh ? sowry noob sket .. hikhik !

atiqah said...

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 ? ;)

mr bob said...

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);
}

aRis n0r moHamaD said...

tiQa mcm mna nk buat klo bnda yg kita search tu xda?.? xjmpe la. .huhu

atiqah said...

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???

aRis n0r moHamaD said...

yg nie sya xjmpe #header-wrapper {
puas sya cari xjmpe jgak. .
n saya nk upload header tu pn xbleh. mcm mna ye?.?

tweet with me

 

This cute little bloggie is Designed by Cik Tiqa Template by Ipietoon Sponsored by Emocutez