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

Caesium Image Compressor

Compress (memperkecil) ukuran file gambar (image) kadang diperlukan dengan bermacam alasan. Salah satu contohnya webmaster sering compress gambar kreasi mereka sebelum diupload ke webserver, alasannya sederhana; untuk menghemat traffic bandwidth, ruang penyimpanan (disk space) dan memperkecil (mempercepat) waktu loading web. Terlebih lagi bagi webmaster photo blog, biasanya mereka posting file photo hasil jepretan minimal Kamera Digital SLR yang mempunyai resolusi diatas 3000 pixels. Untuk kualitas gambar di atas 3000 pixels tentu saja konsekuensinya file size image minimal 1 MB atau bahkan jauh di atasnya. Dan juga bagi pengguna PC rumah yang mempunyai koleksi photo kamera digital misalnya, sudah pasti file-file ini akan banyak memakan resource ruang penyimpanan (hard disk). Untuk beberapa alasan inilah mengapa compress image diperlukan.

Anda dapat compress file gambar menggunakan bermacam software image compressor yang tersedia, baik itu software lisensi berbayar (paid license) ataupun yang gratis (GNU General Public License). Namun pada artikel kali ini saya akan sedikit mengulas cara compress (memperkecil) file gambar menggunakan software open source (gratis) image compression Caesium. Caesium merupakan salah satu powerfull tool image compression gratis yang dapat memperkecil ukuran size file gambar rata-rata sampai 80% tanpa mengurangi kualitas ketajaman gambar (tentu saja jika dilihat sekilas).

Langsung saja!! Untuk mulai download terlebih dahulu Caesium, setelah itu install di komputer anda & buka aplikasi. Import file gambar dengan klik pada icon Add Pictures atau import beberapa file gambar sekaligus dalam satu folder dengan klik pada icon Add Folder (Screenshot 1). Anda dapat juga drag & drop file gambar ke jendela aplikasi Ceasium, supported file extention Caesium diantaranya JPEG (JPG), PNG & BMP.

Pada artikel ini saya akan coba compress 6 image file photo, masing-masing file mempunyai file size di atas 5 MB dan mempunyai dimensi gambar 5184 x 3456 pixels (Screenshot 2 & Screenshot 3).

Screenshot 1

Screenshot 2

Screenshot 3

Setelah file gambar selesai di import, sesuaikan kualitas output, format output (JPG, PNG atau BMP) & output folder kemudian klik tombol Compress! (Screenshot 4). Setelah proses compress image selesai, anda dapat melihat file size baru & rasio compression. Dapat anda lihat pada Screenshot 5, rata-rata rasio penurunan file size 80% dari 5 MB ditekan ke kisaran 1 MB.

Hasil perbandingan gambar (image) sebelum dan sesudah di compress dapat anda lihat pada Screenshot 6 (karena ukuran gambar terlalu besar, saya potong sebagian / dimensi 1024 x 360 pixel).

Screenshot 4

Screenshot 5

Screenshot 6

File gambar (image) hasil compress software gratis ini sulit dibedakan dibanding file aslinya (uncompressed) jika dilihat dengan mata telanjang. Namun tentu saja ada perbedaan jika dianalisa lebih lanjut, silahkan coba sendiri jika anda penarasan. Download Caesium di sini.

Semoga bermanfaat...
:)

Selengkapnya

Extract Subtitle Dari File Video MKV

MKVExtract GUI merupakan software extractor file MKV yang dapat extract file video, audio atau text subtitle dari file video MKV. Pada artikel kali ini akan mengulas sedikit tentang bagaimana cara extract file subtitle khusus dari file video MKV, yang nantinya mungkin akan anda gunakan atau diterjemahkan ke bahasa lain (bahasa Indonesia misalnya).

Untuk memulai, yang anda perlukan diantaranya:

1. File video MKV built-in track subtitle (biasanya blu-ray movies)


2. MKVToolnix. Donwload Softare Gratisnya di sini


3. MKVExtractGUI. Donwload Softare Gratisnya di sini

Pertama. Setelah download "MKVToolnix", install di komputer anda. Kemudian download & extract file MKVExtractGUI ke direktori install MKVToolnix (Drive:\Program Files (x86) (atau Program Files untuk OS 32-bit)\MKVToolNix).

[caption id="attachment_694" align="alignnone" width="300" caption="Extract MKVExtractGUI"][/caption]

Buka file "MKVExtractGUI2.exe" (klik kanan → "Open", atau klik 2 kali file "MKVExtractGUI2.exe"), kemudian browse ke file video MKV.

[caption id="attachment_695" align="alignnone" width="300" caption="MKVExtractGUI - Browse Video"][/caption]

Tentukan lokasi output file subtitle yang akan di extract, centang checkbox subtitle kemudian klik tombol "Extract".

[caption id="attachment_696" align="alignnone" width="300" caption="MKVExtractGUI - Extract"][/caption]

Selesai. File subtitle sudah berhasil di extract & siap untuk anda gunakan atau diterjemahkan.

[caption id="attachment_697" align="alignnone" width="300" caption="MKVExtractGUI - Extracted Subtitle File"][/caption]

Contoh hasil extract subtitle yang sudah saya coba terjemahkan, dapat anda lihat dan download pada halaman ini.

Semoga membantu.
:D

Selengkapnya