Membuat Animasi GIF

Ini adalah tutorial untuk membuat sebuah animasi GIF sederhana dengan menggunakan Adobe Photoshop (versi yang saya gunakan adalah CS3, tapi seharusnya untuk versi lain tidak jauh berbeda). Contoh animasi GIF yang akan dibuat adalah seperti ini:

animasi GIF

Langkah-langkahnya tidak terlalu sulit. Tetapi memang butuh pemahaman minimal dalam menggunakan tools Adobe Photoshop. Ada baiknya juga memahami konsep dasar animasi dimana gambar bergerak sebenarnya merupakan efek dari pergerakan frame yang mengandung gambar. Agak sulit dijelaskan dengan kata-kata, tapi sambil jalan pasti mengerti. Mari langsung disimak saja

1. Membuat konsep dasar
   Konsep dasar yang dimaksud disini adalah apa saja yang akan ditampilkan dalam animasi GIF dan bagaimana gambar dalam animasi akan ditampilkan secara berurutan. Sebagai contoh, pada contoh animasi GIF di atas, konsepnya adalah menampilkan kata Hello, lalu kata World, dan terakhir sebuah gambar kotak warna merah yang muncul dari kiri ke kanan. Ini konsep yang sangat sederhana.
2. Membuat setiap komponen dalam animasi
   Kalau sebelumnya kita sudah memikirkan konsep bagaimana animasi GIF kita akan berjalan, sekarang kita harus membuat seluruh komponen yang terlibat dalam animasi GIF tersebut. Tergantung kerumitan konsep dan gambarnya, bagian ini bisa jadi mudah atau sulit. Intinya, satu layer pada photoshop mewakilkan satu komponen.
   Pada contoh di atas, komponen yang perlu dibuat adalah kata Hello, kata World, dan gambar kotak merah dengan tiga posisi yang berbeda. Komponen ini dibuat berdasarkan urutan kemunculannya. Karena waktu kemunculan kata Hello dan kata World berbeda, maka saya memisahkan dua tulisan tersebut dalam dua layer yang berbeda, satu untuk Hello, satu untuk World. Untuk kotak merah, saya menggunakan gambar yang sama dengan tiga posisi berbeda (kiri, tengah, kanan) pada tiga layer berbeda. Total komponennya ada lima layer.
3. Memasukkan komponen-komponen pada layer ke dalam frame
   Pada menu bar, klik  window lalu pilih animation. Akan muncul jendela untuk mengatur frame-frame animasi. Komponen yang tadi sudah dibuat di layer harus dimasukkan ke dalam frame. Dalam satu frame bisa saja terdiri dari beberapa komponen, tergantung konsepnya. Tapi untuk memudahkan, dalam tutorial ini, satu komponen akan dimasukkan ke dalam satu frame secara berurutan mulai dari kemunculan yang pertama.

   Secara default, ketika jendela animation dibuka, seluruh komponen akan dijadikan satu. Disinilah kita harus mengatur kemunculan gambar dalam frame-frame sesuai dengan konsep yang diinginkan. Kita juga bisa menambah atau menghapus frame sesuai kebutuhan. Komponen animasi bisa ‘dimatikan’ (tidak ditampilkan di layar, tapi tidak dihapus) dengan cara mengklik gambar  yang ada pada setiap layer.
   Pada frame pertama, saya mematikan semua komponen sehingga hanya layar putih (background) yang terlihat. Pada frame kedua, saya mematikan semua komponen kecuali tulisan Hello. Pada frame ketiga, saya menambahkan komponen World. Pada frame keempat saya menambahkan komponen layer 1. Pada frame kelima, saya menambahkan komponen layer 2. Pada frame keenam, saya menambahkan komponen layer 3. Bisa dilihat, pada frame terakhir (frame 6) seluruh komponen GIF ditampilkan, dan itu adalah akhir dari animasi yang akan dibuat.

4. Mengatur looping mode dan delay (opsional)
   Looping mode bisa diatur dengan mengklik tanda panah pada tulisan Forever di pojok kiri bawah windows animasi. Forever artinya setelah animasi mencapai frame terakhir, secara otomatis ia akan kembali ke frame pertama dan mengakibatkan forever looping (berulang terus menerus tanpa akhir). Jika mode Once dipilih, maka setelah mencapai frame terakhir, animasi akan berhenti.
   

   pengaturan looping

   Angka Delay bisa diatur dengan mengklik tanda panah di bawah setiap frame (di sebelah angka sec). Secara default, angka delay diset 0 detik. Artinya, waktu perpindahan antara frame tersebut dan frame selanjutnya adalah 0 detik, atau tidak ada jeda, yang bisa mengakibatkan gambar berpindah sangat cepat. Kita bebas mengatur angka delay untuk setiap frame. Untuk contoh ini, saya mengeset perpindahan antar frame-nya seragam yaitu 1 detik agar setiap perubahannya terasa.

   

   pengaturan delay

5. Menguji animasi
   Klik tombol play di bagian bawah jendela animasi. Sekarang kita dapat melihat seperti apa animasi yang telah kita buat. Kita juga dapat kembali mengatur delay jika dirasa terlalu cepat atau terlalu lambat, menambahkan komponen lain pada setiap frame, dan sebagainya sesuai selera.
6. Save animasi dalam format GIF
   Pada menu File, pilih Save for Web and Devices. Pastikan formatnya adalah GIF. Kita juga bisa menguji animasi disini dengan menekan tombol play di sebelah kanan bawah. Setelah itu, klik Savedan tentukan direktori penyimpanan.
   

   Save for Web & Device

Nah, itu adalah langkah-langkah rinci pembuatan animasi GIF sederhana. Tidak terlalu sulit jika kita sudah kenal dengan Adobe Photoshop. Tapi bagi yang tidak familiar, sebenarnya tidak sesulit yang dibayangkan juga kok .

Kalau yang dibawah ini adalah contoh animasi GIF yang saya buat untuk tugas Sistem Multimedia:

Problem: Animasi GIF tidak bisa berjalan

Problem ini juga saya alami ketika menggunakan Windows 7 dan membuka file animasi GIF dengan Windows Photo Viewer maupun Microsoft Office Picture Manager. Setelah saya selidiki, rupanya animasi GIF tersebut memang tidak bisa dijalankan di Windows 7 dengan image viewer bawaannya. Link ini sangat membantu jika kamu tetap ingin melihat animasi itu berjalan di Windows 7 dan tanpa browser. Tapi, animasi GIF bisa berjalan dengan baik kalau dibuka dengan Windows Photo Viewer di Windows XP.

~~~

Semoga membantu!