Friday, May 17, 2013

Cara Mudah Membuat Animasi GIF Menggunakan Photoshop

Huhhh dah lama ga update yaa ,

Kali ini kita akan membahas cara untuk membuat gambar Animasi/Bergerak.
Simak Langkah"nya yaa Sobatt 


Ada banyak cara untuk membuat gambar bergerak digital dengan extensi .gif. Bisa dengan software yang memang khusus untuk membuat gambar bergerak (gif maker, gif creator, dll), atau dengan softare desain grafis yang popular salah satunya dengan photoshop. Membuat gambar animasi bergerak dengan photoshop. Membuat gambar bergerak sama halnya dengan kita mempunyai beberapa gambar (bisa saling berhubungan) yang kemudian kita tampilakan bergiliran secara cepat sahingga tampak bergerak.Satu scene gerakan bisa terdiri dari beberapa gambar.
saya memakai gambar berhubungan berikut :
1.  
    Buka Photoshop kemudian buka masing-masing gambar.
2.   Satukan gambar dalam 1 file photoshop dengan menduplikat layer dari masing-masing gambar (file) ke salah satu file. [1 gambar yang dibuka dengan photoshop = 1 file]. Caranya,  klik kanan pada layer yang akan dipindah lalu pilih duplicate  layer. Di pilihan kotak duplicate, pilih lokasi dimana layer hasil duplikasiakan diletakkan.
 Lalukan terus hingga semua layer ada dalam satu file seperti tampilan berikut.
3.       Klik menu window pilih animasi, untuk adobe photshop yang lama belum ada, bisa pakai tombol adobe image ready di bagian paling bawah toolbox.
akan mumcul jendela animasi di bawah jendela kerja anda.
 PERHATIKAN :
"frame yang tampil di jendela animasi  akan sesuai dengan layer-layer yang terlihat di panel layer, otomatis pula sesuai denga gambar yang tampil di jendela kerja"
Langkah selanjutnya kita akan mulai membuat frame untuk menyusun animasi
 4.    Membuat frame 1 : tampilkan layer 1 di panel layer, lalu di jendela animasi klik tombol duplicate  selectedframes sehingga sekarang ada 2 frame
PERHATIKAN :
"Frame 1 telah jadi, gambarnya sesuai layer 1. Frame 2 masih belum jadi, ia masih berubah-ubah sesuai tampilan layer yang terlihat"
5.  Membuat Frame 2 : tampilkan layer 2 kemudian klick duplicate selected frame pada jendela animasi
6.  Membuat Frame 3,3,5 dst : caranya sama dengan membuat frame 1 dan 2. Tampilkan layer kemudian klik duplicate selcted frame di jendela animasi.
7.      Mainkan animasi dengan mengklik tombol play animation.
ada tombol (icon tong sampah) untuk menghapus frame yang tidak dibutuhkan. Anda juga bisa mengatur lama tayang tiap frame pada tombol pengaturan waktu (mata panah hitam) anda juga bisa menggunakan opsi lain untuk jumlah penayangan.
PERHATIKAN
Frame bisa diulang-ulang sesuai kebutuhan agar tampilan animasisesuai keinginan.
atur waktu penanyangan sesuai kebutuhan.
di gambar ini saya membuat 12 frame dengan mengulang beberapa frame seperti gambar di bawah ini.
8.       Menyimpan File animasi
klik file pilih save for web and device. Atur format ke gif. kemudian atur ukuran imagenya (secukupnya) kemudian tekan save.
 9.    Berikut ini hasil animasinya.




                                                           Download Photoshop Disini
 TAMBAHAN
1. semakin banyak frame dan semakin detail frame maka animasinya semakin kelihatan halus (tidak patah-patah)
2. Gambar tidak harus berhubungan tinggal seperti apa kebutuhan animasinya
3. misal menggunakan gambar berhubungan anda bisa menggambar manual kemudian scan, atau anda bisa print screen dari film.
TWEENS ANIMATION FRAME
digunakan untuk membuat animasi dari 2 gambar berupa perubahan opacity yang jumlah framenya bisa ditentukan. misalnya saya punya 2 gambar berikut




lalu klik tombol tweens animation frames dan kali ini saya menambahkan 10 frame, total menjadi 12 frame seperti gambar di bawah ini
Hasilnya seperti berikut


Sumber

Terima Kasih Dan Tetap Kunjungi Blog Saya :)
Download More Games At alfianryuma.blogspot.com

40 comments:

  1. wah, detail lengkap nih, makasih infonya

    ReplyDelete
  2. Keren mah ini, lengkap, keep sharing yang informatif gini gan

    ReplyDelete
  3. Wah keren artikelnya sangat mudah dipahami

    ReplyDelete
  4. oke terima kasih dah aplikasinya,akhirnya saya jadi tau

    ReplyDelete
  5. oke pak sangat menarik sekali animasinya

    ReplyDelete
  6. Gambar animasi bergerak diatas keren banget pak

    ReplyDelete
  7. Ini jadi kayak slide gif gitu ya pak? Mudah juga ya pakai photoscape buatnya. Terima kasih tutorialnya

    ReplyDelete
  8. boleh nih saya coba pak.seperti penjelasannya yang simple dan jelas di mengerti.yakin kayanya terlihat tidak sulit ya

    ReplyDelete
  9. terima kasih atas trick yang berguna ini pak bisa buat banner animasi ni

    ReplyDelete
  10. Sip Sama" Semua :-)
    Keep Visit Blog ane ya

    ReplyDelete
  11. gan shortcut untuk duplikasi image nya apa?
    pemula

    ReplyDelete
  12. Makasih gan infonya, sangat membantu

    ReplyDelete
  13. Nice gan praktek dulu deh
    innocenceberbagi .blogspot .com

    ReplyDelete
  14. Terlalu banyak ikaln waktu mendownload

    ReplyDelete
  15. Replies
    1. emang kalo buat newbie yang baru bisa main photoshop memang susah bro sama seperti saya dulu..

      Delete
  16. info bermanfaat
    bisa dicoba buat iklan di web nih
    thanks gan!

    ReplyDelete
  17. Keren Nih...!! Thanks..!

    ReplyDelete
  18. Saya ngesave nya selalu error. Gimana solusi nya trimakasih

    ReplyDelete
  19. thanks bangt gan ilmunya....
    moga2 ilmu yang agan share ini menjadi amal baik buat agan ya...
    makasih banget gan sekali lagi, bener2 manpaat banget buat ane

    ReplyDelete
  20. Mantab bgt gan infonya, izin menerapkan ya..
    Lowongan kerja sarjana http://expocpnsbumn.blogspot.com/search/label/S1

    ReplyDelete
  21. siap ane coba gan. jgn lupa kunjungan baliknya di http://kholidintok.blogspot.com/

    ReplyDelete
  22. mantaps bro, bermanfaat sekali ilmu nya

    ReplyDelete
  23. Terima kasih semua nya , semoga bermanfaat ^^

    ReplyDelete
  24. sangat bermanfaat silahkan kunjungi Vrand Computer Bekasi - Solution Your IT Jasa Service Komputer di bekasi - Jasa Service Printer dibekasi - Instalasi Jaringan - LAN - WAN - MAN - Troubleshooting - Maintenance

    ReplyDelete
  25. kak bisa gak kalau langkah-langkah ini dikirimkan ke email saya, ini sangat bermanfaat

    ReplyDelete
  26. ceramic coating

    If you are looking for the best ceramic coating for your car? JR’S Auto Detailing & Protection has been providing quality and excellent ceramic coating service for your auto car.

    to get more - https://jrsautodetailing.ca/ceramic-coating/

    ReplyDelete

Silahkan bertanya bila ada masalah pada link atau kesalahan atau eror lainnya dengan Berkomentar , Berkomentarlah dengan kata - kata yang baik dan Sopan ☺