Cara Buat Background Gambar Transparent dengan Photoshop | Miss Durian Runtuh

Dec 21, 2010

Cara Buat Background Gambar Transparent dengan Photoshop

Salam. Harini nak ajar buat background gambar transparent, bukan sahaja nak buat header, tapi boleh dipraktikkan kalau nak buat kerja sekolah yang memerlukan korang buat gambar transparent. Hei, kawan aku Fatin tnye aku di saat beliau tengah kalut buat final year project dia cam mana nak buat gambar transparent. Okey, sebenarnya kalau nak buat gambar transparent, perlu save sebagai PNG sahaja. Tapi jangan la satu gambar original save sebagai PNG tu memg penuh dengan bground, memg tak nampak la transparent dia.
1. Buka Adobe Photoshop. Aku guna Photoshop CS3 sahaja. Photoshop lain pon sama aje. Buka File --> New.

2. Then, keluar satu window macam gambar di bawah. Di bahagian Background Contents pilih Transparent. Kalau korang pilih lain, memang tak jadi 100%.


3 Kemudian, keluar la window yg menunjukkan petak-petak putih kelabu macam gambar di bawah yg belakang pelangi tu. Then, korang Open file mana-mana gambar korang nak kan untuk di jadi transparent. Aku Open file gambar pelangi. Then, click pada Lasso Tools dan right-click untuk pilih Magnetic Lasso Tools. Aku pilih Magnetic Lasso Tools untuk potong bahagian yg kita nak sahaja. Tapi better guna mouse, kalao pakai touchpad, memang parkinson korang nak buat. Bila dah guna Lasso Tools tu, korang ikut je garisan yang korang nak potong keliling gambar tu. Pastikan titik mula dan akhir adalah sama, untuk pastikan, korang akan nampak benda bulat bila korang dah jumpa pemula & pengakhir dia.


4. Bila dan jumpa pemula & pengakhir garisan potong tu, akan terbit satu garisan putus-putus keliling bahagian korang nak potong tadi.


5. Kemudian, korang cut & paste bahagian yg korang potong tadi kat background yg kita buat transparent tadi. Korang ejas-ejas sampai puas hati, taruh tulisan apa semua sampai lawa.


6. Tada, dah siap. Aku paste pelangi tadi di background transparent kita buat di step 2 tadi. Hah, kan dah siap gambar transparent. Sudah 90% tau.
 (i)Cara pertama untuk save adalah bukak File --> Pilih Save as Web and Devices.


(ii) Tekan Save. Pastikan PNG format okey.


(iii) Cara kedua untuk save adalah dengan bukak File --> Save as --> Pilih PNG format. Dah siap 100% !.


7. Ni keadaan bila dah upload sebagai header blog. Kan background die transparent. Kalau header korang format JPEG , memg background dia putih.


8. Ni keadaan bila dah jadi header blog. Tengok, kan transparent tu. Macam lawa je mate tengok kan. Yang penting, kena pastikan background mula-mula adalah transparent & bila nak save, save sebagai PNG format.

signature

26 Flowers:

♥ zuai™ ♥ said... Reply Comment

cara ni paling mudah daripada gune magic eraser :D . love this !

nabilah_2908 said... Reply Comment

sedang cuba2...dh lama nk cuba buat..tp kebanyakkan tutorial..memeningkan..thnks..!! :)

♛ Kerani Sekolah ♛ said... Reply Comment

@♥zuai minaj♥

haah, kalao pkai magic eraser, tak tepat sgt potongan die.. :)

♛ Kerani Sekolah ♛ said... Reply Comment

@nabilah_2908

same2..ada macam2 cara ikut tutorial org kan..

MK yorke said... Reply Comment

tutorial ini menjayakan aku membuat header. tq very much :) suka suka. walaupun header yg pertama kali buat tak cantik langsung :D

♛ Kerani Sekolah ♛ said... Reply Comment

@yok

YEAY, saya pon suke kalao org yg belajar jadi buat :)

takpe, asalkan paham ,lepas ni leh buat cantik lagi kan..

yana said... Reply Comment

nazirah sye nk tnye lah....sye dh transparent kan background tp bla upload dlm blog msih ada background color putih.nape yek?..

nie blog sye pinkraft.blogspot.com

♛ Kerani Sekolah ♛ said... Reply Comment

@yana

mungkin template tu bground die memg putih.. :) blog tak leh bukak la

Orang Kampung said... Reply Comment

thanks..
aku nk bljar punya pasal, download photoshop cs3 gak ni.. tapi trial..
alhamdulillah jdi.. kena buat header sokmo ni, sblum abih tempoh..

nurshaf said... Reply Comment

ye, bila letak lam blog, bc dia caler putih, saya ader ternampak seorang blogger buat tutorial ubah kod d edit html untuk tukar setting header ke transparent. header tu memang betul buat mcm akak nii....

Unknown said... Reply Comment

ssh jgk nk buat dr td x jd. mase copy n paste tu. yg di copt kertas putih jek. gmbr tu x ikut pon

ieda Qema said... Reply Comment

tutor yg sgt nice dan cumel!

Nur Syahirah binti Noor Azman said... Reply Comment

akak,nk tanye skit...nie bole x gune adobe photoshop cs5??

Nur Syahirah binti Noor Azman said... Reply Comment

akak,nk tanye skit...nie bole x gune adobe photoshop cs5??

Unknown said... Reply Comment

hehe .. terima kasih kongsi ilmu nie:)
dah lame nak cari guru ajar bnde nie .. patutlah salah .. format jpeg ..haha .. terima kasih banyak2 :)

♛ Kerani Sekolah ♛ said... Reply Comment

@Orang Kampung

hahah.pkai photoshop mane2 pon boley.cari la yg full version.kat gempak.org kot ada.

♛ Kerani Sekolah ♛ said... Reply Comment

@fiq.

yeke.akak pon xtau kalo tukar kod kat edit html.memg selama ni buat header gini je.

♛ Kerani Sekolah ♛ said... Reply Comment

@Drama Queen

cut gmbar yg kt potong tu.mesti boleh paste nye gmbar yg kt potong tu

♛ Kerani Sekolah ♛ said... Reply Comment

@Chik Nur Az

same2..bgus la kalo jadi buat.hehe.yg penting format dan latar belakang gmbar tu :)

itsmegedik said... Reply Comment

<nazirahmoktar< wah..!p sy ta pndai uap..awk ta amep upah..?ingt ma0 tempah..=)

♛ Kerani Sekolah ♛ said... Reply Comment

@itsmegedik

tak amik upah la :) xyakin nak design untuk org ..huhu..sorry

.::: Princess MOMOY :::. said... Reply Comment

comel la background ni
kat mana nak download photoshop tu
cari tak jumpa yang boleh guna
dear nnt boleh buat tuto header teinga gerak2 tu