cara membuat animasi

Pada tutorial kali ini, saya mengajak anda membuat animasi gif menggunakan aplikasi free, The Gimp.
Animasi GIF sendiri terdiri dari beberapa layer yang digabungkan.


animasi gif dengan gimp

Animasi yang kita buat ini tidak kompleks, hanya terdiri dari 4 gerakan saja. Saya beri judul, “Tux BreakDance”.

Untuk ini, anda mungkin memerlukan bahan-bahan kerja, sebuah gambar yang sesuai. Anda bisa mendownload source animasi ini beserta screencastnya di akhir tutorial.

Mari kita mulai. Jalankan aplikasi Gimp anda. Jika belum punya, silahkan di install atau mendownloadnya di gimp.org.
Buka file pingu.png dengan latar transparan yang sudah anda download.
Di dock layer, pilih layer pertama atau background. Gandakan dengan mengklik gambar “duplicate” di bawah dock layer, atau gunakan kombinasi tombol Ctrl+Shift+D.
Pilih layer yang baru saja digandakan tadi. Klik ikon “Rotate Tool” di dock tool. Atau gunakan tombol Shift+R.
Masukkan nilai 5, di sudut rotate (angle). Klik button rotate.
Selanjutnya, klik layer ke-2 dan ulangi langkah no 2 dan 3 sampai anda merasa cukup. Saya hanya membuat empat buah layer saja.
Selanjutnya, rubah ukuran canvas agar tidak ada layer yang terpotong.
Klik menu image, pilih “Canvas Size…”. Masukkan nilai 550 pada nilai X (horizontal) dan Y (vertical). Klik button “center”, lalu klik button “Resize”.
Buat layer baru dengan ukuran 550 x 550 dengan background white. Gandakan, dan letakkan dibawah masing-masing layer 1, 2, 3 dan 4.
Merge layer 4 dengan layer dibawahnya (background putih!), dan ulangi untuk layer 3, 2 dan 1. Sekarang, anda kembali memiliki 4 layer dengan gambar pinguin dan latar putih.
Simpan pekerjaan kita sebagai file gif. Pilih tipe animasi untuk menyimpan gambar sebagai aimasi gif. Masukkan waktu perulangan untuk tiap-tiap frame. Dan klik Save.


Ketemu lagi deh… mmm… kali ini memang agak beda yah bagi ilmu-nya, soalnya sekarang tidak menggunakan Photoshop, tetapi dengan Image Ready. Bagi temen2 yang sudah terbiasa dengan Photoshop tentunya juga tahu dong dengan Image Ready… klo tetep ada yang belum tahu… Image Ready itu satu paket instalasi dengan Photoshop. Guna sebenarnya saya juga belum tahu, tapi beberapa saat yang lalu saat saya coba2 ternyata Image Ready bisa dimanfaatkan untuk membuat animasi sederhana.
Oleh karena ini (pales yah…) ya dah… oleh karena itu kali ini saya coba bagi ilmu untuk membuat animasi text sederhana dengan Image Ready…

Sebenarnya sih bisa saja kalau kita mau buat langsung di Image Ready, tapi saya lebih enak editing lewat Photoshop dulu, baru nanti penggunaan layer tiap frame akan kita atur dengan Image Ready…
So… kupas dulu Photoshop nya… lalu inilah langkah2 nya :
1. Kalau untuk file animasi (dalam ini kita akan membuat file GIF) sebaiknya kita gunakan ukuran sedang untuk menghemat memory, oleh karena itu kita buat file baru dengan klik File >> New >> beri nama dan tentukan ukuran (kalau yang saya pakai nama teks 1 dan ukuran 320×240 serta Backgroun contents >> transparent) >> OK
2. Lalu kita buat text menggunakan Horizontal Type Tool, pilih jenis huruf favorit masing2… dan ketik kata2 yang diinginkan… saya ambil contoh font yang umum saya… Comic Sans MS, saya buat bold, ukuran 70, lalu Blending Options (klik kanan layer >> Blending Options…) dengan Gradient Overlay >> merah-kuning-merah, Stroke warna hitam ukuran 7px.
3. Sekarang agar efek Blending Option menyatu dengan teks, kita duplikasikan 1 kali dengan tekan ctrl+j, lalu kita gabungkan dengan tekan ctrl+shift+e (memang langkah ini terasa tidak merubah apa2, tapi inilah cara yang saya gunakan agar teks ini bisa diberi efek cahaya nantinya)
4. Setelah tulisan jadi… kita duplikasi menjadi 3 layer dengan tekan ctrl+j 2 kali… beri nama tiap layer (sebagai contoh saya beri nama urut 1, 2, dan 3 agar mempermudah nanti saat dipakai dalam tiap frame)
5. Kalau 3 layer tersebut sudah jadi, kita beri efek mulai dari layer 1 dengan efek Lens Flare, caranya klik Filter >> Render >> Lens Flare… disitu kita pakai ukuran yang berbeda-beda (saya menggunakan ukuran 35, 50 dan 70) dan ulangi efek tersebut pada tempat yang berbeda-beda… lalu ulangi pada layer 2 dan 3 dengan letak cahaya yang berbeda juga… (tips dari saya : gunakan cahaya secukupnya, jangan kurang dan jangan berlebihan)
6. 3 Layer telah jadi, sekarang kita pindah ke Image Ready, caranya klik File >> Edit in ImageReady (shift+ctrl+m), lalu kita akan berpindah ke tampilan ImageReady… memang tampilan serta menu2nya nggak beda jauh dengan Photoshop, hanya beda beberapa tool saja…
7. Kini… aktifkan (tampilkan) jendela animasi dengan klik Windows >> Animation, taruh tiap layer pada tiap frame sesuai urutannya dan klik File>>Save Optimized as (jangan yang Save As…)… jadilah
Maaf ya… untuk bagi ilmu kali ini tidak saya sertakan screenshot nya… tp inilah hasil jadinya jika mengikuti tips diatas…