Featured Post

Tutorial Efek Foto Glitch - VHS di Photoshop

Cara Membuat Desain Favicon Blogger di Photoshop

desainspot.com - Favicon di Blogger (blogspot) adalah ikon kecil berupa desain logo tentang blog atau situs yang ditampilkan pada bagian tab browser yang digunakan. Dan pada tulisan ini, saya akan membantu anda untuk mengetahui cara membuatnya menggunakan Photoshop.

Cara membuat desain logo Favicon Blogger di Photoshop

Desain logo Favicon pada gambar diatas adalah hasil yang bisa anda dapatkan pada tutorial kali ini.

Mengenai contoh seperti apa itu Favicon blog, anda bisa melihat desain ikon logo blog ini pada gambar dibawah.

Gambar ikon blog pada browser

Sampai tahap ini, sudah paham kan seperti apa bentuknya?

Untuk manfaatnya sendiri, Favicon ini tidak hanya sekedar menampilkan ikon logo blog saja.

Lebih dari itu, ikon tersebut juga bisa menjadi identitas dan diferensisasi (pembeda) antara blog anda dengan yang lainnya.

Cara membuat desain logo Favicon Blogger menggunakan Photoshop

Khusus blog yang dibangun menggunakan platform Blogger.com (blogspot), terdapat 2 hal yang sangat penting untuk diketahui sebelum membuat desain ikonnya, yaitu:
  1. Bidang desain ikon harus berbentuk kotak persegi (square).
  2. Kapasitas gambarnya tidak lebih dari 100kb.
Mengenai bidang berbentuk persegi, maka ukuran lebar dan tinggi bidang gambar wajib sama.

Contoh singkat ukurannya (Lebar x Tinggi) begini:
- 100px X 100px (Benar)
- 100px X 105px (Salah)

Jika sudah paham, yuk lanjut pada proses membuat desainnya!

1. Persiapan gambar background

Dari beberapa blog yang pernah saya buat sebelumnya, ukuran gambar Favicon yang seringkali saja pakai adalah 100px X 100px dengan resolusi 72 DPI yang merupakan standar resolusi monitor.

Ukuran dokumen desain logo Favicon blog di Photoshop

Jika dokumen baru tersebut sudah selesai dibuat, langsung buat layer baru yang transparan dan isi dengan warna Ungu Tua dengan kode warna 2b092b.

Warna tersebut untuk warna latar belakang (background) saja sebagaimana hasil pada gambar pertama diatas.

Setelah itu, masih pada layer warna ungu tua tersebut, buka fitur Blending Options dan langsung bekerja pada bagian Stroke dengan pengaturan sebagai berikut.

Cara membuat bingkai pada desain logo Favicon blog di Photoshop

Settingan diatas digunakan untuk memberikan efek bingkai berwarna pada desain dengan memanfaatkan warna gradasi (Gradient).

2. Memasukkan teks sebagai elemen dalam desain logo

Langkah selanjutnya dalam pembuatan desain logo Favicon ini adalah memasukkan elemen teks. Dan pada contoh kali ini, katakanlah saya ingin menggunakan inisial dari nama suatu blog yaitu Ak.

Jenis font yang saya gunakan dalam panduan ini adalah Arial Rounded MT Bold dengan warna Ungu Terang (ff00ff).

Pengaturan lainnya serta susunan layernya adalah sebagai berikut.

Setingan hutuf untuk elemen teks desain logo Favicon blog di Photoshop

Jika teksnya sudah selesai dibuat, silahkan untuk menempatkannya di tengah bidang desain baik secara vertikal maupun horizontal.

Silahkan pelajari beberapa cara mengatur posisi gambar maupun teks di Photoshop untuk mengetahuinya lebih lanjut.

Dan tahapan diatas sekaligus menjadi akhir dari panduan kali ini. Berikut saya tampilkan kembali hasil akhirnya.

Desain logo Favicon Blogger di Photoshop

Selesai.

*Tips:

Dalam menyimpan file Photoshop hasil akhirnya, ada baiknya anda mempertimbangkan format gambar .PNG terutama untuk contoh desain ikon seperti panduan diatas.

Hal ini disebabkan karena biasanya, ukuran file gambarnya akan lebih kecil sehingga loading blog menjadi lebih ringan untuk menunjang optimasi mesin pencari dari aspek onpage blog anda.

Sekian panduan ini. Jika ada pertanyaan untuk cara pembuatan desain logo Favicon blog pada tutorial Photoshop kali ini, beritahu saya lewat komentar dibawah/ Semoga bermanfaat.

Comments