Wednesday, August 25, 2010

Cara Membuat Gambar Bergerak ( GIF ) dengan PHOTOSHOP


Sudah tidak diragukan lagi kalau Program yang satu ini bisa menghasilkan berbagai karya yang ”ajaib”. Salah satu hasil karya yang dapat dihasilkan PS (Photoshop) adalah seperti yang akan saya bahas pada postingan kali ini, yaitu membuat karya animasi atau gambar bergerak dengan format GIF.
Tapi disini saya hanya akan membahas tehnik dasar dari pembuatan animasi ini saja, kalian bisa mengembangkannya sendiri, setelah mengetahui caranya yang menurut saya sangat sederhana ini.
ATTENTION : Tidak perlu takut kalau kalian hanya memiliki PS versi ”tempo dulu” atau CS kebawah, karena saya akan tetap memberitahukan langkah-langkahnya, meskipun agak berbeda dengan tutorial ini, karena saya menggunakan PS CS4. Cukup pelajari dengan seksama dan memiliki kemauan yang kuat untuk bisa.
Dan sekarang kita langsung saja mulai pelajaran ini, bukalah program PS anda dan buka dokumen baru dengan ukuran terserah anda, disini saya menggunakan ukuran 500 x 375 pixel dengan Background berwarna Hitam.

Buatlah sebuah kata dengan Horizontal Type Tool, disini saya hanya menggunakan 2 Huruf, yaitu inisial nama saya sendiri (narsis dikit),hehehe.
Saya menggunakan font Moonbeam, jenis font seperti ini bisa anda download Disini. Pisahkan kata tersebut menjadi 1 huruf perlayer dengan cara menggunakan Rectangular Marquee Tool, caranya bisa dilihat pada postingan saya tentang cara Membuat Text Warna-warni.
Sekarang saatnya kita mengarah ke animasi di PS, pada CS4 tidak perlu menggunakan Adobe Image Ready untuk membuat animasi GIF, kita hanya perlu membuka / menampilkan Menu Animasi dengan cara Klik Window dan beri tanda ceklist pada Animation , Tapi untuk Versi dibawahnya ( saya gak tau versi berapa aja  yang masih pake Adobe Image Ready),  silahkan klik Icon Adobe Image Ready, yang terletak dibawah icon warna Background/Foreground. Lihat dibawah ini:

Untuk PS versi CS/8, klik aja icon ”jump to Image Ready”, nanti lembar kerjanya akan berpindah ke Adobe Image Ready, cara kerjanya masih sama koq, tenang aja.
Nah, Sudah samakah lembar kerjanya kaya gambar diatas?kalo sudah, mari kita lanjutkan. Hilangkan icon mata pada layer yang belum diperlukan. Karena saya menggunakan inisial nama saya, yaitu DP, maka saya menghilangkan icon mata pada huruf P dulu, jadi yang terlihat hanya huruf D.

Sekarang klik Duplikat Selected Frames, lalu aktifkan icon mata pada layer berikutnya, lalu hilangkan icon mata pada layer yang tadi aktif.

Pada Frame pertama yang terlihat adalah huruf D, pada frame yang ke dua yang terlihat adalah huruf P, gampang kan,,,nah sekarang tinggal mendulikat frame’nya lagi tapi ingat, saat menduplikat frame menjadi frame ke 3, maka kita harus menukar icon mata yang aktif menjadi tidak aktif, dan sebaliknya. Karena itulah yang nantinya akan menjadi hasil atau nampak bergerak-gerak,.
Atur durasi pada tiap frame sesuai selera anda, durasi ini menentukan seberapa lama perpindahan satu frame ke frame berikutnya.

Dan kita juga bisa mengatur berapa kali gambar tersebut akan bergerak, dengan cara mengganti Forever menjadi ( waktu terserah anda).
 Dan sekarang saatnya menyimpan hasil kerja kita, pada Photoshop CS 4 cara menyimpannya adalah : File > Save for web & Devices,
Sedangkan untuk Photoshop versi CS cara menyimpannya adalah : File > Save Optimize As, atur File type menjadi GIF, dan selesai.

Luangkan waktu untuk mengembangkan tekhnik dasar membuat GIF ini. Selamat berkarya dan semoga bermanfaat ^_=.



Oleh : dwiprazetyo


39 komentar:

VisTaNz D'n said...

thx bos mw ngetest dlu

dwiprazetyo said...

hajaaar mas PSnya...hehehehe....

Anonymous said...

mati jha kau PSCS5
kurang di mngrti N mas bole nnya ga????
Horizontal Type Tool ny sama Rectangular Marquee Tool, dmn ya koq ga ada lbih rinci yha mas mw nmbah ilmu neh... thx gan..

Anonymous said...

mas nnya donkkk

dwiprazetyo said...

apa gan????
pertanyaannya blm jelas saya???
horyzontal type tool sama rectangularnya di PS situ yg g ada????ato gmn ne???

Anonymous said...

Mas mw nannya neh aq Vistanz
Klo mw buat background nya jdi gambar bgitu gmna???

Anonymous said...

westtttttttttttttt
mantap gan

dwiprazetyo said...

anonim : maksudmu dai belakang gambar GIFnya BG gambar gitu????klo gitu, taro aja BG, trus baru bikin GIF seperti cara di atas...BGnya gak usah di utak-atik...

makasiih yaa.. :)

FIESTA LOVE SHOP said...

NUMPANG TANYA CS 3 SAMA DG 4 YA TRS KLO UDAH DI SV GMANA CRA MASUKIN DI BLOG ? SRY LAGI MULAI....

dwiprazetyo said...

apnya ya gan???gambarnya???coba cek ada disuruh masukin gambar, via URL/Upload....pilih upload klo mau langsung di taro di blognya, klo URL di upload di tempat lain dulu, baru URL'nya di copy ke kolom yang di sediain.....
==================================
klo masih kurang paham,silahkan di tanyakan kembali dengan kalimat yang jelas ya gan.....hehehe... ^^v

OLEH - OLEH SS said...

gak bisa jalan geman ni..... udah diturutin masih juga gak bisa

Ngalor Ngidul said...

Thanks bgt buat tutorialnya gan..
ane dari kemaren coba bikin animasi tapi gak tau cara nyimpanya ke format gif..
jadi terpaksa pake gif animator terus...
ternyata segitu gampang...
dasar..
gini neh klo belajar tanpa guru...

dwiprazetyo said...

~ ngalor - ngidul : masama gan, saia juga otodidak koq....oia, blognya sudah saya follow, follow back yaa...matur tengkyu atas kunjungannya juga :)

Bazhak said...

Manteub Gan..
tenk's yah..!!!!!!

dwiprazetyo said...

~ om bazhak : terima kasih juga atas kunjungannya gan....!!!!

RaF.Kagamine said...

masih kurang ngerti nih cara pindahin katanya @_@

dwiprazetyo said...

~ RaF.Kagamine : di pelajarin sambil praktek pelan² gan, coba² diulangi dan ulangi, saya yakin akan jadi bisa, pahami setiap langkahnya.... sukses yaa :)

Lhanna said...

wah,, ok nih tutorial,,
thankz ya bro!!

dwiprazetyo said...

masama gan,
semoga bermanfaat :)

Yosev Marshal said...

thx gan, bermanfaat bgt ni

dwiprazetyo said...

~ Yosev Marshal : saya senang klo bisa bermanfaat :)
makasih atas kunjungannya selalu :)

As03ka said...

Thanks mas DePe bwt ilmunya

dwiprazetyo said...

~ As03ka : sama² :)

Anonymous said...

thanks gan gw coba berhasil..
tapi itukan untuk html gan,
lha klo untuk desktop aja gimana nge save nya gan...?

dwiprazetyo said...

sama aja gan....

Fery Arifian said...

bisa dicoba ni gan..

LAUTAN ILMU said...

tanks for your articel,,,

dwiprazetyo said...

~ Fery Arifian : silahkan....

~ Lautan Ilmu : pleasure...

cctv said...

artikelnya menarik, hasil ngikutin bisa cek di www.cctvkeamanan.com
tks

Rakhmad Nursyahbandi said...
This comment has been removed by a blog administrator.
Rakhmad Nursyahbandi said...

Info sangat bagus mas, trima kasih

Xtreme Blog said...

nice infonya sob
bermanfaat

soalnya mau buat benner
hehehehehe

mampir juga gan ke blog ane

Anonymous said...

Thanks Infonya

Manteb

Dwi Prazetyo said...

sama-sama.... :)

Obat Kanker Serviks said...

saya sering berkunjung di blog-blog, postingan ini sangat menarik serta enak dibaca tentang cara membuat gambar bergerak gif.... saya berharap bisa berkunjung lagi

greenfortissimo said...

hahaha keren gan

Dwi Prazetyo said...

terima kasih :)

Asgard Hendy said...

sob folback sob http://hendygui77.blogspot.com

pemeliharaan mesin said...

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

Post a Comment

Komentar anda menunggu moderasi terlebih dahulu, terima kasih.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger