Jom Reka Banner Animasi Anda Sendiri!

Salam semua, harap anda semua sihat dan ceria seperti selalu. Beberapa hari ini saya sibuk bereksperimen. Dan ini adalah salah satu eksperimen yang telah berjaya dihasilkan.

Ya, saya sudah tahu bagaimana untuk menghasilkan animasi pada banner. Walaupun ia memeningkan pada peringkat permulaan, ia telah menjadi mudah sebab saya telah mengulanginya berkali-kali. Anda pun boleh mencubanya juga seperti berikut:

1. Buka Adobe Photoshop (saya gunakan Adobe Photoshop CS untuk tutorial ini). Klik file> new > ubah image size. Contoh, width 450 pixels x height 100 pixels.

2. Letakkan apa-apa imej berwarna untuk layer yang paling bawah.

3. Buat beberapa layer tambahan untuk beberapa perkataan. Contoh: 1. Hi!, 2. Welcome to my blog, 3. Have a nice day dan layer ke-4. kakeru.

4. Save fail tersebut dalam format .psd.

5. Buka fail yang sama di dalam Adobe Image Ready.

6. Klik window > animation dan anda akan lihat paparan untuk setiap frame animation yang bakal kita buat.

7. First layer, sila invisible semua perkataan (klik kat gambar mata kat bahagian layer) kecuali perkataan untuk layer 1. Hi!

8. Then, klik new frame untuk frame kedua. Sila invisible kesemua perkataan kecuali untuk layer ke-2. Welcome to my blog.

9. Ulangi melakukan benda yang sama untuk layer ke-3 dan ke-4.

10. Sila setkan masa untuk setiap layer bergerak 0.2 sec ke, 1.0 sec ke…mengikut kesesuaian.

11. Klik button play untuk melihat hasil animation anda.

12. Sebelum save, sila pergi ke bahagian kanan paparan Adobe Image Ready anda. Klik bahagian Optimize dan setkan format fail kepada format .gif (GIF).

13. Klik file > Save optimized as > save. Fail anda berjaya disimpan.

Senang bukan? Harap anda semua dapat menghasilkan banner animasi anda sendiri. Semoga berjaya!

p/s: Tutorial ini hanya untuk pengguna Adobe Photoshop CS. Jika anda menggunakan Adobe Photoshop CS2 dan ke atas, plugin animation telah pun disertakan bersama. Thus, anda tidak perlu menggunakan Adobe Image Ready…lebih mudah!

Category: Banner Tutorial | Tags: , , , 28 comments »

28 Responses to “Jom Reka Banner Animasi Anda Sendiri!”

  1. aiereast
    May 15th, 2009 at 4:52 am

    Terima kasih untuk info kali nie. saya baru jer mencuba tadi, dan ianya berhasil : )

    pada peringkat permulaan, agak keliru sikit tapi lama2 tue baru lar nampak apa yang perlu buat untuk setiap langkah. macam tak percaya yang sebenarnya taklah susah sangat. sekali lagi saya ucapkan terima kasih, kakeru-san : )

    [Reply]
  2. kakeru
    May 15th, 2009 at 5:05 am

    Sama-sama aiereast,
    Mula2 memang macam tu…sengal gak saya nak mulakan. Ntah ke mana perginya function animation kat Adobe Photoshop tu. Rupa2nya kena guna Adobe ImageReady sekali sebab saya punya Adobe CS shj, takde function animation kat situ.

    Alhamdulillah dapat buat. Lepas ni mesti awak dapat buat banner yang menarik kan? Boleh buatkan saya satu, hoho.. ;)

    [Reply]
  3. aiereast
    May 15th, 2009 at 5:28 am

    hohoh….dalam versi anime camner? nanti saya fikirkan. menarik gak kalau camtu,kan? huhu~~

    [Reply]
  4. kakeru
    May 15th, 2009 at 5:41 am

    Hoho…versi anime pun bagus gak ape… Buleh arr, banner satu siapp!! ;)

    [Reply]
  5. aiereast
    May 15th, 2009 at 5:43 am

    hoho… apepon, nanti saya inform kat kakeru.hoho~~

    [Reply]
  6. drInspirasi
    May 15th, 2009 at 2:48 pm

    Baru saya tahu hendak buat banner. sebelum ni saya guna adddesigner.com je.. :-)

    [Reply]
  7. kakeru
    May 15th, 2009 at 11:39 pm

    Ok arr tu aiereast, jangan lupa eh..hoho… ;)

    Hi DrInspirasi. Dah tau rupa2nya senang je kan? Sama la kita, saya pun tak tahu dulu, terkial2… Macam2 tutorial buat banner yang saya tengok kat youtube, jumpa satu yang ok. Tapi tu pun kena try terus kat Adobe Photoshop, ada praktikal terus baru lebih faham. Betul kan? Selamat buat banner yang menarik!

    [Reply]
  8. aiereast
    May 17th, 2009 at 4:03 am

    Salam Kakeru, terima kasih sekali lagi saya ucapkan untuk artikel kali nie. banner animasi sulung saya baru sahaja dihasilkan. boleh tengok di blog saya. pasal banner tue, nanti saya bincang dengan kakeru dengan lebih lanjut : )

    [Reply]
  9. kakeru
    May 17th, 2009 at 10:56 pm

    Salam kembali aiereast,
    Lawa banner tu, menarik! Congrats buat awak gak sebab dah berjaya mempraktikkan ilmu yang tak seberapa nih. Pasal banner tu, no hal…bila2 boleh bgtau..hoho ;)

    [Reply]
  10. maza
    May 18th, 2009 at 1:31 am

    wahh… boleh cuba nie.. hehhehe

    nanti maza cuba yea.. hehehhe

    [Reply]
  11. kakeru
    May 18th, 2009 at 2:54 am

    Salam maza,
    Cuba jangan tak cuba…senang je nih.. ;)

    [Reply]
  12. aiereast
    May 18th, 2009 at 3:43 am

    hoho…. beser saja, kakeru-san : )

    [Reply]
  13. kita
    May 20th, 2009 at 11:24 am

    tq bro….tutorial yang ringkas dan mudah untuk difahami

    [Reply]
  14. mrahfa
    May 20th, 2009 at 11:57 am

    Oooo, macam tu rupanya. Bagus tutorial ni, selama ni cuma tau pakai flash aje buat banner, hari ni dapat tau photoshop dgn imageready pun bole.

    Trima kasih :-D

    [Reply]
  15. kakeru
    May 22nd, 2009 at 8:53 pm

    Salam semua,

    Hi aiereast, mana de biasa jer… Merendah diri lak aih… ;)
    Hi kita, senang je kalau dah tau cara kan? So, try jangan tak try tau!
    Hi mrahfa, sama2 kembali. Dulu saya pun tak tahu. Sama la kita ni kan? Tp skang awak pun dah tau, jadi boleh terus praktis la pasni. Boleh? :)

    [Reply]
  16. samdaddycool
    May 30th, 2009 at 12:48 am

    perghhhh rajinnya Kakeru buat tutorial… thanks.

    [Reply]
  17. kakeru
    May 30th, 2009 at 11:19 am

    Biasa jer Sam, nak tengok boleh ke org faham klu saya wat tutorial..ahaha… So, boleh faham tak klu saya wat tutorial camni?

    p/s: Mmg sengal gak la wat tutorial camnih, tapi puas hati sbb ada gak insan2 yg memahaminya dan turut mempraktiskannya. Alhamdulillah…

    [Reply]
  18. Jie
    May 30th, 2009 at 11:53 am

    owh…rasa ketinggalan..tak pernah mencuba

    walau ada keinginan…

    [Reply]
  19. kakeru
    May 30th, 2009 at 10:54 pm

    Kak Jie, try la wat sekali. Mesti seronok…cam apa yg saya rasa. At first, mmg la sengal. Tp lama2 nanti hilang la rasa sengal tu…yg penting kita cuba kan? Try ur best ya ;)

    [Reply]
  20. Airistudio Banner Animasi Pertamaku : ) Airistudio
    July 15th, 2009 at 1:20 pm

    [...] Secara peribadinya saya cukup teruja dan berpuas hati dengan hasil design banner kali ini. Bukanlah untuk membangga diri, tapi apa yang penting, kerjasama, yeh! adalah kita mempratikkan ilmu yang diterima. Malahan, distulah kita dapat melihat sejauh mana kita menghargai sesuatu ilmu itu diterima. Terima kasih saya ucapkan kepada saudari Kakeru atas perkongsian ilmu yang bagus walaupun ringkas (simple is practicable). Anda boleh melihat artikel tentang tutorial tersebut dengan klik di sini. [...]
  21. Nozi
    August 31st, 2009 at 9:58 am

    Salam,

    Nak tanya, jika saya pakai Adobe Photoshop 7 boleh ke buat ye?

    [Reply]

    kakeru Reply:
    August 31st, 2009 at 4:41 pm

    Not sure. Mcm tutorial di atas ni, saya guna Adobe CS jer, pastu kena buka Adobe Image Ready la utk sambung wat animation. Try wat dulu, klu takleh bgtau saya ya. ;)

    [Reply]
  22. Motivasi Kerja
    October 25th, 2009 at 9:56 pm

    Assalamualaikum. Terima kasih kakeru. Nak cuba skrg! :)

    [Reply]

    kakeru Reply:
    October 26th, 2009 at 1:00 am

    Salam MotivasiKerja,
    Thanks melawat ke blog ini. Boleh try skang, apa salahnya.
    Selamat Mencuba! ;)

    [Reply]
  23. Mr. Cuz
    December 3rd, 2009 at 7:38 pm

    info yang bagus untuk orang yang mcm aku bro..hehe
    mmg aku cari dh lama bende ni..wlupun aku masih kurang faham tapi aku akan mencuba cara yang ko bagi ni..hehe
    ape2 pun thanks bro..

    [Reply]

    kakeru Reply:
    December 3rd, 2009 at 10:59 pm

    Salam Mr.Cuz. Thanks kerana sudi bersinggah di sini. Semoga dapat amalkan terus ilmu ni. Dulu saya pun tak tahu, punya mencari di pelbagai info. MMg susah org nak reveal benda nih.

    Bila mula2 dapat tahu info ni, try buat. 1st time buat mmg la sengal nyer. Tapi bila dah selalu buat, Insya-Allah ok. Selamat mencuba! ;)

    [Reply]
  24. me_ma
    December 22nd, 2009 at 3:04 pm

    aduhhhhh..dh nkpc dh kple ni stu ari duk fkir n nk fham psl flash ni………

    [Reply]

    kakeru Reply:
    December 22nd, 2009 at 10:22 pm

    Salam me_ma,harap sihat. saya tak gunakan flash utk buat banner ni, guna Adobe Photoshop shj. Pening gak eh, hoho… Part mana yg pening tu? Boleh saya bantu? ;)

    [Reply]

Leave a Reply



↑ Back to top