PIXELISME

Kali ini saya akan mengajak Anda untuk membuat animasi gambar. Meskipun menggunakan karakter 'kartun' tapi teknik ini tetap bisa digunakan pada foto manusia, jadi teruskan membaca...

1. Seperti yang Anda lihat, Anda akan membuat animasi wajah. Untuk itu tentu saja Anda membutuhkan gambar wajah seseorang ( wajah Anda sendiri juga boleh koq, sejelek apapun photoshop tetap bisa membuka-nya hehe3x ) yang menghadap ke depan.

Dalam contoh ini saya menggunakan wajah yagami light dari manga "Death Note" yang terkenal itu loh...
2. Selanjutnya tampilkan palet Animation dan pastikan Anda memilih mode animasi frame, bukan timeline.

3. Gandakan layer background dengan menekan Ctrl+J.

4. Pada layer baru tersebut, terapkan perintah Filter> Liquify dan gunakan Forward warp tool berukuran kecil untuk menarik "bibir" yagami light agar senyumnya lebih kelihatan.
5. Klik OK bila telah selesai. Kemudian gandakan kembali layer tersebut dan ulangi penggunaan Liquify untuk menarik lagi bibir yagami light sehingga senyumnya lebih jelas

6. Ulangi langkah 5

7. Sampai langkah ini, Anda telah memiliki empat buah layer dengan senyum yang berbeda-beda di tiap layer. Secara berurutan, namai saja ketiga layer tersebut smile1, smile2 dan smile3

8. Sekarang untuk proses animasi, sembunyikan ketiga layer hasil duplikat tersebut.

9. Kemudian klik tombol Duplicate Selected Frames yang berada dalam palet Animation.

10. Pada frame yang baru di buat, tampilkan layer smile1.

11. Klik kembali tombol Duplicate Selected Frames, kali ini tampilkan kembali layer smile2.

12. Klik tombol Duplicate Selected Frames dan tampilkan kembali layer smile3.

13. Anda telah selesai membuat animasi sederhana! klik tombol Play Animation untuk memainkan animasi.

14. Bila perubahan gerak animasi terlalu cepat, maka Anda dapat mengatur ulang agar masing-masing frame ditampilkan dalam kurun waktu yang lebih lama. dalam contoh ini, frame1 hingga frame 3 ditampilkan dalam waktu 0.2 detik, sedangkan frame 4 ditampilkan dalam waktu 2 detik.
15. jangan lupa, agar animasi ini dapat ditampilkan di web simpan dalam format *.gif melalui perintah File> Save for Web.

Selamat mencoba (^ ^)

Bagi pembaca setia buku-buku desain yang saya tulis, buku paling anyar dari saya telah terbit loo... judulnya Kumpulan Proyek desain PopArt.

Jadi dalam buku ini Anda akan di ajak untuk membuat 12 ilustrasi pop art menggunakan beragam tool dalam Photoshop. Saya rasa buku ini cocok sekali untuk Anda yang ingin membuat ilustrasi menarik, namun dengan langkah pembuatan yang gampang untuk diikuti.

Buku ini dibagi menjadi 4 bab, dimana Anda akan bermain-main dengan warna, teks, seni abstrak dan siluet atau bayangan. Total terdapat 12 ilustrasi yang diajarkan dalam buku ini.

Jangan lupa, buku ini disertati CD video tutorial, jadi Anda tidak hanya bisa membaca bukunya, tapi juga bisa mengikuti video tutorial :) seperti biasa, seluruh gambar yang dibutuhkan untuk mengikuti latihan pada buku telah lengkap disediakan dalam CD sehingga Anda tidak akan mengalami kesulitan.

Kalau Anda penasaran, dibawah ini terdapat beberapa ilustrasi yang dapat Anda buat setelah membaca buku ini :) ( klik pada gambar untuk melihat full-size image )


Bagaimana? cukup menarik bukan. Ayo tunggu apa lagi, dapatkan buku "Kumpulan Proyek Desain Pop Art" sekarang juga di toko-toko buku terdekat di kota Anda :) bila Anda terlalu sibuk, layanan belanja online dan belanja via sms maxikom siap membantu Anda ( gratis ongkos kirim untuk jumlah pembelian tertentu, baca link ini untuk lebih jelasnya )

Tunggu karya saya berikutnya ya... terima kasih pembaca sekalian :)

Apa itu Animasi?

Sebelumnya Anda harus paham dulu apa itu animasi? animasi merupakan serangkaian gambar ( tiap gambar diistilahkan sebagai frame ) yang ditampilkan dalam kurun waktu tertentu. Animasi
memiliki satuan, yaitu FPS ( Frame Per Second ) yang menunjukkan berapa banyak sequence ( rangkaian gambar ) yang ditampilkan dalam waktu satu detik.

Standar film animasi ialah 24 fps, yang artinya ada 24 gambar/frame yang ditampilkan dalam satu detik. Dengan kecepatan seperti ini, rangkaian gambar diam tersebut akan menimbulkan ilusi pada mata kita sehingga seolah-olah bergerak.

Catatan Penting

Ada beberapa hal yang harus Anda ketahui sebelum membuat animasi menggunakan Photoshop CS3/ImageReady:

Animasi dalam photoshop/Imageready berkisar pada perubahan posisi, penggunaan layer style dan tampil-tidaknya objek ( berupa gambar atau teks ).
Ini artinya, Anda tidak dapat membuat animasi dengan mengandalkan perubahan warna dan ukuran objek. Karena apabila Anda mengubah ukuran objek, maka seluruh frame yang menampilkan objek tersebut akan ikut berubah.


Tutorial Animasi 1

Sudah kenyang dengan teori? sekarang mulailah membuka program Photoshop CS3 atau ImageReady CS2 ( dalam contoh ini saya menggunakan Photoshop CS3, jadi mungkin beberapa perintah agak berbeda dengan ImageReady, namun secara konsep bisa digunakan juga untuk ImageReady koq )

1. Buat sebuah dokumen baru berukuan sedang, 300x250 px dengan latar belakang putih saya rasa sudah cukup memadai.

2. Gunakan Ellipse tool untuk membuat objek lingkaran kecil berwarna hitam. Pastikan Anda menggunakan pilihan shape layers, sehingga objek lingkaran tersebut dibuat pada layer shape baru. ( Klik pada gambar untuk memperbesar ukurannya - pada jendela browser baru)
3. Buat tiga buah objek lingkaran lagi dengan ukuran yang sama satu sama lainnya. Bila tidak ingin repot, cukup gandakan saja objek lingkaran tersebut dengan menekan Ctrl+J lalu susun horisontal seperti yang terlihat pada Gambar dibawah ini:
4. Buat sebuah objek lingkaran lagi dengan ukuran yang sama, namun gunakan warna merah. Pastikan objek lingkaran ini berada di urutan teratas pada palet Layers lalu sembunyikan layer ini dengan menghilangkan icon mata di sebelahnya.
5. Tampilkan palet Animation melalui menu Window> Animation. di sini Anda hanya melihat sebuah frame.
Ingat, Untuk membuat animasi, Anda harus menambah jumlah frame dan melakukan perubahan yang diperlukan dalam tiap-tiap frame tersebut.

6. Untuk itu, klik tombol Duplicates Selected Frames ( tombol ini sudah mendefinisikan sendiri fungsinya bukan ? ) Frame hasil duplikat ini dinamai Frame 2. Berikutnya apabila Anda mengulang langkah ini, frame selanjutnya akan diberi nama frame 3, frame 4 dan seterusnya sesuai dengan urutan frame tersebut dibuat. Cukup jelas yah? mudah2an :)

7. Masih pada frame 2, tampilkan kembali objek lingkaran merah.
8. Buat frame 3, lalu pindahkan objek lingkaran merah ke atas lingkaran hitam 2. Lihat gambar untuk lebih jelasnya.
9. Buat frame 4, lalu pindahkan objek lingkaran merah ke atas lingkaran hitam 3.
10. Buat frame 5, lalu pindahkan objek lingkaran merah ke atas lingkaran hitam 4.
11. OK sudah cukup, sekarang coba mainkan animasi dengan mengklik tombol play.

12. Bila gerakan animasi dirasa terlalu cepat, Anda dapat mengatur jarak tayang ( delay ) antar frame. untuk mengatur delay seluruh frame, seleksi seluruh frame terlebih dahulu melalui tombol menu, pilih Select All Frames.

13. Kemudian klik salah satu tulisan 0 sec yang berada dibawah kotak frame, untuk memilih delay time yang diinginkan. Dalam contoh ini saya memilih delay 0.2 sec, artinya jarak waktu
untuk menampilkan tiap-tiap frame adalah 0.2 detik.
14. Klik kembali tombol Play, kini gerakan animasi menjadi sedikit lebih lambat.

15. Untuk menjadikan gambar ini sebagai animasi, Anda harus menyimpannya ke dalam format GIF. Klik menu File> Save for web and Devices atau Save Optimize image ( kalau nggak salah ) untuk ImageReady.

16. Dalam kotak dialog yang tampil, pilih salah satu Preset GIF, misalnya GIF 32 No Dither ( Anda ikuti saja dulu, soalnya terlalu bertele-tele kalau saya jelaskan lagi kenapa pilih Preset ini, mungkin di lain kesempatan saya akan jelaskan maksud pilihan ini ).

17. Pada bagian Looping options, pilih Forever.
18. Klik tombol Save, tentukan lokasi penyimpanan serta nama file. Selesai sudah :) Bila diperlukan untuk lain waktu, jangan lupa untuk menyimpan gambar animasi dalam format PSD juga.

segitu dulu deh, mudah2an tutorial sederhana ini bisa bermanfaat untuk pengunjung setia blog pixelisme :) Tunggu tutorial animasi saya berikutnya ya...