tutorialkeren 123 .blogspot.com Semakin Berbagi, Semakin Kaya€¦ · Pada tutorial kali ini saya...

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




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. Akan tampil Display seperti berikut:

Kita buat lebar dan tingginya sama yaitu 400 pixel. Mau

ukuran lain terserah Anda. Klik OK




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:




6. Ada tiga gambar yang terletak pada photoshop sebagai

berikut.




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.




9. Simpan adobe photoshop dengan nama “animasi

bergerak.psd.”




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




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




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




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:




FRAME 1:




FRAME 2:




FRAME 3:




FRAME 4:




Kemudian Klik pada menu File > Save Optime As:

Lalu pilih save as type .gif, beri nama animasi

bergerak.gif sebagai berikut:




Maka udah jadi deh animasi sederhana kita. Untuk

hasil animasi bergerak yang udah dibuat bisa di klik link

berikut:




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 : [email protected]

Phone : 0856 4895 0321

Blog : tutorialkeren123.blogspot.com

tutorialkeren 123 .blogspot.com Semakin Berbagi, Semakin Kaya€¦ · Pada tutorial kali ini saya...

Documents

Transcript of tutorialkeren 123 .blogspot.com Semakin Berbagi, Semakin Kaya€¦ · Pada tutorial kali ini saya...