Membuat Gambar Animasi GIF

Membuat Gambar Animasi Interaktif GIF Menggunakan Software Adobe Photoshop

Saat ini banyak webmaster baik pemilik situs/blog pribadi maupun situs bisnis sering kali memakai banner maupun logo gambar animasi gerak berformat gif. Alasan utamanya adalah menghemat space layout (ruang tampilan) web, karena beberapa informasi yang ingin ditampilkan dapat ditayangkan pada satu file gambar saja.

Contoh gambar animasi GIF seperti ini:

Contoh Gambar Animasi GIF

Ingin tahu cara membuatnya. Gampang!!! Berikut panduan tutorial singkat membuat gambar animasi GIF menggunakan Adobe Photoshop. Pada artikel tutorial yang saya tulis, implementasinya menggunakan software Adobe Photoshop CS 5. Screenshot gambar pada artikel ini mungkin sedikit berbeda dengan versi photoshop yang anda pakai. Namun tentu saja, selama software yang dipakai adobe photoshop, anda tidak akan kesulitan mengikuti setiap step panduan tutorial.

Siapkan dulu beberapa gambar yang ingin dibuat animasi, atau untuk latihan silahkan pakai gambar sama dengan yang saya pakai. Contoh pada tutorial artikel ini; karena sejak masa kecil sampai sekarang demen ama kartun Dragon Ball, saya ambil salah satu tokoh karakter dari Dragon Ball Z Episode 265 "Vegeta's Respect" → Majin Buu lagi joget.
Haha...
:D

Jumlah file total 8 dengan dimensi gambar semua sama → lebar 200px, tinggi 226px. Berikut beberapa file gambar yang akan saya pakai:

Majin Buu 1

Majin Buu 2

Majin Buu 3

Majin Buu 4

Majin Buu 5

Majin Buu 6

Majin Buu 7

Majin Buu 8

Buka aplikasi adobe photoshop. Klik File → New..., atau tekan tombol Ctrl + N (Screenshot ke-1)

Nama dokumen isi dengan nama terserah (pada tutorial ini mamakai nama Majin Buu). Dimensi ukuran dokumen baru akan saya tentukan sesuai (sama) dengan dimensi ukuran gambar (200px X 226px). Klik OK (Screenshot ke-2)

Restore Down (perkecil) jendela photoshop dengan klik pada ikon kotak kecil sebelah kiri tombol Close (tanda silang). Pastikan jendela Photoshop & direktori folder tempat gambar disimpan terlihat (Lihat screenshot gambar ke-3 di bawah).

New Document

Konfigurasi Dokumen

Restore Down Photoshop

Untuk berjaga-jaga kalau saja mati lampu, haha... :D, simpan dulu dokumen. Sudah disimpan... bagus. Sekarang pilih (select) semua file gambar, kemudian drag & drop file gambar (klik mouse kiri, tekan & tahan kemudian geser) ke layer kosong pada jendela adobe photoshop (lihat screenshot ke-1 di bawah).

Maximize (tampilkan layar penuh) kembali jendela photoshop. Kemudian klik enter delapan kali (karena jumlah file gambar yang diimport sebanyak 8), cek ulang apakah semua file gambar sudah berhasil diimport. Kurang lebih akan tampak seperti gambar ke-2 pada screenshot di bawah.

Untuk memudahkan membuat gambar animasi, tata ulang layer sesuai urutan yang sudah ditentukan (pada tutorial ini urutan layer 1 - 8), bisa urut atas ke bawah atau sebaliknya. Lihat screenshot ke-3 gambar di bawah:

Drag & Drop File

Import File

Urutkan Layer

Klik pada menu Window → Animation (screenshot ke-1), sehingga akan muncul tab Group animation pada halaman paling bawah adobe photoshop seperti terlihat pada screenshot ke-2. Switch (ganti) Time Line Mode ke Frame Mode dengan klik pada icon Convert to frame animation → halaman pojok kanan bawah (screenshot ke-3).

Window - Animation

Animation Tab Group

Frame Animation Mode

Karena jumlah layer pada Group Layers ada 8 layer, pada tutorial ini jumlah frame yang dipakai mengukuti jumlah layer sebanyak 8 Frame (bebas/tambahkan sesuai keinginan). Klik ikon Duplicates selected frames dan tambahkan frame sesuai dengan keinginan (screenshot ke-1 & 2). Tentukan layer yang ditampilkan dan tidak ditampilkan untuk masing-masing frame dengan klik pada frame kemudian seleksi layer (screenshot ke-3). Pada tutorial ini frame 1 → layer 1, frame 2 → layer 2, frame 3 → layer 3... dst. Pilih frame dan tentukan layer sesuka anda.

Tambah Frame

Animation Frames

Frames & Layers

Contoh setting frame (hanya frame 1 - 3).

Setting Frame 1

Setting Frame 2

Setting Frame 3

Tentukan waktu masing-masing transisi (perpindahan) setiap frame dengan klik pada ikon drop-down panah sebelah bawah frame, kemudian tentukan waktunya → pilih No delay, 0.1 seconds, 0.2, 0.5, 1.0, 2.0, 5.0, 10.0 atau other...(screenshot ke-1). Pada tutorial ini semua frame transisinya akan ditentukan dengan nilai 0,05 detik (seconds) dengan klik pada other... kemudian Set delay: dengan nilai 0,05 → klik OK (Screenshot ke-2).

Pilih looping options (jumlah berapa kali animasi diulang) → Once (satu kali), 3 Times (3 kali), Forever (terus berputar) atau other... jika ingin memasukkan nilai yang lainnya (5, 6, 7, 8... dst kali). Pada tutorial ini looping options yang dipilih Forever. Jika selesai, klik tombol play untuk preview gambar animasi (Screenshot ke-3).

Set Delay

Custom Frame Delay

Looping Options & Play Preview

Jika sudah cocok/sesuai keinginan klik File → Save for Web & Devices..., atau tekan tombol Ctrl+Alt+Shift+S (screenshot ke-1). Sesuaikan output setting, kemudian klik tombol Save (Screenshot ke-2 & 3).

Save For Web and Devices

Output Gambar Animasi GIF 1

Output Gambar Animasi GIF 2

Selesai. Lihat hasilnya dengan cara klik kanan pada output file kemudian Open with → Aplikasi Browser (Firefox, Google Chrome, IE, dlsb)

Test Output Gambar Animasi GIF

Berikut hasil output gambar animasi GIF dari tutorial di atas:

Nah... berhasil kan.

Semoga bermanfaat...
:)

Selengkapnya

Text Effect Photoshop

Pada artikel kali ini saya akan coba sedikit mengulas trik membuat effect text menggunakan Adobe Photoshop. OK, langsung mulai saja. Sebelumnya download dahulu font yang diperlukan untuk mengikuti step tutorial ini, namun tidak masalah jika anda ingin menggunakan font lain (font anda sendiri).

Pertama, buat background layer. Caranya klik pada menu "File" » "New..." (ctrl + N). Buat background dengan dimensi ukuran terserah anda, pada tutorial ini saya akan membuat background dengan dimensi "500 x 200px" (sesuaikan dimensi ukuran sesuai kemauan anda), background content "warna putih (white)".



Sekarang buat gradient background, caranya klik pada "Gradient Tool" kemudian klik lagi pada "Gradient Editor".



Kemudian edit properties gradient (lihat gambar di bawah).



Lihat gambar di bawah untuk apply gradient. Tempatkan tanda plus (cross) pada pojok kiri atas background, kemudian drag & drop sampai ke pojok kanan atas background, kemudian lepas.



Hasil gradient yang baru saja dibuat akan tampak seperti gambar di bawah ini:



Setelah background gradient selesai anda buat, selanjutnya buat text yang diperlukan. Buat text versi anda, namun pada contoh di bawah ini text yang akan dipakai adalah "PCMAC". Namun text harus ditulis satu per satu untuk setiap layer per karakter/huruf. Tentukan ukuran huruf sebesar 130px. Setelah semua karakter huruf dibuat, klik pada "Move Tool" » centang "Auto-Select" » kemudian atur penempatan masing-masing huruf selurus dan sedekat mungkin (drag & drop masing-masing huruf).



Selanjutnya membuat layer style huruf. Pilih layer huruf "P" » klik kanan » pilih "Blending Option..."



Setelah anda klik "Blending Option...", maka akan muncul kotak dialog Layer Style setting. Klik pada "Gradient Overlay", kemudian samakan setting seperti gambar di bawah ini.



Pada box Setting Layer Style setelah selesai setting gradient, jangan dulu klik tombol "OK", selanjutnya klik pada "Drop Shadow", samakan setting dengan gambar di bawah.



Hasilnya akan seperti gambar di bawah ini:



Tenerapkan layer style huruf lainnya sama dengan layer style huruf "P", caranya klik kanan pada layer huruf "P" kemudian klik "Copy Layer Style". Kemudian klik kanan pada huruf lainnya » klik "Paste Layer Style". Hasilnya akan seperti gambar di bawah ini:



Jika dilihat, efek text sekilas terlihat agak kaku. Untuk merubah efek lekukan text, klik kanan pada huruf yang ingin diedit » klik "Blending Option..." » klik "Gradient Overlay" Ubah nilai "Angel" nya. Contoh pada huruf "A", nilai angle saya ganti dari "0" ke "-90".



Sesuaikan nilai angelnya untuk masing-masing huruf sesuai selera anda. Asumsikan Style Layer masing-masing huruf sudah disesuaikan seperti gambar di bawah ini.

Style Effect huruf sudah selesai dilakukan, jika sudah merasa puas dengan hasilnya anda bisa berhenti sampai di sini saja. Namun jika anda ingin menambahkan sentuhan warna lainnya selain warna hitam dan putih, berikut cara simpel penerapannya. Buat layer baru di atas layer paling atas yang sudah ada (pada contoh di atas layer huruf "C"). Buat layer "Solid Color". Tahap pembuatannya seperti gambar di bawah ini:



Setelah anda tekan tombol OK, maka text dan gradient akan hilang tertutup dengan solid color yang baru saja anda buat. Untuk mulai menerapkan efek warna dengan warna dasar solid color, caranya klik pada layer solid color, ganti "Normal" dengan "Soft Light".



Selesai. Efek warna & model huruf yang digunakan dapat anda sesuaikan menurut selera.

Selengkapnya