Jika anda pernah berkunjung ke alamat beberapa web seperti detik.com, anda akan melihat beberapa banner-banner animasi yang bergerak-gerak di sekeliling situs tersebut. Nah, pada tutorial kali ini, anda bisa membuat banner animasi sederhana.
1. Bukalah aplikasi GIMP anda.
2. Pada jendela toolbox, klik File–>New.. (atau Ctrl+N).
3. Pada jendela “Create a new layer”, pilih jenis Template “Web banner common 468×60” dan pada bagian Advance Options- fill with, pilih “Transparency”. Lalu klik OK.
Anda akan mendapat jendela gambar seperti ini.
4. Kita akan mengisi warna background pada bidang kosong tersebut. Pada jendela toolbox, pilih Bucket Fill Tool, dengan pilihan warna sesuai dengan keinginan anda.
5. Kembali pada jendela gambar, isilah bidang kosong tadi dengan warna pilihan anda.
6. Sekarang kita akan menambahkan kata-kata atau kalimat. Pada jendela toolbox, pilih Text Tool, dengan jenis font, size dan warna sesuai pilihan anda (sebaiknya memilih warna yang kontras dengan warna background).
7. Pada jendela gambar, ketikkanlah kata-kata atau kalimat menurut keinginan anda.
8. Jika anda merasa posisi kata-kata anda kurang pas, anda dapat mengatur posisinya kembali dengan fungsi Move Tool. Pada jendela toolbox, pilih Move Tool dengan pilihan Tool Toggle (Shift) “Move the active layer”.
9. Geser/atur posisi kata-kata anda sesuai dengan imajinasi anda.
10. Sekarang lihatlah jendela layer anda (Ctrl+L). Pada posisi ini, seharusnya anda akan mendapatkan tampilan jendela layer seperti ini, terdapat dua layer, yakni layer background dan layer kata-kata.
11. Satukanlah kedua layer tersebut menjadi satu layer. Caranya, klik kanan layer teratas(layer kata-kata), lalu pilih “Merge Down”.
Tampilan pada jendela layer akan menyisakan satu layer, sebagaimana tampak seperti ini.
12. Sampai posisi ini, anda telah menyelesaikan satu bagian animasi. Sekarang kita akan membuat bagian animasi yang selanjutnya. Masih pada jendela layer, buatlah layer baru (klik kanan, pilih New Layer…).
13. Atur/konfigurasi tampilan pada jendela gambar, dengan mengatur icon visualisasi pada jendela layer seperti ini (sorot layer teratas (layer baru), dan aturlah sehingga hanya layer teratas yang memiliki icon mata).
Jika benar, seharusnya jendela gambar anda akan nampak kembali kosong seperti ini.
14. Buatlah bagian animasi selanjutnya dengan mengulangi langkah 4 s/d 11.
15. Jika telah berhasil membuat bagian animasi kedua tersebut, buatlah lagi bagian animasi terakhir. Pada jendela layer, tambahkanlah kembali satu layer baru, dan atur posisi sorot dan icon visualisasi seperti ini.
16. Ulangi kembali langkah 4 s/d 11.
17. Jika telah berhasil membuat tiga bagian animasi, seharusnya jendela layer anda akan nampak seperti ini.
18. Selanjutnya kita akan mengoptimalisasi ukuran dan kualitas file animasi. Pada jendela gambar, klik Filters–>Animation–>Optimize (for GIF).
Anda akan mendapatkan jendela gambar yang baru. Mulai pada posisi ini, anda hanya akan fokus pada jendela gambar yang baru ini.
19. Pada jendela gambar yang baru, simpanlah (Ctrl+S) animasi anda. Berikan nama file dan ekstensi file hanya dengan format GIF. Jangan lupa untuk mengatur folder tempat anda menyimpan file animasi anda. Jika sudah, klik Save.
20. Pada kotak dialog yang muncul, pilih “Save as Animation”, lalu klik Export.

21. Pada kotak dialog selanjutnya, pilih jeda waktu animasi 2000 miliseconds, dan atur pilihan (Animation GIF Options) sebagaimana yang nampak berikut.

Lalu Klik Save.
22. Akhirnya anda telah berhasil membuat satu banner animasi sederhana. Untuk melihat hasil kreasi anda, carilah file tersebut pada folder dimana anda telah menyimpannya, dan bukalah dengan browser (Mozilla Firefox, Opera, Internet Exploler, dll).
Mudah-mudahan, anda akan tersenyum puas melihat banner animasi buatan anda sendiri yang bergerak-gerik.
Selamat mencoba!
aha…bagus ini.
saya agak biasa menggunakan FlashMX, layer adalah frame, maka lebih jelas gerakan animasi.
sekarang belajar GIMP, maka kena membiasakan menggunakan layer.
SukaSuka
thanx. 🙂
kita memang harus membiasakan menggunakan yang legal 🙂
SukaSuka
Wah…bagus tutorialnya om….gpl gak pake lama, langsung ke TKP, http://www.dinapriandini.wordpress.com
SukaSuka
tq ^ ^
SukaSuka
Wah…bisa.. cek langsung gih… makasih mas. Sangat bermanfaat!
SukaSuka
ok paaak! makasih juga telah meninggalkan coment, sangat berarti bagi kami. hihihi…
SukaSuka
mas mau tanya dong… kalau yang tutorialnya ini kan buat 1 banner itu cuma satu link. Bisa ga ya satu banner (misalnya ada 3 gambar) untuk 3 link? setiap slidenya ke link yang berbeda. thxs
SukaSuka
@yunitista: maap baru balas. iya nih, yg aku bikin itu cuman bisa untuk satu link. belum kebayang cara nya klo bisa dibikinin 3 link. chalanging, makasih ya! 🙂
SukaSuka
Keren om ..maksih ilmunya
SukaSuka
sama2. tq comennya ya 🙂
SukaSuka