[Tutorial] Membuat Animasi GIF Sederhana Untuk Ucapan Selamat Idul Fitri

Lebaran sebentar lagi. Sewaktu kecil dulu (masih sampai umur SMP deh) saya masih sering berkirim kartu Lebaran untuk teman-teman saya. Kalau lagi rajin saya bikin sendiri kartunya; tapi sering juga hunting kartu lebaran lucu-lucu (dan murah) di toko buku.

Saat makin dewasa dan hidup di jaman digital seperti sekarang, kita punya opsi lebih banyak untuk mengirimkan ucapan selamat hari raya, salah satunya via email. Meskipun mungkin banyak yang menganggap kirim ucapan via email itu kurang personal; tapi ini bisa jadi pilihan yang paling ideal untuk menyapa banyak orang sekaligus, seperti saat Blogger Perempuan Network mengucapkan Selamat Idul Fitri pada ribuan member-nya ^_^

Nah di postingan ini saya mau berbagi cara membuat animasi GIF sederhana untuk ucapan Selamat Idul Fitri. Ini adalah exact step yang saya lakukan saat membuat Eid Greeting untuk Blogger Perempuan Network yang hasilnya seperti ini :

Animated gif tersebut basically terdiri dari hanya 2 gambar, yang berbeda di antara kedua gambar tersebut ialah warna tulisan Eid-al-Fitr dan ornamen bintang-bintang-nya.

Kenapa cuma 2 gambar? Biar cepet bikinnya 😀

Jadi tugas kita adalah menyiapkan dua buah gambar yang akan dijadikan animasi gif, lalu membuat animasi gif-nya menggunakan online gif maker http://gifmaker.me/.

So let’s get started 😉

1 | Buat file di Photoshop. I made it as square just for flexibility. Feel free to make the image in other size as needed. Buat layer baru berupa solid color, beri warna pink.

2 | Tambahkan layer Moroccan tile (PNG file dengan pattern warna putih dan background transparan) untuk memberi pattern pada background. Adjust opacity ke 10%.

3 | Buat square shape di layer baru dengan ukuran sedikit lebih kecil daripada ukuran canvas. Di sini saya akan membuat outline putih; jadi dari shape tersebut, adjust “fill” menjadi 0%. Tambahkan border dengan cara berikut : Klik kanan di layer tersebut >> Blending Options >> centang “Stroke” dan ubah parameter “Stroke” sbb : Size 1px, Position : Inside, Color: pilih warna putih di color picker.

4 | Tambahkan logo Blogger Perempuan Network. Saya gunakan versi logo yang putih dengan background transparan supaya stand out di atas background berwarna pink. Pastikan posisi logo vertically centered.

5 | Tambahkan file tulisan Eid-al-Fitr yang berupa PNG dengan background transparan. Ubah warnanya dengan cara berikut: Klik kanan di layer tersebut >> Blending Options >> centang “Color Overlay” dan ubah parameter “Color Overlay” sbb : Color: pilih warna kuning-orange di color picker.

Simpan file ini (Save As) sebagai file animasi gif 01.jpg

6 | Duplicate layer tulisan Eid-al-Fitr, dan ubah menjadi raster file supaya bisa dihapus bagian bintang-bintangnya. Klik kanan di layer tersebut >> Blending Options >> Rasterize Layer.

Berikan warna putih pada tulisan tersebut lalu gunakan tool Eraser untuk menghapus bagian bintang-bintang.

Simpan file ini (Save As) sebagai file animasi gif 02.jpg

7 | Go to http://gifmaker.me/. Upload kedua file gambar lalu setting seperti gambar di bawah ini :

1. Upload kedua gambar. Dengan tool ini kita bisa membuat gif dari maksimal 300 file JPG.
2. Tentukan ukuran canvas sesuai kebutuhan.
3. Set animation speed. Default-nya adalah 500 milliseconds; tapi saya ingin animasi yang lebih “santai” jadi saya naikkan speednya ke 900.
4. Repeat times ngga saya ubah karena saya mau animasinya looping terus bolak balik.
5. Music URL saya kosongkan. Kalau kamu mau bisa ditambahkan musik (hanya support dari Youtube) pada gif-nya.
6. Klik “Create GIF Animation”
7. Klik “Download the GIF”.

Done ^_^

Tips menampikan animated gif di WordPress

Sedikit tips untuk bisa menampilkan animated gift di WordPress post; pastikan gif ditampilkan Full Size ya; karena kalau yang di-display versi thumbnail-nya, WordPress hanya akan menampilkan frame pertama saja jadinya gambar statis bukan animated gif. Read more about it here.