Serial Photoshop Tutorial : Membuat animasi GIF dengan Photoshop

* * * * ½ 15 pemilih
10,166 views | March 8, 2009

oleh Bara Sukaton

animasi gif dengan photoshop
Kalian bisa membuat animasi dengan gambar yang kalian punya dengan format gif. Ada banyak software yang bisa digunakan untuk membuat animasi dengan format gif, namun disini aku mengajarkan dengan menggunakan software gambar yang ‘hampir’ semua orang punya yaitu Photoshop :wink: . Lihat gambar diatas, animasi diatas dibuat dengan cara menggabungkan beberapa frame dengan mengganti settingan layernya. Bingung? Coba ikuti langkah-langkah berikut.
1. Prinsip dasar atau ide utama dari membuat animasi gif dengan photoshop adalah menggabungkan frame-frame gambar sehingga terlihat bergerak apabila dijalankan. Frame-frame gambar ini pada dasarnya dibuat dengan menghilangkan dan memunculkan elemen-elemen dari tiap gambar. Elemen-elemen gambar ini akan kita pisahkan dalam bentuk layer-layer. Untuk gambar animasi mobil seperti gambar diatas kita memerlukan 7 layer elemen ditambah 1 layer background. Lihat gambar disamping, ketujuh layer elemen tersebut adalah background hitam untuk lampu, lampu merah, lampu kuning, lampu hijau, gambar mobil, tulisan BRUUUM, dan efek cahaya. animasi gif dengan photoshop
2. Setelah kita buat keseluruhan elemen yang akan dipakai, selanjutnya kita akan membuat frame pertama. Caranya yaitu pertama kalian harus membuka panel animasi dengan cara memilih menu Window > Animation. Maka akan tampil tampilan seperti gambar disamping yaitu terlihat satu frame dengan semua elemen terlihat. animasi gif dengan photoshop
3. Selanjutnya kita akan membuat animasi dengan konsep sebagai berikut:     

pertama: layar putih tidak terlihat satu elemen pun.

kedua: kemudian muncul lampu merah

ketiga: kemudian muncul lagi lampu kuning

keempat: muncul lampu hijau yang menandakan mobil dapat melaju.

kelima: muncul tulisan BRUUUM !! sebagai gambaran bunyi mobil yang menderu.

keenam: mobil melaju dari kanan ke kiri dengan cepat dan meninggalkan efek cahaya.

ketujuh: efek tulisan BRUUUM perlahan menghilang.

Sekarang lihat gambar disamping, untuk membuat animasi tahap pertama yaitu tampilan putih tidak terlihat satu elemen pun, dilakukan dengan cara membuka tab “Layers” dan menyembunyikan semua layer kecuali background. Kalau bingung bagaimana cara menyembunyikan layernya, klik saja ikon mata di sebelah kiri tiap layer :wink: . 

 animasi gif dengan photoshop
4. Setelah semua elemen disembunyikan, selanjutnya kita pindah lagi ke tab “Animation (Frames)”. Sekarang kita atur waktu tampilan pada frame pertama ini. Caranya klik tulisan “0 seconds” lalu pilih satu detik untuk tampilan frame pertama ini. Ini artinya frame ini hanya ditampilkan selama satu detik lalu pindah ke frame selanjutnya. animasi gif dengan photoshop
5. Langkah selanjutnya adalah membuat frame kedua. Caranya klik ikon seperti pada gambar yang ditunjukkan dengan bulatan merah. Ikon ini akan menduplikasi frame sebelumnya sebagai frame baru. Atur waktu tampilan frame ini menjadi satu detik. Frame ini selanjutnya akan digunakan untuk memunculkan gambar lampu merah. animasi gif dengan photoshop
6. Sekarang mengatur tampilan untuk frame kedua ini. Karena frame kedua ini akan ditampilkan gambar lampu merah yang menyala maka layer ‘merah’ dan background ‘hitam’ ditampilkan kembali. Caranya dengan membuka tab ‘Layers’ lalu mengklik ikon kotak di sebelah kiri layer ‘merah’ dan ‘background hitam’ seperti gambar disamping. animasi gif dengan photoshop
7. Setelah frame kedua ini diatur tampilan layernya maka tab ‘Animation (Frames)’ sekarang akan tampak seperti gambar disamping. animasi gif dengan photoshop
8. Langkah selanjutnya adalah perulangan dari langkah ke 5,6, dan 7 namun bedanya sekarang yang ditampilkan adalah lampu kuning dan lampu hijau. Namun jangan lupa untuk mengatur waktu tampil dari lampu kuning dan hijau  menjadi satu detik. Setelah diatur frame dan layer kuning dan hijau maka tab ‘Animation (Frames)’ kira-kira akan tampil seperti gambar disamping kanan ini. animasi gif dengan photoshop
9. Langkah berikutnya sama seperti langkah-langkah sebelumnya yaitu menampilkan tulisan BRUUUUM !! dengan menambahkan frame baru dan menampilkan layer tulisan ‘BRUUUUM!!’. Namun atur waktu dari tampilnya frame ini menjadi dua detik seperti gambar disamping. animasi gif dengan photoshop
10. Tahap selanjutnya agak sedikit sulit tapi mudah untuk dilakukan. Nah lo, karena efek ini keliatannya sulit namun untuk membuatnya diperlukan langkah yang mudah :-) . Tahap ini adalah tahap dimana ada gambar mobil bergerak dari kanan ke kiri. Yang harus kalian lakukan adalah buat frame selanjutnya, kemudian klik kotak kiri di sebelah layer ‘mobil’ untuk menampilkan layer mobil. Namun sembunyikan mobil di sebelah kanan area gambar seperti terlihat di gambar sebelah kanan. animasi gif dengan photoshop
11. Buat lagi frame selanjutnya dengan menduplikasi frame sebelumnya (frame 6) kemudian posisikan mobilnya di sebelah kiri area gambar seperti terlihat pada gambar disamping. Untuk kedua frame ini, atur waktu tampilan menjadi 0 detik atau ‘No delay’. animasi gif dengan photoshop
12. Langkah ini adalah langkah untuk membuat mobil bergerak dari kanan ke kiri. Pertama kita akan memilih kedua frame untuk digabungkan dengan cara menahan tombol shift lalu klik layer 6 dan layer 7 seperti gambar di kotak merah. Setelah kedua layer tersebut dipilih, selanjutnya kita akan menerapkan efek tweening pada kedua frame tersebut. Apa maksud dari efek ini? Efek tweening ini dimaksudkan untuk mempermudah kita untuk membuat suatu animasi posisi, dan transparansi yang berpola. Misalnya apabila kita akan membuat gambar mobil tersebut bergerak dari kanan ke kiri, daripada kita mempersulit diri sendiri dengan membuat satu persatu frame lalu kemudian diubah posisi mobilnya sampai ke kiri, kita dapat membuatnya lebih mudah dengan membuat dua frame saja yaitu frame awal posisi dan frame akhir posisi. Selanjutnya frame-frame diantara frame tersebut akan dibuat secara otomatis oleh Photoshop da pastinya hasilnya lebih smooth dibandingkan frame yang kita buat secara manual.    

Untuk menggunakan efek ini, setelah dua frame awal dan akhir tadi dipilih, selanjutnya klik ikon yang ditunjuk tanda panah merah, dan masukkan nilai ‘Frames to Add’ menjadi 7. Klik OK.

 animasi gif dengan photoshop
13. Sekarang masuk tahap menculnya efek cahaya dari mobil yang melaju dengan kencang. Efek ini akan kita buat agar menghilang secara perlahan-lahan setelah kemunculannya di frame ke 11. Prinsipnya adalah menurunkan perlahan-lahan Opacity dari layer ‘light’ dari 100% menjadi 0. Sekarang klik frame 11 lalu munculkan layer terakhir yaitu layer ‘light’ dan biarkan opacitynya 100%. Lihat gambar. animasi gif dengan photoshop
14. Selanjutnya klik frame ke 12, munculkan layer ‘light’, lalu turunkan Opacitynya menjadi 60%. Lihat gambar. animasi gif dengan photoshop
15. Lakukan cara yang sama untuk frame ke 13, dan 14. Namun atur Opacity untuk frame ke 13 menjadi 30% dan 0% untuk frame ke 14. Kalian dapat mengklik tombol ‘Play pada tab ‘Animation (Frames)’ untuk melihat hasil sementara animasi kalian. Kalian akan melihat efek cahayanya perlahan-lahan menghilang karena transparansinya diturunkan sampai 0. animasi gif dengan photoshop
16. Sekarang kita memasuki tahap akhir! Pada tahap ini sebagai penutup animasi kita, kita akan membuat tulisan BRUUUUUM!! menjadi hilang perlahan-lahan. Caranya sama seperti langkah ke 12 namun yang dimainkan disini bukan posisi namun transparansi. Caranya buat frame ke 15 dengan menduplikasinya dari frame ke 14. Lalu atur Opacity dari layer BRUUUUM!! di frame 15 menjadi 0%. Setelah itu klik tweening, dan atur nilai ‘Frames to Add’ menjadi 10.   

Yak itu dia tutorial photoshop saya yang pertama. Hasil akhirnya dapat kalian lihat seperti gambar di awal tulisan.

 animasi gif dengan photoshop

Silahkan dicoba! Disini aku sertakan file PSDnya. Untuk mendownloadnya silahkan klik disini.

Tentang Penulis

Bara Sukaton

Bara Sukaton

Web Designer, Engineer, and Nasi Goreng Lovers .^^.
7 tulisan telah dibuat oleh Bara Sukaton

  1. aldrik pada April 5, 2009 5:15 am

    :lol: :lol: :lol:
    wah ship nih tutorialnya . . . boleh dicoba eay.

  2. Bara Sukaton pada April 8, 2009 12:33 pm

    OKe nanti kalo dah berhasil komen ya .. 8)

  3. haryo pada April 25, 2009 1:44 pm

    :D :-) :D :-) :lol: :lol: :lol: :lol: :lol:
    boleh juga thanxsssssss

  4. rio pada April 28, 2009 6:12 am

    :twisted: :mrgreen: :idea: :?: :roll: :evil: :evil:
    KURANG KEPENAK!!!!!!!!!!!!!!

  5. Bara Sukaton pada April 28, 2009 8:43 am

    walaah,, apane sing kurang kepenak mas ??!!

  6. luky pada April 29, 2009 9:45 pm

    :-) Makasih tutorialnya mas,sangat membantu bagi pemula kayak saya dan mudah difahami,saya bangga dengan anda yang rela meluangkan waktu untuk bagi2 ilmu,semoga tuhan memberkati anda,mudah2an anak bangsa juga bertambah maju dan mau meniru seperti anda dengan menyumbangkan ilmu2nya yang lain… ditunggu lanjutannya lho..sekali lagi terima kasih.

  7. Bara Sukaton pada April 30, 2009 5:24 am

    alhamdulilah :-) ,, (jadi semangat))

  8. Irwan pada May 2, 2009 3:07 pm

    Bagus mas animasinya..
    Trus nyimpenya ke format gif gmana mas cranya…?

  9. Bara Sukaton pada May 3, 2009 7:13 am

    klik, File > Save As > trus pilih format .gif ..

  10. Irwan pada May 5, 2009 3:58 am

    Maksut sya biar gambarnya ttep bsa gerak mas,, gimana cranya,, cz kmren sya simpen format gif gambarnya g bisa gerak..
    Photoshop punya sya cs3

  11. Bara Sukaton pada May 5, 2009 4:16 am

    coba gunakan File > Save for Web & Devices > formatnya GIF ..

  12. Irwan pada May 5, 2009 8:05 am

    Y mas,, tankiu bgt.. Moga karya mas tmbah bgus2…

  13. Irwan M Santika pada May 14, 2009 4:57 pm

    Minta tolong mas, bagaimana caranya membuat animasi lampu kendaraan yg berkedip kedip menggunakan flash mx, ato cari tutorialnya dimanaya.

    Thkns banget :-)

  14. Bara Sukaton pada May 14, 2009 5:36 pm

    aku sedang menulis tentang tweening di flash ,, doakan saja cepat selesai :-) Nanti dari situ bisa dikembangkan sendiri menjadi animasi lain

  15. wildan pada May 28, 2009 2:03 am

    wahh..
    kayaknya hampir sama microsoft power point…
    tutorial yg kaya anime beitu ad gk? :|

  16. Bara Sukaton pada May 28, 2009 10:24 am

    yap prinsipnya mirip kayak power point, tapi menurut aku lebih mudah pake photoshop dan sepertinya kalo di power point ga bisa di export jadi gif .. cmiiw

  17. Membuat Animasi Banner Exchange pada May 30, 2009 9:42 am

    tutorialnya keren dan puanjang…. :!:

    salam kenal dari seorang pemula :-)

  18. Bara Sukaton pada May 30, 2009 1:26 pm

    thanks, tapi tutorial GIMP dan Inkscape anda keren juga, seperti bukan pemula :D …

  19. yoyok pada June 4, 2009 8:19 am

    tutorialnya sepp mz,sangat berguna bgi saya yg blom bisa… :!:

  20. Bara Sukaton pada June 4, 2009 5:36 pm

    alhamdulilah :-)

  21. coco pada June 12, 2009 2:08 pm

    thanks banget yach mas….ntar tak cobain…….
    moga ja dengan ilmu yang mas bagi bisa bermanfaat bagi semua pengguna photoshop…..thank

  22. ramang pada June 23, 2009 8:58 pm

    mantatap mas,,,, kebetulan sekali q lagi mo presentasi, jadi lebih seru kalo ada gambar geraknya?????

  23. kokotole pada July 2, 2009 2:56 pm

    Wah Sumpah Keren Buanget Boss!!!Tapi saya masih bingung cara nyimpenya biar gambarnya tetap bisa gerak gmn boss???Thx……. :( :( :(

  24. Bara Sukaton pada July 4, 2009 6:38 am

    sepertinya diatas udah ada yang nanya ..
    coba gunakan File > Save for Web & Devices > formatnya GIF ..

  25. download ebook gratis pada August 3, 2009 6:23 am

    wah, makasih banget om. saya langsung bisa nech….

  26. Samudera Gema P pada August 14, 2009 7:11 am

    Wah nice tutorial, gua suka banget sama animasi.

    sini kalo mau belajar animasi pake flash, Visit saja Plus44 Cyber Flash

  27. riza pada September 7, 2009 7:29 am

    sip :!: :-) :lol:

  28. deekaNutz pada September 23, 2009 6:14 am

    keren2… wogh ya, ad referensi buat tampilan web ga?

  29. Bara Sukaton pada September 23, 2009 9:20 am

    trims,, untuk referensi tampilan web coba cek situs-situs berikut, mereka adalah web design company yang aku sering kunjungi untuk cari inspirasi,
    1. 45royale
    2. Fudge
    3. flex360
    4. the KDU
    5. OH! Media

    :!: :!: :!:

  30. divina pada September 27, 2009 1:34 pm

    wah tutor nya brmnfaat bgt, saya udh jd 1 biji nih :arrow: :o
    http://img225.imageshack.us/img225/7404/sif.gif

  31. Bara Sukaton pada September 28, 2009 5:03 pm

    @divina : hahaha :!: :!: :!: keren-keren, itu ketupat ya ? Mohon maaf lahir bathin juga ya div !!

  32. evan pada October 7, 2009 12:57 pm

    bagus bgt mas karyanya…:!: .

  33. iyund pada October 18, 2009 10:12 am

    :arrow: :lol: :arrow:

  34. Ayu Tri pada October 30, 2009 8:56 am

    wah..asik nie.. turorialnya lengkap n detail jadi gampang ngerti..

    greatlah pokoknya…

    tq yaw…

  35. baringgas pada November 1, 2009 4:08 am

    :!:
    tapi kalo bisa itu tutorial harus lengkap donk

  36. reny pada December 4, 2009 8:34 am

    INI bukan.na d5na sich………???????? :roll: 8O :idea:

  37. mang pada December 5, 2009 1:47 am

    di adobe ps7.0 ko di window nya ga ada menu animasi mas

  38. Bara Sukaton pada December 6, 2009 11:55 pm

    @mang : kalo di ps 7.0 setelah bikin layer kamu harus pindah ke Image Ready dengan mengklik tombol yang ada di paling bawah toolbar. Selanjutnya sama seperti tutorial diatas ..

  39. Akbar pada December 7, 2009 3:58 pm

    makasih banget mas saya niru konsepnya ni dah jadi 1 thank you mas ku pake ps 7
    http://img442.imageshack.us/img442/7194/69378331.gif

  40. Bara Sukaton pada December 8, 2009 1:14 am

    hahaha kreatif juga nih akbar … mobilnya jadi keluar api gitu … ada efek daun-daun berguguran juga lagi …. :!: :!: :!:

  41. Akbar pada December 8, 2009 7:05 am

    alhamdulillah berkat mas! :wink: sekali lagi thank you

  42. Dietrich pada January 1, 2010 2:25 am

    bagian tersulit.a adalah ketika mmbuat mobil tsb bergerak dri kanan ke kiri….hhhuuuhhhhhh cara memindahkannya selalu gagal…..hihihihihihihihihihihihih :| :D

  43. meri pada January 29, 2010 9:26 am

    mas, mau tanya n minta tlg…bagaimana caranya gambar animasi ini di save dlm bentuk .gif…saya coba save tp waktu di buka, file gif-nya gak jalan animasinya…tks

  44. arul pada February 13, 2010 10:33 am

    :o :o :o Betul…betul..betul…Thanks ya atas referensinya

  45. w2n pada February 14, 2010 10:31 am

    sangat bagus,bikin lagi ya yg bgs lgi/

  46. ilhampranata pada February 23, 2010 10:25 am

    sangat..sangat bermanfaat ikut nyedot ilmunya ya bos…. :!: :!: :!:

  47. Manyun pada February 28, 2010 5:50 pm

    mangstaaabbbb bossss !!!!!
    mudah di pahami, thanks a lot
    d tnggu tutorial yg laen’y yy…. :lol: :lol: :lol: :lol:

  48. motivasi259 pada March 4, 2010 11:24 am

    wah seru gan artikelnya di coba ah,.

Tulis Komentarmu !

Nama

Email

Website

CAPTCHA Image Audio Version
Reload Image



:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:

Quotes

"Great spirits have always encountered violent opposition from mediocre minds."

-Einstein-

Kategori

open all | close all