Belajar Membuat Animasi GIF Menggunakan GIMP

PT - GIMP atau GNU Image Manipulation Program adalah sebuah perangkat lunak berbasis open source yang biasa digunakan untuk memanipulasi grafik berbasis raster atau bitmap. Dengan kata lain, GIMP biasanya digunakan untuk mengolah gambar atau foto agar tampilannya lebih baik dari aslinya sesuai keinginan. Bahkan dengan teknik dan fitur yang ada di GIMP, foto dapat di-retouch semenarik mungkin, atau bahkan dapat memanipulasi foto pribadi dengan layer yang ada pada GIMP.

Yang menarik dari GIMP selain dapat me-retouch grafik juga mampu membuat animasi sederhana. Ini merupakan salah satu kelebihan dari GIMP sebagai manipulation software dibandingkan software sekelasnya. Animasi yang dihasilkan berformat GIF (Graphics Interchange Format). GIF merupakan format grafis yang paling sering digunakan untuk mendisain website. Walaupun memiliki kombinasi warna yang lebih sedikit dibandingkan dengan JPEG (Joint Photographic Experts Group), tapi GIF mampu menyimpan grafis dengan latar belakang transparan ataupun dalam bentuk animasi sederhana.

Baiklah, kita akan mulai membuat sebuah animasi sederhana. Sebelum membuatnya, alangkah lebih baiknya jika kita membuat konsepnya terlebih dahulu. Konsep mengacu kepada tema animasi apa yang akan kita buat. Kali ini kita akan membuat sebuah animasi GIF bertema Linux Ubuntu 11.04 Natty Narwhal.

Setelah tahu animasi apa yang akan dibuat, baru kita siapkan bentuk pergerakan animasi dan komponen-komponen grafik yang dibutuhkan. Bentuk pergerakan animasi yang terbayangkan yaitu natty-narwhal.png yang ditumpangi manusia melewati lingkaran logo ubuntu.png. Pergerakan natty narwhal diikuti oleh tux.png dan teks ubuntu 11.04 natty narwhal yang berkedip-kedip. Nah dari bentuk pergerakan tersebut dapat kita lihat, komponen-komponen grafik apa saja yang perlu kita siapkan untuk mengisi layer sebagai frame di GIMP. Setelah itu baru kita mulai membuat animasi GIF-nya, langkah-langkahnya pembuatannya yaitu sebagai berikut :

Buka aplikasi GIMP pada Ubuntu 11.04, tampilannya seperti gambar di bawah ini.

Aplikasi GIMP di Ubuntu 11.0
Buat sebuah image baru dengan ukuran 300 x 200 pixels dengan posisi landscape. Caranya pilih menu File > New atau kombinasi tombol keyboard Ctrl + N. Simpan file dengan nama animasi-natty.xcf.

Membuat Sebuah Image Baru Berukuran 300 x 200 pixel
Setelah image baru dibuat (layer background), buka file ubuntu.png dengan cara memilih menu File > Open atau kombinasi tombol keyboard Ctrl + O. Setelah file ubuntu.png terbuka, klik kanan objek gambarnya, pilih Edit > Copy atau kombinasi tombol keyboard Ctrl C. Langkah ni dilakukan untuk menyalin objek ubuntu.png ke dalam image baru (layer background) yang telah kita buat.

Menyalin (copy) Gambar Ubuntu.png ke Image Baru
Tutup file ubuntu.png, kembali ke file image baru, lalu salin objek ubuntu ke dalam image baru (animasi-natty.xcf) dengan cara klik kanan pilih Edit > Paste atau kombinasi tombol keyboard Ctrl + V. Objek ubuntu belum sepenuhnya menjadi layer (floating selection), untuk mengubahnya menjadi sebuah layer utuh, klik kanan floating selection (pasted layer) lalu pilih New Layer. Cara lainnya yaitu dengan menekan icon pada layers.

Menambahkan Ubuntu.png sebagai Layer Baru
Agar objek ubuntu (Pasted Layer) dapat tampil seutuhnya pada layer background, maka klik Pasted Layer, pilih Scale Tool pada Toolbox atau tekan kombinasi tombol keyboard Shift + T. Lalu klik objek ubuntu, atur ukuran objek agar tampil seutuhnya, lalu klik Scale.

Mengubah Ukuran (scale) Pasted Layer (image logo ubuntu)
Atur posisi objek ubuntu (Paste Layer) pada layer Background. Untuk menggabungkan dua layer tersebut, klik kanan Pasted Layer, pilih Merge Down.

Menggabungkan Dua Layer Menjadi Satu (Merge Down)
Setelah kedua layer digabung, buatkan duplikat layer Background dengan cara klik icon duplikat. Buatlah duplikat layer background sehingga jumlahnya menjadi 5 buah layer background.

Duplikasi Layer
Ubah setiap nama layer menjadi frame. Caranya klik dua kali objek pada layer sehingga muncul kotak dialog Layer Attributes, ubah namanya sesuai dengan gambar di bawah ini.

Mengubah Nama Layer
Buatkan teks “ubuntu 11.04 natty narwhal” dengan cara klik Text Tool pada Toolbox. Klik tahan geser untuk menentukan ruang tempat text pada area kerja. Lalu muncul kotak dialog GIMP Text Editor, ketik isi teks sesuai dengan gambar di bawah ini.

Menambahkan Teks
Buatkan duplikat teksnya sebanyak 3 buah. Lalu posisikan layer teks tersebut di atas frame 1, frame 3, dan frame 5 perhatikan gambar di bawah (1). Gabungkan layer teks pertama dengan frame 1, layer teks kedua dengan frame 3, dan layer teks ketiga dengan frame 5. Perhatikan gambar (2).

Duplikasi Layer Teks
Buka file tux.png, copy-kan image tux ke dalam image natty-narwhal.xcf. Jadikan image tux menjadi layer utuh dengan mengklik icon pada Layers. Buat duplikatnya sebanyak tiga buah. Sisipkan dan pasangkan dengan frame 1, frame 3, dan frame 5. Lalu gabungkan dengan cara klik kanan image tux pada Layers, pilih Merge Down.

Menyalin Image di File tux.png ke natty-narwhal.xcf
Buka file natty.png, copy-kan image-nya ke file animasi-natty.xcf, jadikan sebagai layer utuh. Lalu buat duplikatnya sebanyak lima buah dan sisipkan diantara frame 1 sampai dengan frame 5. Setelah itu hilangkan icon gambar mata pada Lock di Layers sehingga yang aktif hanyalah Pasted Layer dan frame 1 (perhatikan gambar yang ditunjukkan oleh pointer mouse).

Menggabungkan Image dan Mengatur Layer
Pilih Pasted Layer, lalu klik image natty pada area kerja, pilih Scale Tool pada Toolbox, klik image natty sehingga muncul kotak dialog Scale, ubah ukuran Width-nya menjadi 40 pixel.

Mengatur Ukuran Salah Satu Layer Natty
Posisikan image natty ke bagian atas kanan area kerja dengan menggunakan Move Tool pada Toolbox. Gabungkan Pasted Layer dengan frame 1 dengan cara klik kanan Pated layer, lalu pilih Merge Down sehinggan hanya frame 1 saja yang aktif.

Mengatur Posisi dan Ukuran Layer
Aktifkan icon gambar mata pada bagian Lock di Layer untuk Pasted Layer Copy dan Frame 2. Hilangkan icon gambar mata untuk frame 1. Atur ukuran Pasted Layer Copy dengan Width 80, lalu posisikan image-nya seperti gambar di bawah ini. Setelah itu gabung kedua layer tersebut sehingga menjadi frame 2 saja.

Mengatur Posisi dan Ukuran Layer
Dengan cara yang sama, lakukan pada Pasted Layer Copy#1 dan frame 3 dengan ukuran Width image natty sebesar 120. Sebelum digabungkan dengan frame 3, hapus bagian image natty yang berhubungan langsung dengan image ubuntu dengan menggunakan Eraser Tool pada Toolbox (gunakan Zoom Tool pada Toolbox untuk mempermudah penghapusan), sehingga image natty tampak seperti di bagian dalam logo ubuntu. Lalu gabungkan keduanya.

Mengatur Posisi, Ukuran Layer, dan Modifikasi Image pada Layer
Dengan cara yang sama juga, lakukan pada Pasted Layer Copy#2 dengan frame 4 dengan ukuran Width image natty sebesar 160. Posisikan image natty lalu gabung kedua layer tersebut.

Mengatur Posisi, Ukuran, dan Modifikasi Image pada Layer
Dengan cara yang sama juga, lakukan pada Pasted Layer Copy#3 dengan frame 4 dengan ukuran Width image natty sebesar 200. Posisikan image natty lalu gabung kedua layer tersebut. Perhatikan hasil akhir pada Layers, terdapat lima frame yang siap dijadikan animasi GIF.

Mengatur Posisi, Ukuran, dan Modifikasi Image pada Layer
Untuk menguji animasi GIF, pilih menu Filter > Animation > Playback...

Menguji Animasi GIF
Maka akan muncul Animation Playback. Tekan tombol start playback untuk pengujian animasi.

Animation Playback
Untuk menyimpan hasilnya menjadi animasi GIF, aktifkan/kembali ke area kerja animasi-natty.xcf, save as file menjadi animasi-natty.gif.

Menyimpan File Animasi GIF
Ketika menekan tombol Save, muncul kotak dialog Export File. Untuk sesi ini pilih Save as Animation agar setiap frame yang kita buat tetap utuh dan tidak di-merge menjadi sebuah layer.

Save as Animation
Sesi berikut akan muncul jika ada layer yang ukurannya lebih besar atau di luar canvas layer sebesar 300 x 200. Untuk pilihan ini pilih Crop.

Penyesuaian Ukuran Animasi GIF dengan Memotong Bagian di Luar Layer
Sesi terakhir akan muncul kotak dialog Save as GIF. Sesi ini berisikan komentar dan perulangan pada animasi GIF. Untuk sesi ini klik Save saja.

Penambahan Komentar dan Waktu Perulangan
Jika pergerakan animasi-natty.gif dirasakan terlalu cepat, maka kecepatannya dapat diatur melalui frame. Caranya buka kembali file animasi-natty.xcf, klik dua kali frame untuk memunculkan Layer Attributes, lalu edit setiap frame dan tambahkan (200ms) untuk mengatur lamanya setiap frame muncul. Lihat hasilnya melalui Animation Playback. Setelah itu save as menjadi animasi GIF dengan nama animasi-natty-lambat.gif.

Pengaturan Waktu Kecepatan Frame Animasi
Untuk melihat hasil animasi GIF bisa melalui aplikasi Eye of Gnome, tinggal klik dua kali melaui Nautilus.

Mengecek Hasil Animasi GIF Melalui Eye of Gnome