Tutorial Photoshop - Buat Banner Animasi Untuk Blog

salam blogger kepada semua blogger semua..

hujan hujan sekarang nie bes kalau share tuto kat semua..

kali nie apit nak buat tutorial photoshop..

tuto nie untuk buat banner bagi gerak gerak..

contoh adalah seperti kat atas taw..

contoh di atas adalah yang paling simple sekali..

ada yang buat banner cantum gambar banyak banyak kan..

so banner tersebut hanya kelip kelip..

dalam tuto nie apit nak ajar untuk gerakkan object tersebut..

mari kita belajar k..yang mana dah terer tak payah la..

apit akan ajar simple dan ini hanya basic animation..

dah tahu basic, boleh explore sendiri lepas nie..

ikut step by step okay..

1. Open Adobe Photoshop..kalau tiada klik sini untuk download..

2. File > New seperti contoh di bawah..

3. Kemudian akan keluar window baru. Beri nama Banner dan tentukan width dan height yang diinginkan. Pada background contents pula terpulang mahu transparent atau tidak. Kalau mahukan seperti di atas, pilih white di situ. Contoh di bawah.

4. Kemudian akan keluar paparan saiz yang diinginkan. Kita boleh mula membuat tulisan. Pilih Text Tool yang icon berbentuk T. dan klik di paparan putih tadi dan taip.

5. So sekarang kita bagi cantik sikit tulisan itu. Right Click pada layer tulisan tadi dan pilih Blending Options. Contoh seperti di bawah okay!

6. Kemudian edit tulisan. Hanya perlu tick sahaja pada kotak kecik kecik tue. Tutorial buat text apit pernah buat. Klik sini. Contoh di bawah okay!

7. Kemudian setelah siap ejas tulisan, click OK. Tadaa..contoh di bawah. 

8. Sekarang untuk buat animation pulak. Klik Window pada menu bar dan pilih Animation. Contoh seperti di bawah ini okay!

9. Then akan keluar paparan di bawah untuk bahagian animation. Ha contoh macam kat bawah nie taw. 

10. tekan create new layer di icon bawah tue. Contoh di bawah.

11. Akan keluar dua paparan kan. okay, click pada layer pertama, di layer properties sebelah kanan pula click pada layer Text tadi then pilih icon Move Tool. Contoh di bawah. 

12. Selepas pilih Move Tool tadi, gerakkan text ke atas. terpulang kepada anda hendak gerakkan ke atas, bawah, kiri atau kanan. Jangan lupa pastikan anda click pada layer pertama. Ini permulaan animation Contoh seperti di bawah.

13. Click pada layer kedua pula dan gerakkan pula text turun ke bawah supaya ia seakan akan text menurun dari atas ke bawah. Contoh seperti di bawah.

14.  Kemudian click pula pada layer pertama tadi dan click icon tween animation frames. Ia bertujuan untuk menggerakkan taxt tersebut. Contoh seperti di bawah.

15. Kemudian keluar pop up untuk tween. boleh berapa frames yang anda mahukan. Seperti contoh ini apit pilih 15. Lagi banyak bilangan,lagi perlahan penggerakkan text tersebut. Faham kan?

16. Selepas klik OK, anda dapat melihat terdapat banyak frames di bahagian animation tersebut kan. Untuk lihat hasilnya, tekan icon PLAY di situ. Contoh seperti di bawah ini.

 

17.  Kalau nak lebih perlahan penggerakkannya, banyakkan lagi frame tadi taw. So selepas selesai, boleh la SAVE. Klik File > Save For Web and Devices > dan SAVE. Siap!

18. Di bawah ini lah hasilnya. Senang kan.

 

SELAMAT MENCUBA!

Salam by Hafizzi Aziz