Membuat .GIF dengan GIMP (dkk.)

#okaasan #senseii~ #yuyushiki #random #abis #banjir #hashtag #biar #gaul

Sebenarnya hal ini sudah pernah saya posting di limited circle-nya google+. Di-repost ke sini dengan sedikit penyesuaian bahasa dengan harapan mudah dipahami oleh manusia. Maklum saja, circle yang itu para penghuninya agak meragukan, manusia apa bukan /ditimpukbusway.

AHEM. 

Suatu hari, ketika angin berhembus sepoi-sepoi dan jingga begitu jumawa menghiasi cakrawala, terbesitlah sebuah keinginan untuk membuat .gif dari anime unyu bin lucu yang sedang saya tonton. Berbekal bahan bacaan yang kebetulan lewat di stream google+ dan sedikit berkelana dari halaman manual ke wiki-wiki yang bertebaran (halahpret gugling) akhirnya saya putuskan untuk membuat .gif cara alami dan organik (baca: ribet), karena cara instant pake tools yang lengkap dari satu software itu terlalu mainstream. Well...pada dasarnya saya ga bisa juga sih :9. 

Oh iya, OS yang saya gunakan Linux (Mint 14), tapi software yang saya gunakan ada versi Windowsnya juga jadi tidak terlalu sulit didapat seandainya anda ingin mencoba dengan menggunakan windows. Abaikan istilah non-teknis yang dipakai, karena pokoknya gitu™. Langsung saja~ 

Alat-alat:
- Avidemux (2.5.4)
- ffmpeg (0.8.6-6:0.8.6-0ubuntu0.12.10.1) (oke ini jadul)
- GIMP (2.8)
- imageMagick (optional, toh ga saya pake juga karena males, te-he)

Bahan:
- anime henneko episode 1 (WAJIB) /plak

Langkah Pembuatan :
===============
1. Potong video
Dengan kekuatan avidemux kita potong scene yang kita perlukan dari video, kemudian save sebagai henneko.mp4. kenapa mp4? pengen aja™.

suarez chaan /bukan

2. Ekstrak frame(s) dari video
Karena video adalah kumpulan frame-frame, maka kita pecah mereka dengan menggunakan ffmpeg, yeeey~. ketikkan baris sakti berikut ini pada terminal (console, command prompt, opoae) anda:

ffmpeg -i henneko.mp4 -r 24 -f image2 image-%2d.png     

24 itu pembulatan jumlah frame perdetiknya, kebetulan framerate videonya 23,976, bisa dicek di properties video untuk mengetahui informasinya. 
%2d itu urutan dalam penamaan file nantinya (dua digit), pakai %3d jika ingin angka yang muncul 3 digit. 
Singkat kata, baris sakti di atas bertujuan untuk mengekstrak 24 buah frame dari tiap detik potongan video yang telah disediakan. keterangan lebih lanjut silahkan ketik "man ffmpeg" dijelasin semuanya di sana. Kenapa pakai .png? pengen aja™. 

pokoknya gitu™

Singkat kata, dengan langkah ini terekstraklah frame-frame ke dalam bentuk .png. saatnya diproses di dalam GIMP

3. Mengolah di GIMP
Frame-frame yang telah diekstrak dalam bentuk .png tadi lalu kita olah di GIMP. buka GIMP lalu open seluruh frame yang ada sebagai layer (File > Open As Layers) 

Sebenarnya setelah ini kita bisa langsung export ke .GIF (file>export | ubah nama .gif | set: as animation, loop forever, delay=42). Kenapa value untuk delay = 42? berikut penjelasannya:

(1 s / 23.976 frames) * (1000 ms / 1 s) 

= 1000 ms / 23.976 frames = 41.708 ms / frame, dibulatkan jadi 42. Pokoknya gitu™.

Akan tetapi karena kita bangsa yang menjunjung tinggi budaya ribet, maka harus ada sedikit sentuhan manual. 

- kurangi layer yang ada . dalam kasus ini yang terekstrak ada 42 buah (0-41) karena terlalu banyak maka saya buang sedikit sehingga tersisa 16 layer saja, hemat pangkal tampan. 
- tambahkan (40ms) di akhir nama setiap layer untuk delay tiap layer nantinya. Jika tidak diberi nanti ketika diexport ke .gif diberi default (100ms), gapapa juga sih.  

- ubah setting warna ke indexed (image>mode>indexed | set dithering: position[atau pilihan yang lain sesuai kebutuhan]) karena .gif cinta indexed color. 

itu... capturenya salah, harusnya di akhir nama layer diberi "(40ms)"

- resize image jika perlu (image>scale image) agar ukurannya tidak terlalu besar. 
- optimasi (filters>animation>optimize for GIF / difference) 
- export (file>export | ubah nama .gif | set as animation, loop forever, delay 42)

optimasi dan export

4. Sajikan selagi hangat

kyaaaah >///////////<

catatan:
- ada banyak jalan untuk "convert video to .gif", ini salah satunya, desu :3

- untuk optimasi sebenarnya bisa dicoba-coba lagi, baik secara manual (optimasi per-layer) maupun dengan imagemagick (males)

- Pokoknya gitu™ dan Pengen aja™

Ya, demikianlah. Selamat mencoba! 



-------------------------------------------------------------
bahan bacaan:
http://goo.gl/JvIU3 
http://goo.gl/7y61n
http://goo.gl/nuXJa

cara menjinakkan wanita

Karasawa emang top. Saya mengharapkan season 2 dari anime ini u_u.

Demikianlah. 

Logo Gunadarma, Inkscape, dan text to path

Diawali rasa heran karena sudah berabad-abad googling dan gak ketemu juga ukuran logo kampus saya yang sedap dipandang mata, entah dari ukuran, kreasi yang fantastis namun tidak perlu, komposisi warna kurang sreg, bahkan wiki pun menampilkan logo ter-emboss yang menyayat hati. Mungkin saya kurang hoki.

Akhirnya, berbekal (yang katanya namun mudah-mudahan dan nampaknya betul) logo resmi yang dimuat di salah satu staff site, saya buatlah logo ini:

yang grayscale:

ukurannya 675 X 689 pixel, rujukan warna saya ambil dari tautan logo yang saya sertakan di atas.

Teman-teman mahasiswa dan mahasiswi Gunadarma (atau mungkin dosen-dosennya juga nyahaha) silahkan menggunakan logo ini jika berkenan :D

Curhat Teknis (Text to Path pada Inkscape)

Logo ini dibuat menggunakan inkscape 0.48.1. Dan tulisan UNIVERSITAS GUNADARMA dibuat melingkar dengan menggunakan text to path. Jika anda adalah pengguna corelDRAW mungkin tidak terlalu kesulitan dalam menaruh text ke dalam path karena sejumlah opsi yang tersedia (seperti flip text dll). Pada inkscape hal ini agak sedikit, err, tricky.

Pertama-tama, harap dimaklumi karena saya pemula *sungkem kalo ada suhu2 mampir

Beginilah cara saya:

- siapkan objek lingkaran dan text

- seleksi lingkaran dan text kemudian mampirlah ke toolbar: text>put on path

- setelah put on path diklik hasilnya ada pada (1). Karena munculnya tidak di tempat yang saya harapkan maka saya rotate ((2)klik dua kali hingga muncul tanda panah melengkung untuk rotasi) dan hasilnya ada pada (3).

- Text belum melingkar sempurna, jadi saya scale lingkaran supaya jadi lebih kecil dan text tetap mengikuti bentuk lingkaran (4). Karena lingkaran hanya berupa garis bantu maka saya set warna garis sebagai transparan (5). cara set warna garis, kunjungi toolbar: object>fill and stroke>stroke paint, pilih tanda silang (no paint).

- Bagaimana jika ingin tulisannya di dalam lingkaran? tinggal flip saja lingkarannya sehingga text berada di dalam lingkaran (6).

- Untuk mengedit jarak antar huruf bisa dilakukan ketika text tool masih aktif, sehingga properties barnya masih tampak pada gambar berikut:

tambah nilai pada spacing between letters sampai jarak hurufnya sesuai dengan yang diinginkan.

contoh bagaimana trik text to path dengan memainkan spacing between letters diterapkan:

demikianlah u_u, selamat mencoba.

Kalau ada yang protes soal judul postingan ini, silahkan juga *melipir

Optimasi Gambar Untuk Web dengan GIMP (2.6)

how to optimize image using GIMP? Jreng, saya gak tau, maka saya googling. Beruntungnya google tidak menghina-hina kosakata saya yang cupu berlevel-level melainkan mendatangkan link-link yang sesuai kebutuhan. Jadi setelah membaca sedikit dan praktek sedikit akan saya jabarkan caranya. Jika anda terbiasa mengoptimasi gambar dengan Photoshop, LUPAKAN untuk sementara, kosongkan pikiran anda, masuk lebih dalam ke bawah alam bawah sadar anda, lalu tertidurlah.

Tanpa Plug-in

Sebenarnya optimasi itu sendiri bisa dilakukan tanpa plug-in yaitu dengan:

1. menjadikan mode gambar hasil olahan anda sebagai indexed. (image>mode>indexed)

lalu akan muncul tampilan di bawah ini:

Jika gambar anda tidak terlalu kompleks, atau bahkan hanya berwarna hitam dan putih tinggal menyesuaikan jumlah warnanya saja. Lain halnya jika gambar yang hendak anda optimasi berupa foto, kualitas gambar bisa menurun drastis. Untuk foto saya sarankan format .JPG jika ingin ukurannya tidak terlalu bengkak.

2. setelah bermain dengan mode sebelumnya (jika hasilnya memuaskan silahkan dipakai, jika tidak sebaiknya kembali ke mode awal(RGB)) , ketika hendak "save as" kita masih diberikan opsi untuk optimasi lebih lanjut, untuk kali ini saya beri screenshoot saat kita memilih format .JPG dan .PNG saja:

pada opsi format .JPG ini kita bisa memainkan kualitas gambar, atau pada advanced option kita naikkan smoothing sampai ukuran tertentu, coba-coba juga kombinasi optimasi yang lainnya :P.

pada opsi format .PNG ini unchecked opsi save resolution dan save creation time, setelah dicoba bisa memberi diskon ukuran pada gambar yang disimpan, walau sedikit.

kelemahan teknik non-plugin ini adalah tidak adanya preview gambar teroptimasi sehingga trial-errornya lumayan memakan waktu, terlebih anda bersahabat dengan menula (mesin lanjut usia). Dan nampaknya opsi untuk JPG lebih banyak ketimbang PNG terbukti dengan perbedaan ukuran file yang lumayan besar (.xcf=2MB ->.png=800kb ->.jpg=90kb).

Dengan Plug-in

GIMP juga menyediakan opsi untuk menambahkan plug-in. Biasanya plug-in diaktifkan dengan cara menaruh file ekstensi ke dalam direktori plug-in. cek: edit>preferences>folders>plug-ins untuk mengetahui di mana lokasi plug-in berada, taruh plug-in di sana(akses foldernya). Setelah ditaruh pada tempatnya, restart GIMP untuk mengaktifkannya. membaca file README yang disertakan pada plug-in akan sangat membantu.

Jika plugin telah aktif (misalnya pada contoh ini saya gunakan save for web dan RIOT) maka akan muncul seperti di bawah ini:

Ada dua ekor plug-in untuk optimasi gambar yang bisa dicoba:

1. Save For Web

Setelah instalasi plug-in, buka file>save for web untuk sampai ke tampilan berikut:

silahkan dicoba-coba format yang tersedia, plug-in ini menampilkan preview hasil optimasi dan juga ukuran gambar. Kekurangannya mungkin karena menu optimasi (selain resize) yang sama saja dengan ketika kita menggunakan optimasi pada "save as".

2.RIOT (Radical Image Optimization Tool)

Setelah instalasi plug-in, buka file>save for web with RIOT untuk sampai ke tampilan berikut:

Catatan penting: jika menggunakan RIOT pastikan gambar anda sudah flattened (image>flatten image) karena nampaknya RIOT (versi 0.4) hanya bisa mengakses layer yang aktif saja jika gambar masih berupa layer terpisah. Anda bisa meng-undo gambar ke bentuk layer terpisah setelah menggunakan RIOT.

Menariknya dalam penggunaan RIOT ini terdapat lebih banyak opsi dan optimasi lebih rendah lagi dengan membandingkan gambar asli dan hasil optimasi. Salah satu opsi menarik adalah compress to size, kita bisa memasukkan ukuran gambar yang diinginkan lalu RIOT secara otomatis mengoptimasi gambar.

Daaaaaan akhirnyaaaa, pilihan saya untuk mengoptimasi gambar jatuh padaaaa, jeng jeng jeng jeeeng, RIOT dengan tipe file .jpg, berhubung yang saya optimasi adalah gambar berikut:

*template poster dipersembahkan oleh: ei819

**Foto orangnya dipersembahkan oleh capture dari metro TV oleh siapa saya lupa *plak

Err, sebenarnya saya ragu, kata yang tepat itu optimasi atau optimisasi atau optimisasasasisisasais *halah. Jika ada yang nyasar ke sini dan punya koreksi, masukan, tambahan, pertanyaan silahkan meninggalkan komentar pada tempatnya.

Selamat mencoba. Sambel dijual terpisah