Cara Membuat Animasi Gerak Format Gif

Ilustrasi animasi gerak 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.

Kebanyakan animasi gambar bergerak yang ada dibuat dengan format gif. Berikut adalah sedikit penjelasan mengenai gif itu sendiri.

Mengenal Gif

Struktur File

Berikut struktur file GIF

Bagian kepala (Header): Menyimpan informasi identitas file GIF (3 bytes, harus string "GIF") dan versinya (3 bytes, harus string "87a" atau "89a")
Global Screen Descriptor: Mendefinisikan logikal screen area di mana masing-masing file GIF ditampilkan.
Global Color Table: Masing-masing gambar dalam GIF dapat menggunakan global color table atau tabel warnanya sendiri-sendiri. Penggunaan GCT akan memperkecil ukuran file GIF.
gambar1, gambar2, gambar3, ... gambar-n: di mana masing-masing gambar memiliki struktur blok sendiri-sendiri dan terminator antar file.
Trailer: Akhir dari sebuah file GIF.

Gif merupakan singkatan dari kepanjangan Graphics Interchange Format. Format gambar gif merupakan salah satu format gambar yang paling banyak digunakan dalam penggunaan sebuah web design. Hal tersebut dikarenakan format gambar yang menggunakan gif memiliki sedikit kombinasi warna jika dibandingkan dengan gambar yang menggunakan format jpeg.

Tidak hanya itu, kemampuan grafisnya dalam membuat latar belakang gambar (background) secara transparan maupun digunakan dalam sebuah animasi sederhana. Itulah kelebihan gambar dengan format gif jika dibandingkan dengan gambar yang memiliki format jpeg.

Gif merupakan format gambar asli atau bitmap yang dikompres dengan menggunakan proses compuserve. Bitmap jenis gif mampu mendukung warna sebanyak 256 dan kehadiran bitmap jenis gif sangatlah banyak digunakan di dunia internet atau web.

Gambar dengan format gif hanya akan mampu menyimpan gambar dalam 8 bit dan hanya bisa digunakan untuk mode grayscal atau hitam-putih, bitmap, dan indeks warna.

Formta gif merupakan format standart yang biasa digunakan dalam dunia internet atau yang biasa digunakan dalam publikasi elektronik. Fungsi lain dari format gif adalah adanya dunkungan multiple bitmap dalam satu file. Maksudnya adalah kemampuan untuk memasukkan berbagai macam gambar yang memiliki format dasar bitmap untuk dijadikan dalam satu file. Pada akhirnya akan nampak sebagai semua animasi atau gambar bergerak karena merupakan gabungan dari beberapa gambar bitmap yang digabung menjadi satu.

Format gif juga banyak digunakan sebagai pewarna pada halaman html yang ada di internet, juga digunakan pada tag, spanduk, icon, dan masih banyak yang lainnya. Penggunaan gif juga sangat baik digunakan pada kartun karena tidak terlalu menggunakan banyak komponen warna.

Walaupun format gif banyak sekali digunakan untuk penggunaan pada web namun format gif juga memiliki nilai negatif atau kurang baik. Format gif tidak begitu baik jika digunakan untuk menampilkan sebuah foto. Hal tersebut dikarenakan foto memiliki kombinasi warna yang kompleks sedangkan gif sangat sederhana. Selain itu, gif hanya mendukung file dengan 8 bit saja dan tidak lebih seperti yang diperlukan oleh sebuah foto.

Ukuran-ukuran file yang menggunakan format gif relatif kecil jika dibandingkan dengan menggunakan jpeg atau format lainnya. Hal tersebut dikarenakan file dengan format gif menggunakan metode Lossless Compression.

Dengan metode Lossless Compression maka file yang dihasilkan dari gif akan memiliki ukuran yang sangat kecil. Lossless compression adalah proses kompresi atau pengecilan ukuran gambar yang tidak mempengaruhi kualitas pada gambar tersebut. Sehingga file dapat dikecilkan tanpa adanya pengurangan data sekecil apapun, oleh karena kualitas gambar masih bisa tetap terjaga.

Bagian File Gif

Berikut adalah beberapa bagian file gif

1. Bagian Kepala

Bagian kepala juga disebut sebagai header. Bagian ini memiliki fungsi untuk menyimpan informasi mengenai indentitas file gif

2. Global Color Table

Setiap gambar yang ada dalam sebuah file gif memiliki global color table sendiri-sendiri. Dengan menggunakan global color table maka ukuran file dari gif dapat diperkecil

3. Gambar 1, gambar 2,.....gambar n

Satu file gif mampu diisi oleh beberapa gambar. Gambar tersebut memiliki bloknya masing-masing.

4. Trailer

Trailer adalah bagian akhir dari sebuah file dengan 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?