Thursday, 21 April 2011

Cara Buat Header Blog Guna Photoshop

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 :
  1. Memiliki perisian Adobe Photoshop. Boleh download di sini
  2. Download font kegemaran anda di sini ke dalam laptop untuk digunakan sebagai font header anda.
  3. 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.

Bolehlah share tutorial ini kepada rakan-rakan blogger di Facebook atau Twitter dengan hanya tekan butang share. Terima kasih :)

103 comments:

  1. 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 -,-

    ReplyDelete
  2. wawahh..menarikk..thnx 4 sharing..^^

    ReplyDelete
  3. Bro amek multimedia ke dulu?

    ReplyDelete
  4. Appreaciate for the work you have done into the post, it helps clear up some questions I had.

    ReplyDelete
  5. bgus ni...
    sharing is caring...^^

    ReplyDelete
  6. 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. :)

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

    ReplyDelete
  8. bro dah buat bnyk kali,tapi tak jadi2 gak ni..heheee malu den

    ReplyDelete
  9. @Woofer Storm
    aik? mcm mana x jadi pula.. dah ikut betul2 ke nie? takpe, kau datang sini, aq tunjuk depan2.. hehe

    ReplyDelete
  10. Firdaus. Tolong buat tutorial letak button share fb kat blog. nanti link kan kat aku eah.

    http://gitarputeh.blogspot.com/

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. 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..

    ReplyDelete
  15. buat header yang aku lomah ni.. aku selalu pakai paint je.. hehe..

    P/S: Woiii!! mencanak Alexa lu... rugi rugi..

    ReplyDelete
  16. owhh ni background transparent ke?? balik umah kang nk try la.. nyway thanks for sharing.. :)

    ReplyDelete
  17. wah!! anda hebat..thnx 4 sharing...tak sabar nak wat sendiri..hehehe

    ReplyDelete
  18. en FK..emok terStuck kat langkah 7 lah..bab emok guna photoshop cs4..tak de pon nk minimize tu...

    ReplyDelete
  19. baru semalam saya cari cara nak buat header. thanx so so much bro!

    ReplyDelete
  20. FK> dekcik nak download photoshop pown x lps2..rase cm tersalah download jew, bnyk sgt..

    ReplyDelete
  21. 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/

    ReplyDelete
  22. 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

    ReplyDelete
  23. 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

    ReplyDelete
  24. yay ! saya berjaya mengikuti angkah dalam tutorial anda . thankies :)

    http://jarijarihalus.blogspot.com/2011/04/yayyyy-dah-tukar-selera-baru-dahhh-d.html

    ReplyDelete
  25. 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-

    ReplyDelete
  26. dik.. akak nak tanya.. cam mana adik buat.. "paling comel" kat sidebar adik tu.. ajar kak leh?

    ReplyDelete
  27. n3 yg sgt membantu.. sy tader ps..ps blh ke dwnload kalo pkai monzila?

    ReplyDelete
  28. abg kena tag kat sini :

    http://zaza96.blogspot.com/2011/04/segmen-blog-review-pak-cek-biola.html

    ReplyDelete
  29. Thx! Sy xder header... amat berguna utk saya

    ReplyDelete
  30. ,=====,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

    ReplyDelete
  31. tutorial yang aku cari2 nih.. cayalah... aku biasa buat biasa2 jer... tak tahu nak buat transparent..

    ReplyDelete
  32. Afza : hehe.. header kau dah ok sgt

    zik : nnti ada masa kau buat la.. hehe

    ReplyDelete
  33. ini transparent ke? rasanya tak kan.. sebab layer background still wujud.. ke ini teknik baru. boleh juga aku menambah ilmu..

    eastbullet's blog

    ReplyDelete
  34. ini transparent ke? rasanya tak kan.. sebab layer background still wujud.. ke ini teknik baru. boleh juga aku menambah ilmu..

    eastbullet's blog

    ReplyDelete
  35. 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.. =)

    ReplyDelete
  36. 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

    ReplyDelete
  37. mcm mane nk install new font dlm cs5 ha?

    ReplyDelete
  38. waaa.,thanx for the tutorial... i wanna try it...heheh...

    ReplyDelete
  39. Zent, kau pergi dafont.com, lepas tue kau install.. lepas tue install lg kt laptop kau

    Deff : welcome :)

    ReplyDelete
  40. 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~~~

    ReplyDelete
  41. 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

    ReplyDelete
  42. cun bro tutor ni..
    post paling cute la tu?
    hehehe..

    ReplyDelete
  43. 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

    ReplyDelete
  44. thanx 4 tuto header :D
    FOLLOW BACK MY BLOG http://giraffeheadmel.blogspot.com/

    ReplyDelete
  45. ^_^ nk taye naper xleh save as png???

    ReplyDelete
  46. malas buat..tolong buat kan header..=D

    ReplyDelete
  47. Fiiz : awk kena save as png 24.

    candy : boleh sgt2.. bg pix dan tajuk blog ke firdauskasim89@gmail.com

    ReplyDelete
  48. Boleh tolong buatkan header tak? :D

    ReplyDelete
  49. tade care lain ke nk gune selain photoshop dgn paint ?

    ReplyDelete
  50. sarah : boleh sgt2.. hantar gambar ke firdauskasim89@gmail.com

    nurul : awk search gugel, taip header generator

    ReplyDelete
  51. waaa saya dah banyak laki try nak buat header tak reti-reti juga!;) bole tlg buatkan header?:D

    ReplyDelete
  52. @coklatberapi
    boleh je.. hantar gambar awk kt firdauskasim89@gmail.com lepas tu bgtau nk tulis apa kt header tu

    ReplyDelete
  53. huhuuuu...xdapat lah firdausss...dah try step by step..masuk langkah 9, terus xjadi dh..tulun..tulun...

    ReplyDelete
  54. malas nak buat sbb x kreatif....bleh buatkan tak?......huhuhu

    ReplyDelete
  55. terima kasih bro..dapat jugak buat header raye lepas blajar kat sini...hik3

    ReplyDelete
  56. Hana : awk tau drag tu apa? hehe

    Lepak : aq dah buat.. dpt x?

    Jaya : sama2 bro :)

    ReplyDelete
  57. firdaus,rajinnyer awk..
    sO,nak mintak tlg buatkan jugk bOley?hEhE

    ReplyDelete
  58. Thank bro...aku tak taupun boleh buat header blog guna potoshop...sgt bagus la bro ni

    ReplyDelete
  59. nak tnya ley bagi link untuk download photoshope cs5 x??? tQ :)

    ReplyDelete
  60. 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

    ReplyDelete
  61. hye!! sye dh try buat header 2..but xjdi la..mcm mna yew nk wat?? boleh tlong sye x?

    ReplyDelete
  62. rajinnye awak buat toturial.. :) suke :))

    ReplyDelete
  63. 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?

    ReplyDelete
  64. Terima kasih Terima kasih. jasamu dikenang! :P

    ReplyDelete
  65. dah try wat smpi langkah 5 pastu xdapat nk klik blending option la..adoi!!!..pliz help me..:)

    ReplyDelete
  66. HMMM... mcm mne nk downlaod adobe photoshop nie? pakai photoscape susah ar.. tolong ek?

    ReplyDelete
  67. 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..

    ReplyDelete
  68. This comment has been removed by the author.

    ReplyDelete
  69. 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.. :)

    ReplyDelete
  70. thanks . semoga di rahmati tuhan . amin ~

    ReplyDelete
  71. lol . suda sepulo kali cube tapi hape pun ta jadi . boley tak tlg buatkn header sy ?

    ReplyDelete
  72. lol . suda sepulo kali cube tapi hape pun ta jadi . boley tak tlg buatkn header sy ?

    ReplyDelete
  73. THANK YOU ! lama saya cari tutorial yg berguna macam nih . ::DDD

    ReplyDelete
  74. Terima kasih kongsi Tutorial ni.. Senang faham =)

    http://puanpanda.blogspot.com/2011/12/terima-kasih-bloggers.html

    ReplyDelete
  75. salam...
    in4 yg menarik.. thanx a lot =)
    lgkp+simple

    ReplyDelete
  76. 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

    ReplyDelete
  77. bagusnya. . thanx sngat sangat ^_^

    ReplyDelete
  78. sy dh try buat dh. tp xleh nk letak kt blog tu. mcam mane yek? btw< thanks ajarkn :)

    miramohamed2207.blogspot.com

    ReplyDelete
  79. wah..baiknya..kalau camtu boleh buatkan untuk Liniey x?plez :))kalau setuju PM me kat fb..nanti Liniey send gambar:))
    http://disiniadaceritera.blogspot.com/

    ReplyDelete
  80. minta tolonggg , dah download font yang kita nak , then macamana nak guna ? T-T

    ReplyDelete
  81. cantik blog... meh lah follow saya punya blog di http://uptownzone2.blogspot.com

    ReplyDelete
  82. tq sangatt!info yg sgt bagus,,,hasilnya akak dpt juga wat header sendri lps puas godek2,,hehe,,

    ReplyDelete
  83. nak mintak tlg buat kan boleh?
    ~newbies...

    ReplyDelete
  84. salam..

    masih ada khidmat lagi x nak buatkan header?hehe

    ReplyDelete
  85. bro..header jd..tp terlalu besar r..cmne erk nk kc ngam2 je..sy budak br belajar..hehehe..

    ReplyDelete
  86. salam bro..
    info yg sangt bermafaat utk bdk setaun jagung mcm sya ni...tq2...

    ReplyDelete
  87. Kalau xleh phm gak beli je e-panduan kt sini...duit pn bleh buat

    http://www.rahsiaphotoshop.net/index.php

    ReplyDelete
  88. salam...nice blog...jempot singgah ke blog kraftangan sy gak... www.keychainchomel.blogspot.com

    ReplyDelete
  89. Salam Lebaran,jom blogwalking....

    ReplyDelete
  90. nice tutorial firdaus. wlaupun y transprnt tp ok jgk cm gini.but blog sy x bez cm blog org lain. huhu

    ReplyDelete

Lontarkan apa sahaja yang anda ingin katakan. Saya akan membalas komen secepat mungkin. (InsyaAllah)