Docstoc

Membuat Animasi Bergerak dengan PHOTOSHOP

Document Sample
Membuat Animasi Bergerak dengan PHOTOSHOP Powered By Docstoc
					Membuat Animasi Bergerak dengan PHOTOSHOP

Selain buat edit-edit foto, photoshop juga bisa kita gunakan untuk membuat gambar bergerak /
animasi dalam format .gif (graphic interchange format). Dengan bermain frame per frame, kita dapat
membuat animasi tulisan ataupun gambar dengan mudah sesuai selera.

Oke, dalam membuat animasi dengan photoshop, kreativitas kita sangat dibutuhkan di sini, saya
hanya memberikan tutorial dasarnya saja, dan nanti teman-teman bisa mengembangkannya.

Photoshop yang saya digunakan di sini adalah photoshop CS3, photoshop CS2 juga bisa digunakan
(Saya belum tahu apakah photoshop versi lama bisa)

Buka Adobe photoshop, mari kita membuat animasi…

Sudah dibuka lom? (apanya yah?) hehe ya photoshopnya!

Langkah pertama yang paling penting adalah mengeluarkan tool animasi di photoshop, caranya klik
menu “window” di photoshop, lalu pilih “animation”




Sampai muncul window kayak gini:




Siap untuk animasi… pertam apa yah? ehm… animasi warna dulu deh…

Animasi warna

Kita akan mebuat animasi warna sederhana, yaitu perubahan warna merah, kuning dan hijau (kayak
lampu lalu lintas aja.. wekekek)
Di photoshop, pilih file » new masukkan ukuran sesuai selera, kalau saya pakai 200 x 200 pixel, lalu
oke

Selanjutnya, buat 3 buah lingkaran dengan layer yang berbeda. Buat sebuah lingkaran dulu,
selanjutnya pada jendela layer, kita klik kanan layer lingkaran tersebut, lalu pilih “duplicate layer…”.

Atur sedemikian rupa sesuai selera. Ini lingkaran yang saya buat:




ini tampilan dalam jendela layer:




dan ini tampilan dalam jendela animation:




Sekarang tinggal kita mainkan layer-layernya untuk membentuk sebuah animasi.

Wokey, buat 3 buah frame dalam jendela animation, dengan mengklik icon “duplicates selected
frames” (tanda lingkaran merah pada gambar diatas!) hingga jadi seperti ini:
Yup, seperti rencana kita, kita akan mebuat lingkaran tadi menjadi animasi seperti lampu traffic light,
untuk menampilkan warna merah dahulu, klik frame pertama pada jendela animation, lalu pada
jendela layer, nonaktifkan icon mata (indicates layer visibility) pada layer warna kuning dan hijau,
sehingga hanya layer warna merah yang terdapat icon mata, seperti gambar di bawah :




Kemudian kembali lagi ke jendela animation, klik frame kedua, aktifkan icon mata pada layer kuning.
Sedangkan pada frame ketiga, aktifkan icon mata pada layer hijau. Oh iya jika ingin animasi kita nanti
transparan, tinggal nonaktifkan icon mata pada layer background di semua frame animasi.

Dalam jendela animation akan terlihat seperti berikut:




klik tombol play untuk memainkan animasi, kita bisa mensetting timming animasi sehingga animasi
tidak bergerak terlalu cepat. Setting waktunya dengan meng-klik tanda panah segitiga di samping
kanan tulisan 0 sec.
pilih waktu sesuai keinginan, begitu pula di frame-frame berikutnya.

Oh iya, agar animasi bergerak terus tanpa henti, maka animasi harus di setting “forever”, tetapi jika
ingin bergerak satu kali, setting dengan “once”, seperti gambar di bawah:




Wokey… kira-kira hasilnya seperti ini…




Untuk menyimpan gambarnya, kita gunakan “save for web & device” nya photoshop. Caranya klik
file > Save for web & device atau shortcut CTRL+ALT+SHIFT+S



Membuat animasi gambar bergerak gif dengan photoshop bag.2

Setelah kemaren mebuat animasi pergerakan warna, kita akan mencoba mmbuat scrolled text alias
text berjalan gambar gif menggunakan photoshop. Mari kita buka photoshopnya…
Buat dokumen baru, file>>new. Pilih ukuran gambar, saya mengunakan ukuran 250 x 50 pixel.

Jangan lupa tampilkan jendela animation di “windows” > “animation

Okay, selanjutnya buat layar baru, yang berisi text yang kita tampilkan. Klik “new layer” pada jendela
layer:




setelah itu klik text tool yang ada di sebelah kiri,




kemudian kettikan tulisan yang ingin kita animasikan, saya mengetikkan “antoro.net”




Beralih ke jendela animasi. Disini kita akan membuat text tersebut berjalan dari ujung kanan ke
ujung kulon… eh ujung kiri. Jadi pada frame pertama pada jendela animasi, geser tulisan tadi ke
kanan dengan menggunakan arah kanan pada keyboard. Kita bisa juga menggunakan mouse, tapi
kalau tidak cermat, nanti animasinya tidak berjalan mulus. Geser ke kanan sampai ujung depan
tulisan tidak terlihat lagi,




kemudian, klik duplicate selected layar pada jendela animasi,
klik frame kedua (yang di duplikasi tadi). Kemudian kita geser text tadi ke kiri memakai arah kiri
keyboard sampai ujung belakang tulisan tidak terlihat.

Agar gerakan text berjalan dengan mulus, kita berikan frame tambahan dengan meng-klik “tween
animation frames” pada frame pertama,




lalu akan muncul jendela seperti berikut:




Pada tween with, pilih yang next frame.

Pada frame to add, masukkan jumlah frame yang kehendaki, masukkan angka lebih dari 5 bila ingin
animasi berjalan mulus, saya menggunakan “15″, lanjutkan dengan klik OK.

Agar animasi terus berjalan, pilih yang “forever”. kemudian tekan tombol play dalam jendela
animasi, kira-kira hasilnya akan seperti ini…
Whoops! Hampir lupa, untuk menyimpan gambarnya, kita gunakan “save for web & device” nya
photoshop. Caranya klik file > Save for web & device atau shortcut CTRL+ALT+SHIFT+S

Pilih file gif, lalu save, muncul jendela save, masukkan nama gambar, dan save.

MEMBUAT FAVICON AGAR BERGERAK

Caranya hampir sama, cuma ukuran standard favicon adalah 16 x 16 pixel (sempat tidak sempat
harus enambelas, lhoh!). Buat aja ukuran 16 x 16 pixel, lalu ikuti langkah di atas untuk
menganimasikan. Kemudian yang paling penting adalah cara save gambar favicon tersebut. Favicon
memiliki extensi gambar .ico (yang pada photoshop CS 3 yang saya pakai tidak ada). tapi kita bisa
mengakalinya dengan mengetikkan sendiri. Caranya klik file > Save for web & device atau shortcut
CTRL+ALT+SHIFT+S, pilih gambar gif, kemudian save.

Nah, setelah itu akan muncul jendela save, masukkan nama untuk gambar favicon diikuti dengan .ico
contohnya “favicon.ico” lalu save.




Ingin tahu cara membuat banner yang bergerak-gerak seperti yang terlihat pada banner blog IT
Programmer? Ada dua cara untuk membuat banner yang bisa bergerak. Yang pertama menggunakan
flash, dan yang kedua menggunakan GIF. Nah, kali ini kita akan belajar menggunakan cara yang
kedua, yaitu membuat animasi GIF. Software yang kita gunakan disini adalah Adobe Photoshop CS4.

Sangat mudah untuk membuat animasi GIF dengan Photoshop. Mugkin kalian tidak mengetahui
kalau Photoshop dapat digunakan untuk membuat gambar animasi GIF. Tapi pada kenyataanya,
photoshop dapat digunakan untuk membuat animasi GIF. Perhatikan tutorial berikut ini.
Pertama masuk dulu ke Photoshop, lalu tekan Ctrl + N untuk membuat gambar baru. Misalkan kalian
ingin membuat header. Nah, kita gunakan contoh header blog IT Programmer. Settinglah agar
ukurannya 480 x 160 pixel.




Lalu, setelah selesai menyetting, tekan OK. Kemudian buatlah tulisan seperti gambar dibawah ini
dengan menggunakan dua layer.




Pastikan kalian telah menggunakan dua layer. Lihat dibagian pojok kanan bawah Photoshop.




Layer pertama adalah tulisan IT Programmer, sedangkan layer kedua adalah tulisan a young talented
programmer. Jika sudah, bukalah palet animasi, dengan cara menekan menu Windows -> Animasi.
Setelah diklik, maka akan muncul palet Animation dibagian bawah. Dan dalam palet telah terdapat
sebuah frame.




Klik ikon Duplicated Selected Frame yang terdapat dibagian bawah kanan palet animation (ikon yang
saya beri lingkaran merah pada gambar diatas) untuk menduplikasikan frame. Sehingga menjadi
seperti ini.




Pada frame pertama, atur Opacity masing-masing layer menjadi 0%. Untuk mengaturnya, klik pada
frame 1, kemudian lihat dibagian kanan bawah layar photoshop.




Lalu klik layer 1, ubah Opacity menjadi 0%, begitu juga dengan layer 2. Jika sudah, klik kembali frame
2 lalu atur opacity masing-masing layer di frame 2 menjadi 100%. Jika sudah, kembali ke palet
animation, lalu klik pada frame 2. Klik icon tween animations frame yang terdapat disebelah kiri ikon
duplicate layer. Sehingga muncul kotak dialog seperti ini:
Ganti Frames to Add dari 5 menjadi 10. Semakin banyak frame nye semakin bagus hasil animasinya.
Fungsi dari Frames to Add ini adalah untuk menambahkan 10 frame baru. Tekan OK jika sudah, lalu
tekan Play untuk memainkan gambar. Simpan gambar dengan format .psd dan dengan format .gif.
Gambar siap anda gunakan.




Membuat Animasi GIF



Sebelumnya Anda pasti sudah mengetahu animasi GIF bukan? Animasi sederhana yang biasanya ada
dalam ponsel Anda ataupun yang sering Anda lihat pada sebuah website, seperti banner. Cara
membuat animasi GIF 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.

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, dan sebagainya.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:2524
posted:11/10/2011
language:Indonesian
pages:13