Mari Berbagi Bacaan …

Membuat Animasi dari Photoshop CS3

Posted on: June 29, 2009

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.

About these ads

46 Responses to "Membuat Animasi dari Photoshop CS3"

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

Baru tau klo sotosop bisa buat animas juga yaa *gaptek mode on :-D *

>> 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.

weh canggih ya… sayang diriku gaptek

>> Suwung : biar gaptek yang penting ganteng ^_^

untuk ngerti ginian aku kudu kursus dulu bang baru mudeng

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

*geleng2

ada info acara desain di blog saya, mari mampir

Canggih,…bener2 canggih! Salut! Selama ini aq dah tahu photoshop bisa animasi tp ga kebayang hasilnya seperti itu. Biasanya aq pake Adobe after effect buat animasi image dr photoshop. Sukses ya bang Aswi.

Mampir2 ke blog aq di http://belajar-desain-grafis.blogspot.com/ sekalian sharing experience… Salam

wah asyik juga mas…saya coba lah nanti

wah bang, baru tau tuch pk photoshop bs gt :)
tp br dari cs2 yak .. :)

hebat.. saia juga baru tau nih biasanya cm pake flash klo mo buat animasi..

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

>> boyin : Yuk, belajar!
>> Ismail : Ya sukse juga, Bung Ismail. Saya sudah mampir….
>> furniture : Makasih….

CS 2 bisa ga ya? hmm, thanks bro..

cara masukin ke websitenya gmna?
klo pakai power point bisa jlan juga ga animasinya?

pengen belajar kayak gitu juga tapi kagak sempat2…

>> 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 ^_^

asyik nih wat tambah pengetahuan………. tapi kok kliatannya rumit banget ya????????

>> bangs_bkc : teorinya memang rumit, tapi kalau sudah dipraktikkan pasti enak dan mudah ^_^

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

>> adit : sama-sama, dit. semoga bisa menghasilkan animasi yang lebih bagus lagi ^_^

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.

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

[...] Memarahi untuk Mendidik Thursday, January 07th, 2010 | Author: bangaswi Suara tangis keras terdengar dari kamar atas. Itu suara Ade, putri kedua saya yang bernama lengkap Anindya Rahmakhansa (3 tahun 4 bulan). Saya tahu kalau Ade dimarahi umminya karena melakukan kesalahan yang berulang-ulang. Sebelumnya Ade menumpahkan satu botol pembersih mulut yang masih disegel: semuanya. Setelah diperingati bahwa perbuatan itu tidak baik, ia pun mengangguk dan mengerti. Akan tetapi, tak lama kemudian Ade kembali mengulangi hal yang sama pada botol lainnya. Ade memang terlalu kreatif. [...]

makasii imformasinya……

bagus….!!! tapi aku ngga bisa buat..
hhhhhahhhhahhhhhahhhhha

>> twety : Dipelajari lalu dipraktikkan ^_^

wih keren nich…boleh dicoba nich…makasih buat infonya ya,,,

>> nhieno : Silakan dicoba, semoga berhasil….

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

>> Lambert : Semuanya harus dicoba, dan tidak ada yang tidak mungkin, kan?

aku mau diajarin bikinnya dong plis

>> eka : Tinggal mengikuti langkah kerja seperti di atas aja … ^_^

iihh ..pusing .
gmna sh ??
ga ngrti ..ajarin aku dng .
pngn bisa .

>> anggia : Hayu atuh diajarin. Gimana ya ngajarinnya? ^_^

wah….. gaptek w

makasih yah infonya bang……

>> ryo : Sama2, Ryo….

[...] Pada saat diterapkan pada kaos yang berukuran besar, gambarnya pun pecah. Alhasil, sosok itu pun me-retouch logo yang ada dan dikembangkan agar lebih menarik. Begitu pula dengan apa itu PBA dan semboyan ‘I’m [...]

wah, ribet jg yah..hehe (cara berfikir orang yg ngerti animasi) :D

>> melly : Masa? (cara berpikir orang yang sok tahu animasi ^_^)

keren … sayangnya saya gak isa gambarnya

>> uraeka : Belajar saja, insya Allah bisa. Saya pun juga tidak menggambar sendiri kok ^_^

wowww 200 foto? tapi seimbang dgn hasilnya…kereeen

[…] itu pernah menceritakan tentang bagaimana cara membuat animasi dari photoshop. Intinya kurang lebih sama dengan cara itu, hanya saja lebih sederhana. Setelah beberapa foto […]

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

Archives

Forum Lingkar Pena

Blog Stats

  • 228,892 hits
Follow

Get every new post delivered to your Inbox.

Join 209 other followers

%d bloggers like this: