Cara Cara Membuat Animasi Imej (GIF) mengikut citarasa dan kesesuaian anda, kegunaannya adalah untuk menarik perhatian pengunjung blog dengan iklan atau banner bergerak, dinamik banner, dan sebagai mempromosikan sesuatu produk, bukankah lebih interaktif ? bila kita paparkan banner atau iklan dinamik animation sedikit sebanyak akan membuatkan audien lebih tertarik dengan mesej yang cuba nak disampaikan.

Sebagai contoh, anda boleh melihat iklan iklan di bawah header blog saya, dimana iklan bergerak gerak. boleh ikuti langkah langkah mudah Cara Cara Membuat Animasi Imej yang aku sediakan dibawah ini. Harap harap dapat membantu. Aku menggunakan adobe photoshop versi CS3 untuk membuat animated banner ini, agak mudah kalau nak diikutkan dengan versi photoshop terdahulu, dimana anda perlu menggunakan adobe image ready

Untuk membuat dinamik iklan atau banner bergerak, anda perlu mahir menggunakan layer dan animation tools. Mari kita lihat cara cara membuat animated banner di bawah ini.


1) Buat design anda terlebih dahulu (sebarang saiz) dan sebagai contoh, saiz 728px x 90px (lihat gambar 1) dan save kepada format .JPEG atau .BMP (bipmap), contoh banner1.bmp , dan buat satu lagi banner 728px x 90px dan namakan sebagai banner2.bmp.

Cara Cara Membuat Animasi Imej
gambar 1
 2) Selepas melaksanakan dan membuat banner1.bmp dan banner2.bmp,  open file kedua dua fail .bmp tu ke dalam photoshop anda. (lihat gambar 2)

Bagaimana nak membina animated image
gambar 2
3) Langkah seterusnya, pergi menubar WINDOW dan tekan sekali ANIMATION untuk keluarkan animation tools frames. (lihat gambar 2)

4) Seterusnya, terpulang kepada anda untuk meletakkan image yang mana dahulu sebagai image yang pertama di paparkan (main image).

Cara Cara Membuat Animasi Imej
gambar 3
 5) Selepas anda tentukan image mana sebagai main image, tekan sekali pada image.bmp atau .jpg yang anda mahukan dan untuk melakukan animated banner atau animated gif anda perlu, tambah layer (add layer) di animation frames (lihat gambar 3-anak panah).

Cara Cara Membuat Animasi Imej
gambar 4
6) Setelah tambah layer di animation frame (lihat gambar 4), anda akan dapati paparan seperti di gambar 4 di paparkan.

Cara Cara Membuat Animasi Imej
gambar 5

Cara Cara Membuat Animasi Imej
gambar 6
 7) Di langkah ini, anda perlu tarik (drag) design image anda kedalam main image (lihat gambar 6). Ini bertujuan untuk melakukan slider animation image (layer akan wujud secara automatik).

Cara Cara Membuat Animasi Imej
gambar 7
 8) Selepas langkah 7 di lakukan, proses animated akan bermula di langkah ini, anda hanya perlu bermain dengan layer dan frame animation sahaja untuk melakukan animated image ini.

Cara Cara Membuat Animasi Imej
gambar 8
 9) Anda hanya perlu ke frame animation dan tentukan kedua dua image itu, tekan pada frame 1 di animation frame dan tutup mata di layer (photoshop), dan begitu juga di frame kedua (animation frame), tekan dan buka mata di layer photoshop, nampak tak perbezaan antara frame animation 1 dan frame animation 2? (lihat gambar 8)

Cara Cara Membuat Animasi Imej
gambar 9
10) Selepas itu, cuba main (play) kan image anda, dekan menekan butang play (A) (lihat gambar 9), dan jika ingin membuat banner atau image anda agar kelihatan soft dari segi motion, tekan (B) tween animation frames (lihat gambar 9), dan anda juga boleh tentukan masa (timing) bagi animated images anda tekan butang kecik (C) (delay time)(lihat gambar 9).

 
Cara Cara Membuat Animasi Imej
gambar 10
 11)  Di langkah ini, untuk save file animated image anda, caranya, pergi ke menu FILE dan SAVE FOR WEB & DEVICE. (lihat gambar 10)

Cara Cara Membuat Animasi Imej
gambar 11
 12) Selepas itu, anda akan dapati paparan seperti di gambar 11 di paparkan. (lihat gambar 11), namakan fail anda, dan SAVE AS TYPE pilih image only  (.gif). Siap akhirnya banner bergerak anda (animated image banner), SEMOGA BERJAYA DAN TERHIBUR untuk tutorial Cara Cara Membuat Animasi Imej 

10 Komentar

Sila gunakan bahasa dan ayat yang mudah di fahami dan sila guna nama yang sebenar, sebarang komen dari anonymous (TIDAK DI KENALI UNKNOWN atau Tanpa Nama), tidak akan di luluskan serta akan di auto remove serta merta oleh pihak penulis.

Tolong jangan meletakkan hyperlink (hidup) di ruangan komen. Untuk Mengelakkan dari Crawl Error atau Broken Link. Terima kasih, kerana memberikan pandangan, komen, kritikan dan teguran.

Akan ditambah baik dari semasa ke semasa, Terima Kasih.

  1. Ok, dah tahu. Banyak juga jalan kerjanya yer. Ish. ingat mudah jer. Hehehehe

    BalasHapus
  2. wahhhh panjang lebar..hehe..but nice sharing! ^_^

    BalasHapus
  3. pernah gak try tutorial utk adobe photoshoot ni...sampai kesudah xdpt biat..dok try tak mnjadi..lasy skali fed up malas buat...

    BalasHapus
  4. pernah gak try tutorial utk adobe photoshoot ni...sampai kesudah xdpt biat..dok try tak mnjadi..lasy skali fed up malas buat...

    BalasHapus
  5. ok.. memerlukan kesabaran yg tinggi untuk membuatnya.. =)

    zinziemeewah

    BalasHapus
  6. Power :)
    Tak semua orang boleh buat ni. ^^

    BalasHapus
  7. kalau guna photoscape agak mudah. hehe. walaupun simple habis. :)
    selalu guna photoscape je nak buat gif :)

    BalasHapus
    Balasan
    1. ana pon guna photoscape je yg pandai kikiki

      Hapus
  8. TQ bagi cara-cara nak buat ni...Nak jugak cuba 1 hari nanti...

    BalasHapus
  9. nice tutorial, tapi kak ana paling fail bab coding ni..memang tak buatlah nampaknya..:)

    BalasHapus

Posting Komentar

Sila gunakan bahasa dan ayat yang mudah di fahami dan sila guna nama yang sebenar, sebarang komen dari anonymous (TIDAK DI KENALI UNKNOWN atau Tanpa Nama), tidak akan di luluskan serta akan di auto remove serta merta oleh pihak penulis.

Tolong jangan meletakkan hyperlink (hidup) di ruangan komen. Untuk Mengelakkan dari Crawl Error atau Broken Link. Terima kasih, kerana memberikan pandangan, komen, kritikan dan teguran.

Akan ditambah baik dari semasa ke semasa, Terima Kasih.