Membuat Animasi Gif

Advertisements

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:


Advertisements
Related Posts Plugin for WordPress, Blogger...
Comments
  1. danyfarid5
  2. Agito
  3. Hartoyo
    • Agito
  4. clara
  5. del
  6. del
  7. walfarizi
    • Agito
  8. said elqudsy
  9. tips photoshop

Leave a Reply

Your email address will not be published. Required fields are marked *