Tip dan Trik

Assalamualaikum warrahmatullahi wabarakatuh Selamat Datang Di Blog Seuntai Kenangan

Selasa, 27 Januari 2009

Membuat Animasi GIF

Pada kesempatan kali ini kita akan belajar membuat animasi gif sederhana menggunakan Photoshop dan ImageReady.

Sebelumnya Anda pasti sudah mengetahu animasi GIF bukan? Sebagi contoh lihat pada header blog ini!!! atau seperti ini

Atau seperti banner berikut ini.

Cara membuat animasi GIF seperti ini tidaklah sulit, ada banyak sekali software yang bisa Anda gunakan untuk membuat animasi GIF namun kali ini kita akan menggunakan perpaduan Photoshop dan ImageReady. Meskipun animasi yang akan kita buat sangat sederhana namun ini merupakan dasar dalam membuat animasi gif yang lain.
Sebagai dasar membuat animasi tersebut, kami kutip tutorial yang telah ditulis oleh http://www.photoshop21.com

Ikuti langkah-langkah berikut ini :
1. Buat file baru dengan ukuran 90 x 90 atau terserah selera Anda. Caranya pilih menu File > New atau tekan Ctrl + N.

2. Buat lingkaran menggunakan Elliptical Marquee Tool atau tekan M. Jangan lupa menekan tombol Shift + Alt untuk membuat lingkaran.


3. Isi lingkaran tersebut dengan warna merah. Caranya : Tekan tombol Alt+Del untuk memasukkan warna yang sudah Anda pilih di Foreground Color.

4. Duplikasi layer pertama ini dan buat 2 layer sejenis dengan warna kuning dan hijau sehingga nantinya kita akan memiliki 3 layer yang berisi lingkaran dengan warna merah, kuning dan hijau.

5. Buat agar ketiga layer terebut tidak terlihat/invisible. Caranya : Klik ikon mata yang ada di sebelah kiri layer.












6. Setelah ini kita akan berlanjut menggunakan ImageReady. Pada toolbox bagian paling bawah, pilih Edit in ImageReady atau tekan Shift + Ctrl + M.

7. Setelah membuka ImageReady pastikan Anda sudah menampilkan Window Animation. Jika belum pilih menu Window > Animation atau tekan F7. Pastikan juga Window Layers telah muncul dan bila belum pilih menu Window > Layers atau tekan F11.

8. Sekarang kita akan membuat animasi dari ketiga layer yang telah kita buat di Photoshop sebelumnya. Cara membuatnya tidak jauh beda dengan animasi pada umumnya namun disini kita akan membuat sebuah animasi sederhana. Perlu diketahui, inti dari apa yang akan kita lakukan adalah permainan layer.

Sekarang lihat pada Window Animation, disana ada sebuah layer, pada layer pertama inilah kita akan memulai membuat animasi. Tampilkan layer lingkaran berwarna merah pada Window Layers, caranya tinggal klik untuk menampilkan ikon mata.


Maka tampilan frame pertama dalam Window Animation adalah seperti gambar berikut :







9. Sekarang kita akan menambahkan frame pada Window Animation, caranya klik icon Duplicates current frame dan sebuah duplikasi dari frame pertama telah terbuat. Selanjutnya pada Window Layers, tampilkan layer lingkaran berwarna kuning dan nonaktifkan layer berwarna merah.

10. Langkah terakhir, buat lagi frame baru pada Window Animation, pada Window Layers aktifkan layer lingkaran berwarna hijau dan nonaktifkan layer lingkaran berwarna kuning.
11. Atur timing dari masing-masing frame di Window Animation dengan meng-klik tulisan waktu yang ada di bagian bawah frame.

12. Coba Anda jalankan animasi sederhana yang telah Anda buat dengan cara klik ikon Plays/stops animation.







13. Setelah semuanya selesai jangan lupa untuk menyimpan hasil kerja Anda.





Ingat!

Untuk menyimpan file PSD dari latihan Anda kali ini, jalankan cara seperti biasa, File > Save.
Untuk menyimpan hasil kerja Anda menjadi animasi GIF, jalankan File > Save Optimized As…
Setelah ini Anda bisa mencoba membuat animasi dengan melakukan perpindahan gerak, perubahan warna, perubahan ukuran, perubahan image atau gambar dan sebagainya.

Semoga berhasil dan bermanfaat

9 komentar:

  1. gini lho aku nanya itu cara pasang di blog itu gimana to...???????????????????????????????????

    BalasHapus
  2. klo untuk pasang di blog silahkan anda Upload dulu filenya ke misal ke flickr.com atau langsung ke bloggernya lalu alamat atau url heder yang ada sekarang di ganti dengan url file yang baru anda uplod. Masih gak faham? silahkan hubungi lewat YM

    BalasHapus
  3. Bos aku dah nyoba buat benner dengan imageready..saat dipreview emang bisa jalan animasinya, but pas di upload ke blog (pakai widget tambah gambar) animasinya nggak jalan alias jadi gambar mati.. gimana caranya? Tolong kasih tahu ya...thx

    BalasHapus
  4. Salam kenal Bro...wuih headernya bagus..aku juga pengin pasang diblogku, boleh aku diajarin?? thx

    BalasHapus
  5. thanks atas infonya udah lama aku cari yang gini untuk di taruh di blogku.. www.ahaone.blogspot.com

    BalasHapus
  6. salam kenal tapi saya ni gak pernah jadi upload chat box ke blogku.. padahal itu penting gmana daftarnya ya....

    BalasHapus
  7. Salam kenal...
    ma kasih atas infonya....

    BalasHapus
  8. Salam kenal bahasannya sangat bagus..minta ijin untuk di blog ku

    www.ozos.co.cc

    BalasHapus
  9. Trima Kasih infonya Pak....
    Saya akan praktekkan...!
    sukses untuk anda.

    BalasHapus

Silahkan Tinggalkan Pesan!!