Cara Membuat Animasi Gerak Format Gif

Pernah melihat gambar animasi gerak, kan? Pengin mencoba membuat sendiri? Tidak sulit, lho. Kita bisa memulainya dengan membuat animasi gerak gif. Maksudnya, gambar bergerak tersebut memiliki format .gif.

Animasi gerak gif cenderung mudah untuk dipelajari dan didukung dengan banyaknya software yang bisa digunakan. Kita pakai software yang paling populer saja, ya? Yakni photoshop. Tahu, kan?

Gabungan Beberapa Frame

Penasaran, kenapa sebuah gambar animasi bisa bergerak? Nggak jauh beda dengan prinsip pembuatan gambar animasi, kok! Yakni beberapa gambar yang menampilkan bagian demi bagian secara berurutan, kemudian diputar dengan cepat sehingga gambar terlihat bergerak.

Nah, dalam animasi tersebut, gerakan dibentuk dari beberapa frame berisi gambar berurut dan dibuat dengan cara menghilangkan dan memunculkan elemen-elemen tiap gambar yang dipisahkan dengan layer.

Misalnya kita akan membuat animasi berupa mobil yang melintas cepat di bawah lampu merah, maka elemen-elemen frame yang menyusunnya bisa disebutkan sebagai berikut.

• Frame: lampu merah berkedip-kedip.
• Frame: mobil melintas dengan cepat.
• Kalau mau, kita juga bisa menambahkan frame-frame lain untuk mempercantik tampilan animasi. Misalnya tulisan yang mendukung gambar, dan sebagainya.

Langkah-Langkah

Bagaimana cara membuatnya? Ikuti langkah-langkah berikut.

• Buka program Adobe Photoshop. Catatan, untuk mendukung animasi, yang dipakai adalah versi CS3 ke atas. Kalau versi sebelumnya, kita harus mengolah gambar ini pada program Adobe ImageReady. Tapi jangan khawatir, tidak ada kesulitan untuk mengonversinya, kok!

• Buka panel animasi dengan cara memilih menu di Window > Animation. Terlihat beberapa panel dengan pilihan layer, kan?

• Selanjutnya, untuk membuat animasi tahap pertama, lakukan dengan membuka tab “Layers.” Dengan cara ini, sekaligus kita menyembunyikan semua layer kecuali background. Maka akan tampil layar putih kosong tanpa elemen apa pun. Kalau kesulitan, coba lihat ke sebelah kiri, ada ikon mata, kan? Klik saja ikon itu.

• Setelah itu, kita kembali ke tab “Animation (Frames)” untuk mengatur tampilan frame pertama. Perhatikan, ada tulisan “0 seconds”, kan? Nah, klik di situ dan pilih ukuran waktu untuk frame pertama. Misalnya, 1 detik.

• Selanjutnya kita mengolah frame kedua, berupa lampu merah yang berkedip-kedip. Langkahnya tidak jauh beda dengan langkah pertama. Atur waktunya untuk mengatur berapa lama lampu ini ditampilkan. Efek lampu berkedip-kedip diatur dengan menampilkan gambar lampu dan background hitam secara berganti-ganti. Caranya, buka layer, lalu klik ikon di sebelah kiri layer.

• Langkah berikutnya dengan mengulang langkah sebelumnya untuk menampilkan efek lampu berkedip beberapa kali. Buat pula frame untuk lampu kuning agar tampak lebih bagus.

• Kalau mau, bisa ditampilkan frame berisi teks yang memperkuat gambar, misalnya bunyi: “NGUUUUNG…!!!” Caranya seperti langkah sebelumnya. Jangan lupa mengatur waktu tampilan.

• Lanjutkan dengan mengatur frame mobil. Dibutuhkan beberapa layer untuk memberi efek mobil bergerak. Duplikasi frame ini, dan atur posisi mobil, berupa posisi awal mobil muncul, dan posisi akhirnya. Atur waktu tampilan menjadi 0 detik atau ‘No delay’.    

• Gabungkan kedua frame dengan menekan dan menahan tombol shift, lalu klik kedua layernya. Setelah itu, beri efek tweening. Efek ini berfungsi memberi animasi perubahan posisi. Efek ini pada dasarnya adalah photoshop membuat beberapa frame transparansi berpola yang dibuat secara otomatis. Caranya: klik ikon tweening, dan masukkan nilai ‘Frames to Add’ untuk mengatur jumlah frame yang akan dibuat photoshop sebagai frame transparansi berpola.

• Efek cahaya mobil yang melaju kencang bisa dibuat dengan cara menurunkan capacity secara berangsur-angsur dari 100% menjadi 0%. Caranya: klik frame mobil pada awal posisi, atur capacity di layer ‘light’ pada posisi 100%. Kemudian, klik frame mobil pada posisi akhir, dan atur capacity menjadi 0%. Lakukan hal yang sama pada frame mobil di tengah posisi dengan gradasi transparansi.

• Cara yang sama digunakan untuk mengatur kemunculan teks “NGUUUUNG…!!!” yang hilang perlahan-lahan.

Setelah itu, coba klik panel “play” pada tab. Kita akan melihat animasi mobil bergerak. Bagaimana? Sudah cukup puas dengan animasi tersebut? Kita bisa mempercantik lagi dengan menambahkan elemen-elemen lain. Mengasyikkan, bukan?