Tutorial: Simple NinjaMokz Animation

Muahahaha!!! Dah lama sebenarnya aku nak share tutorial pasal illustration dan animasi. Tapi sebab tutorial ni memerlukan maklumat yang lengkap dan panjang, aku seringkali tak sempat nak selesaikan dari mula sampai habis tutor tu... Last-last, terbengkalai camtu jer.... ahak!

Okey, untuk tutorial simple je kali ni, aku akan share step by step macam mana nak buat Gif Animation macam di atas. Aku ni jenis suka buat animasi yang ada pergerakan nyata, bukan setakat kelip-kelip mata jer, sebab bagi aku pergerakan yang lebih akan memberikan impak yang lebih juga kepada visual tu...

1. Langkah pertama

Korang kena sediakan 2 artwerk (vector ni aku hasilkan menggunakan Illustrator CS3).

Posisi pertama adalah permulaan pergerakan. Contoh seperti di bawah:

Kemudian, korang alih bahagian badan je... bahagian kepala, korang mentenkan. Ini bagi mengurangkan jurang/GAP bila korang buat looping (ulangan) nanti. Ubah kedudukan tangan atau badan atau kaki dari kedudukan asal kepada kedudukan baru yang menampakkan pergerakan:

Nampak tak perbezaan gambar SATU dan gambar DUA? Bahagian badan, tangan dan kaki sahaja yang aku ubahkan. Bahagian kepala biar mantain jer...

2. Langkah Kedua

Korang buatkan saiz (250px X 300px) di Photoshop untuk saiz Gif kita ni. Aku tak ajar macammana nak guna photoshop yek! Aku anggap korang dah tahu sekurang-kurangnya basic pasal Adobe Illustrator dan Photoshop, tak kiralah versi berapa.

Bila dah siap new fail dengan saiz yang dinyatakan di atas tadi, korang boleh masukkan artwerk 1 dan 2 ke New File tadi. Caranya ada dua, sama ada korang nak Copy dari Illustrator dan Paste ke dalam Photoshop... atau korang nak gunakan kaedah Place (File > Place > Pilih imej yang nak di placekan tadi)...

(Step 1 Photoshop)

Kemudian korang adjustlah kedudukan artwork 1 dan 2 tadi. Pastikan kedudukan di bahagian KEPALA adalah sama di antara layer 1 (artwerk 1) dengan Layer 2 (artwerk 2) dalam photoshop tu...

(Step 2 Photoshop)

Kalau korang perhatikan, imej kartun di atas aku dah tambah dengan meletakkan Baloon Dialog dan bebayang di kedua-dua imej. Ini bagi menguatkan aktiviti watak tersebut.

3. Langkah Ketiga

Pergi ke WINDOW > ANIMATION dan dapatkan kedudukan animasi seperti gambar di atas. 

Caranya, pada ruangan animation tu akan kelihatan petak pertama dengan imej pertama (seperti gambar Step 1 Photoshop). Kemudian, pilih DUPLICATES SELECTED FRAMES (ikonnya sebelah kiri ikon tong sampah).

Langkah seterusnya, anda akan nampak 2 imej yang sama di tools animation  iaitu pada frame 1 dan frame 2. Pergi ke frame 2 dan pilih Layer 2, dan tutup ikon mata pada Layer 1. Anda akan dapati imej kedua pula yang akan kelihatan di frame 2.

Setkan masa di setiap frame kepada 0.5 dan pilih opsyen FOREVER. Ini membolehkan fail ini nanti looping sepanjang masa.

4. Langkah Keempat

Pergi ke FILE > SAVE FOR WEB & DEVICES. Pada PRESET di sebelah kanan, sila pilih format GIF 128 Dithered. Pilih juga format GIF di sebelah bawah preset tadi. Jika anda nak buat background imej tadi transparent, pastikan anda tutup LAYER BACKGROUND di layer photoshop terlebih dahulu, kemudian baru save ke web& devices ni...

Klik juga opsyen interlaced supaya imej anda boleh nampak dengan background transparent.

Okey! Rasanya itu sajalah step nak buat simple animation nih. Sorilah, untuk STEP 3 dan 4 takde gambar untuk rujukan. Jika korang ada masalah tentang dua langkah terakhir tu, korang maklumkanlah pada aku yek. Aku akan bantu sehingga menjadi animasi korang.

SELAMAT MENCUBA!