Sprei "My Love" Murah Hanya di sini!!!!

Membuat Animasi Gambar Format "gif" Dengan Photoshop CS3

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.

107 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 pukul 16.48

    alhamdulillah langsung bisa, terimakasih banyak

    BalasHapus
  16. kazeninaru xi toni1 Februari 2012 pukul 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 pengarang.

      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. Gmana bos. Pa da chotonya di yuotube

    BalasHapus
  31. photoshop cs ngga bisa ya?

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

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

    BalasHapus
  34. 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
  35. 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
  36. Saya lagi cari cara buat bikin gambar bergeraknya joget,, gimana ya caranya?

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

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

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

    BalasHapus
  40. 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
  41. kok di upload ke twitter engga mau ya??

    BalasHapus
  42. 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
  43. Makasi membantu banged ><

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

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

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

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

    BalasHapus
  47. kok ane gk ada tools animatioon nya

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

    BalasHapus
  49. kalo buat poto gimana?

    BalasHapus
  50. Makasih mas artikel nya sangat membantu :)

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

    BalasHapus
  52. terima kasih ya informasinya...siiippp

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

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

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

    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. mantab nih tutorialnya.. makasih sebelumnya, tapi harus di coba dulu nih..

    BalasHapus
  59. thank bosssssss.......... MANTAP

    BalasHapus
  60. mantab deh infonya, thanks

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

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

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

    BalasHapus
  64. terimakasih atas info yang anda beerikan

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

    BalasHapus
  66. makasih gan, sangat membantu tutornya, terutama cara save nya

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

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

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

    BalasHapus
  70. 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
  71. jadi ni.. makasih tutornya ..
    tokomurahsport.blogspot.com

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

    BalasHapus
  73. 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
  74. mantap gan kalo ada yang minat buat website berbasis blogspot ane nawarin jasanya cuma 100 ribu www.pembuat-webblog.blogspot.com

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

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

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

    BalasHapus
  78. 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
  79. 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