Home
My Service
Sewa Iklan
Banner Exchange
Site Map
About Me
Isu
Tutorial
Agama
Sukan
Personal

Sila Klik Untuk Maklumat Lanjut

Safira Printing

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:

Taufiq Tiramisu said...

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

amny said...

wawahh..menarikk..thnx 4 sharing..^^

decrewz said...

Bro amek multimedia ke dulu?

Anonymous said...

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

Santan Berlada said...

bgus ni...
sharing is caring...^^

Aidanatasya said...

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

Nick said...

nice tutorial dude :)

Firdaus Kasim said...

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

Woofer Storm said...

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

Firdaus Kasim said...

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

red gitarputeh said...

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

http://gitarputeh.blogspot.com/

нαηιмQαtяυηηα∂α said...
This comment has been removed by the author.
нαηιмQαtяυηηα∂α said...
This comment has been removed by the author.
нαηιмQαtяυηηα∂α said...
This comment has been removed by the author.
нαηιмQαtяυηηα∂α said...

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

AdaAkuKesah said...

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

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

Anonymous said...

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

MZ said...

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

MZ said...

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

hoyahadis said...

suka photoshop...

yasmin ahmad said...

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

Dekcik said...

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

MZ said...

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/

elwenes said...

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

Firdaus Kasim said...

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

Anonymous said...

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

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

Azlan Strider said...

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-

Aidanatasya said...

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

decrewz said...

Xde pape.. Sje je tya..he3

cik azeya said...

photoshop susah T__T

sRie aRTy ! said...

awak thanks bagi link :) hee.

Azah Rahaman said...

tahniah , tuto yang terbaik .

Dear Yayah said...

T___T org buatkan jee..

anaz symbiosiss said...

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

Azah Rahaman said...

abg kena tag kat sini :

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

Unknown said...

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

Afzainizam said...

,=====,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

Zik said...

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

Firdaus Kasim said...

Afza : hehe.. header kau dah ok sgt

zik : nnti ada masa kau buat la.. hehe

EastbulletdotCom said...

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

eastbullet's blog

EastbulletdotCom said...

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

eastbullet's blog

Anonymous said...

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

Firdaus Kasim said...

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

Shah Zamri said...

mcm mane nk install new font dlm cs5 ha?

Unknown said...

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

Firdaus Kasim said...

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

Deff : welcome :)

una said...

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~~~

Anonymous said...

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

Arya Putra said...

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

Firdaus Kasim said...

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

IsyraafMel said...

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

Firdaus Kasim said...

Mel : orait :)

Fiizya Aurora said...

^_^ nk taye naper xleh save as png???

Dila Sarbini said...

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

Firdaus Kasim said...

Fiiz : awk kena save as png 24.

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

Sarah Amaline said...

Boleh tolong buatkan header tak? :D

Anonymous said...

tade care lain ke nk gune selain photoshop dgn paint ?

Firdaus Kasim said...

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

nurul : awk search gugel, taip header generator

Mohd Sazli Cikgu Autocad said...

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

Firdaus Kasim said...

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

h a n a said...

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

lepak said...

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

jaya jr said...

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

Firdaus Kasim said...

Hana : awk tau drag tu apa? hehe

Lepak : aq dah buat.. dpt x?

Jaya : sama2 bro :)

ctk said...

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

Anonymous said...

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

Ash serah said...

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

Firdaus Kasim said...

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

Choco Chocolate Pinky said...

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

Anonymous said...

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

Cik Aishah said...

:)

lina ahmad said...

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?

NSR said...

Terima kasih Terima kasih. jasamu dikenang! :P

Liena2402 said...

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

justareader said...

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

Al-Ustazah Smkts said...

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

SamsulAhmad said...

nice tuto... thanks bro.. :)

Datin Eiqa said...

tlg watkan sye nye leh x?

Datin Eiqa said...
This comment has been removed by the author.
ANIES.AYU.AYOI said...

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

Shafizza Hana said...

photoshop cs3 camne ?????????

Khairul's Diary said...

thanks . semoga di rahmati tuhan . amin ~

adiRababah said...

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

adiRababah said...

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

Lolipop Addicter said...

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

Nadia Dscarnia said...

Terima kasih kongsi Tutorial ni.. Senang faham =)

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

aizu's life said...

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

Firdaus Kasim said...

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

Unknown said...

bagusnya. . thanx sngat sangat ^_^

Anonymous said...

hi??

mira said...

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

miramohamed2207.blogspot.com

Liniey Nor said...

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

cyda said...

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

thequek said...

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

missina said...

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

maWar mErah said...

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

Unknown said...

salam..

masih ada khidmat lagi x nak buatkan header?hehe

Azizi San said...

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

keychainchomel said...

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

Anonymous said...

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

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

achik tomey said...

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

Unknown said...

Salam Lebaran,jom blogwalking....

Unknown said...

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

Related Posts Plugin for WordPress, Blogger...

Entri Rakan Blogger. Apa Yang Terbaru?

! Firdaus Kasim Hak Cipta Terpelihara.
Themes designed by Firdaus Kasim