Tutoria menjelaskan cara membuat animasi gambar bergerak dengan format .gif menggunakan Adobe Photoshop dan Image Ready. Tutorial mendemonstrasikan proses membuka file gambar di Photoshop, mengatur layer gambar dan tulisan, menyimpan file ke Image Ready, mengatur frame animasi dengan menampilkan layer berbeda pada setiap frame, lalu menyimpan hasil akhir ke format .gif

1. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
TUTORIAL MEMBUAT GAMBAR BERGERAK.gif
Pada tutorial kali ini saya akan menjelaskan cara
membuat gambar animasi.gif. Sebelumnya Anda harus punya
software adobe photoshop. Nah adobe potoshop ini pasti
punya teman yaitu adobe image ready. Kita akan
menggunakan dua software ini.
Ceritanya kita akan membuat animasi bergerak dengan file
type .gif. Anda sering lihat kan, gambar kok bisa gerak-gerak,
nah itu pake .gif. Bisa juga sebenarnya pake .swf alias flash.
Tapi kali ini saya akan membuat yang .gif ajah.
Nah ceritanya saya ingin membuat animasi seperti berikut:
Pertama Saya ingin mucul tulisan:
ORANG GILA ITU:
KADANG KETAWA

2. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
KADANG MARAH
KADANG MEWEK
Gitu aja. Selebihnya anda bisa kreasikan sendiri. Oke. Yang
pertama yang harus Anda siapkan adalah 3 jenis file gambar
seperti diatas. Lalu:
1. Buka Adobe photoshop
2. Buat file baru, klik pada File > New

3. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
3. Akan tampil Display seperti berikut:
Kita buat lebar dan tingginya sama yaitu 400 pixel. Mau
ukuran lain terserah Anda. Klik OK

4. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
4. Lalu Open gambar yang telah kita siapkan tadi di
tempat penyimpanan gambar. Klik pada File > OPEN >
5. Ketika tiga gambar telah diopen akan muncul pada
jendela sebagai berikut lalu klik Open:

5. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
6. Ada tiga gambar yang terletak pada photoshop sebagai
berikut.

6. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
7. Baru kemudian kita tambahkan kata kata yaitu :
ORANG GILA ITU : KADANG KETAWA, KADANG MARAH,
KADANG MEWEK. Jadinya sebagai berikut:
8. Akan terlihat pada kota layer kita memiliki 8 layer.
Layer tersebut adalah layer gambar (ada tiga) dan layer
tulisan (ada 4) serta layer background berwarna putih.
Sehingga totalnya ada 8. Saran saya Beri nama layer
sesuai dengan tulisan yang Anda buat.

7. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
9. Simpan adobe photoshop dengan nama “animasi
bergerak.psd.”

8. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
10. Buka software image ready lalu buka file potoshop
“animasi bergerak.psd.” yang telah Anda buat tadi.
11. Klik pada window>Animation untuk memperlihatkan
histori pembuatan animasi

9. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
12. Maka akan muncul tampilan pembuatan animasi
seperti berikut:
13. Pada Gambar pertama saya ingin memunculkan tulisan
“ORANG GILA ITU” sehingga Anda dapat
menonaktifkan gambar dan tulisan lain. Caranya
mudah klik aja gambar mata di bagian Layers. Jika

10. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
gambar mata muncul, maka memang hanya layer itu
saja yang akan ditampilkan. Sedangkan jika gambar
mata tidak muncul, maka layer tersebut tidak
ditampilkan pada animasi. Berikut tampilan layer untuk
setting layer yang Nampak dan tidak nampak

11. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
Setelah itu klik pada bagian animasi untuk melakukan
duplicate Current Frame, sehingga frame akan bertambah
menjadi 2 seperti berikut:
Pada frame 2, Tampakkan hanya gambar ketawa dan
tulisan “KADANG KETAWA”, Pada gambar 3 tampakkan hanya
gambar marah dan tulisan “KADANG MARAH”, Pada gambar 4
tampakkan hanya gambar mewek dan tulisan “KADANG
MEWEK”. hasilnya adalah sebagai berikut:

12. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
FRAME 1:

13. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
FRAME 2:

14. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
FRAME 3:

15. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
FRAME 4:

16. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
Kemudian Klik pada menu File > Save Optime As:
Lalu pilih save as type .gif, beri nama animasi
bergerak.gif sebagai berikut:

17. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
Maka udah jadi deh animasi sederhana kita. Untuk
hasil animasi bergerak yang udah dibuat bisa di klik link
berikut:

18. tutorialkeren123.blogspot.com
Semakin Berbagi, Semakin Kaya
Written by : Permadina Kanah Arieska, Phone : 0856 4895 0321
About The Author :
Saya, Permadina Kanah Arieska saat ini bekerja sebagai dosen
Statistika Universitas PGRI Adi Buana Surabaya. Keinginan untuk
share ilmu dengan yang lain membuat saya suka bikin tutorial.
Mulai dari tutorial Statistika, animasi Flash, Photoshop, Image
Ready, Corel Draw, Camtasia dan lain sebagainya.
Semakin Berbagi, Semakin Kaya.
Catatan :
Silahkan Share seluruh tutorial di
tutorialkeren123.blogspot.com dengan mencantumkan link:
tutorialkeren123.blogspot.com dan nama penulisnya.
Thanks 4 share.
CONTACT ME:
Permadina Kanah Arieska
Email : permadina.kanah@gmail.com
Phone : 0856 4895 0321
Blog : tutorialkeren123.blogspot.com