Membuat Banner Animasi Sederhana

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.
banner1

Anda akan mendapat jendela gambar seperti ini.
banner2

4. Kita akan mengisi warna background pada bidang kosong tersebut. Pada jendela toolbox, pilih Bucket Fill Tool, dengan pilihan warna sesuai dengan keinginan anda.
banner3

5. Kembali pada jendela gambar, isilah bidang kosong tadi dengan warna pilihan anda.
banner4
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).
banner5
7. Pada jendela gambar, ketikkanlah kata-kata atau kalimat menurut keinginan anda.
banner6
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”.
banner7
9. Geser/atur posisi kata-kata anda sesuai dengan imajinasi anda.
banner8
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.
banner9
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.
banner10
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…).
banner11
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).
banner12
Jika benar, seharusnya jendela gambar anda akan nampak kembali kosong seperti ini.
banner13
14. Buatlah bagian animasi selanjutnya dengan mengulangi langkah 4 s/d 11.
banner14
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.
banner15
16.Β  Ulangi kembali langkah 4 s/d 11.
banner16
17. Jika telah berhasil membuat tiga bagian animasi, seharusnya jendela layer anda akan nampak seperti ini.
banner17
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.
banner18
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.
banner19
20. Pada kotak dialog yang muncul, pilih “Save as Animation”, lalu klik Export.

banner20
21. Pada kotak dialog selanjutnya, pilih jeda waktu animasi 2000 miliseconds, dan atur pilihan (Animation GIF Options) sebagaimana yang nampak berikut.
banner21
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!

Iklan

10 Comments Add yours

  1. Dino Cavallone berkata:

    aha…bagus ini.

    saya agak biasa menggunakan FlashMX, layer adalah frame, maka lebih jelas gerakan animasi.

    sekarang belajar GIMP, maka kena membiasakan menggunakan layer.

    Suka

  2. omcalip berkata:

    thanx. πŸ™‚
    kita memang harus membiasakan menggunakan yang legal πŸ™‚

    Suka

  3. dinapriandini berkata:

    Wah…bagus tutorialnya om….gpl gak pake lama, langsung ke TKP, http://www.dinapriandini.wordpress.com

    Suka

  4. omcalip berkata:

    tq ^ ^

    Suka

  5. Ian berkata:

    Wah…bisa.. cek langsung gih… makasih mas. Sangat bermanfaat!

    Suka

  6. omcalip berkata:

    ok paaak! makasih juga telah meninggalkan coment, sangat berarti bagi kami. hihihi…

    Suka

  7. yunitisna berkata:

    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

    Suka

  8. omcalip berkata:

    @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! πŸ™‚

    Suka

  9. faj berkata:

    Keren om ..maksih ilmunya

    Suka

  10. omcalip berkata:

    sama2. tq comennya ya πŸ™‚

    Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s