Cara Membuat Favicon Blog

Cara Membuat Favicon Blog

Pada artikel kali ini, gue menuliskan cara membuat favicon. Sebelumnya gue udah mempost mengenai 3 Hal Penting Favicon. Dan alhamdulillah ternyata mendapat respon positif dan salah satu pengunjung meminta agar gue menulis artikel tentang cara membuat favicon itu sendiri. Akhirnya, gue penuhi keinginan dia dengan menuliskan artikel ini. Tolong disimak dengan baik ya, kalau ada langkah yang tidak dimengerti bisa berkomentar pasti gue jawab kok slow aja...


LANGKAH PERTAMA

Buka software yang kalian punya untuk mendesainnya (disini gue menggunakan photoshop versi cs6 dan tutorial yang gue buat ini bisa dipraktekan pada photoshop versi berapa pun, karena hanya membutuhkan tool-tool basic). Selanjutnya buat new layer dengan cara klik file lalu new samakan saja settingan seperti gambar di bawah, kemudian klik ok atau tekan enter di keyboard (kenapa gue menggunakan ukuran 100x100px? karena itu adalah ukuran maksimal dari sebuah favicon yang udah ditentukan oleh pihak blogger sendiri, apabila lebih ada kemungkinan file nya tidak akan bisa diupload).


LANGKAH KEDUA 

Masukkan gambar shark atau objek lain yang kalian inginkan dengan cara medrag ke dalam photoshop, sesuaikan besar ukuran layer dan tekan enter pada keyboard.


 


LANGKAH KETIGA

Seleksi background pada gambar shark bisa dengan pentool atau tools lainnya, di sini gue menggunakan magic wand tools karena background hanya terdapat satu warna dan dengan satu kali klik otomatis terseleksi. Benar-benar menghemat waktu.


Seleksi Gambar Di Photoshop


LANGKAH KEEMPAT

Selanjutnya hapus bagian yang sudah diseleksi menggunakan eraser tools atau bisa dengan shortcut huruf E pada keyboard kalian, maka hasilnya akan terlihat seperti di gambar.

Mengcrope Gambar di Photosop


LANGKAH KELIMA

Klik layer baru untuk membuat objek lingkaran dengan warna yang diinginkan, kalian bisa membuat lingkaran dengan brush (shortcut B pada keyboard) saja. Karena gue rasa tidak akan membuat repot serta hemat waktu tentunya.

Membuat Bulatan di Photosop


LANGKAH KEENAM 

Disini gue akan menambahkan stroke atau garis pada lingkaran yang telah dibuat pada langkah sebelumnya, caranya adalah klik kanan pada layer lingkaran klik lagi blending option ceklis kotak kecil di samping tulisan stroke dan sesuaikan settingan seperti di gambar atau dengan selera kalian masing-masing.

Mengatur Blending di Photoshop


LANGKAH KETUJUH

Next, klik kanan pada layer shark klik lagi create cliping mask lalu sesuaikan objek shark. Maka hasilnya akan terlihat seperti gambar di bawah.



LANGKAH KEDELAPAN

Masih pada layer shark, berikan blur pada layer ini agar terlihat lebih halus dengan cara klik bar filter cari blur kemudian klik gausian blur dan ubah radiusnya dengan yang kalian inginkan (semakin besar maka akan terlihat makin halus, tapi ingat jangan sampai over karena akan merusak gambar itu sendiri). 



LANGKAH KESEMBILAN

Dikarenakan warna shark masih terlihat belum menyatu, maka gue akan memberikan sedikit sentuhan warna. Caranya dengan mengklik bar image klik adjustment layer cari color balance dan ubah settingan seperti gambar di bawah.

Mengatur Color Balance Photosop 


LANGKAH KESEPULUH

Selanjutnya menambahkan text yang diambil dari nama blog gue (kalian bisa memasukkan nama/tulisan apa saja). Cari tool text biasanya ada dipojok kiri bersama dengan tools lainnya kemudian kalian bisa menyesuaikan font, size maupun warna textnya. Terakhir taruh layer text di paling atas karena jika kalian menaruhnya di tengah atau di bawah sudah pasti tidak akan terlihat karena tertutup oleh layer di atasnya.



LANGKAH KESEBELAS

Jika semua langkah di atas sudah kalian kerjakan, pada langkah terakhir ini kalian akan menyimpan hasil dari favicon yang telah berhasil dibuat. Klik file kemudian klik save as pilih folder penyimpanan dan kalian juga bisa memilih eksistensi file nantinya sesudah disave, di sini gue menggunakan eksistensi JPG karena ukuran yang dihasilkan standar.

Menyimpan File Photoshop

Maka hasil jadinya akan seperti ini...

 Logo Favicon Blog

Dan selamat telah berhasil membuat favicon untuk blog kalian sendiri. Membuat favicon sendiri ada banyak keuntungan yang kalian peroleh salah satunya design tidak akan sama dengan blog lain dan itu akan menjadi pembeda sebuah blog. Nah itu tadi adalah bagaimana cara membuat favicon, segitu saja tutorial dari gue dan pastinya bakal nulis tutorial/cara-cara lainnya. Sering-sering kunjungin blog gue yang terkesan abal-abal ini. Gue usahain selalu update tenang aja... punya saran, komentar, dan kritik kalian bisa langsung masukin di kolom komentar.

6 komentar :

  1. Mantap gan tipsnya , ijin nyoba sekalian dibookmarks

    BalasHapus
    Balasan
    1. oke beres gan, jangan lupa cek postingan sebelah!

      Hapus
  2. Sebelumnya saya tidak pernah berpikir dan sangat menyepelekan favicon itu sendir,setelah membaca artikelmu ini pandangan saya berubah.Sekarang saya akan mencoba membuat favicon dengan teknik seperti artikel diatas.Thanks sebelumnya buat admin semoga visitornya terus bertambah.

    BalasHapus
    Balasan
    1. Wah sama dong gan, gue juga cuek gitu aja sama instrumen satu ini.

      oke makasih doanya gan.

      Hapus
  3. Mau dong dibuatin habahh https://chaklyraflesia.blogspot.com oh boy kunbal yaa...

    BalasHapus