![]() |
|
| Kalian bisa membuat animasi dengan gambar yang kalian punya dengan format gif. Ada banyak software yang bisa digunakan untuk membuat animasi dengan format gif, namun disini aku mengajarkan dengan menggunakan software gambar yang ‘hampir’ semua orang punya yaitu Photoshop |
|
| 1. Prinsip dasar atau ide utama dari membuat animasi gif dengan photoshop adalah menggabungkan frame-frame gambar sehingga terlihat bergerak apabila dijalankan. Frame-frame gambar ini pada dasarnya dibuat dengan menghilangkan dan memunculkan elemen-elemen dari tiap gambar. Elemen-elemen gambar ini akan kita pisahkan dalam bentuk layer-layer. Untuk gambar animasi mobil seperti gambar diatas kita memerlukan 7 layer elemen ditambah 1 layer background. Lihat gambar disamping, ketujuh layer elemen tersebut adalah background hitam untuk lampu, lampu merah, lampu kuning, lampu hijau, gambar mobil, tulisan BRUUUM, dan efek cahaya. | ![]() |
| 2. Setelah kita buat keseluruhan elemen yang akan dipakai, selanjutnya kita akan membuat frame pertama. Caranya yaitu pertama kalian harus membuka panel animasi dengan cara memilih menu Window > Animation. Maka akan tampil tampilan seperti gambar disamping yaitu terlihat satu frame dengan semua elemen terlihat. | ![]() |
| 3. Selanjutnya kita akan membuat animasi dengan konsep sebagai berikut:
pertama: layar putih tidak terlihat satu elemen pun. kedua: kemudian muncul lampu merah ketiga: kemudian muncul lagi lampu kuning keempat: muncul lampu hijau yang menandakan mobil dapat melaju. kelima: muncul tulisan BRUUUM !! sebagai gambaran bunyi mobil yang menderu. keenam: mobil melaju dari kanan ke kiri dengan cepat dan meninggalkan efek cahaya. ketujuh: efek tulisan BRUUUM perlahan menghilang. Sekarang lihat gambar disamping, untuk membuat animasi tahap pertama yaitu tampilan putih tidak terlihat satu elemen pun, dilakukan dengan cara membuka tab “Layers” dan menyembunyikan semua layer kecuali background. Kalau bingung bagaimana cara menyembunyikan layernya, klik saja ikon mata di sebelah kiri tiap layer |
![]() |
| 4. Setelah semua elemen disembunyikan, selanjutnya kita pindah lagi ke tab “Animation (Frames)”. Sekarang kita atur waktu tampilan pada frame pertama ini. Caranya klik tulisan “0 seconds” lalu pilih satu detik untuk tampilan frame pertama ini. Ini artinya frame ini hanya ditampilkan selama satu detik lalu pindah ke frame selanjutnya. | ![]() |
| 5. Langkah selanjutnya adalah membuat frame kedua. Caranya klik ikon seperti pada gambar yang ditunjukkan dengan bulatan merah. Ikon ini akan menduplikasi frame sebelumnya sebagai frame baru. Atur waktu tampilan frame ini menjadi satu detik. Frame ini selanjutnya akan digunakan untuk memunculkan gambar lampu merah. | ![]() |
| 6. Sekarang mengatur tampilan untuk frame kedua ini. Karena frame kedua ini akan ditampilkan gambar lampu merah yang menyala maka layer ‘merah’ dan background ‘hitam’ ditampilkan kembali. Caranya dengan membuka tab ‘Layers’ lalu mengklik ikon kotak di sebelah kiri layer ‘merah’ dan ‘background hitam’ seperti gambar disamping. | ![]() |
| 7. Setelah frame kedua ini diatur tampilan layernya maka tab ‘Animation (Frames)’ sekarang akan tampak seperti gambar disamping. | ![]() |
| 8. Langkah selanjutnya adalah perulangan dari langkah ke 5,6, dan 7 namun bedanya sekarang yang ditampilkan adalah lampu kuning dan lampu hijau. Namun jangan lupa untuk mengatur waktu tampil dari lampu kuning dan hijau menjadi satu detik. Setelah diatur frame dan layer kuning dan hijau maka tab ‘Animation (Frames)’ kira-kira akan tampil seperti gambar disamping kanan ini. | ![]() |
| 9. Langkah berikutnya sama seperti langkah-langkah sebelumnya yaitu menampilkan tulisan BRUUUUM !! dengan menambahkan frame baru dan menampilkan layer tulisan ‘BRUUUUM!!’. Namun atur waktu dari tampilnya frame ini menjadi dua detik seperti gambar disamping. | ![]() |
| 10. Tahap selanjutnya agak sedikit sulit tapi mudah untuk dilakukan. Nah lo, karena efek ini keliatannya sulit namun untuk membuatnya diperlukan langkah yang mudah |
![]() |
| 11. Buat lagi frame selanjutnya dengan menduplikasi frame sebelumnya (frame 6) kemudian posisikan mobilnya di sebelah kiri area gambar seperti terlihat pada gambar disamping. Untuk kedua frame ini, atur waktu tampilan menjadi 0 detik atau ‘No delay’. | ![]() |
| 12. Langkah ini adalah langkah untuk membuat mobil bergerak dari kanan ke kiri. Pertama kita akan memilih kedua frame untuk digabungkan dengan cara menahan tombol shift lalu klik layer 6 dan layer 7 seperti gambar di kotak merah. Setelah kedua layer tersebut dipilih, selanjutnya kita akan menerapkan efek tweening pada kedua frame tersebut. Apa maksud dari efek ini? Efek tweening ini dimaksudkan untuk mempermudah kita untuk membuat suatu animasi posisi, dan transparansi yang berpola. Misalnya apabila kita akan membuat gambar mobil tersebut bergerak dari kanan ke kiri, daripada kita mempersulit diri sendiri dengan membuat satu persatu frame lalu kemudian diubah posisi mobilnya sampai ke kiri, kita dapat membuatnya lebih mudah dengan membuat dua frame saja yaitu frame awal posisi dan frame akhir posisi. Selanjutnya frame-frame diantara frame tersebut akan dibuat secara otomatis oleh Photoshop da pastinya hasilnya lebih smooth dibandingkan frame yang kita buat secara manual.
Untuk menggunakan efek ini, setelah dua frame awal dan akhir tadi dipilih, selanjutnya klik ikon yang ditunjuk tanda panah merah, dan masukkan nilai ‘Frames to Add’ menjadi 7. Klik OK. |
![]() |
| 13. Sekarang masuk tahap menculnya efek cahaya dari mobil yang melaju dengan kencang. Efek ini akan kita buat agar menghilang secara perlahan-lahan setelah kemunculannya di frame ke 11. Prinsipnya adalah menurunkan perlahan-lahan Opacity dari layer ‘light’ dari 100% menjadi 0. Sekarang klik frame 11 lalu munculkan layer terakhir yaitu layer ‘light’ dan biarkan opacitynya 100%. Lihat gambar. | ![]() |
| 14. Selanjutnya klik frame ke 12, munculkan layer ‘light’, lalu turunkan Opacitynya menjadi 60%. Lihat gambar. | ![]() |
| 15. Lakukan cara yang sama untuk frame ke 13, dan 14. Namun atur Opacity untuk frame ke 13 menjadi 30% dan 0% untuk frame ke 14. Kalian dapat mengklik tombol ‘Play pada tab ‘Animation (Frames)’ untuk melihat hasil sementara animasi kalian. Kalian akan melihat efek cahayanya perlahan-lahan menghilang karena transparansinya diturunkan sampai 0. | ![]() |
| 16. Sekarang kita memasuki tahap akhir! Pada tahap ini sebagai penutup animasi kita, kita akan membuat tulisan BRUUUUUM!! menjadi hilang perlahan-lahan. Caranya sama seperti langkah ke 12 namun yang dimainkan disini bukan posisi namun transparansi. Caranya buat frame ke 15 dengan menduplikasinya dari frame ke 14. Lalu atur Opacity dari layer BRUUUUM!! di frame 15 menjadi 0%. Setelah itu klik tweening, dan atur nilai ‘Frames to Add’ menjadi 10.
Yak itu dia tutorial photoshop saya yang pertama. Hasil akhirnya dapat kalian lihat seperti gambar di awal tulisan. |
![]() |
Silahkan dicoba! Disini aku sertakan file PSDnya. Untuk mendownloadnya silahkan klik disini.


















wah ship nih tutorialnya . . . boleh dicoba eay.
OKe nanti kalo dah berhasil komen ya ..
boleh juga thanxsssssss
KURANG KEPENAK!!!!!!!!!!!!!!
walaah,, apane sing kurang kepenak mas ??!!
alhamdulilah
,, (jadi semangat))
Bagus mas animasinya..
Trus nyimpenya ke format gif gmana mas cranya…?
klik, File > Save As > trus pilih format .gif ..
Maksut sya biar gambarnya ttep bsa gerak mas,, gimana cranya,, cz kmren sya simpen format gif gambarnya g bisa gerak..
Photoshop punya sya cs3
coba gunakan File > Save for Web & Devices > formatnya GIF ..
Y mas,, tankiu bgt.. Moga karya mas tmbah bgus2…
Minta tolong mas, bagaimana caranya membuat animasi lampu kendaraan yg berkedip kedip menggunakan flash mx, ato cari tutorialnya dimanaya.
Thkns banget
aku sedang menulis tentang tweening di flash ,, doakan saja cepat selesai
Nanti dari situ bisa dikembangkan sendiri menjadi animasi lain
wahh..
kayaknya hampir sama microsoft power point…
tutorial yg kaya anime beitu ad gk?
yap prinsipnya mirip kayak power point, tapi menurut aku lebih mudah pake photoshop dan sepertinya kalo di power point ga bisa di export jadi gif .. cmiiw
tutorialnya keren dan puanjang….
salam kenal dari seorang pemula
thanks, tapi tutorial GIMP dan Inkscape anda keren juga, seperti bukan pemula
…
tutorialnya sepp mz,sangat berguna bgi saya yg blom bisa…
alhamdulilah
thanks banget yach mas….ntar tak cobain…….
moga ja dengan ilmu yang mas bagi bisa bermanfaat bagi semua pengguna photoshop…..thank
mantatap mas,,,, kebetulan sekali q lagi mo presentasi, jadi lebih seru kalo ada gambar geraknya?????
Wah Sumpah Keren Buanget Boss!!!Tapi saya masih bingung cara nyimpenya biar gambarnya tetap bisa gerak gmn boss???Thx…….

sepertinya diatas udah ada yang nanya ..
coba gunakan File > Save for Web & Devices > formatnya GIF ..
wah, makasih banget om. saya langsung bisa nech….
Wah nice tutorial, gua suka banget sama animasi.
sini kalo mau belajar animasi pake flash, Visit saja Plus44 Cyber Flash
sip

keren2… wogh ya, ad referensi buat tampilan web ga?
trims,, untuk referensi tampilan web coba cek situs-situs berikut, mereka adalah web design company yang aku sering kunjungi untuk cari inspirasi,
1. 45royale
2. Fudge
3. flex360
4. the KDU
5. OH! Media
wah tutor nya brmnfaat bgt, saya udh jd 1 biji nih

http://img225.imageshack.us/img225/7404/sif.gif
@divina : hahaha
keren-keren, itu ketupat ya ? Mohon maaf lahir bathin juga ya div !!
bagus bgt mas karyanya…:!: .
wah..asik nie.. turorialnya lengkap n detail jadi gampang ngerti..
greatlah pokoknya…
tq yaw…
tapi kalo bisa itu tutorial harus lengkap donk
INI bukan.na d5na sich………????????

di adobe ps7.0 ko di window nya ga ada menu animasi mas
@mang : kalo di ps 7.0 setelah bikin layer kamu harus pindah ke Image Ready dengan mengklik tombol yang ada di paling bawah toolbar. Selanjutnya sama seperti tutorial diatas ..
makasih banget mas saya niru konsepnya ni dah jadi 1 thank you mas ku pake ps 7
http://img442.imageshack.us/img442/7194/69378331.gif
hahaha kreatif juga nih akbar … mobilnya jadi keluar api gitu … ada efek daun-daun berguguran juga lagi ….

alhamdulillah berkat mas!
sekali lagi thank you
bagian tersulit.a adalah ketika mmbuat mobil tsb bergerak dri kanan ke kiri….hhhuuuhhhhhh cara memindahkannya selalu gagal…..hihihihihihihihihihihihih

mas, mau tanya n minta tlg…bagaimana caranya gambar animasi ini di save dlm bentuk .gif…saya coba save tp waktu di buka, file gif-nya gak jalan animasinya…tks
sangat bagus,bikin lagi ya yg bgs lgi/
sangat..sangat bermanfaat ikut nyedot ilmunya ya bos….

mangstaaabbbb bossss !!!!!

mudah di pahami, thanks a lot
d tnggu tutorial yg laen’y yy….
wah seru gan artikelnya di coba ah,.
Mantab boss. Thx ya. Sekalian promo.
Ingin eksis di facebook? Patut di lihat: Mengedit foto dalam 3 menit dengan photoshop.
Salam kenal,bung Bara Sukaton…
saya sudah coba save pake cara ini:File > Save for Web & Devices > formatnya GIF, tetap gambarnya tetap gak gerak.(Pake Photoshop CS4 V.11.0)
thanks
@tama : seharusnya sudah bisa bergerak karena barusan aku coba pake CS4 v11 bisa kok. Mungkin kamu buka file gifnya pake software yang ga support animasi. Coba buka pake Windows Picture and Fax Viewer (bawaan windows) … goodluck!
tengkyu masbro, saya uda bisa sedikit-2.
OK.. Tuh but da yang laen g…..

okelah………………..



pi gmna caranya buat animasi xg sedikit lbih rumit gtoe , bza ga’…………………???
yg lbih keren gtoe……………
hehehe………………………!!!
welew mas puannnnnjang banget ampek penig ni pale…..

coba ajari yang lain aja ya….tak tungguin ni share nya koe
matur nuwun lo mas …..
kk di save dalam betuk apa ya???…….
dalam bentuk gif dong bro .. pilih yang save for web & devices
Ok… punya
tak jajal sik mas
Kalo pake CS4, simpan pake save for web & devices, setelah klik save, terdapat 3 kotak yang harus ditentukan isinya
1. nama file : terserah namanya
2. save as type : pilih image only (*.gif)
3. setting : pilih background image
q coba dulu bosss
Siipp…
udh siap ,jadi boss…
thx tutorialnya yah
Bos, knapa di masukin ke blog gambar nya jadi gak gerak???? mohon solusinya……….
@noels : mungkin kamu blum pilih save for web and devices atau juga kemungkinan halaman blogmu blom selesai di load sehingga hanya terlihat gambar awal, pastikan halaman blog sudah selesai di load
bro z udah coba semua langkah2x, n jdx mantap bnget

saya kesulitan nge savex, sy pake photoshop cs3
pas coba buka dengan Windows Picture and Fax Viewer malah picture failed
Omm ,, kok di komputer saia mode GIF nya gk gerak ya ?
… makasih, n lam kenal aja buat semuanya !
Kalo membuat animasi pd photoshop animasi’a dari gambr kecil ke besar gmn?
thanks
Haha……. trimaksh ya tutorialnya, aku cuma pengen tahu gmana caranya nyimpen filenya…

I took my first loan when I was not very old and that helped my business very much. However, I require the sba loan again.
mantap lah,,,,,,,,bisa jdi tgas di kmpus,heheheh
mas,, makasih banyak tutorialnya ngebantu bgt,, saya jadi bisa buat avatar sendiri di forum.. top dah, cuma 15 menit udah bisa ngerti tutorial ini..
kalo mau ngedit file animasi gif yg sudah jadi, dgn cs4 gimana??
Waaahhh,, thanks yeah mas,,, ane da bisa,, biar cuman dikit²,,,
http://i775.photobucket.com/albums/yy37/tolonggalo/tolonggalo-6.gif
mas tpi yg sya pke d’rmah photoshop cs4 bkan cs2
yah syng_nya komptrku gg d photshop ny.tp q jd ngrti gmn crny mmbuat animasi thanks y…
ada yang lain ga???

msalkan bwt slide show…
tpi gmbr’a smua hdup??
coz,w dh tw yg kya gni…
thnxs…
SIIIPP;.
TKS DH W JADI TAUUU
ini yang aq cari.. thanks…….

Ini yang aq cari… Thanks

yang di maksud klik di bawah toolbar apa itu mas?
