Jika anda bergelut dalam bidang website, tentunya anda wajib menguasai cara membuat animasi gif untuk web anda dan sekarang kami akan membahas untuk anda cara membuat Animasi Gif dengan Photoshop.

Meskipun banyak software yang menawarkan cara membuat animasi gif secara instant, tetapi alangkah baiknya jika anda betul menguasai cara membuat animasi gif secara mudah dengan bantuan Photoshop.

Kami akan membuat animasi gif dengan bantuan Photoshop CS 3 dan berikut ini caranya :

Kali ini membuat animasi gif dengan ukuran 468 x 60 px yang biasanya dibuat untuk banner iklan.

Buat new file dengan ukuran tersebut atau anda bisa mendownload bahan tutorial ini disini.

Akitifkan palet Animasi Frame dengan klik Windows –> Animation

Pallet Animation

Buka file yang sudah anda download dan kita akan membuat animasi sederhana tulisan yang berjalan, setelah membuka buatlah frame baru dengan klik icon Duplicated Select Frame (gambar dibawah), dan anda dibuatkan duplikat frame 2.

new frame

Pada Frame satu geser tulisan Animasi Gif ke kiri

Geser tuilisan Animasi gif

Pada Frame 2 biarjan tulisan berada di tengah gambar.

Tulisan animasi gif ditengah

Jika anda tekan play maka akan ada animasi dari kiri kekanan, namun sangat cepat dan kuran halus, untuk itu anda bisa membuat Motion Tween untuk memperhalus, klik icon Motion Tween.

Klik icon motion tween

Lalu setting parameter Motion Tween seperti gambar dibawah ini, kemudian klik OK.

setting parameter motion tween

Anda dibuatkan tambahan 5 frame lagi jadi total ada 7 frame, kemudian anda play animasi gif ini (Gambar bawah)

Play Animasi Gif

Selanjutnya anda tinggal menyimpan hasil animasi gif ini untuk di publish di website anda, klik File –> Save For Web & Devices

Save For Web

Karena gif animasi ini terdiri dari beberapa frame sehingga membuat ukuran menjadi besar maka untuk membuat file menjadi kecil ukurannya silahkan atur parameter sebagai berikut ini,kemudian klik Save dan tentukan dimana anda akan menyimpannya.

Setting Parameter

Anda akan dibuatkan satu folder yang isinya gambar gif animasi dan satu file html untuk mengeksekusi file Animasi gif.

Animasi Gif

Silahkan anda klik 2 kali file html untuk menjalankannya,sekarang tulisan muncul dari kiri ke kanan, mudah bukan ? Selanjutnya anda diminta untuk kreatif dalam membuat animasi gif ini misalnya membuat tulisan berkedip dan lain-lain dengan memanfaatkan permainan layer dan opacity.

Semoga tutorial mengenai Cara Membuat Animasi Gif dengan Photoshop ini dapat membantu anda.