Belajar Membuat Animasi Dengan Photoshop

Software : adobe Photoshop CS3 – CS4 .. CS2 blom cek udah ada fasilitas animasinya ato belom yaa.. mungkin masih pake Image Ready.

By Request : Saya bikin Tutorial ini karena banyak yang request.

Saya coba buat dasar-dasar nya aja.. atau gimana sih cara buat suatu gambar itu jadi gerak.. belom masuk ke berubah bentuk ya.. cuman gerak aja..

Pembuatan animasi di photoshop ada 2 cara :

1. Import Langsung dari layer ( Make frame from layers – buat yang udah EXPERT )

2. Manual ( ini khusus buat menggerakan benda aja)

Sekarang kita mulai dengan yang manual dulu aja yaa.. dari dasar dulu la..

Pertamax.. hehehe  buka dokumen baru :

animasi1

Buat kotak dengan rectangle marquee tool. Klik Select > Inverse.. lalu warnai dengan warna Hitam Klik Edit > Fill > Black

animasi2

Sekarang buat lingkaran dengan Elliptical Marquee tool.. ( Sambil tekan tombol SHIFT biar Bener-bener bulet jadinya )..

Warnai dengan Gradient TOol > Radial Gradient.  Warna Terserah aja..

animasi3

Kalo ngikutin nya bener … jadinya kayak gini ..

animasi4

Sekarang kita gerakkan Bola nya..

Klik Windows > Animation, maka muncul Animation Bar..

animasi5

Klik Duplicate Selected Frame .. Muncul Frame baru dengan posisi bola yang sama..

animasi6

Sekarang pindahin bola yang ada di frame 2 ke tepi kiri tengah..

animasi7

Klik Tween Animation Frame untuk membuat Frame-frame dari posisi bola di atas ke posisi bola di samping secara otomatis.. kalo mau gerakan nya halus.. frame nya banyakin aja.. saya pake 5 frame aja..

animasi8

Sekarang udah jadi deh.. gerakan dari atas ke samping kiri.. coba aja tekan tombol Play.

animasi9

Pake cara yang sama .. Sekarang klik frame terakhir.. Klik duplicate selected frame lagi.. Pindahkan bola ke bawah tengah.. lalu buat Tween animation frame.sebanyak 5 juga.. Lalu animasikan bola dari tengah bawah ke tengah kanan.. animasikan lagi..

Untuk yang terakhir jangan sampe kembali ke posisi awal.. tapi buat renggang sedikit..

animasi11

Klik tombol Play..  Kalo udah Ok save di GIF..

Klik File > Save For Web and Devices

animasi12

Hasilnya :

animasi12

Selamat Mencoba…




Bookmark and Share

INGIN MEMPUBLIKASIKAN ULANG POSTINGAN INI DI WEB / BLOG ANDA?
*copy-paste kode di atas ke dalam form posting blog Anda

 

84 Responses to “Belajar Membuat Animasi Dengan Photoshop”

  1. sulis says:

    keren

  2. sulis says:

    wah no atu

  3. k4nk says:

    waw mantap om

    thx om mw coba dulu ah
    :)

  4. nury says:

    kreeeeeeeeeeeen!!!!!!!!!!!!!!!!!! ^_^

  5. saya says:

    om , ,
    tanya ni . .

    klu msal.na pgend nglakuin proses masking pd foto biar modelnya keliatan lebi fokus tu gmna cranya iah ???

  6. zoro says:

    kren…………..kynana bleh juga,
    tpi dics2 bisa ga ya?
    coz gw da nyaman pke cs2

  7. shella says:

    kerennn..coba ah

  8. Om Adi says:

    Wuih keren banget om…
    langsung ikutan nyoba ah..

  9. Henz says:

    BOZ…T

  10. Henz says:

    Boz…Tolong Dong Dalam penyimpanan Dikasih yg Detail Soalna q pakai PhotoshopCS3 stelah disimpan dengan save for web n udah dipilih pick formatna hasilnya gak mau jalan(Bergerak) padahal na animation low di PLAY dah mau jalan…makacieh yah,Moga sukses selalu

  11. wahyudin says:

    wah coba bs sehebat flash. pasti ngiler lagi

  12. anangmangcek says:

    mas sigit..gimiana sih caranya bikin tampilan penjelasan ditutorial. kan ada gambar penjelasannya tuh…apa ada tool ato software khusus, ato langsung pake kamera aja.. tolong kasih tau dong.. makasih ya..

  13. agus adrian says:

    keren……..
    aku coba bikin pake cs 2 berhasil… makasih mas,,

  14. wahyudin says:

    ms sigit mo tXa, kl0 object na berubah gmn ??
    sal nya q coba d CS2 ga bs gnti object. hrs satu object tok.

    thx

  15. ardi says:

    mas… maafff
    saya baru belajar otochop…
    jdi kurang ngerti…heehehe
    pas saya coba sampe tahap animasi
    saya mindahin framenya,,tapui frame yang lain juga ikut kepindah,,
    knapa ya mas….????

  16. ardi says:

    dah bisa massss
    makasih ya,,,,,,,
    mas ajarin cara bikin gambar animasi dunkk…..
    yang bisa lari-lari…hehehehe

  17. sunan says:

    akan aku coba dulu ahh wong keren nih

  18. irfan kamil says:

    gokillllll, keren abiezzzzzz

  19. backer says:

    bozz ko bola di frame dua klo di pindahin bola di frame 1 ngikut jg yah,,?knp yahg..udah di bolak balik,,tetep ngikut,,,mohon ptunjuk,,apa hrus nbikin layer baru yah untuk fram ke 2..?

  20. Hey, great post, very well written. You should write more about this. I’ll definitely be subscribing.

  21. OMAR says:

    tanks. sip lah

  22. Rijal says:

    Wah pinter banget akang…………dapt imunya dari mana seh………

  23. michael says:

    aduh..masih gak bisa nih… waktu frame 2 nya dipindahin .. kok fame yang lain ikut pindah sih .. jadi sama kayak yang frame 2 semua .. bisa tolongin gak ?

  24. zuLfika says:

    nyoba ya boz….. pasti akulaporan lagi kalo gak bisa.. hehehehehe

  25. OdHe says:

    KereN Jg NicH,,,
    Q mw Coba dech………….

  26. carita says:

    mantep banget nich web….. saya bookmark akh

  27. kurotenshi says:

    waw !! kereeeeeeeeeennnnnnnnnnnnnnn
    selalu keren.!!!!!!!!!!

    makasih banyak bagi bagi ilmunya ^^

  28. aliyanto says:

    wuy kere bangt tuh hSILnya bisa nda ya aq buat yang begiti yach?????????

  29. nkas says:

    wah ini bagus dan keren, aku coba dulu ya?ternyata bisa gabungin banyak gambar juga yach. eh makasih ilmunya.

  30. capunk says:

    mmg top bgt yang pny ini…

    gak pelit sama ilmu….

    cantik bgt hasilnya

  31. sanu says:

    gimana klo bikin text berjalan ato yg kedip..? bisa ajarin ga car2nya gimana..?

    Thanks!

  32. jojo says:

    mas copy postingnya yah,,, on cyberholic18.blogspot.com

  33. frybrs says:

    kayaknya fasilitas animation udah ada di cs2 pak, isi menu window kalo gak salah ada animationnya…

  34. Dedy says:

    keren…

  35. [...] saya lagi suka animasi.. hehehe.. saya bikin yang animasi lagi aja yah..Postingan animasi pertama adalah yang bergerak.. tapi tidak bisa merubah bentuk, karena pake cara manual. Sekarang saya coba [...]

  36. shanushy says:

    masih yaa ilmunya
    ntar aq praktekan…

  37. Reza says:

    thank ya…
    bermanfaat tuh ilumnya…

  38. setio says:

    t.o.p bgt dech tutorialnya,,,,

  39. raff says:

    kalo boleh tahu adobe photosop versi berapa sj yg sdh dukung pembuatan animasi ? thx

  40. ridwan says:

    mas copy postingan nie ya..

    asyik juga nie, wan_harapan
    than mas.

  41. Nugie says:

    mau tanya 2 juga ahhhhh mas eeyg puinter nih… aku ikuti cara nya mas eekok malah tu ingkut jalan 2 juga yg lainnya gmna yaaa trs dh di save kok gk bsa bergerak juga tuh gmna nehhhh ajarin donk biar teu nehhh …

  42. Nugie says:

    muhon bantuan nya yaa om… biar dikit teu ilmu na pothoshop jga nehh biar gk kunoo kuno bangt jadi orang ahhh… maklum neh baru b;lajar yg kek ginian kok bagusjga ternyata yaaaa .. tnks bantuan nya bila gkkeberatan biar ane teu yaa

  43. aswin says:

    makasih yaa…sy izin untuk bs belajar lebih banyak lg dengan tutorial2 yg lain ya om….

  44. franchiesco says:

    uah animasina nendang buanget jdi aq bsa tunjukin deah ke tmen2 hehehe thak’s so much

  45. ZenithNet says:

    Kang.. makasih banget ya bingbingannya…
    aku dah bisa bikin animasi banner dari photoshop.. sumapah tadinya blank banget..
    Nuhuunn… mampir ya kang liat hasilnya

  46. sandi says:

    udah di save2 koq ga berhasil2 ya mas??? saya pake cs3 …

  47. firdaus says:

    mmmmmmmmm oke juga yach,tapi sepertinya ribet yach,lebih mudah pake ADOBE PRIMIER lebih ringkas loooo

Leave a Reply