Monday, December 10, 2007

Cara Bikin Animasi GIF dengan Adobe ImageReady

Page copy protected against web site content infringement by Copyscape

Udah pada tau format file GIF kan ? GIF (Graphics Interchange Format) adalah salah satu format gambar yg paling populer penggunaannya di dunia, terutama dalam dunia internet. Pasalnya, ukuran file dengan format GIF termasuk mini bila dibandingkan dengan format file lainnya seperti JPEG atau BMP, tentu saja dengan mengorbankan kualitas gambar yg dihasilkan. Salah satu kelebihan lain dari format GIF adalah kemampuannya untuk menghasilkan animasi gambar, walaupun dengan kualitas lumayan rendah.

File-file animasi GIF biasanya banyak ditemui di forum-forum internet dalam bentuk avatar yg menyatakan representasi pengguna dalam bentuk grafis. Kasarnya, avatar dipakai sebagai "foto" pengenal untuk pengguna (user) dalam suatu forum. Banyak yg menggunakan file gambar dengan format GIF untuk dijadikan avatar tadi, alasannya ya karena file GIF bisa dibuat animasi, sehingga seolah-olah si user terlihat lebih "keren" di forum tersebut (... walaupun kenyataannya avatar juga bisa digunakan untuk menipu pengguna lainnya emoticon).

Terus bagaimana caranya bikin file animasi GIF ? Ada banyak cara, tentunya dengan menggunakan software khusus. Sekarang persoalannya, pake software yg mana ? Nah, khusus untuk masalah pemilihan software, ada baiknya anda berhati-hati. Umumnya, karena nggak tau, orang langsung buka Google untuk mencari software-software yg bisa membuat animasi GIF. Sayangnya, kebanyakan yg muncul di halaman pertama adalah software-software "asing" alias nggak terlalu terkenal di kalangan pengguna PC, udah gitu banyak yg minta bayaran alias nggak free.

Kali ini saya mau berbagi sedikit pengetahuan untuk membuat animasi GIF dengan menggunakan software yg seharusnya nggak asing lagi di telinga para pengguna PC, Adobe ImageReady. Kalo anda pernah install Adobe Photoshop di PC anda, seharusnya Adobe ImageReady juga ikut terinstall bersamanya. Walaupun tidak memiliki fitur sekaya Photoshop, ImageReady sangat cocok bila anda ingin melakukan penyuntingan gambar secara cepat, khususnya untuk gambar-gambar yg biasanya ditampilkan di halaman web, termasuk membuat animasi GIF.

Sebelum membuat animasi, anda harus sudah menyiapkan gambar dengan format GIF, minimal 2 gambar. Kalo ada gambar yg sama dan memang terlihat "berurutan" bakal lebih bagus lagi. Kalo emang beda gambar juga nggak apa-apa, yg penting ukurannya harus sama, misal keduanya punya ukuran 200x200 pixel. Berikutnya langkah-langkahnya :

1. Jalankan Adobe ImageReady. Lalu buka file-file yg mau dibuat animasi.

Buka semua file yg mau dibuat animasi 

2. Pilih (klik) jendela gambar yg akan dijadikan klip awal dari animasi (istilah kerennya Starting Frame). Gambar ini akan dijadikan gambar yg pertama kali ditampilkan dalam animasi. Semua proses editing juga akan dilakukan pada jendela gambar ini.

3. Setelah gambar pertama dipilih, klik dua kali Layer gambar tersebut pada palet layer (palet layer biasanya terletak di sebelah kanan bawah workframe). Ganti nama layer dengan nama yg mudah diingat. Misalnya untuk Starting Frame, tulis saja namanya Gambar1.

Ganti nama starting frame layer. Toolbox

4. Pilih (klik) jendela gambar kedua (urutan kedua animasi). Lalu pada toolbox (biasanya di sebelah kiri workframe), pilih Move Tool, lalu klik dan seret gambar kedua ke atas jendela gambar pertama. Kalo anda melakukannya dengan benar, di palet layer gambar pertama akan muncul layer baru yg berisi gambar kedua. Atur posisi layer untuk gambar kedua di atas layer gambar pertama (kalo dibawah gambar pertama, ntar animasinya jadi terbalik urutannya). Ganti nama layer untuk gambar kedua menjadi Gambar2 (lihat langkah 3).

Taruh layer baru di atas layer sebelumnya. 

5. Kalo anda punya lebih dari dua gambar, lakukan hal yg sama dengan gambar-gambar berikutnya seperti pada langkah 4. Jadi, gambar ketiga diseret ke gambar pertama, lalu posisikan layer untuk gambar ketiga di atas layer gambar kedua. Jadi ntar urutan layer di gambar pertama (dari bawah) menjadi : Gambar1, Gambar2, Gambar3 dst. Ingat. Jendela gambar aktif harus tetap gambar pertama. Setelah anda memindahkan gambar-gambar lain ke jendela gambar pertama, anda bisa menutup jendela untuk gambar yg lain, seperti gambar ke dua, ketiga dst.

6. Pada palet Animation (Kalo nggak ada, pada menu pilih Window -> Animation untuk menampilkan palet Animation), klik submenu (yg seperti tanda panah ke kanan). Di submenu pilih, Make Frames Form Layers. Bila anda melakukannya dengan benar, layer-layer pada gambar pertama akan dipindahkan ke palete Animation.

Buat animasi dari layer 

7. Dibagian bawah tiap frame akan nampak timing dari tiap gambar. Ubahlah tiap frame sesuai selera anda, dengan mengklik tanda panah bawah. Misalnya timingnya menjadi 1 detik untuk tiap frame, artinya tiap gambar akan ditampilkan secara berurutan setiap 1 detik. Anda juga bisa menguji animasi dengan mengklik tombol Play di bagian bawah palet Animation. Jangan lupa, di kiri bawah palet Animation, ganti Once dengan Forever supaya animasinya bisa diulang setelah selesai.

 

8. Setelah anda mengatur timing tiap frame, simpan animasi tersebut dengan mengklik menu File -> Save Optimized As. Tulis nama file GIF yg anda inginkan.

 

Di atas adalah contoh animasi GIF yg saya buat dari citra radar dengan menggunakan 10 gambar dasar GIF. Selamat mencoba emoticon.

56 comments:

  1. lah... ini yg saya cari... thx om atas tutorialnya.. sep dah...

    ReplyDelete
  2. @fajar : Makasih jg sudah mampir :)

    ReplyDelete
  3. mas gmbna cranya upload web di blogspot

    ReplyDelete
  4. Wkt muw d save, kuQ kata nya JPEG bla bla not supported.. T__T
    padahal udah seneng2.. hix..
    TqU anyway.. ^^

    ReplyDelete
  5. Wkt muw d save, kuQ kata nya JPEG bla bla not supported.. T__T
    padahal udah seneng2.. hix..
    TqU anyway.. ^^

    ReplyDelete
  6. Wkt muw d save, kuQ kata nya JPEG bla bla not supported.. T__T
    padahal udah seneng2.. hix..
    TqU anyway.. ^^

    ReplyDelete
  7. @ ^^ : Di menu pilih 'Window', terus liat, kasih tanda centang di 'Optimize' (kalo blom ada tanda centangnya). Kalo udah, di palet Optimize, dibagian settings, pilih GIF (dither/no dither). Kalo udah, coba save optimize as lg, ntar pasti udah bisa di save sebagai GIF. Cobain deh.

    ReplyDelete
  8. Aduh kk ribet amat kan katro jadinya kan aq gak ngerti pake bahasa planet donk jangan pake bahasa manusia OK !!!!!!

    ReplyDelete
  9. wah suwun mas, aku sudah lama pingin belajar bikin gambar dengan format gif. tutorial yang dijual jarang ada yang membahas masalah ini. mingkin dianggap remeh kali ya... yang lebih mengagetkan sofwarenya sudah ada di komputerku sejak dulu, karena aku sangat suka otak-atik gabar dengan adobe photoshop. suwun bos!

    ReplyDelete
  10. @ Yoyok : Trims kembali :)

    ReplyDelete
  11. sip tutorialnya mantap... thx anyway

    ReplyDelete
  12. Keren... Udah lama cari-cari info kaya gini. Thanks buanget ya (om). Oiya nih kutinggalin bonus :
    "Rahasia Tersembunyi Metode Mencari Uang di Internet Akhirnya Diungkap..." Lebih lanjut, klik http://www.formulabisnis.com/?id=shey

    ReplyDelete
  13. Bagus, penjelasannya mudah dipahami. Semoga saya bisa menerapkannya. Thanks.

    ReplyDelete
  14. @ syamsu, Shemma & Olala : Thanx kembali :)

    ReplyDelete
  15. makasi bror,gw selama ini bikin animasi gif ga tau cara atur timing hohoho......tq bgtyah

    ReplyDelete
  16. Wah trnyta bikin animasi gmpank ya, pa lg skrg aku dah punya punya aplikasi java yg bsa bikin animasi, jdi bsa bkn animasi langsung di hp (Sony Ericson), mklum Aq gak pnya komptr, klo mau nma aplikasinya 'PaintCAD' bisa didwnlod gratis di www.Getjar.com atawa www.mobile9.com.

    ReplyDelete
  17. Thank's yha ardhi, saya mau coba dulu cek ke tkp.

    Ardhi Says :
    "Thanx kembali :) "

    ReplyDelete
  18. KEnapa aku nggak bisa nge-save pake save optimized as ya? Kenapa jadinya malah jpg bukan gif? Jadi nggak gerak deh

    ReplyDelete
  19. makasih ya tutornya..... jd pingin cepet bisa nih...

    ReplyDelete
  20. Ok thanks bro buat ilmunya.......

    ReplyDelete
  21. koq uda di save k format .gif malah tetap ga bisa gerak yaa?
    ada apakah itu? >.

    ReplyDelete
  22. thanks banget mas, emang topik ini yang lagi aku cari2. ajarin buat tombol bergerak dengan javascript bisa gak? thanks

    ReplyDelete
  23. wah sangat membantu mas...
    thanks banget ya...sukses selalu..

    ReplyDelete
  24. uuuh .... mo coba ach... biznya gw lom p'nah coba bikin
    animasi GIF. do'akan gw yupz biar berhasil ...

    ReplyDelete
  25. aq mau tnya ne cra bwt animasi tntang moral sosial gmna crax ya??

    sbgai cntohx animasi buanglah smpah pda tempatx....

    ReplyDelete
  26. ikak nhe asak d pade org tua ngelawan
    hahaay......

    ReplyDelete
  27. gw baru bikin blog dihosting nih coba teman2 kasih kritik dan sarannya dunk, langsung aja ke www.asep09.co.cc
    solae gw masih pemula.

    ReplyDelete
  28. langsung tak COpas ini tutorialnya
    membantu banget
    ntar langsung praktek ah
    abiesnya aku pengenn bisa banget buat gambar animasi GIF
    ^_^
    makasie ya INPHONYA Mas
    very USEFULL

    ReplyDelete
  29. klo berkunjung jangan lp tinggalkan komentar yaaa...www.asep09.co.cc

    ReplyDelete
  30. thanks banget atas info nya

    ReplyDelete
  31. AKHIRNYA......
    udah lama nie nyari yang beginian...
    tx ya bang info'e....
    moga blog'e makin rame pengunjung!!!
    SIFFF...

    ReplyDelete
  32. makasih ya,tapi pas saya mau save,munculnya cuman jpg?
    gimana tuh ya?

    ReplyDelete
  33. keren bro...langsung praktek...thanks

    ReplyDelete
  34. nice info bro.
    thanx a lot. it really works..

    ReplyDelete
  35. nice info bro.
    thanx a lot. it really works..

    ReplyDelete
  36. mantep banget thanks

    ReplyDelete
  37. cari cara buat gambar gif
    eee mbah google menuntun saya
    tuk lihat blog ini
    thank tutorial nya mas
    nambah ilmu dah daku

    ReplyDelete
  38. makaciiiiiiiiiiiiiiii...atur nuwun lah mbah.numpang nanya lagi boleh ga?gmana buat situs kayak ente ini,pake 3d yaw.keren banget.sukses slalu :-)

    ReplyDelete
  39. owh ya.bales ke mail saya ya.tolong banget bos.

    ReplyDelete
  40. Mas Ardhi, oKs bgt!
    bahasanya mudah dimengerti pula..
    jd guru aja mas..heheheh
    aniwei thx a lot

    ReplyDelete
  41. kok saya gak bisa disimpan dengan ekstension gif ya ???
    hikzzz :(

    ReplyDelete
  42. Thank's ya om Ardhi,
    Mangstabss..

    ReplyDelete
  43. makasih yaa..aku mau coba ahh
    mudah2an berhasil

    ReplyDelete
  44. Kecil banget tulisanya... njelimet mbacanya....

    ReplyDelete
  45. Mas Ardhi mau tanya, kalo bikin pake adobe photoshop CS4 gimana ya?? saya coba di photoshop cs4 tapi tidak ada image readynya. Tq

    ReplyDelete
  46. Hebat Gan, Makasih Infonya, sgt bermanfaat

    ReplyDelete
  47. Hebat mas, segera saya praktekan dan saya install di blogku
    Makasih Infonya, sgt bermanfaat
    mampir di blog ku mas
    http://antibanbocor.com
    blog yg unik artikelnya lumayan, yg sebelumnya belum ada
    pertama di Indonesia
    http://antibanbocor.com

    ReplyDelete
  48. Houses and cars are quite expensive and not everyone is able to buy it. But, personal loans was created to help people in such hard situations.

    ReplyDelete
  49. Wah, bagus sekali tutorialnya..
    ternyata gampang sekali bikin gambar ber format GIF.
    thx a lot.

    ReplyDelete
  50. Mas, kalo udah, dibuatnya gimana ya ?
    Soalnya saya sudah mau buat tapi bukan berbahan dasar GIF
    tapi malah JPEG. Pas saya mau membukanya, itu tidak terjadi apa2.Tolong kasih tau dan beri koment bagi yang tau ? Tolong !

    ReplyDelete
  51. thank's ya buat tips and caranya

    ReplyDelete
  52. klu cara mskin ke web gmn gan.. yhx info ny

    ReplyDelete