Minggu, 19 Februari 2012

Cara buat gambar gerak dengan Photoshop

Postingan gue kali ini lebih edukatif. Ya, mungkin ini karena tadi pagi gue ketelen kulit telor pas makan nasi kuning. Banyak yang udah tau gimana caranya untuk buat gambar gerak ini, apalagi anak-anak desain, ini sarapan bagi mereka. Tapi gimana kalau untuk orang awam yang pengen buat gambar gerak berformat (.gif) untuk webnya atau blognya biar lebih entertaining. Berbekal software photoshop CS3, versi hematnya yang portable aja (cari sendiri di google yaw), kita udah bisa buat gambar bergerak. Buat yang belum tau gimana caranya, kali ini gue, mahasiswa galau TA, akan memberikan tutorialnya.

1. Buka Photoshop. Kemudian ke tab Window terus conteng Animation kayak gambar dibawah.



2. Setelah itu akan muncul tampilan sebagai berikut:



Gambar diatas itu tampilan buat backgroundnya. Kalau mau putih aja ya gitu aja, kalau mau kasih background lain ya tinggal masukin gambar aja.

3. Selanjutnya buat layer baru. Caranya pilih tab Layer -> New -> Layer, kayak gambar dibawah.


Layer itulah yang nantinya akan kita selipin gambar-gambar dan tulisan yang seolah-olah hidup alias bergerak.

4. Terus masukin gambar apa aja untuk objek bergeraknya.


Nah sebagai contoh gue masukin gambar keluarga hantu yang terdiri dari kuntilanak, pocong dan tuyul (ini sebenernya gak penting!). Terus ada di gambar yang gue buat panah merah itu adalah Duplicate selected frames yang istilahnya frame-frame atau layarnya untuk buat seberapa banyak objeknya bergerak getho.

5. Ini tampilannya setelah kita klik duplicate selected frame.


Kemudian untuk membuat layer yang sama pilih Duplicate layer pada layer yang akan kita buat dua (lihat sebelah kanan). Ntar nama layernya kita bedakan dari sebelumnya biar mudah ngeditnya. Misal layer 1 kita duplicate namanya jadi layer 2, istilahnya itu copas. Nah, di layer 2 itu gambarnya bisa kita edit, apa mau di pindahin ke kanan, ke kiri, atau tambah tulisan apa gambar, terserah. Kalau cuma mau di geser gambarnya ya klik Move tools aja di sebelah kiri yang gambar panah nyerong ke kiri atas gitu (cari sendiri, hihihi).
.
6. Selanjutnya adalah pilih layer yang akan ditampilkan kedalam frame-frame.


Misal di frame 1 kita pilih layer background sama layer 1 aja, terus di frame 2 kita pilih layer 2 sama background aja, gitu aja terus (coba aja ntar tau sendiri maksudnya). Tentunya kalau gambarnya gak pengen sama di setiap frame yaaa setiap layer harus berbeda, misal layer 1 gambar di tengah, layer 2 gambar ke kiri dikit, layer 3 gambar tambah ke kiri lagi, jadi seolah-olah dia jalan ke kiri. Variasi di layer akan membuat pergerakan gambar semakin okeh geelllaa...

7. Kemudian atur pergerakan frame.


Tuh ada di di kotak merah yang gue buat. Once itu gambarnya bergerak sampai akhir aja, dia gak akan ngulang lagi dari awal (berhenti diakhir frame). Kalau Forever dia bergerak terus, kalau web kita gak ada gangguan, tuh gambar gak akan berhenti sampai kiamat. Kalau other kita pilih gambarnya bakal ngulang berapa kali. Biasanya yang banyak dipakai itu Forever.

8. Berikutnya ngatur seberapa lama framenya berpindah.


Nah itu yang gue buat panah merah adalah waktunya berapa detik frame 1 berpindah ke frame dua, frame dua ke frame tiga, dst. Bisa dilihat sendiri berapa lama waktu berpindah yang kita mau.

9. Berikutnya melihat hasil dengan tombol Play (letaknya di kotak merah yang gue buat).



10. Simpan hasilnya di File -> Save for Web & Device. Save aja terus simpan di folder yang diinginkan.


Yup, udah selesai, sekarang kita lihat hasil contohnya:

Itu gue buat semakin ke kiri. Yah begitulah tutorial singkatnya buat gambar bergerak. Tinggal di variasi sesuai keinginan. Biasanya orang buat gambar gerak ini untuk banner. Semoga tutorial dari gue, mahasiswa galau TA, ini akan bermanfaat bagi siapa pun yang membutuhkannya. Nantikan tutorial-tutorial suka-suka gue lainnya.

51 komentar:

  1. ewkwkwkwk ternyata bisa juga yaw pake phtoshop thankyou brada ,gue cari2 ini buat bikin banner

    BalasHapus
    Balasan
    1. Wuih, yps ternyata mau buat banner bergerak ya? Muantap dah.. :)

      Hapus
  2. Harus pake CS3 ya? kalo pake Photoshop 7 masa gak bisa? padahal aku punyanya yg itu aja lho... tapi ada fasilitasnya juga kok yg 7 itu. dulu-dulu sih pernah nyobain, tapi gak sukses. kalo diajarin gini kayakanya bakal sukses nih...
    ummm, bisa buatin aku gak ya?
    *loh?

    BalasHapus
  3. ku biasanya pake yang mudah saja. Pake photoscape, tinggal pilih-pilih gambar, atur waktu jadi dah

    BalasHapus
    Balasan
    1. Hahaha.. Belum nyobain ane, taunya di flash sm Phothoshop aja.. :D

      Hapus
  4. komen :
    ambar keluarga hantunya dapet dari mana? ngakak bener gambarnya. tuyulnya megang lolipop wkwkwk asli kocak

    BalasHapus
  5. tips yang bisa buat wajah jado bersero ada gak? soalnya saya pengen ngedit foto temenku yang muka nya kayak aspal :D

    BalasHapus
    Balasan
    1. Haha.. Ada tapi belum tau caranya gueh.. :D

      Hapus
  6. Ternyata pake photoshop juga bisa ya...Keren. Kualitas gambarnya tetep bagus. Nice info.

    BalasHapus
    Balasan
    1. Ya bisa dwong, hehe.. Iya tep bgus gambarnya.. hihi

      Hapus
  7. wah tumben2an nih kak Feby bahas Soto ayam eh sotoshop
    ga aga tomobol like ya buat posting ini hehe

    BalasHapus
  8. Kalo ssh.... Mending pake photoscape....

    BalasHapus
    Balasan
    1. Ane belum pernah nyoba itu Ris, Bon.. Eh itu yg komentar siapa!

      Hapus
  9. oww.. ane belom pernah nyoba noh ..
    ane copas ye buat di laptop gan ... *mohon ijin
    he

    BalasHapus
  10. Oh, dibikin begitu hohoho ternyata bisa juga pake photoshop! keren bang :D

    BalasHapus
  11. mahasiswee...jelasiinya yahud banget dah, *aku mau jadi murid mu selalluuu* hahahahhaa :p

    BalasHapus
  12. itu ndak bisa berlompat lompat bung? cuman geser kiri doank kok gak jatuh jatuh yak

    BalasHapus
    Balasan
    1. Hahaha.. itu gambarnya bukan buat sendiri, apa aja bisa kok. Lo mau guling-guling, lompat-lompat, kejang2 jg bisa.. :D

      Hapus
  13. oke deh makasih tutorialnya... gue simpan dulu yah....:D

    makasih yah..

    BalasHapus
    Balasan
    1. Wokeeeehhh... Simpennya di tempat yg sejuk dan tidak terkena sinar matahari langsung ya.. :D

      Hapus
  14. eh, sekian lama pake photoshop baru tau gue ada fungsi gitu ._.
    Biasanya gue pake photoshop cuma sebatas ngedit foto atau menggambar doang.

    BalasHapus
  15. wah keren sob,, ilmu baru nich...
    pasti bermanfaat,,

    BalasHapus
  16. *cengo* Wah, kadang kadang postingan bang Feb bermanfaat ya #plak. Tapi kok saya gak bisa ya.. TTT.TTT

    BalasHapus
  17. mantap, semua triknya jitu banget.. sip..

    BalasHapus
  18. pocongnyah bgerak bgerak..!!!

    BalasHapus
  19. wah dengan di duplikat ya gan. mantap ni metodenya. coba dulu ah...

    BalasHapus
  20. wah~
    catet dulu, kali aja mau blajar ^^

    BalasHapus
  21. selain photoscape ternyata PS juga bisa.

    mantab

    BalasHapus
  22. Tutorial yang lengkap dan ilustratif.
    Sama bang, ane juga masih newbie untuk urusan design.

    BalasHapus
  23. wah keren. . . .. copat tutorialnya ya bang. . . .

    BalasHapus
  24. alhamdulilah, abangku sudah menjadi pemuda yang berguna bagi nusa dan bangsa :')
    eh bang, ym mati aja?

    xoxo,
    gitasyalala.blogspot.com

    BalasHapus
  25. wah ini mainan w dulu sob pas sekolah Multimedia,jadi kangen kalau liat tutorialnya soalnya dah jarang main begituan sejak 3tahun yg lalu,hehe

    BalasHapus
  26. ahahah dulu sebel banget udah bisa bikin animation pake photoshop malah lupa mulu gimana caranya

    BalasHapus
  27. Thanks for sharing. Its good to see fresh content always.

    BalasHapus
  28. buat ava di twiter gak bisa yah gan..

    BalasHapus
  29. kalo make fotosshop 7.0 bisa gak ya teks.

    BalasHapus
  30. makasih mas, jadi terbantu.. :D

    BalasHapus
  31. nuhun nya aku teh jadi bisa...hee

    BalasHapus
  32. your blog post and article is quite interesting, keep your blog so I can visit again to see your blog posts and articles later .. thanks for the info

    BalasHapus
  33. terimaksih saya baru mudeng atas penjelasan anda.

    BalasHapus
  34. wow gitu yaa...
    itu pasti contoh sederhananya yaa....
    :)

    BalasHapus