Membuat Animasi Gif

50

Animasi gif biasanya sering kita temukan pada banner – banner iklan. Animasi digunakan untuk menarik perhatian pengunjung serta memberikan deskripsi singkat (prospekting) awal terhadap para pengunjung yang melihat iklan tersebut. Tujuan akhirnya supaya si pengunjung tersebut meng-klik iklan tersebut.

Saya belum mahir membuat animasi menggunakan Adobe flash, jadi untuk urusan banner lebih sering menggunakan animasi gif yang dibuat menggunakan Adobe ImageReady. Meski tidak menampik bahwa hasil animasi flash bisa lebih baik dan halus dengan fitur yang komplit. Tapi untuk urusan membuat banner animasi yang mudah dan cepat, ImageReady bisa diandalkan.

Mari berimaginasi

Hal pertama yang mesti dilakukan adalah membuat konsep. Jadi diperlukan sedikit imaginasi. Tentukan konten – konten yang akan ditampilkan, jumlah layer, waktu, ukuran dan desain banner.

Desain di Photoshop

Setelah konsep selesai, sekarang saatnya mulai mendesain banner – banner tersebut. Buat layer – layer yang diperlukan sesuai konsep. Sebagai contoh, saya buat 3 layer dan 1 background.

animasi giff

  • Background isi dengan warna hitam
  • Layer 1 berisi teks “Pasang iklan anda di sini
  • Layer 2 berisi teks “dilihat 200 orang perhari”
  • Layer 3 berisi teks “segera kontak kami

Ingat tulisan – tulisan tersebut disimpan dalam layer yang berbeda, lihat gambar. Setelah selesai save dengan ekstensi .psd. Misalkan iklan.psd.

Animasi-kan!

Buka file iklan.psd yang tadi kita buat di Adobe ImageReady. Pada tab frame, buat 2 duplikat sehingga totalnya menjadi 3 frame. Pada masing – masing frame atur layer – layer yang akan ditampilkan dan disembunyikan. Tentu saja sudah dipikirkan saat membuat konsep. Untuk contoh diatas, susunan layer pada tiap framenya harus seperti ini,

  • Frame 1 : Sembunyikan layer 2 dan 3
  • Frame 2 : sembunyikan layer 1 dan 3
  • Frame 3 : sembunyikan layer 1 dan 2

animasi giff image ready

Untuk cara menyembunyikan layer lihat di gambar sebelumnya. Selanjutnya beri waktu putar (timeline) pada masing – masing frame dan jangan lupa lihat preview-nya.

Setelah merasa cukup sempurna tinggal save dengan format .gif. Hasilnya akan seperti dibawah ini.

banner iklan


Untuk kasus seperti contoh diatas, animasi yang hanya menampilkan pergantian teks, sebenarnya bisa dilakukan langsung di ImageReady tanpa pengeditan awal di Photoshop. Maksud tulisan ini hanya menggambarkan bahwa alur normal untuk urusan membuat animasi .gif ini – apalagi yang komplek, biasanya melibatkan Photoshop untuk tahap awal desain dan pengeditan.

Selamat mencoba dan semoga iklannya banyak di klik pengunjung :hope:

SHARE
Previous articleSewa Domain dan Hosting murah
Next articleMembuat Drop Down Menu di WordPress
Seorang desainer sekaligus blogger dengan hobi tidur siang. Hanya belajar, belajar dan belajar.... Seperti kata naruto "Tak ada jalan pintas untuk menjadi seorang Hokage".
  • Bingung gan kalau soal bikin animasi di photoshop.

  • bingung gimana? inikan di imageReady bukan di photoshopnya.

    Terima kasih sudah berkunjung

  • Kalau untuk animasi seperti di atas bisa juga kan GAn dikerjakan di Photoshop tanpa ImageReady ? Window –> animation.

    • Terima kasih telah mengingatkan

      Sejak Adobe merilis Photoshop versi CS3, Adobe tidak lagi mengembangkan Image Ready, beberapa fiturnya dimasukkan kedalam Photoshop termasuk fitur animasi ini. Jadi untuk pengguna Photoshop CS3 keatas fitur ini bisa temukan langsung di Photoshop seperti yang Agan katakan.

      Salam

  • wah sangat bermanfaat triknya….. mo coba bikin mas….

    salam kenal

  • del

    salam sukses gan….
    makasih atas penjelasannya…luar biasa top jer….aq da buat animasi bannernya…tp aq masih kebingungan cara meng link ke web gan…mhon penjelasan…thanks gan..
    hormat saya…del

  • del

    lanjut gan…klu aq save dalam ekstensi gif…bannernya jadi dan bagus persoalan klu bannernya d klik g mau link ke web padahal aq sdh masukan data URL pada slice…klu aq save HMTL + image…banner bisa link tapi tampilan g dalam bentuk image banner yg sdh aq rancang…justru tampilanx dalam ekstensi firefox dokument…bingunggggg gan…mhon bantuan….makasih

  • Gan… bikin iklan bener ukuran besar gimana gan….?

    • kalau mau gif, caranya sama aja tekniknya. Tapi biasanya menggunakan flash. Saya belum paham main flash 😳

  • sudah pernah kucoba tp koq gagal y???
    tp coba saya ulang lagi…

  • info bermanfaat
    bisa dicoba buat iklan di web nih
    thanks gan!