PhotoshopTutorialDesign

[Photoshop] Tutorial Membuat Animasi Sederhana

Oleh takien

Tutorial Membuat Animasi Sederhana (Photoshop - ImageReady)

tut-avatar-result

Selain untuk pengolahan foto (photo editing) dan mendesain web (web design), program Adobe Photoshop juga bisa digunakan untuk membuat animasi sederhana dalam format gif.

Kenapa sederhana? Yah, karena memang tidak bisa untuk membuat animasi sekompleks animasi Flash atau program animasi lainnya.

Animasi yang dihasilkan dari photoshop disimpan dalam file berformat .gif (graphic interchange format).

Berikut langkah-langkahnya:

1. Buka program Adobe Photoshop, klik File New, Width=80 pixel Height=80 pixel

tut-avatar-01

Biarkan isian yang lain seperti adanya, klik OK atau tekan Enter

2. Buatlah sebuah layer baru dengan menekan tombol Ctrl + Shift + N, atau kalau mau capek gunakan menu Layer –> New –> Layer

3. Tekan huruf U untuk menuju tool Shape Tool, tekan tombol kombinasi Shift + U dan pilih Custom Shape Tool

tut-avatar-02

4. Klik kanan pada bidang gambar anda, akan ada tampilan kumpulan shape tool siap pakai, pilih yang berbentuk bunga salju. Jika tidak ada klik tombol panah yang ada di sebelah kanan atas kotak tersebut.

tut-avatar-03

Jika ada kotak dialog konfirmasi, pilih Append

5. Pada gambar-gambar yang muncul, pilih snowflake1. Tariklah cursor anda dari sudut atas kanan ke sudut atas bawah untuk membuat shape. Tekan tombol Shift supaya dimensinya proporsional. Sehingga gambarnya menjadi seperti di bawah ini:

tut-avatar-04

6. Tekan Ctrl + J tiga kali, untuk membuat duplikasi layer, atau klik kanan layer pada pallete layer, klik duplicate layer. Sehingga pallete layer menjadi seperti ini :

tut-avatar-05

7. Klik menu Window –> Style untuk menampilkan pallete style, klik pada  panah di pallete style dan pilih Web Style, pilih pilih Append pada kotak dialog yang muncul.

tut-avatar-06

Kemudian pallete style akan menjadi seperti ini:

tut-avatar-07

Pastikan ada style red paper clip, yellow paper clip, green paper clip, dan blue paper clip.

8. Terapkan style tersebut pada masing-masing layer, layer1 style red paper clip, layer 1 copy style yelow, layer1 copy 1 style green, layer1 copy 2 style blue.

Caranya klik layer pada pallete layer, kemudian klik pada style yang diinginkan.

Masing-masing style ini mempunyai shadow dan ini sebaiknya dihilangkan, untuk melakukannya klik pada layer 1, kemudian klik tombol Add a layer style yang ada di bawah pallete layer, hilangkan centang pada Drop Shadow dengan mengekliknya. Lakukan ini pada layer-layer yang lainnya.

tut-avatar-08

9. Selanjutnya lakukan transformasi gambar, putar layer1 copy ke arah jarum jam sebesar 30 derajat, caranya klik layer1 copy pada pallete layer, tekan tombol Ctrl + T dan arahkan mouse ke sudut-sudut yang dikelilingi kotak-kotak kecil dan putarlah ke arah kanan. Kemudian tekan Enter

tut-avatar-09

Lakukan hal yang sama pada layer1 copy 3, yaitu memutarnya ke kanan 30 derajat.

10. Tahap pembuatan layer sudah selesai, dan sekarang tinggal menganimasikannya di Image Ready. Tapi upps, untuk membuat animasi avatar anda menjadi transparan, anda harus menghapus layer background. Untuk melakukannya, klik pada layer background kemudian klik pada gambar tong sampah di bawah pallet layer, atau klik kanan layer background, klik delete layer.

tut-avatar-10

11. Sekarang menuju program Image Ready, tekan tombol Ctrl + Shift + M untuk membukanya.

Pastikan pallete Animation ditampilkan, jika tidak klik menu Window, pilih Animation untuk menampilkannya.

tut-avatar-11-1

12. Klik pada panah kecil di sebelah kanan atas pallete Animation, dan pilih Make Frames From Layers

tut-avatar-12

13. Preview animasi yang baru anda buat denga menekan tombol play, gunakan frame delay untuk menetukan durasi antar frame dalam satuan detik. Supaya animasi kelihatan cepat, biarkan saja bernilai 0 seconds.

tut-avatar-13

14. Animasi sudah siap, saatnya menyimpan. Tapi sebelum disimpan sebaiknya anda melakukan optimasi dulu, supaya file hasilnya nanti tidak terlalu besar kilobytenya.

Untuk melakukannya, klik tab 4-Up pada jendela preview dan kemudian pilih/klik pada gambar preview yang kilobytenya paling kecil.

tut-avatar-14

Setelah simpan dengan perintah File, Save Optimized As atau tekan tombol Ctrl+Shift+Alt+S, beri nama sesuai dengan keinginan anda.

Hasil:

tut-avatar-result

Tulisan ini sudah berumur: 18 tahun 11 bulan 19 hari. Informasi di dalamnya mungkin sudah tidak relevan, tapi nilai historisnya sangat berharga, terutama bagi saya sebagai penulisnya.

(Dipulihkan dari designkillers.com)

Tag Terkait: