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 :)
103 comments:
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 -,-
wawahh..menarikk..thnx 4 sharing..^^
Bro amek multimedia ke dulu?
Appreaciate for the work you have done into the post, it helps clear up some questions I had.
bgus ni...
sharing is caring...^^
Salam dik..
nice 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 :)
Taufiq : kadang2 merapu tue la org suka taw.. nk entri serius mcm blog aq nie boring juga.. hehe
Amny : 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
@Woofer Storm
aik? 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.
http://gitarputeh.blogspot.com/
Waa dah lama cari tutorial buat background transparent untuk header.. Thanx..
Nanti 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..
P/S: Woiii!! mencanak Alexa lu... rugi rugi..
owhh ni background transparent ke?? balik umah kang nk try la.. nyway thanks for sharing.. :)
wah!! anda hebat..thnx 4 sharing...tak sabar nak wat sendiri..hehehe
en FK..emok terStuck kat langkah 7 lah..bab emok guna photoshop cs4..tak de pon nk minimize tu...
suka photoshop...
baru semalam saya cari cara nak buat header. thanx so so much bro!
FK> dekcik nak download photoshop pown x lps2..rase cm tersalah download jew, bnyk sgt..
en FK...hepi sgt!!! emok dah berjaya wat..huhuhu..walaupon guna cs4...godek2 tros dapat...lawat blog emok dgn header baru yer..huhuhu...
http://jasiera.blogspot.com/
Bagus tutorial ni bro, informatif..
Entri 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
Hanim : 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 :)
http://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
Regards,
-Strider-
dik.. akak nak tanya.. cam mana adik buat.. "paling comel" kat sidebar adik tu.. ajar kak leh?
Xde pape.. Sje je tya..he3
photoshop susah T__T
awak thanks bagi link :) hee.
tahniah , tuto yang terbaik .
T___T org buatkan jee..
n3 yg sgt membantu.. sy tader ps..ps blh ke dwnload kalo pkai monzila?
abg kena tag kat sini :
http://zaza96.blogspot.com/2011/04/segmen-blog-review-pak-cek-biola.html
Thx! Sy xder header... amat berguna utk saya
,=====,o00o Ponn..Ponn.Ponn..
//__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..
Afza : hehe.. header kau dah ok sgt
zik : 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..
eastbullet's blog
ini transparent ke? rasanya tak kan.. sebab layer background still wujud.. ke ini teknik baru. boleh juga aku menambah ilmu..
eastbullet'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.. =)
east : yup! nie akan transparent kalo dia ada background blog warna putih.. kalo nk transparent yg betul2, kau just deleta layer putih guna erasaer
Azmie : tahniah!! nnti sy komen
mcm mane nk install new font dlm cs5 ha?
waaa.,thanx for the tutorial... i wanna try it...heheh...
Zent, kau pergi dafont.com, lepas tue kau install.. lepas tue install lg kt laptop kau
Deff : 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~~~
http://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
cun bro tutor ni..
post 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
Ary : mana ada cute.. huhu
thanx 4 tuto header :D
FOLLOW BACK MY BLOG http://giraffeheadmel.blogspot.com/
Mel : orait :)
^_^ nk taye naper xleh save as png???
malas buat..tolong buat kan header..=D
Fiiz : awk kena save as png 24.
candy : boleh sgt2.. bg pix dan tajuk blog ke firdauskasim89@gmail.com
Boleh tolong buatkan header tak? :D
tade care lain ke nk gune selain photoshop dgn paint ?
sarah : boleh sgt2.. hantar gambar ke firdauskasim89@gmail.com
nurul : awk search gugel, taip header generator
waaa saya dah banyak laki try nak buat header tak reti-reti juga!;) bole tlg buatkan header?:D
@coklatberapi
boleh 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...
malas nak buat sbb x kreatif....bleh buatkan tak?......huhuhu
terima kasih bro..dapat jugak buat header raye lepas blajar kat sini...hik3
Hana : awk tau drag tu apa? hehe
Lepak : aq dah buat.. dpt x?
Jaya : sama2 bro :)
firdaus,rajinnyer awk..
sO,nak mintak tlg buatkan jugk bOley?hEhE
Thank bro...aku tak taupun boleh buat header blog guna potoshop...sgt bagus la bro ni
nak tnya ley bagi link untuk download photoshope cs5 x??? tQ :)
ctk : boleh sgt2.. just emel sy detail header yang awk nk buat
anon : 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?
rajinnye awak buat toturial.. :) suke :))
:)
saya 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?
Terima kasih Terima kasih. jasamu dikenang! :P
dah try wat smpi langkah 5 pastu xdapat nk klik blending option la..adoi!!!..pliz help me..:)
HMMM... mcm mne nk downlaod adobe photoshop nie? pakai photoscape susah ar.. tolong ek?
As'kum..saya budak baru belajar..
nak 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.. :)
tlg watkan sye nye leh x?
terima 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.. :)
photoshop cs3 camne ?????????
thanks . semoga di rahmati tuhan . amin ~
lol . suda sepulo kali cube tapi hape pun ta jadi . boley tak tlg buatkn header sy ?
lol . suda sepulo kali cube tapi hape pun ta jadi . boley tak tlg buatkn header sy ?
THANK YOU ! lama saya cari tutorial yg berguna macam nih . ::DDD
Terima kasih kongsi Tutorial ni.. Senang faham =)
http://puanpanda.blogspot.com/2011/12/terima-kasih-bloggers.html
salam...
in4 yg menarik.. thanx a lot =)
lgkp+simple
Pinky : Boleh je, sy boleh ajar awk menerusi chat Facebook.. add saya ok
Anon : 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 ^_^
hi??
sy dh try buat dh. tp xleh nk letak kt blog tu. mcam mane yek? btw< thanks ajarkn :)
miramohamed2207.blogspot.com
wah..baiknya..kalau camtu boleh buatkan untuk Liniey x?plez :))kalau setuju PM me kat fb..nanti Liniey send gambar:))
http://disiniadaceritera.blogspot.com/
minta tolonggg , dah download font yang kita nak , then macamana nak guna ? T-T
cantik blog... meh lah follow saya punya blog di http://uptownzone2.blogspot.com
tq sangatt!info yg sgt bagus,,,hasilnya akak dpt juga wat header sendri lps puas godek2,,hehe,,
nak mintak tlg buat kan boleh?
~newbies...
salam..
masih 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..
salam bro..
info 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
http://www.rahsiaphotoshop.net/index.php
salam...nice blog...jempot singgah ke blog kraftangan sy gak... www.keychainchomel.blogspot.com
Salam Lebaran,jom blogwalking....
nice tutorial firdaus. wlaupun y transprnt tp ok jgk cm gini.but blog sy x bez cm blog org lain. huhu
Post a Comment