Membuat animasi gambar GIF

Pernah lihat kan yang namanya gambar GIF? itu lho gambar bergerak yang biasa kita lihat di website-website sebagai banner mereka. Pasti pernah bertanya bagaimana sih cara buat tuh gambar bergerak? pasti sulit, atau butuh software khusus untuk membuat animasi GIF?

Sebenarnya ada cara mudah untuk membuatnya, yaitu dengan Adobe Image Ready, yang biasanya satu paket dengan Adobe Photoshop ketika diinstal. Prinsip kerjanya seperti sebuah film kartun, yaitu tumpukan beberapa frame, atau lebih jelasnya, kumpulan gambar-gambar yang dijalankan sehingga dapat bergerak, yah, mirip film kartun lah! Kalo pengen jelasnya lagi, ikuti tutorial singkat berikut ini.

Di sini kita akan membuat banner, untuk latihan, kita buat 3 gambar dengan ukuran panjang x lebar sama yang nantinya akan kita satukan menjadi sebuah animasi GIF. Kita bisa buat di Corel Draw atau Adobe Photoshop. Misal gambar seperti di bawah ini:

Gambar 1


Gambar 2


Gambar 3

Buka aplikasi Adobe Image Ready, lalu pilih file > open… gambar 1 , file>open… gambar 2, dan file>open…gambar 3. Sehingga kita memilik 3 jendela seperti di bawah ini:

klik gambar untuk memperbesarklik gambar untuk memperbesar

Selanjutnya kita akan membuat layer, guna layer adalah untuk menjalankan 3 gambar tersebut menjadi sebuah animasi, mari kita fokus ke jendela yang pertama, yaitu Gambar 1, klik pada windows gambar 1.

Kemudian, drag/seret gambar 2 menuju jendela gambar 1. Letakkan gambar 2 dengan benar sehingga gambar 2 menutupi gambar 1. Drag/seret juga gambar 3 menuju jendela gambar 1, dan letakkan dengan benar. Akhirnya kita mempunyai 3 buah gambar yang sudah menumpuk pada satu jendela. Jika kita lihat pada jendela layer, akan terlihat seperti di bawah ini:

Langkah selanjutnya adalah memainkan animasi, Ingat, animasi ini hanyalah permainan layer! pastikan jendela Animation sudah tampil, pilih menu Windows>Animation.

Pilih gambar yang akan kita tampilkan pada awal animasi dengan meng-klik ikon mata yang ada pada jendela layer. Tampilkan gambar 1 dengan menghilangkan ikon mata pada gambar 2 dan gambar 3 (lihat gambar di atas, yang ditandai merah)

Dan pada jendela Animation di frame pertama akan tampil gambar 1, seperti ini:

Lanjutkan dengan menambahkan frame kedua dengan mengklik Duplicates Current Frame (tanda merah pada gambar di atas!)

Hilangkan ikon mata pada gambar 1 dan gambar 3, sehingga yang tampak hanya gambar 2.

Pilih duplicates Current Frame untuk frame ketiga, dan hilangkan ikon mata pada gambar 1 dan gambar 2, sehingga yang tampak hanya gambar 3. Akhirnya pada jendela animation akan tampak seperti ini:

Jalankan dengan mengklik menu play. Jika menginginkan animasi kita berulang-ulang, ganti once (yang ditandai merah pada gambar di atas) dengan forever.. sesuai waktu yang kita inginkan. lalu play.

Animasi akan tampak kaku karena perpindahan antara gambar satu dengan yang lain tidak halus. Agar animasi nampak halus, kita dapat mengguanakan efek tween… yang terdapat pada kiri tombol duplicates Current Frame pada jendela Animation. Pilih frame 1 (gambar 1), klik Tween… , pilih tween with: next frame, lalu OK, akan muncul tambahan frame secara otomatis, ganti waktu tampil gambar 1 sesuai keinginan dengan mengklik tulisan 0 sec. dibawah gambar frame. Selanjutnya pilih frame gambar 2, lakukan seperti langkahpertama, ganti waktu tampil. Pada frame gambar 3, klik Tween… pada Tween with: First Frame, OK ganti waktu tampil. Jalankan dengan tombol Play.

Dan jadilah animasi berikut ini (waktu tampil 1 sec.)

Simpan gambar GIF dengan File > Save Optimized As… atau Ctrl+Shift+Alt+S

kita juga dapat membuat animasi warna dengan mengimpor langsung layer dalam photoshop menuju ke image ready, akan saya sambungkan ke blog tetangga, klik di sini

Selamat mencoba dengan gambar dan kreasi lainnya.

About these ads

~ by yuliadoank on July 13, 2009.

3 Responses to “Membuat animasi gambar GIF”

  1. Assalammu’alaikum wr. wb
    Salam kenal, semoga kita bisa silaturahim.

  2. Cara memasukkan photo gif ke blog

  3. sip langsung dcoba…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: