Jom Reka Banner Animasi Anda Sendiri!

May 14, 2009 | By kakeru | In Banner Tutorial 

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!

Tagged: , , ,

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

  1. aiereast on May 15th, 2009 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 on May 15th, 2009 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 on May 15th, 2009 5:28 am

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

    [Reply]

  4. kakeru on May 15th, 2009 5:41 am

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

    [Reply]

  5. aiereast on May 15th, 2009 5:43 am

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

    [Reply]

  6. drInspirasi on May 15th, 2009 2:48 pm

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

    [Reply]

  7. kakeru on May 15th, 2009 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 on May 17th, 2009 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 on May 17th, 2009 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 on May 18th, 2009 1:31 am

    wahh… boleh cuba nie.. hehhehe

    nanti maza cuba yea.. hehehhe

    [Reply]

  11. kakeru on May 18th, 2009 2:54 am

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

    [Reply]

  12. aiereast on May 18th, 2009 3:43 am

    hoho…. beser saja, kakeru-san : )

    [Reply]

  13. kita on May 20th, 2009 11:24 am

    tq bro….tutorial yang ringkas dan mudah untuk difahami

    [Reply]

  14. mrahfa on May 20th, 2009 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 on May 22nd, 2009 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 on May 30th, 2009 12:48 am

    perghhhh rajinnya Kakeru buat tutorial… thanks.

    [Reply]

  17. kakeru on May 30th, 2009 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 on May 30th, 2009 11:53 am

    owh…rasa ketinggalan..tak pernah mencuba

    walau ada keinginan…

    [Reply]

  19. kakeru on May 30th, 2009 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 on July 15th, 2009 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 on August 31st, 2009 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 on October 25th, 2009 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 on December 3rd, 2009 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 on December 22nd, 2009 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]

Got something to say?