Membuat Animasi dari Photoshop CS3

Adobe Photoshop selain terkenal sebagai software pengolah gambar non-vektor yang banyak dipakai oleh para desainer grafis ternyata mempunyai fungsi tambahan lain, yaitu animasi. Fungsi ini tidak banyak yang mengetahuinya karena merasa sudah cukup menggunakan software khusus animasi seperti Adobe Flash. Fungsi ini cukup sulit jika dibandingkan hanya sekadar melukis. Namun setahu saya, seri yang sudah mendukung teknik ini baru dimulai dari CS2 (mohon dikoreksi kalau salah). Saya sendiri mencoba menjelaskan teknik ini dengan memakai seri CS3.

Animasi adalah sebuah gambar bergerak yang dibuat dari beberapa gambar mati (still images). Gambar mati ini bisa berasal dari ilustrasi, foto objek, atau foto orang-orang yang berbeda gaya. Jelas, kita membutuhkan banyak sekali gambar-gambar mati yang satu dengan lainnya harus ada korelasi agar gambar-gambar tersebut dapat menciptakan gambar bergerak yang enak dilihat. Animasi kemudian diterapkan pada film, video, dan komputer. Sobat baraya bisa membuat animasi klasik dengan cara menggambarnya pada halaman-halaman buku, lalu buku tersebut dibuka tiap-tiap halaman dengan kecepatan tertentu. Ini jadi mengingatkan saya semasa SD saat membuat gambar bergerak pada pojok kanan-kiri bawah buku pelajaran … hehehe. Nah, istilah ‘kartun’ kemudian muncul untuk menjelaskan kerja animasi di bawah 10 menit yang sifatnya menghibur.

Oke, agar mudah dipahami oleh sobat baraya semua, saya akan menjelaskan teknik ini secara bertahap. Perlu diketahui bahwa ilustrasi yang digunakan di sini dikerjakan Ella Elviana, seorang ilustrator otodidak yang saat ini bekerja sama dengan saya mengerjakan proyek rahasia (apaan tuh?). Ssst … Ella adalah adik kelas saya di Farmasi ITB yang sama-sama ‘murtad’ dari dunia obat-obatan ^_^.

1. Ilustrasi yang digunakan hanya dua, yaitu sketsa yang masih hitam putih dan ilustrasi berwarna. Usahakan kedua gambar ini di-cropping sedemikian rupa agar pas. Dari dua ilustrasi ini, buatlah beberapa gambar yang saling bersambungan (tergantung mau buat animasi yang seperti apa). Gambar-gambar tersebut diusahakan dibuat pada layer-layer yang berbeda sehingga pada saat pembuatan animasi nantinya tidak terlalu membingungkan.

d-04a_animasi

2. Jika gambar-gambar yang dibutuhkan sudah cukup (usahakan selalu cek dan ricek agar tidak ada satu gambar pun yang ketinggalan, termasuk cek apakah ada layer yang saling bertumpukan karena hal ini juga berpengaruh pada besarnya file nanti), lanjutkan dengan meng-klik panel Window > Animation.

3. Akan muncul panel baru yang tertulis ‘Animation (Frames)’ pada bagian paling bawah. Masukkan tiap-tiap layer yang sudah dibuat pada panel tersebut dengan cara meng-klik tanda kotak putih yang ujungnya seperti kertas terlipat tepat di samping kiri gambar tong sampah (Duplicates selected frames) dengan hanya mencentang tanda mata pada panel layer. Pada tiap-tiap frame terdapat waktu yang ada di bawahnya dan itu bisa disetel tergantung keperluan (untuk contoh, saya menyetelnya pada 0.1 seconds). Jika sudah, klik tanda ‘play’ (segitiga ke kanan) untuk mencoba hasil animasi.

d-04b_animasi

4. Animasi sudah dianggap sempurna? Jika sudah, lanjutkan dengan klik panel File > Save for Web & Devices (Alt+Shift+Ctrl+S) sehingga memunculkan jendela seperti gambar di sebelah kanan lingkaran 4. Pada keadaan default (apa adanya) akan terlihat kolom-kolom yang sudah terisi GIF, Selective, Diffusion, dan pada bagian Looping Options usahakan terisi Forever. Jika sudah, tinggal klik Save.

Nah, animasi sederhana sudah sobat baraya buat dan bisa diaplikasikan pada media internet, misalnya, dengan format GIF. Sebagai contoh, sobat baraya bisa melihat hasil animasi yang dijadikan contoh berikut ini. Tertarik? Jika kurang mengerti, silakan menghubungi saya langsung.[]

d-04c_animasi

Catatan: Pada hasil contoh di atas, saya menggunakan 200 frame. Wow! Memang, semakin banyak frame yang digunakan, akan semakin baik pula hasil animasinya. Konsekuensinya, kalau sobat baraya menginginkan animasi yang mendekati sempurna, siap-siaplah untuk bercapai-capai ria ^_^ seperti halnya kisah sang nenek.

46 thoughts on “Membuat Animasi dari Photoshop CS3

  1. saya belum pernah nyoba ginian, tapi yang bikin saya heran kok bisa gak berat ya saat buka blog ini? apa gak ngaruh tuh animasinya?

  2. >> antown : Makanya ada tulisan “…termasuk cek apakah ada layer yang saling bertumpukan karena hal ini juga berpengaruh pada besarnya file nanti…” pada poin kedua. Ini berpengaruh banget, Town. Waktu masih ada (bahkan banyak) layer yang saling bertumpukan, filenya bisa sampai 300 kb, tetapi pas dirapikan, hanya kurang dari 100 kb.
    >> ade : Yuk, kita belajar.

  3. dibawah 100 kb mayan besar loh bang. tapi tetep cepet dibuka blog ini

    *geleng2

    ada info acara desain di blog saya, mari mampir

  4. >> antown : kalau detailnya saya nyerah soale belum cek lagi. oke, otw….
    >> omiyan : mangga….
    >> afwan : begitulah….
    >> emfajar : hehehe….

  5. >> Aziz : Kan sudah diberitahu, sudah ada sejak CS2.
    >> nandar : Kayak masukin image aja. Saya belum pernah mencobanya di Power Point. Harus dicoba!
    >> kodil : Memang harus meluangkan waktu ^_^

  6. makasih.. bang ne artikel sangat membantu saya.. baru tau jga lo cs3 bisa bkin anima gif, maklum pemula. biasanya sya pake makromedia flash buat anima gif tp untuk mengolah gambrnya pake cs3. lo tau gini ga rpot lg hrus inport gambr dri cs3 k flash…. tenkyu bang

  7. Mas,

    Saya mau bikin animasi dari 3 gambar yang berbeda. Sederhana aja sih fram 1 muncul gambar a, frame 2 muncul gambar b, frame 3 muncul gambar c.

    Tapi ini kalau saya paste gambarnya disemua frame ada semua. Gimana sih caranya supaya bisa setiap frame gambarnya beda?

    Minta tolong balas ke email saya juga ya ^^. Biar saya tahu kalau sudah ada tanggapan. Terima kasih loooo.

  8. >> laura : sebenarnya mudah saja dimana pada photoshop terdapat layer-layer yang bisa disembunyikan tiap-tiap frame itu, sehingga ketiga frame tidak diperlihatkan keseluruhannya.

  9. 200 Frame??.. wow! hebat..hebat..hebat… sangat hebat tk seorg yg “murtad”… yg beralih ke dunia animasi..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s