Tutorial berikut adalah basic kepada sesiapa yang tak tahu buat header transparent. Anda haruslah belajar yang basic ini dahulu sebelum beralih ke cara buat header yang lebih advance. Jom buat header!! ikut step by step ya :)
Sebelum start, anda haruslah :
- Memiliki perisian Adobe Photoshop. Boleh download di sini
- Download font kegemaran anda di sini ke dalam laptop untuk digunakan sebagai font header anda.
- Anda mestilah sudah menyimpan gambar-gambar untuk dijadikan sebagai header.
Langkah 1
![]() |
| Buka Adobe Photoshop. Klik File > Open dan pilih gambar anda. Selepas itu, di bahagian kanan Adobe Photoshop, right klik pada gambar anda dan pilih Duplicate layer dan tekan OK |
Langkah 2
![]() |
| Kini ada 2 Background, sila tutup simbol mata di Background, manakala di Background copy, tidak perlu buat apa-apa |
Langkah 3
![]() |
| Di bahagian kanan, pilih Eraser Tool dan padam pada background gambar anda. Saya gemar guna "Magic Eraser Tool" sebab lebih cepat. Kalau nak guna, hanya right klik pada simbol Eraser Tool. |
Langkah 4
![]() |
| Anda boleh ubah saiz Eraser seperti yang ditunjukkan pada anak panah. |
Langkah 5
![]() |
| Selepas selesai padam, right click gambar anda dan pilih Blending Option |
Langkah 6
![]() |
| Di Blending Option, sila pilih border yang disediakan mengikut citarasa masing-masing dan klik OK |
Langkah 7
![]() |
| Selepas itu, sila minimize/restore down gambar anda tadi |
Langkah 8
![]() |
| Ok kali ini kita nak buat header pula. Klik File > New, lepas tu sila pilih tinggi dan lebar header mengikut kesesuaian blog anda. 900x300 pun sudah memadai |
Langkah 9
![]() |
| Sila klik pada page gambar yang anda padam tadi. Kemudian sila tarik (drag) gambar anda di background copy ke dalam New Header tadi. |
Langkah 10
![]() |
| Ubah saiz gambar anda dengan klik Edit > Transform > Scale |
Langkah 11
![]() |
| Ubah saiz dan ubah kedudukan gambar anda mengikut kesesuaian |
Langkah 12
![]() |
| Selepas selesai ubah saiz dan kedudukan, sila klik tanda right. |
Langkah 13
![]() |
| Selepas itu, sila tambah text dengan klik pada huruf 'T' |
Langkah 14
![]() |
| Anda boleh ubah teks seperti yang ditandakan dari segi style, saiz dan warna |
Langkah 15
![]() |
| Di bahagian kiri, right click pada teks anda dan pilih Blending Option. |
Langkah 16
![]() |
| Kalau dah puas hati, boleh lah save ya. Sila klik File > Save For Web and Devices |
Langkah 17
![]() |
| Kalau nak jadi header transparent, hanya guna Magic Eraser Tool dan padam background putih kt header tu. Anda juga boleh tambah banyak lagi imej/gambar kt header tu. Sila save as PNG 24 untuk save. |
Dah siap.. senang tak? simple je kan? anda juga boleh menambah beberapa lagi gambar atau font yang menarik dalam header. Sila klik sini untuk melihat koleksi header blog firdauskasim yang simple mimple pimple! hehe!
Apa? malas nak buat header? takpe, untuk pembaca blog firdauskasim, saya boleh buatkan header secara percuma kepada anda. Hanya hantar gambar dan nickname blog untuk dijadikan header di sini.
Untuk melihat sample dan design, sila klik sini.
Tutorial di atas hanya basic sahaja dan jika ada soalan, boleh beritahu di bahagian komen.
Apa? malas nak buat header? takpe, untuk pembaca blog firdauskasim, saya boleh buatkan header secara percuma kepada anda. Hanya hantar gambar dan nickname blog untuk dijadikan header di sini.
Untuk melihat sample dan design, sila klik sini.
Tutorial di atas hanya basic sahaja dan jika ada soalan, boleh beritahu di bahagian komen.
Bolehlah share tutorial ini kepada rakan-rakan blogger di Facebook atau Twitter dengan hanya tekan butang share. Terima kasih :)

















nice one bro..aku dah jrg buat tuto..bizi je dua menjak ni..aku asik buat entri merapu je..aduhh..bila la nak serius ni -,-
ReplyDeletewawahh..menarikk..thnx 4 sharing..^^
ReplyDeleteBro amek multimedia ke dulu?
ReplyDeleteAppreaciate for the work you have done into the post, it helps clear up some questions I had.
ReplyDeletebgus ni...
ReplyDeletesharing is caring...^^
Salam dik..
ReplyDeletenice tutorial.. lama sdh cari tutorial nie..
*berkongsi la apa yg ilmu yg kita miliki, seolah-olah kita telah memberi kebahagian kepada org lain. :)
nice tutorial dude :)
ReplyDeleteTaufiq : kadang2 merapu tue la org suka taw.. nk entri serius mcm blog aq nie boring juga.. hehe
ReplyDeleteAmny : thanks awk :)
Decrewz : aq amek bisnes la.. x de kaitan dgn multimedia pun.. huhu.. npe?
Sham : please share ya..
Kak Aida : tuto dah ada org buat cuma saya olah sikit bg senang paham.. thanks kak
Nick : terima kasih :)
bro dah buat bnyk kali,tapi tak jadi2 gak ni..heheee malu den
ReplyDelete@Woofer Storm
ReplyDeleteaik? mcm mana x jadi pula.. dah ikut betul2 ke nie? takpe, kau datang sini, aq tunjuk depan2.. hehe
Firdaus. Tolong buat tutorial letak button share fb kat blog. nanti link kan kat aku eah.
ReplyDeletehttp://gitarputeh.blogspot.com/
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteWaa dah lama cari tutorial buat background transparent untuk header.. Thanx..
ReplyDeleteNanti saya buat entry pasal reply komen tu. Kat komen ni tak nak jadi pulak, dia terus keluar link.
P/s: nak tanya, kenapa blog saya jadi 1 column ek? Padahal template saya 2 column.. Help help..
buat header yang aku lomah ni.. aku selalu pakai paint je.. hehe..
ReplyDeleteP/S: Woiii!! mencanak Alexa lu... rugi rugi..
owhh ni background transparent ke?? balik umah kang nk try la.. nyway thanks for sharing.. :)
ReplyDeletewah!! anda hebat..thnx 4 sharing...tak sabar nak wat sendiri..hehehe
ReplyDeleteen FK..emok terStuck kat langkah 7 lah..bab emok guna photoshop cs4..tak de pon nk minimize tu...
ReplyDeletesuka photoshop...
ReplyDeletebaru semalam saya cari cara nak buat header. thanx so so much bro!
ReplyDeleteFK> dekcik nak download photoshop pown x lps2..rase cm tersalah download jew, bnyk sgt..
ReplyDeleteen FK...hepi sgt!!! emok dah berjaya wat..huhuhu..walaupon guna cs4...godek2 tros dapat...lawat blog emok dgn header baru yer..huhuhu...
ReplyDeletehttp://jasiera.blogspot.com/
Bagus tutorial ni bro, informatif..
ReplyDeleteEntri tentang web firdauskasim dot com baca sini
http://wanesweb.blogspot.com/2011/04/blog-apa-yang-istimewa-di-web.html
Red : ok, nnti aq buat tutorial ya
ReplyDeleteHanim : ok awk, thanks ya.. template awk amek dari mana? kalo download free x boleh ubah width dia lorh
Aku : paint pun ok juga.. baru nmpk hasil seni lukis tangan.. hehe.. tue la pasal.. alexa aq tiba2 menurun pula.. hehe
Azmie : yup! transparent smart sikit bro.. selamat mencuba!
Jasiera : owh, nie tuto utk photoshop cs3.. ok x pew.. skang awk abaikan langkah 7.. jadi x?
Yasmin : sama2 yasmin :)
Dekcik : sy dah bg link kt facebook.. dpt x?
Jasiera : hehe! gembira sy dgr.. ok nnti sy lawat
Wanes : thanks wanes.. ok nnti aq usha
yay ! saya berjaya mengikuti angkah dalam tutorial anda . thankies :)
ReplyDeletehttp://jarijarihalus.blogspot.com/2011/04/yayyyy-dah-tukar-selera-baru-dahhh-d.html
owh..cam senang jer..aku pun xreti nak guna photoshop..boleh blajar2 pakai..hehehe..btw tau x mana nak cari serial key utk photohop CS5..aku try pakai cs3 kat umah xle laa..hehehe
ReplyDeleteRegards,
-Strider-
dik.. akak nak tanya.. cam mana adik buat.. "paling comel" kat sidebar adik tu.. ajar kak leh?
ReplyDeleteXde pape.. Sje je tya..he3
ReplyDeletephotoshop susah T__T
ReplyDeleteawak thanks bagi link :) hee.
ReplyDeletetahniah , tuto yang terbaik .
ReplyDeleteT___T org buatkan jee..
ReplyDeleten3 yg sgt membantu.. sy tader ps..ps blh ke dwnload kalo pkai monzila?
ReplyDeleteabg kena tag kat sini :
ReplyDeletehttp://zaza96.blogspot.com/2011/04/segmen-blog-review-pak-cek-biola.html
Thx! Sy xder header... amat berguna utk saya
ReplyDelete,=====,o00o Ponn..Ponn.Ponn..
ReplyDelete//__l_l_,\____\,__
l_---\_l__l---[]lllllll[]
_(o)_)__(o)_)--o-)_)___
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
" Antara kau dan aku
Blog ini sebagai pengantara”
http://firestartingautomobil.blogspot.com/
http://bukandoktorveterinar.blogspot.com/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Jom Terjah entry terbaru ??
Honda ex5 dan Honda wave
lahhhh aku baru ajer buat header baru tu... but lain kali aku nak try guna ini caralah... lagi senang rupanya tak yajh sesusah pun.... simple ajer janji senang
tutorial yang aku cari2 nih.. cayalah... aku biasa buat biasa2 jer... tak tahu nak buat transparent..
ReplyDeleteAfza : hehe.. header kau dah ok sgt
ReplyDeletezik : nnti ada masa kau buat la.. hehe
ini transparent ke? rasanya tak kan.. sebab layer background still wujud.. ke ini teknik baru. boleh juga aku menambah ilmu..
ReplyDeleteeastbullet's blog
ini transparent ke? rasanya tak kan.. sebab layer background still wujud.. ke ini teknik baru. boleh juga aku menambah ilmu..
ReplyDeleteeastbullet's blog
hohoo da try n menjadi la tp x cantik sgt.. kene praktis lagi.. thanks ya.. jemput la ke blog utk melihat hasilnya.. hhehee jgn lupe join 2nd GA.. klo menang nnti dpt potret wajah kamu.. =)
ReplyDeleteeast : yup! nie akan transparent kalo dia ada background blog warna putih.. kalo nk transparent yg betul2, kau just deleta layer putih guna erasaer
ReplyDeleteAzmie : tahniah!! nnti sy komen
mcm mane nk install new font dlm cs5 ha?
ReplyDeletewaaa.,thanx for the tutorial... i wanna try it...heheh...
ReplyDeleteZent, kau pergi dafont.com, lepas tue kau install.. lepas tue install lg kt laptop kau
ReplyDeleteDeff : welcome :)
maaf encik~~~ aaa.. una dah try dekat 4 ratus ribu kali dah~~ *tipu sikit angkanya..* tapi x boleh.. aaa.. saya guna photoshop cs4 tah benda apa tah.. dia tulis macam tue.. aaa. x boleh buat pun~~ rasa cam looser pun ada.. orng len cantek alam punya header~~ ngeee.. if u r kind enough.. tolong ajarkan boleh x? thanks~~ sori~~ ^0^ *saya menunjukkan saya sdng sngt ayu.. hahah..* mintak tolong ma~~~
ReplyDeletehttp://www.shareapic.net/content.php?id=25046166&owner=silvia282 http://www.shareapic.net/content.php?id=25046165&owner=silvia282 http://www.shareapic.net/content.php?id=25046170&owner=silvia282 http://www.shareapic.net/content.php?id=25046169&owner=silvia282 http://www.shareapic.net/content.php?id=25046168&owner=silvia282 http://www.shareapic.net/content.php?id=25046167&owner=silvia282
ReplyDeletecun bro tutor ni..
ReplyDeletepost paling cute la tu?
hehehe..
Una : hehe.. kesian awk.. takpe, sy sediakan tutorial dgn cara livechat.. awk add ym sy : pidonvirgo@yahoo.com atau chat kt fb.. add fb sy dulu
ReplyDeleteAry : mana ada cute.. huhu
thanx 4 tuto header :D
ReplyDeleteFOLLOW BACK MY BLOG http://giraffeheadmel.blogspot.com/
Mel : orait :)
ReplyDelete^_^ nk taye naper xleh save as png???
ReplyDeletemalas buat..tolong buat kan header..=D
ReplyDeleteFiiz : awk kena save as png 24.
ReplyDeletecandy : boleh sgt2.. bg pix dan tajuk blog ke firdauskasim89@gmail.com
Boleh tolong buatkan header tak? :D
ReplyDeletetade care lain ke nk gune selain photoshop dgn paint ?
ReplyDeletesarah : boleh sgt2.. hantar gambar ke firdauskasim89@gmail.com
ReplyDeletenurul : awk search gugel, taip header generator
waaa saya dah banyak laki try nak buat header tak reti-reti juga!;) bole tlg buatkan header?:D
ReplyDelete@coklatberapi
ReplyDeleteboleh je.. hantar gambar awk kt firdauskasim89@gmail.com lepas tu bgtau nk tulis apa kt header tu
huhuuuu...xdapat lah firdausss...dah try step by step..masuk langkah 9, terus xjadi dh..tulun..tulun...
ReplyDeletemalas nak buat sbb x kreatif....bleh buatkan tak?......huhuhu
ReplyDeleteterima kasih bro..dapat jugak buat header raye lepas blajar kat sini...hik3
ReplyDeleteHana : awk tau drag tu apa? hehe
ReplyDeleteLepak : aq dah buat.. dpt x?
Jaya : sama2 bro :)
firdaus,rajinnyer awk..
ReplyDeletesO,nak mintak tlg buatkan jugk bOley?hEhE
Thank bro...aku tak taupun boleh buat header blog guna potoshop...sgt bagus la bro ni
ReplyDeletenak tnya ley bagi link untuk download photoshope cs5 x??? tQ :)
ReplyDeletectk : boleh sgt2.. just emel sy detail header yang awk nk buat
ReplyDeleteanon : dgn photoshop, apa pun boleh buat .. hehe
ash : bro just google je taip free download adobe photoshop
hye!! sye dh try buat header 2..but xjdi la..mcm mna yew nk wat?? boleh tlong sye x?
ReplyDeleterajinnye awak buat toturial.. :) suke :))
ReplyDelete:)
ReplyDeletesaya ikut tutorial tuh ...jadi wat header tuh..bila nk wat kali kedua, gambar yg drag ke header tuh jd 1 warna je;cth jd warne kelabu, bukn warna asal. camne nk wat gmbr jd warne asal lik?
ReplyDeleteTerima kasih Terima kasih. jasamu dikenang! :P
ReplyDeletedah try wat smpi langkah 5 pastu xdapat nk klik blending option la..adoi!!!..pliz help me..:)
ReplyDeleteHMMM... mcm mne nk downlaod adobe photoshop nie? pakai photoscape susah ar.. tolong ek?
ReplyDeleteAs'kum..saya budak baru belajar..
ReplyDeletenak tanya yg pasal background copy dan background saje tu, mengapa satu kena buka matanye, dan satu kena tutup mata?
Apa fungsi mata tu ye?tq in advance..
nice tuto... thanks bro.. :)
ReplyDeletetlg watkan sye nye leh x?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteterima kasih...akhirnyer jumpa jugak apa yg sy cari....sy org bru dlm dunia blog ni..msh lg tercari2 n belajar..hiih..thanks for da info ye.. :)
ReplyDeletephotoshop cs3 camne ?????????
ReplyDeletethanks . semoga di rahmati tuhan . amin ~
ReplyDeletelol . suda sepulo kali cube tapi hape pun ta jadi . boley tak tlg buatkn header sy ?
ReplyDeletelol . suda sepulo kali cube tapi hape pun ta jadi . boley tak tlg buatkn header sy ?
ReplyDeleteTHANK YOU ! lama saya cari tutorial yg berguna macam nih . ::DDD
ReplyDeleteTerima kasih kongsi Tutorial ni.. Senang faham =)
ReplyDeletehttp://puanpanda.blogspot.com/2011/12/terima-kasih-bloggers.html
salam...
ReplyDeletein4 yg menarik.. thanx a lot =)
lgkp+simple
Pinky : Boleh je, sy boleh ajar awk menerusi chat Facebook.. add saya ok
ReplyDeleteAnon : hehe.. isi masa lapang
Lina : awk kena buang background
Syahidaa : sama2 awk :)
Liena : dkt header tu, awk right click dan akan keluar blending option
Ziezi : awk pergi www.filehippo.com dan search adobe photoshop
Saaleika : Mata tu lebih sebagai 'lock'. Jika awk tutup mata, dia lebih mcm awk delete item tu
Samsul : sama2 bro
Eiqa : boleh je, emel lah saya detailnya.. free je
Ayoi : hehe.. no probs
Khairul : aminn
Adi : boleh je.. emel sy ok
Loli : congrats.. hee
DS : sama2 kak :)
Aizu : thanks ya
bagusnya. . thanx sngat sangat ^_^
ReplyDeletehi??
ReplyDeletesy dh try buat dh. tp xleh nk letak kt blog tu. mcam mane yek? btw< thanks ajarkn :)
ReplyDeletemiramohamed2207.blogspot.com
wah..baiknya..kalau camtu boleh buatkan untuk Liniey x?plez :))kalau setuju PM me kat fb..nanti Liniey send gambar:))
ReplyDeletehttp://disiniadaceritera.blogspot.com/
minta tolonggg , dah download font yang kita nak , then macamana nak guna ? T-T
ReplyDeletecantik blog... meh lah follow saya punya blog di http://uptownzone2.blogspot.com
ReplyDeletetq sangatt!info yg sgt bagus,,,hasilnya akak dpt juga wat header sendri lps puas godek2,,hehe,,
ReplyDeletenak mintak tlg buat kan boleh?
ReplyDelete~newbies...
salam..
ReplyDeletemasih ada khidmat lagi x nak buatkan header?hehe
bro..header jd..tp terlalu besar r..cmne erk nk kc ngam2 je..sy budak br belajar..hehehe..
ReplyDeletesalam bro..
ReplyDeleteinfo yg sangt bermafaat utk bdk setaun jagung mcm sya ni...tq2...
Kalau xleh phm gak beli je e-panduan kt sini...duit pn bleh buat
ReplyDeletehttp://www.rahsiaphotoshop.net/index.php
salam...nice blog...jempot singgah ke blog kraftangan sy gak... www.keychainchomel.blogspot.com
ReplyDeleteSalam Lebaran,jom blogwalking....
ReplyDeletenice tutorial firdaus. wlaupun y transprnt tp ok jgk cm gini.but blog sy x bez cm blog org lain. huhu
ReplyDelete