Membuat Banner Iklan Animasi

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

Sumber :
magzimp.com

Jangan lupa baca yang ini juga

Design Grafis
Design


0 comments:

Posting Komentar

PEDOMAN KOMENTAR
Ayo berpartisipasi membangun budaya berkomentar yang baik. Pantang bagi kita memberikan komentar bermuatan menghina atau spam.
Kolom komentar tersedia untuk diskusi, berbagi ide dan pengetahuan. Hargai pembaca lain dengan berbahasa yang baik dalam berekspresi. Setialah pada topik. Jangan menyerang atau menebar kebencian terhadap suku, agama, ras, atau golongan tertentu.

Bangun sharing ilmu dengan berkomentar disini :