Membuat Animasi Gambar Format "gif" Dengan Photoshop CS3

Reaksi: 
Selain digunakan sebagai applikasi untuk mengedit foto, photoshop juga bisa untuk membuat gambar bergerak / animasi dalam format "gif" (graphic interchange format). Dengan bermain frame per frame, kita dapat membuat animasi tulisan ataupun gambar dengan mudah sesuai selera.

Dalam hal ini kreativitas kita sangat dibutuhkan di sini, saya hanya memberikan tutorial dasarnya saja, sobat-sobat tinggal mengembangkannya.

Photoshop yang saya gunakan di sini adalah photoshop CS3, photoshop CS2 juga bisa digunakan.

Cara membuat animasi gambar bergerak :
1. Buka Adobe photoshop

2. Buka tool animasi di photoshop, caranya klik menu “window” di photoshop, lalu pilih “animation”


Sampai muncul window kayak gini:


3. Di photoshop, pilih file » new masukkan ukuran sesuai selera, kalau saya pakai 200 x 200 pixel, lalu oke

4. Selanjutnya, buat 3 buah lingkaran dengan layer yang berbeda. Buat sebuah lingkaran dulu, selanjutnya pada jendela layer, kita klik kanan layer lingkaran tersebut, lalu pilih “duplicate layer…”.

Contoh


Tampilan pada jendela layer seperti ini:


Dan ini tampilan dalam jendela animation:


5. Selanjutnya, buat 3 buah frame dalam jendela animation, dengan mengklik icon “duplicates selected frames” (tanda lingkaran merah pada gambar diatas!) hingga jadi seperti ini:


6. Untuk menampilkan warna merah dahulu, klik frame pertama pada jendela animation, lalu pada jendela layer, nonaktifkan icon mata (indicates layer visibility) pada layer warna kuning dan hijau, sehingga hanya layer warna merah yang terdapat icon mata, seperti gambar di bawah :


Kemudian kembali lagi ke jendela animation, klik frame kedua, aktifkan icon mata pada layer kuning. Sedangkan pada frame ketiga, aktifkan icon mata pada layer hijau. Oh iya jika ingin animasi kita nanti transparan, tinggal nonaktifkan icon mata pada layer background di semua frame animasi.

Dalam jendela animation akan terlihat seperti berikut:


7. Klik tombol play untuk memainkan animasi, kita bisa mensetting timming animasi sehingga animasi tidak bergerak terlalu cepat. Setting waktunya dengan meng-klik tanda panah segitiga di samping kanan tulisan 0 sec.


8. Agar animasi bergerak terus tanpa henti, maka animasi harus di setting “forever”, tetapi jika ingin bergerak satu kali, setting dengan “once”, seperti gambar di bawah:


Kira-kira hasilnya seperti ini…


9. Kemudian simpan dengan menggunakan “save for web & device” nya photoshop. Caranya klik file > Save for web & device atau shortcut CTRL+ALT+SHIFT+S

Untuk referensi saya punya contoh animasi sederhana klik link ini https://www.youtube.com/watch?v=Olv_OCxGAZk

Selamat mencoba dan gunakan kreativitas-mu untuk membuat animasi yang lebih baik.

110 komentar:

  1. bos klau buat animasi yg cuman ganti warna aja berkali-kali gmn?
    tulisannya tetap gak berubah lo....

    BalasHapus
    Balasan
    1. simpan objek d balik objek..
      jadi bikin dulu lingkaran warna merah kemudian bikin lagi lingkaran d atas yg merah tadi, jadi warna biru

      Hapus
  2. kok saya g bisa2 y...pake format gif juga hasilnya diam tak bergerak.....

    BalasHapus
    Balasan
    1. Admin Saya blh Backlink, Kan. Lummayan menarik Blog ini, Karena turialnya hanya Hilang dan muncul Gambarnya, Di WEB saya ada Cara membuat animasi Bergerak, dalam bentuk Teks, Atau pun ada yang Video
      Jika Tertarik silakan Kunjungi http://my-tik.de.vu/admin/2013/01/cara-membuat-animasi-bergerak-dengan-photoshop/

      Hapus
  3. Thanks tutorialnya. It works.
    Ini hasilnya.
    http://i1011.photobucket.com/albums/af236/theemptiness/THEEMPTINESSINDOFILESORG.gif

    BalasHapus
  4. @Rokudaime : ya tulisannya jangan dbuat berubah alias tetap
    @adhy P.W : instal ulang dulu deh photoshopnya..sy jg pernah ngalamin hal sama tp setelah instal ulang ga ada masalah sampai sekarang.
    @isaymovies : selamat semoga sukses

    BalasHapus
  5. Makasih sob atas tutorial yang diberikan, ini sangat membantu bagi pemula, khususnya saya sendiri....

    BalasHapus
  6. Pada saat save malah hunk

    BalasHapus
  7. bos koq saya gk bisa" ya?????

    BalasHapus
  8. berhasill...horeee!! -___-"
    luar biasa...
    :)

    BalasHapus
  9. ngga bisa gerak gan T_T kenapa ya? apakah ngga ada solusi lain selain reinstall?

    BalasHapus
  10. Terima kasih atas tutorial animasi gif photoshop-nya...

    BalasHapus
  11. ada yang lainnya lagi hot trick??

    BalasHapus
  12. makasih gaaan!!
    mangstab!!

    BalasHapus
  13. bos gw ga tw cara buat ligkarn
    hhhhhheeeeeeeeeeeee
    maklum msh awam

    BalasHapus
  14. gan cara ngebuat lingkarannya gimana gan ??
    ane sama sekali gak ngerti, ane orang awam
    wkwkwkwkwkwkwkwkwkwkwk

    BalasHapus
  15. Lutfi Ahmad Gifari29 Januari 2012 16.48

    alhamdulillah langsung bisa, terimakasih banyak

    BalasHapus
  16. kazeninaru xi toni1 Februari 2012 19.02

    bagi file gif yg ga bergerak, coba buka file gifnya dengan internet explorer, caranya klik file gi tadi, lau klik kanan, open with Internet Explorer

    semoga berhasil ^^

    BalasHapus
  17. perubahan dari satu frame k frame (dari satu gambar k gambar lain nya) ada settingan nya gak...? kyaknya kaku banget klw cma gtu aja... thanx

    BalasHapus
  18. wah,,,bermanfaat sob,,thank's before info nya..

    BalasHapus
  19. sy cba animasi fto tpi pda saat save knp ga bsa grak pdhal oas di ptoshop bsa grak gmn cranya ya gan???

    BalasHapus
  20. Wah thanks banget gan, Avatar KASKUS ane dah jadi
    Hasilnya

    http://kkcdn-static.kaskus.us/user/avatar/avatar2958430_3.gif

    BalasHapus
  21. berapa ukuran yang bisa tampil sempurna di blog bro?????
    ukuran size?
    saya dah lumayan bisa buat animasinya tapi hanya bisa dibuka normal di PC saja,,,,

    BalasHapus
  22. mantap gan thx bgt its work!!!!

    BalasHapus
  23. Balasan
    1. Komentar ini telah dihapus oleh penulis.

      Hapus
  24. Maksudnya...gabisa dipahami tulisannya atau ga bisak gerak animasinya...?????

    Klo ga bisa gerak coba gunakan IE....pasti ada hasilnya.

    BalasHapus
  25. Wah mantep gan....singkat padat dan jelas
    Langsung cerah neh gan...

    BalasHapus
  26. kok g isa dijadiin ava ditwitter ya mas? bisanya ditumblr n diblog aja.

    BalasHapus
  27. mba nisa,tolong saya donk,,kenapa setip saya menduplikate frame,terus frame kedua saya edit,nah frame pertama juga keedit,jadinya frame pertama dan kedua gambarnya sama,,kenapa ya mba,tolongin mba butuh banget soalnya

    BalasHapus
  28. icoba bolak-balik tetep aja gagal -___-'

    BalasHapus
  29. bosss cara save nya gimana....?

    BalasHapus
  30. photoshop cs ngga bisa ya?

    BalasHapus
  31. Klw kadang PS nya ngadat tuh wajar mas...saya juga sering ngalami...abis yang aq suka kan PS gratisan...wk..wk..wk !

    BalasHapus
  32. Suka banget sama postingan ini. SINGKAT, PADAT, JELAS, dan MENGENA!
    :) NICE POST!

    BalasHapus
  33. Percobaan dari tutorial ini..., coba tengok ke sini:
    http://postimage.org/image/whdvc0yi9/

    aku upload file gif ku. Bagus nggak? :)

    BalasHapus
    Balasan
    1. Bagus, selamat yah.......moga sukses bisnis design nya!!!!

      Hapus
  34. Maaf mas cuma ngikut ngasih masukan,
    mungkin yang ga bisa gerak cara savenya salah,
    nge save-nya menggunakan "save for web & device" atau save as??

    BalasHapus
  35. Saya lagi cari cara buat bikin gambar bergeraknya joget,, gimana ya caranya?

    BalasHapus
  36. cara savenya gimana....??
    udah pake GIF tapi ga bisa gerak hasilnya.

    BalasHapus
  37. cara nyimpan.nx koq gak bisa yaa.. error gituu..

    BalasHapus
  38. banner saya akhirnya jai juga..... bisa langsung dilihat........ :)

    BalasHapus
  39. Nah berawal dari sekedar coba2..eh akhirnya bisa juga, dan hasilnya juga sdh lumayan tuh bro...agan2 smua bisa cek hasilnya di http://kolakanews.com/

    BalasHapus
  40. kok di upload ke twitter engga mau ya??

    BalasHapus
  41. Terima kasih buat info & trik nya!

    mohon bantu, mo nanya, ada yang tau gak cara bikin 3d magazine pake photoshop seperti ini contohnya: Design 3D Magazine

    thanks

    BalasHapus
  42. Makasi membantu banged ><

    BalasHapus
  43. bos. saya pakai photoshop portable. tidak ada menu windows>animation. bagaimana dong?

    BalasHapus
    Balasan
    1. saya juga portable jadi pilih yg time line

      Hapus
  44. like this gan , simple dan bermanfaat :)
    nice blog

    BalasHapus
  45. Berhasil berhasil berhasil horeee!! :D makasih banyak om tutorialnya mantap...

    BalasHapus
  46. kok ane gk ada tools animatioon nya

    BalasHapus
  47. tengs sob ...ini sangat membantu pemula seperti saya :D

    BalasHapus
  48. kalo buat poto gimana?

    BalasHapus
  49. Makasih mas artikel nya sangat membantu :)

    BalasHapus
  50. good job
    bandar kaos murah
    http://www.cristin8890.web.id

    BalasHapus
  51. terima kasih ya informasinya...siiippp

    BalasHapus
  52. baru tau saya di photoshop bisa buat animasi gif... thanks y.

    Regards, Dunia Cewe - Triliunan informasi setiap harinya...

    BalasHapus
  53. kalo animasinya dari foto bisa ga sih??

    BalasHapus
  54. Thanks infonya bermanfaat sekali,...

    BalasHapus
  55. Qo' ga bisa. Di save ya gan, save for web&device nya ga' aktive atau ga bisa di klik ,bales dong gan, atau email 'ke tambatefendi@gmail.com

    BalasHapus
  56. WAHDALAH aku udah buat animasi berjalan seperti film pendek lah 1 menitan,DAN aku udah buat animasi bumi berputar TAPI DI SAVE APA AJA GAK GERAK,y aku tau open pake IE,nah kalian tau gak?aku pengenya itu bisa bergerak di power point,ada,tapi gak ngerti caranya gimana ttuh.KALIAN PUNYA CONTOH GIF-ANIMASI YG BISA GERAK DI POWER POINT.punya microsoft office kan??????-CTH-
    C:\Program Files\Microsoft Office\CLIPART\PUB60COR
    NAH gan cara buat save-an gituh gimana ya?????

    BalasHapus
  57. thanx buat tutorial'nya
    brmanfaat bnget buat gw.;.

    BalasHapus
  58. mantap bro thank info nya

    BalasHapus
  59. mantab nih tutorialnya.. makasih sebelumnya, tapi harus di coba dulu nih..

    BalasHapus
  60. thank bosssssss.......... MANTAP

    BalasHapus
  61. mantab deh infonya, thanks

    BalasHapus
  62. thx Gan.. akhir'nya bisa buat gif jga

    BalasHapus
  63. share jg gan http://masmnir.blogspot.com/

    BalasHapus
  64. thx sangat bermanfaat gan visit : www.warungmagelangs.blogspot.com

    BalasHapus
  65. terimakasih atas info yang anda beerikan

    BalasHapus
  66. terimakasih infonya...saya bikin banner2 untuk website saya http://averilshop.com karena belajar dari sini :)

    BalasHapus
    Balasan
    1. Makasih......moga makin laris!!!!!!

      Hapus
  67. makasih gan, sangat membantu tutornya, terutama cara save nya

    BalasHapus
  68. Gan kalo tuk windows 8
    Gmna cara bkany?
    Gk gerak gmbarny?

    BalasHapus
  69. makasih sy sdh bisa, Tapi kenapa kalo diposting ke Facebook gk jadi. Apakah mmng gk bisa? mhn info thanks...

    BalasHapus
  70. terima kasih atas trick yang berguna ini pak bisa buat banner animasi ni

    BalasHapus
  71. gan, kok tetep gak bergerak ya pake yang di save for web and device.
    aku buka pake IE juga gak bisa..
    itu kenapa yaa ??
    tolong pencerahannya :)

    BalasHapus
  72. jadi ni.. makasih tutornya ..
    tokomurahsport.blogspot.com

    BalasHapus
  73. nice posting, izin serep ke blog gan hehehe

    BalasHapus
  74. WAHDALAH aku udah buat animasi berjalan seperti film pendek lah 1 menitan,DAN aku udah buat animasi bumi berputar TAPI DI SAVE APA AJA GAK GERAK,y aku tau open pake IE,nah kalian tau gak?aku pengenya itu bisa bergerak di power point,ada,tapi gak ngerti caranya gimana ttuh.KALIAN PUNYA CONTOH GIF-ANIMASI YG BISA GERAK DI POWER POINT.punya microsoft office kan?????

    BalasHapus
  75. Makasiiiiiihh, pengen nyoba :)

    BalasHapus
  76. Thanks ya sob udah share , blog ini sangat bermanfaat sekali ..............





    agen tiket murah

    BalasHapus
  77. mantap gan kalo ada yang minat buat website berbasis blogspot ane nawarin jasanya cuma 100 ribu www.pembuat-webblog.blogspot.com

    BalasHapus
  78. simple tapi bermanfaat... jadi bisa gonta-ganti DP dengan karya sendiri
    makasih gan.

    BalasHapus
  79. Mantap mas.......... mudah dipahami bagi pemula

    BalasHapus
  80. udh bisa bikin tapi pas disimpen gak bisa gerak..

    BalasHapus
  81. makasih mass infonya..
    info seputar bola, prediksi bola ter-update..
    berita bola TERBARU DAN TERPERCAYA hanya ada di pastibet.com
    Buruan Gabung..!!
    hanya ada di

    pastibet.com.!!

    BalasHapus
  82. wiiiihh mantab gan artikelnya .... thanks gan buat artikelnya membantu...
    tambah lagi gan artikel menarik lainnya gan..
    dan jangan lupa kunjungi juga Rajalistrik.com

    BalasHapus

Silakan berkomentar.....asal tidak mengandung "SARA" atau memojokan siapapun.:x

LINK SAHABAT