Membuat Animasi Banner Simple dengan Adobe ImageReady



Kita
pasti udah sering melihat animasi banner yang menarik yang ada di
sidebar blog bukan?. Dan pasti, sering kita ingin juga membuat animasi
banner yang kita ingin-kan bukan?. Sebenar-nya banyak cara untuk membuat
animasi ini dengan dukungan berbagai software-sofware yang canggih
seperti Macromedia/Adobe Flash, Adobe After Effects,
dan lain sebagainya yang membutuhkan penguasaan yang lebih rumit
apalagi bagi pengguna komputer awam. Kenapa tidak menggunakan yang
sederhana tapi masih mengizinkan kita untuk berkreasi seperti Adobe ImageReady saja?.
Sebelum kita mulai membuat animasi, kita harus sedikit memahami
pengertian dari istilah-istilah yang berhubungan dengan animasi berikut
ini:

• Animasi: Pergerakan atau tampil-nya objek secara
  simultan dan berurut dari posisi yang satu ke posisi yang lain, yang
  terdiri dari urut-urutan pergerakan objek tersebut.
  
• Frame: objek tunggal dari sebuah animasi, yang akan disusun dan ditampilkan secara berurutan untuk membuat animasi
  
• Tweening: proses pembuatan frame-frame tambahan
  diantara posisi frame pertama dan posisi frame terakhir yang
  menghasilkan transisi antar frame
  

Berikut ini kita akan mencoba membuat animasi banner dengan
menggunakan Adobe ImageReady, yang biasa-nya sudah ter-install secara
default pada saat kita meng-install Adobe Photoshop pada komputer kita.
#Mempersiap-kan file original dengan Adobe Photoshop:

1. Buat file baru dengan ukuran Width 200 pixel dan Height 80 pixel
   
2. Kreasi-kan file baru tersebut sesuai dengan keinginan kita dengan
   menambah-kan latar belakang berwarna berbeda, menambahkan tulisan, bisa
   juga dengan menambahkan gambar.
   
3. Untuk contoh ini, saya menambah-kan dua layer dengan warna berbeda, layer “bg1” dengan warna #FF0000 dan layer “bg2″ dengan warna #FFF799
   
4. Kemudian, saya tambahkan dua layer Text, layer dengan tulisan “Animasi Simpel” dan layer dengan tulisan “Banner Weblog“
   
5. Terakhir, saya membuat border (optional) sebagai pelengkap saja. Gambar berikut ini menunjukkan urut-urutan layer tersebut dalam Photoshop:
   
   
   
6. Simpan-lah file yang baru saja kita buat tersebut dalam format Photoshop dengan extension .PSD, agar dapat kita import dari ImageReady. Bagi yang ingin mendownload file original yang saya buat (dalam format .PSD), bisa download disini: http://www.savefile.com/files/1130043
   

#Membuat Animasi Dengan Adobe ImageReady

1. Jalankan aplikasi ImageReady
   
2. Setelah aplikasi ini terbuka, klik pada menu [File] – [Open]
   untuk membuka file original yang telah kita buat sebelumnya pada
   Photoshop. Tampilan pada ImageReady akan seperti pada gambar berikut
   ini:
   
   
   
3. Untuk seterusnya kita akan memfokuskan pada jendela Animation untuk membuat animasi yang kita inginkan. Skenario untuk contoh ini adalah: Tulisan
   “Animasi Simpel” akan berjalan dari kiri ke kanan, kemudian tulisan
   “Banner Weblog” akan muncul dan menghilang kemudian muncul lagi,
   kemudian latar belakang layer “bg1″ akan muncul bergantian dengan latar
   belakang layer “bg2″.
   
4. Dengan jendela Animation aktif, klik pada icon [Duplicates current frame] satu kali untuk menambahkan 1 frame baru pada jendela Animation
   
   
   
5. Pengaturan Frame #1: Pada aplikasi ImageReady, klik pada frame #1 untuk mengaktifkannya dan klik pada layer text “Animasi Simpel” pada jendela layer, kemudian pada jendela Proyek geser tulisan tersebut ke kiri dengan menahan tombol Shift. Setelah itu, klik layer text “Banner Weblog” dan atur opacity-nya menjadi 0, demikian juga dengan layer “bg2” atur opacity-nya menjadi 0 pada jendela layer.
   
   
   Tampilan pada jendela Animation akan seperti pada gambar di bawah ini:
   
   
   
6. Pengaturan Frame #2: Pada aplikasi ImageReady, klik pada frame #2 untuk mengaktifkannya dan klik pada layer text “Animasi Simpel” pada jendela layer, kemudian pada jendela Proyek geser tulisan tersebut ke kanan sampai tidak kelihatan lagi dengan menahan tombol Shift. Setelah itu, klik layer text “Banner Weblog” dan atur opacity-nya menjadi 100, demikian juga dengan layer “bg2” atur opacity-nya menjadi 100, dan pada layer “bg1” atur opacity-nya menjadi 0, pada jendela layer.
   
   
   
7. Kemudian dengan frame #2 masih aktif, klik pada icon [Tweens animation frames] , untuk membuka jendela Tween, dimana kita bisa mengatur animasi dengan menambahkan beberapa frame secara otomatis diantara frame #1 dan frame #2, untuk contoh ini saya memberikan nilai 30 pada bagian [Frames to Add] untuk menambahkan 30 frame diantara frame #1 dan frame #2. Sebagai informasi, semakin
   tinggi nilai frame yang ditambahkan, maka proses pergerakan animasi
   akan semakin lambat tetapi akan semakin besar juga ukuran file
   animasinya.
   
   
   
8. Pada jendela Animation sekarang akan terdapat 32 frame (frame #1+ frame #2+ 30 frame tambahan dari tween) dan menampilkan pergerakan transisi dari frame #1 sampai pada frame #32
   
   
   
9. Selanjutnya, klik pada menu [File] – [Save Optimized As]
   untuk membuka kotak dialog penyimpanan file, dan berikan nama file-nya
   sesuai dengan keinginan kita (untuk contoh ini saya menggunakan nama
   file animasifilefinal.gif) dan pastikan kalau ekstensionnya itu .GIF
   
10. Selesai sudah, dan seterusnya kita bisa meng-upload-nya ke weblog kita. Berikut ini hasil final-nya:
    
    
    

Semoga bermanfaat, dan jangan lupa kasih Postnya y

AWAS SATPAM LEWAT