Page Rank Check
[close]

Photoshop: Animated Banner [Simple]


Hi semua, biskoot sediakan tutorial ini untuk korang hasilkan banner ringkas yang animated. Kalau nak yang lebih advanced, biskoot pun tak sampai lagi tahap tu. Kalau ada yang dah sampai tahap dewa tu, kongsi-kongsi lah di bahagian komen ni ya. Tutorial ini akan tunjukkan cara untuk menghasilkan banner ringkas beranimasi menggunakan photoshop.


1. Start dengan buka gambar yang ready-made, klik File > Open (Ctrl + O).


2. Kelima-lima banner tu biskoot buat dimensi yang serupa, so nanti takde lah tetiba ada yang kecik atau besar. Highlight semua banner korang yang nak guna, klik Open.


3. Seterusnya, window banner yang korang pilih tadi akan dibuka. Pada window banner yang last dibuka, klik Select > All (Ctrl + A).


4. Seterusnya, klik Edit > Copy (Ctrl + C).


5. Kena buat kanvas baru, klik File > New (Ctrl + N).


6. So nanti dekat Preset, dia ada tulis Clipboard. Setting semua tu akan automatik ikut dimensi apa yang korang copy tadi. Sebab tu biskoot buat semua banner sama saiz. Faham dah sekarang? klik Ok.


7. Seterusnya, klik Edit > Paste (Ctrl + V).


8. Pastu korang repeat balik dari step ke2 sampai ke7 (skip step ke5 dan ke6) untuk semua banner yang korang nak guna. Ingat, copy paste kat dalam kanvas yang baru tu.


9. Seterusnya, susun layer korang dari bawah (first) hingga keatas (last) dan hidden kan semua layer kecuali layer yang bawah sekali (Background tidak termasuk).


10. Klik pada Window > Animation.


11. Panel animation akan keluar seperti diatas.


12. Klik pada 0 sec untuk ubah masa yang dipaparkan bagi setiap slide.


13. Seterusnya, klik pada Forever/Once bawah slide pertama dan pilih Forever.


14. Klik pada Duplicate Selected Frames (biru) untuk buat slide baru.


15. Pada slide duplicate yang baru, showkan layer second yang nak dipaparkan dan hide layer pertama. Rujuk diatas.


16. Repeat step ke14 dan ke15 untuk slide-slide yang lain. Jika korang terlebih buat slide, klik ikon tong sampah (biru) untuk buang slide. Klik ikon play (pink) untuk mainkan animasi banner korang. Kalau puas  hati, teruskan step yang seterusnya.


17. Klik pada File > Save For Web & Devices (Alt + Shift + Ctrl + S).


18. Pastikan pada format (biru) & looping option (pink) sama seperti diatas.


19. Korang boleh testing power guna Internet Explorer.

Sebelum

Selepas

Tutorial ni mungkin agak payah nak faham bagi mereka yang baru kenal dengan photoshop. Jadi yang baru tu, cuba try tutorial yang lain ya. Korang boleh juga buat banner animasi menggunakan software flash, hah yang tu dah jauh dari bidang biskoot. Segala kesakitan mental yang disebabkan oleh tutorial ini, tuan blog tanak bertanggungjawab hehe. Jika korang ada pertanyaan atau pendapat mengenai tutorial ini, sila tinggalkan di bahagian komen. :)


Kongsi artikel ini dengan kawan di Facebook, tekan butang 'Like'. TQ. :)

Skip to comment form | 14 Comments:

ardinihumaira said on Wednesday, June 02, 2010

huhu... dni tak ado photoshopp... tinginnya nak guna...

DOWNLOAD NASYEED PALESTINA TERCINTA

Ed Zahid said on Wednesday, June 02, 2010

aha. pening jugak kalau org 1st time pakai PS ni.

nway. step 1-8 tu.. kalau bukak new file terus dgn size banner kita pun ok je kn? pastu paste2 jelah semua gmbr kita yg nk di combine tu dlm file br bukak tu kn?

btw. nice tutorial ;)

Zoo Melaka Edisi Ulang Tayang

Nadiah Suhaidi said on Wednesday, June 02, 2010

nice! thanks for sharing :)

'AQILAH said on Wednesday, June 02, 2010

menariknya...thanks biskot..:)

Unknown said on Wednesday, June 02, 2010

yeay pertanyaanku terjawab jua. nati nak try dulu then ty byk2. huahaha :D

Biskoot said on Wednesday, June 02, 2010

@dni - dni boleh je donlot photoshop versi portable kat internet utk tujuan pembelajaran. :)

-----------------------

@zahid - hehe, step tu mmg tak perlu pun. tapi biskoot tak expect pelawat yg masuk blog ni semua tau photoshop. mgkin sedikit sbnyak dpt membantu. :D

-----------------------

@pn.nad - sama2. ;;)

-----------------------

@aqilah - welcome. ;;)

-----------------------

@nana - ooo, cik nana la yg rekues ni. hoho. ;)

Ummi Hanie said on Wednesday, June 02, 2010

sukanya sy !

nk buat ni tp tunggu reda sikit keroje

thanx ye biskoot

dok ada photoshop tp xtau lak leh wat gini :p

chybee said on Wednesday, June 02, 2010

nice2..suke baca tutorial kt cni..nnt up lg yg best2! :)

Kyosingcat said on Saturday, June 05, 2010

Yeayy~ bestt ahh biskoot, aku pnah buat sebelum neh tp pakai software len...kire ok gak r blajar care laen plak.

hAsiFzuL said on Tuesday, June 08, 2010

wahahah,ini lah yg ku cari~

Ana Joe said on Tuesday, June 08, 2010

xp pakai photoscap pun boleh. tehee;;)

Biskoot said on Thursday, June 10, 2010

@ummi - sama2. kdg2 kita tak tau kelebihan yg kita ada. cewahh! haha.

----------------------------

@chybee - tq cik chybee. :)

----------------------------

@kyosingcat - btul2. klu xboleh cara tu kita guna cara ni. ada la juga alternatif lain kan. hehe. :D

----------------------------

@hasifzul - huhu, semoga berjaya mengikuti tutorial ini. :)

----------------------------

@ana - huhu, tak penah pun pakai photoscape. bagus la klu da tau buat yg sama guna photoscape.

Ummi Hanie said on Tuesday, December 21, 2010

biskoott...mintak tolonn...
sy tak reti nak save laaa...buat yg laen2 tu pass dah...tolonn....knape bile save xmenjadi animated nye ?? ape kekdah save nye ye?

Ummi Hanie said on Tuesday, December 21, 2010

okeh2 sy dah berjaya save dgn jayanye ! simple aje rupenye...alahaiii :)

Post a Comment

Jangan segan-segan untuk tanya soalan @ luahkan pendapat. Tuan blog ni tak makan orang. Dia makan nasi pattaya & minum air horlick je. Tinggalkan link terbaru supaya tuan blog boleh melawat semasa sesi terjahan beliau berlangsung. Gunakanlah smiley yang ada dengan serakusnya. :)

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] ~x(
:-t b-( :-L x( =))


Newer Post Older Post Home