Notes

1. I don't do tutorials anymore.

2. I rarely update my blog due to my health condition.

Thanks for your concern :)

Monday, June 28, 2010

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

39 orang rasa saya gemuk tapi hot. aww:

Ikemal said... REPLY

no no no.. knapa susah2? hehe.

kan senang kalu

1. bukak photoshop

2. Klik new> plih saiz cnth 1000px x 300px

3. Tekan T(shorkey) untuk Text. dan klik kat kanvas. Taip, buah seting kat blending option. (stroke, emboss, glow, shadow n many more)

4. Letak pic ke pape ke.

5. Untick mata kat layer background yg kaler putih. (boleh gak seting masa new tadi)

6. Save as. Plih format PNG dan terus ok. (klau kuar pop up lg ok je sbb dah lupa dia tlis apa)

just sharing.. hehe

hudhud said... REPLY

@Ikemal saja sbb i rasa bersusah2 dahulu senang2 kmdn ! hahahaha poyo gila. btw thx sharing, ni org lain blh buat jgk ni :D

shima said... REPLY

i lagi cam tapandai wat huda. hehe. btw shantek blog kamo.:)

wawan said... REPLY

rajin sungguh la buat tutorial =)

syue said... REPLY

nak buat transparent header tp takde photoscape dgn photoshop. haha. tak leh nak install

hudhud said... REPLY

@shima u try la tutorial ni ok :)

hudhud said... REPLY

@wawan hehe just nak share :)

Whoda said... REPLY

huhu thanx for the tip ^^

mimi saidi said... REPLY

weh, buatkan boley.mls la..xkan 5inggit pon nk bank in kan..hehehe

Sheera Razak said... REPLY
This comment has been removed by the author.
Siti Maisarah Zulhaimi said... REPLY

nak drag tu susah la. ajaar saya?

Siti Zafira said... REPLY

Nak ucap terima kasih to Hudhud & Ikemal sebab sudi sharing useful info with us..!
You guys rawk..! Hehe..

Saya belum buat lagi pun sebenarnya but I will try. Tunggu masa lapang je ni.
Again, thanks ya Hudhud and Ikmal.

p/s: Hudhud, you ni memang bijaklah buat tutorial hebat macam ni. I kasi you dua thumbs up lah macam ni, haha.. d(^___^)b

umairaharis said... REPLY

dear upah rm5 ye??
tolong buatkan untuk i..
i topupkan/bankin kat ye..

umairaharis said... REPLY

dear i nk yg tranparent..
simple2 je.. gamba yg u rase ok i xkesa..

Qu azniza ;) said... REPLY

i dah bt tp still jd kaler putih..mcm mana nii

aina said... REPLY

cane na carik adobe photoshop uh ? :(

asfz lily said... REPLY

@Qu azniza ;)

masuk photoshop..delete background :)

asfz lily said... REPLY

nice tutorial :)

terbaek lah :)

edisi raya asfz (part 3 - jum pergi umah pengantin)

anym (: said... REPLY

sangat berguna . thanks ;D

aienlife said... REPLY

kenapa ain buad tak jadi. urm.. btw, thanks bagi totu nih.
sekurang-kurangnya ain tahu.
nak tanya bole.
u gune tamplate ape erk ?

DaWia HoNeypUtRi said... REPLY

salam..boleh ajar cemana nak delete background putih tu yang hud hud cakap pada Qu azniza?...

bungakuning . said... REPLY

thanks hud hud . banyak i belajar dari belog u. (:

CikZaty T. Dean said... REPLY

kalau xde photoscape cane?? nk guna ape buat?

misshanis said... REPLY

sy xboleh cri code header wrapper tuu.camne?

nadiah izahar said... REPLY

macam mane nak dapat kan adobe photoshop?

dalila aimy said... REPLY

adoiii ssh ! photoshop cs3 ja guna pown

nurul hafizah said... REPLY

salam,kenapa saya tarik text saya ke kanvas transparent die x kuar warna?die jd trnsparent jgk,teks saya jd garisan putus2 jer,tp x de warna

alinac lover said... REPLY

alahai bluerrr

wαnîêÿ said... REPLY

hud hud , takjumpe lgsg kod cm tuh or kod yg hmpir sme. cm ne? ;(

Ct Nhi said... REPLY

kenapa saya punyer code di edit/html x der #header-wrapper {
tuh???

sebab tuh x leh nak buat!

sweetlittlePUMPKIN said... REPLY

#header-wrapper { kod neyh tak de punn :((

Fadah said... REPLY

salam Huda...

Boleh tolong Fadah buatkan Header Transparent x?
Fadah x pandailah....

Kalo dapat text 3D layan gak...

hudhud said... REPLY

@Fadah boleh tp apa url blog u ni ? tk dpt open la

hudhud said... REPLY

@sweetlittlePUMPKIN ramai yg takde code ni, korang maybe guna template baru

pyqah said... REPLY

ak buat gne paint mcm mne ? please help me.. :)

AMIRA said... REPLY

camne nak transperant kan ,kalau dalam blogger ? macam anda punyer .

Sheda Argos ツ said... REPLY

soalan yg pelik meh kt mne nk cari pic2 yg comel tuk wat header transparent..

erleena said... REPLY

oshem :D

♥ Natasha said... REPLY

Hye kak hudhud :) Tasha dh try buat tpi bila dh drag tu , background dia still kaler putih . Although drag kat layer yg transparent . Cmna nyyy . Aiyakk , tlong ? :/

Post a Comment

Next Previous Home