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.
ewkwkwkwk ternyata bisa juga yaw pake phtoshop thankyou brada ,gue cari2 ini buat bikin banner
ReplyDeleteWuih, yps ternyata mau buat banner bergerak ya? Muantap dah.. :)
DeleteHarus 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...
ReplyDeleteummm, bisa buatin aku gak ya?
*loh?
Nah lho, ujung2nya itu loh.. :D
Deleteku biasanya pake yang mudah saja. Pake photoscape, tinggal pilih-pilih gambar, atur waktu jadi dah
ReplyDeleteHahaha.. Belum nyobain ane, taunya di flash sm Phothoshop aja.. :D
Deletekomen :
ReplyDeleteambar keluarga hantunya dapet dari mana? ngakak bener gambarnya. tuyulnya megang lolipop wkwkwk asli kocak
Hahaha.. Dari google mbak.. :)
Deletetips yang bisa buat wajah jado bersero ada gak? soalnya saya pengen ngedit foto temenku yang muka nya kayak aspal :D
ReplyDeleteHaha.. Ada tapi belum tau caranya gueh.. :D
DeleteTernyata pake photoshop juga bisa ya...Keren. Kualitas gambarnya tetep bagus. Nice info.
ReplyDeleteYa bisa dwong, hehe.. Iya tep bgus gambarnya.. hihi
Deletewah tumben2an nih kak Feby bahas Soto ayam eh sotoshop
ReplyDeletega aga tomobol like ya buat posting ini hehe
Ya sekali2 ngasih yang bermanfuut.. :)
Deleteweew tumben bener :p #kaburrr
ReplyDeleteIya nih lagi bener broo,.. :D
DeleteKalo ssh.... Mending pake photoscape....
ReplyDeleteAne belum pernah nyoba itu Ris, Bon.. Eh itu yg komentar siapa!
Deleteoww.. ane belom pernah nyoba noh ..
ReplyDeleteane copas ye buat di laptop gan ... *mohon ijin
he
Wokeh sob.. :D
DeleteOh, dibikin begitu hohoho ternyata bisa juga pake photoshop! keren bang :D
ReplyDeleteYa bisa dong, gue aja baru tau.. wkwkwk
Deletemahasiswee...jelasiinya yahud banget dah, *aku mau jadi murid mu selalluuu* hahahahhaa :p
ReplyDeleteHahaha.. Boleh, sehari 100ribu.. :D
Deleteitu ndak bisa berlompat lompat bung? cuman geser kiri doank kok gak jatuh jatuh yak
ReplyDeleteHahaha.. itu gambarnya bukan buat sendiri, apa aja bisa kok. Lo mau guling-guling, lompat-lompat, kejang2 jg bisa.. :D
Deleteoke deh makasih tutorialnya... gue simpan dulu yah....:D
ReplyDeletemakasih yah..
Wokeeeehhh... Simpennya di tempat yg sejuk dan tidak terkena sinar matahari langsung ya.. :D
Deleteeh, sekian lama pake photoshop baru tau gue ada fungsi gitu ._.
ReplyDeleteBiasanya gue pake photoshop cuma sebatas ngedit foto atau menggambar doang.
Yaaa, gue aja baru tau,. :D
Deletewah keren sob,, ilmu baru nich...
ReplyDeletepasti bermanfaat,,
*cengo* Wah, kadang kadang postingan bang Feb bermanfaat ya #plak. Tapi kok saya gak bisa ya.. TTT.TTT
ReplyDeletemantap, semua triknya jitu banget.. sip..
ReplyDeletepocongnyah bgerak bgerak..!!!
ReplyDeletewah dengan di duplikat ya gan. mantap ni metodenya. coba dulu ah...
ReplyDeletewah~
ReplyDeletecatet dulu, kali aja mau blajar ^^
selain photoscape ternyata PS juga bisa.
ReplyDeletemantab
Tutorial yang lengkap dan ilustratif.
ReplyDeleteSama bang, ane juga masih newbie untuk urusan design.
wah keren. . . .. copat tutorialnya ya bang. . . .
ReplyDeleteMaksudnya? copas? silahkan.. :)
Deletealhamdulilah, abangku sudah menjadi pemuda yang berguna bagi nusa dan bangsa :')
ReplyDeleteeh bang, ym mati aja?
xoxo,
gitasyalala.blogspot.com
wah ini mainan w dulu sob pas sekolah Multimedia,jadi kangen kalau liat tutorialnya soalnya dah jarang main begituan sejak 3tahun yg lalu,hehe
ReplyDeleteahahah dulu sebel banget udah bisa bikin animation pake photoshop malah lupa mulu gimana caranya
ReplyDeleteThanks for sharing. Its good to see fresh content always.
ReplyDeletekalo make fotosshop 7.0 bisa gak ya teks.
ReplyDeletemakasih mas, jadi terbantu.. :D
ReplyDeletenuhun nya aku teh jadi bisa...hee
ReplyDeleteyour 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
ReplyDeleteterimaksih saya baru mudeng atas penjelasan anda.
ReplyDeletewow gitu yaa...
ReplyDeleteitu pasti contoh sederhananya yaa....
:)