Cara Membuat Favicon Langsung Pasang di Blog

Kali ini saya akan sedikit sharing mengenai bagaimana cara membuat favicon yang benar. Seringkali kita membuat favicon tapi kebesaran ataupun kekecilan. Oleh karena itu saya mencoba untuk membuat tutorialnya sekaligus cara memasang favicon di blogger.

Sebelum lanjut ke tutorialnya kali ini kita siapkan terlebih dahulu software adobe illustrator, disini saya menggunakan adobe illustrator cs6. Oke jika sudah disiapkan langsung saja kita mulai praktek cara membuat favicon dan pemasangan favicon.

Cara Membuat Favicon Langsung Pasang di Blog


Jika anda ingin melihat video praktek cara membuat favicon dan memasang favicon, Silahkan kunjungi channel youtube resmi kali di Ez Tricks atau Klik Disini.


Buka Software Adobe Illustrator
Silahkan buka software adobe illustrator, disini saya mengggunakan software adobe illustrator cs6.
Jika anda menggunakan software editing lainnya silahkan. Karena pada dasarnya semua software konsepnya sama.

Buat Project Baru Untuk Favicon


Buat project baru dengan cara klik new
Perlu diperhatikan mengenai setting awal mengenai project yang akan kita buat. Setelah anda klik new Kemudian atur nama project dan size width: 100px heigt: 100px. Lalu atur units ke pixels dan atur raster effects menjadi screen (72ppi).Kemudian klik ok.

Cara Membuat Favicon Langsung Pasang di Blog
Membuat Proect Baru Untuk Favicon

Tahap Membuat Favicon

Tambahkan text menggunakan type tool, Desain text sesuai keinginan anda. Disini saya akan menggunakan huruf ez sebagai object utama dalam favicon saya. Pilih jenis font saya memakai font Uni Sans Heavy CAPS.

Jika anda ingin memiliki font Uni Sans Heavy CAPS Silahkan anda seacr di website 1001font. Cari saja dengan keyword Uni Sans Nanti akan muncul fontnya dan siap didownload.

Sesuaikan ukuran text lalu ubah ke outlines, dengan cara klik kanan lalu pilih create outlines. Kita ubah ke outlines gunanya agar menjadi vector dan bisa kita edit lagi. Setelah di create outlines maka text masih dalam keadaan satu group. Agar bisa kita edit satu persatu. Silahkan pisahkan kedua object tersebut dengan cara klik kanan lalu pilih ungroup.

Desain Text Favicon

Selebihnya desainlah sesuai keinginan anda.

Buatlah object persegi menggunakan rectangle tool dengan ukuran 100px. Letakan tepat di tengah tengah lalu atur fill menjadi transparant dan border sesuai keinginan.

Klik stroke lalu atur align stroke menjadi align stroke to inside. Atur warna text sesuai keinginan anda

Membuat Kotak 

Jika ingin mengubah warna border kotak perseginya silahkan anda Klik pada kotak lalu klik menu object kemudian pilih expand appearance.


 Kemudian desain lagi sesuai keinginan anda disini saya mengubah warna border kotaknya.

Mengganti Warna Border Kotak

Kemudiann atur lagi warna textnya agar sesuai dengan  warna border. Lalu agar lebih menarik berikan effect berupa drop shadow, Sesuaikan ukuran shadow lalu klik ok.

Menambahkan Shadow Pada Text

Pastikan background dari favicon ini transparant seperti berikut.

Tampilan Favicon Transparant

Export ke format png. Pada setting export ubah setting resolution ke screen (72ppi) lalu klik ok.

Export

Kemudian kita coba pasang favicon ke blogger. Mau dipasang di blogger ataupun wordprees sama saja ukurannya.

Tambahkan Favicon Pada Blog

Selesai.

Selesai

Kurang lebih seperti itu hasil dari praktek membuat favicon kita kali ini. Anda bisa mengkreasikan warna, bentuk, dan lain lain. masalah ukuran saya sarankan anda menggunakan ukuran antara 100px sampai dengan 150px.

Itu tadi bagaimana cara membuat favicon dan cara memasangannya, semoga artikel ini dapat bermanfaat bagi kita semua. Terimakasih telah berkunjung jangan lupa bahagia.

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel