Sebelumnya sudah kita bahas cara mengganti favicon Blogger, termasuk menggantinya dengan favicon animasi (yang bisa bergerak-gerak atau seolah hidup--animated). Buat yang belum tau caranya, bisa baca dulu di posting sebelumnya.
Ada beberapa situs yang sebetulnya menyediakan favicon animasi, jadi kita sebetulnya bisa tinggal pakai yang sudah tersedia, tapi gimana kalau kita mau buat sendiri? Nah, kemarin saya nemu satu situs yang ngasih tips membuat animasi sederhana dengan Photoshop. Cukup mudah buat saya yang sebetulnya tidak terlalu akrab dengan Photoshop.
Favicon yang bisa anda lihat di navbar blog ini adalah percobaan saya membuat animasi GIF dengan Photoshop: Caranya dengan menampilkan dan menyembunyikan layers, lalu menggunakan perintah Tween untuk membuatnya tampak lebih hidup.
Langkah 1: Menyusun layers
Yang pertama kali kita lakukan adalah membuat satu file Photoshop dengan bagian-bagian yang akan kita jadikan animasi dalam beberapa layers (lapisan). Misalnya saja, animasi komputer di atas saya susun dalam 4 layer (tidak termasuk background dan layers teks), yaitu: lingkaran luar yang berwarna merah, lingkaran dalam yang berwarna orange, gambar komputer, dan gambar keseluruhan.
Langkah 2: Membuat Frame Animasi dengan Visibilitas Layers
Pilih Window > Animation untuk menampilkan palette animasi Photoshop.
Pada frame pertama, matikan visibilitas semua layer yang tidak akan kita tampilkan pada awal animasi kita. lalu tambahkan satu per satu frame-nya, dan tampilkan layer yang ingin kita lihat untuk setiap tahapan dalam animasi. Pada contoh yang saya buat, tahapan pertama dimulai dengan tampilnya seluruh gambar terlebih dahulu, diikuti dengan hilangnya gambar komputer dan hanya tersisa lingkaran luarnya saja, dst.
Langkah 3: Membuat Frame Animasi Menggunakan Tween
Setelah frame tersusun sesuai dengan tampilnya gambar yang kita inginkan, sekarang tinggal menggunakan perintah Tween untuk menjadikan pergantian tahapan tadi terasa lebih hidup.
Pilih "Tween" dari menu pop-out palette Animation, lalu set berapa frame yang akan ditambahkan, dan Photoshop akan menyebarkan pergerakan/perubahan layer kita dalam frames tambahan tadi.
Langkah 4: Atur Waktunya
Atur waktu delay setiap frame, tidak harus sama, kita bisa mengatur apakah satu frame tampil lama, sebentar, atau sangat sebentar dengan mengatur berapa detik atau sepersekian detik waktu delay satu frame.
Langkah 5: Export File Sebagai GIF
Pada Photoshop CS3: pilih File > Save For Web & Devices...
Pada Photoshop seri lebih awal: pilih File > Save For Web...
Pastikan image type diset sebagai GIF, silahkan bereksperimen pada pilihan-pilihan lainnya, lalu save.
Catatan: Untuk favicon, ukuran gambar yang dipakai biasanya 16px x 16px. Boleh juga di-save dengan ukuran yang lebih besar misalnya 50px x 50px, tapi yang pasti tidak bisa terlalu besar juga.
Selesai sudah... Tinggal tes file yang telah kita buat di browser.
Selamat mencoba :)
Ada beberapa situs yang sebetulnya menyediakan favicon animasi, jadi kita sebetulnya bisa tinggal pakai yang sudah tersedia, tapi gimana kalau kita mau buat sendiri? Nah, kemarin saya nemu satu situs yang ngasih tips membuat animasi sederhana dengan Photoshop. Cukup mudah buat saya yang sebetulnya tidak terlalu akrab dengan Photoshop.
Langkah 1: Menyusun layers
Yang pertama kali kita lakukan adalah membuat satu file Photoshop dengan bagian-bagian yang akan kita jadikan animasi dalam beberapa layers (lapisan). Misalnya saja, animasi komputer di atas saya susun dalam 4 layer (tidak termasuk background dan layers teks), yaitu: lingkaran luar yang berwarna merah, lingkaran dalam yang berwarna orange, gambar komputer, dan gambar keseluruhan.
Langkah 2: Membuat Frame Animasi dengan Visibilitas Layers
Pilih Window > Animation untuk menampilkan palette animasi Photoshop.
Pada frame pertama, matikan visibilitas semua layer yang tidak akan kita tampilkan pada awal animasi kita. lalu tambahkan satu per satu frame-nya, dan tampilkan layer yang ingin kita lihat untuk setiap tahapan dalam animasi. Pada contoh yang saya buat, tahapan pertama dimulai dengan tampilnya seluruh gambar terlebih dahulu, diikuti dengan hilangnya gambar komputer dan hanya tersisa lingkaran luarnya saja, dst.
Langkah 3: Membuat Frame Animasi Menggunakan Tween
Setelah frame tersusun sesuai dengan tampilnya gambar yang kita inginkan, sekarang tinggal menggunakan perintah Tween untuk menjadikan pergantian tahapan tadi terasa lebih hidup.
Pilih "Tween" dari menu pop-out palette Animation, lalu set berapa frame yang akan ditambahkan, dan Photoshop akan menyebarkan pergerakan/perubahan layer kita dalam frames tambahan tadi.
Langkah 4: Atur Waktunya
Atur waktu delay setiap frame, tidak harus sama, kita bisa mengatur apakah satu frame tampil lama, sebentar, atau sangat sebentar dengan mengatur berapa detik atau sepersekian detik waktu delay satu frame.
Langkah 5: Export File Sebagai GIF
Pada Photoshop CS3: pilih File > Save For Web & Devices...
Pada Photoshop seri lebih awal: pilih File > Save For Web...
Pastikan image type diset sebagai GIF, silahkan bereksperimen pada pilihan-pilihan lainnya, lalu save.
Catatan: Untuk favicon, ukuran gambar yang dipakai biasanya 16px x 16px. Boleh juga di-save dengan ukuran yang lebih besar misalnya 50px x 50px, tapi yang pasti tidak bisa terlalu besar juga.
Selesai sudah... Tinggal tes file yang telah kita buat di browser.
Selamat mencoba :)
