tutorial membuat header transparent

Ok, disebab kan ramai sangat yang bertanya macam mana nak buat header transparent ni, meh I ajar satu persatu ye. Satu persatu taw, I predict yang you all ni kosong idea tentang Photoshop ok?


First, benda yang harus anda ada haruslah Photoscape dan Photoshop. Kalau tak ada, download la apa lagi. Kalau tak reti nak download, biar I tolong buat kan tapi kena bayar la. Hahaha.


Ok, mula-mula, kita tengok berapa kah ukuran header kita. Pergi ke Design > Edit HTML. Then click pada Expand Widget Templates. Kemudian tekan ctrl + F. Copy dan paste code ini ke ruangan find.

#header-wrapper {

760px rite?

Ok now open your photoscape. Paint pun boleh diterima la. Tapi untuk tutorial ini, I guna photoscape. Buat satu kotak menyerupai header, berukuran sepertu header anda di gambar atas ni. 760px width and 338 height. Ubah la height mengikut kesesuaian blog anda. 

next step is to put your text into that canvas. Nampak kan ada tulisn object tu? Click situ dan anda akan nampak huruf T. Click huruf T tersebut untuk men edit text anda.

kemudian save ! Jangan lupa kat mana anda save sudah T___T

Langkah seterusnya, buka Adobe Photoshap anda. Sudah? Kemudian click file > open , dan open file yang anda save text anda seperti langkah di atas ini.

Seterusnya, click pada magic wand tool. Apa tu magic wand tool? anda nampak tool yang telah I bulat kan merah di gambar atas ni? Itu adalah magic wand tool. Click di tu dan select kan di seluruh canvas text anda. Seperti ini, 

Ok, lepas dah select, u guys right click di canvas tersebut dan akan keluar la seperti gambar di atas ni. Click pada select inverse. Ia akan kelihatan seperti ini,

nampak perbezaan? Kalau tak sila click pada gambar ye :)

Kemudian, pergi pada file > new. Akan keluar pop up box. You guys letak width and height yang u guys nak, let say tadi width kita 760px and height is 338 px. Bahagian contents letak transparents yah. Seperti ini ;

Bila new canvas dah keluar, anda pergi semula ke canvas text anda tadi, dan sebelum tu tekan pada move tool. Yang telah I bulatkan merah seperti gambar di bawah

Click kan move tool pada text anda tadi dan drag kan ke canvas transperent anda. Result akhir kelihatan seperti ini ;

Jika hendak tambah gambar, click semula pada file > open dan pilih gambar yang terdapat di folder anda. Kemudian ulang step bermula dari magic wand tool tadi sehingga step di atas ini. Result nya kelihatan seperti ini ; 

Ok, pening? Haha ada lagi weh. Sekarang I nak ajar cara-cara nak save pulak. Pergi pada file > save for web. Dan kemudian save saja !

Nak masuk kan pada blog? Masuk kan saja seperti anda masuk kan header biasa anda. Dan result akhir, seperti mana yang anda lihat di blog I ni la. !

Fuhh penat penat. Kalau ada yang pening boleh la tanya I lagi ok. Susah sangat bagi I buat kan je RM 5 je I charge. Gambar semua I boleh carikan ! Heheh :D

p/s : Belajar kena mula pelan-pelan lama-lama mesti terror :D