Hello sobat Asal Klik Dunia RPL, gimana kabar kalian nih? semoga kalian sehat semua dan di mudahkan rejekinya di pandemi covid 19 ini, oke kali ini saya akan membahas tentang bagaimana cara membuat favicon di Photoshop, di postingan ini akan membantu menjawabnya, oke langsung saja simak penjelasan dibawah ini.
Jika kalian ingin tahu apa itu favicon bisa klik disini.
Sebelum kita membuat favicon kita harus mempersiapkan alat untuk editing photo, terserah dan sebisa kalian mau menggunakan tools/software apa saja teknik ini bisa di implementasikan di mana saja yang penting bisa buat editing photo. sipp lanjut..
Di postingan ini saya menggunakan software adobe photoshop CS6, jika kalian sama menggunakan tools ini berarti sama prosesnya. Sebelum kita membuka kita harus mempersiapkan gambar mana yang ingin dijadikan favicon, tanpa gambar kita juga bisa membuat favicon yaitu dengan tulisan namun dipostingan kali ini saya ingin membuat favicon dengan gambar.
Sialahkan buka adobe photoshopnya
Gambar 1 - cara membuat favicon
Kemudian klik menu file -> klik new atau bisa langsung Ctrl+N
Gambar 2 - cara membuat favicon
Kemudian setelah kalian klik new, akan muncul dialog box seperti ini, kalian bisa mengikuti setting seperti ini, yang terpenting pada settingan ini adalah ukuran kalian bisa menggunakan 16x16 atau 32x32. Setelah itu klik OK
Gambar 3 - cara membuat favicon
Kemudian langkah selanjutnya kita akan open file gambar yang akan kita jadikan favicon dengan cara CTRL+O atau bisa ke menu file klik Open
Gambar 4 - cara membuat favicon
Kemudian langkah selanjutnya adalah pilih gambar yang kita inginkan, lalu jika sudah dipilih gambarnya klik Open
Gambar 5 - cara membuat favicon
Kemudian jika sudah terbuka gambar yang kalian pilih, kita akan crop bagian mana yang kita akan ambil yang dibutuhkan untuk membuat favicon kita. dengan cara piih tools Elipical Marquee Tool karna saya akan membuat favicon itu berbentuk lingkaran jika kalian tidak ingin membuat favicon berbentuk lingkaran maka kalian bisa melewati langkah ini.
Gambar 6 - cara membuat favicon
Cara menggunakan alatnya adalah dengan cara kalian posisikan ditengah gambar yang kalian ambil kemudian tekan tombol keyboard Shift + Alt lalu drag out untuk membentuk lingkaran, setelah membentuk lingkaran seperti gambar dibawah ini bisa kita lakukan CUT, dengan cara tekan CTRL+X.
Gambar 7 - cara membuat favicon
Kemudian pastekan di tempat yang sudah kita sediakan untuk favicon.
Gambar 8 - cara membuat favicon
Kemudian kita akan resize gambar tersebut, karna kita akan mengikuti kebutuhan dari favicon yaitu 32x32 atau 16x16. dengan cara CTRL+T kemudian drag in sambil menekan Alt + Shift agar height dan width dapat terubah secara bersamaan. maka hasil tersebut akan seperti ini.
Gambar 9 - cara membuat favicon
Kemudian kita akan menyimpan file tersebut, dengan cara
ALT+Shift+Ctrl+S atau bisa kita ke menu file ->
Save for Web.
Gambar 10 - cara membuat favicon
Kemudian akan muncul dialog box seperti ini, Setting PNG-24, Tranparency di centang, setelah sudah kalian bisa SAVE, simpan di folder yang kalian inginkan.
Gambar 11 - cara membuat favicon
Finnish
Langkah pun selesai berikut cara membuat favicon di photoshop cukup mudahkan kalian sudah berhasil membuat favicon, favicon tersebut dapat kalian letakan pada sebuah webiste dibawah ini adalah contoh gambar favicon pada sebuah Website.
Gambar 12 - contoh favicon
Catatan :
Jika kalian ingin membuat favicon yang tidak memiliki background kalian dapat setting diawal tadi pada gambar 3, pada settingan background content di setting menjadi Transparent, jika kalian ingin membuat gambar memiliki background kalian dapat setting background colors. mengapa tadi saya memilih PNG 24, PNG 24 ini sendiri memiliki kesamaan dengan JPEG yaitu mendunkung perwanaan 24 bit yang memiliki kedalaman warna sampai 16 juta warna.
Apabila ada kekurangan atau kesalahan dari kami, mohon maaf, dan bisa kirim ke kolom komentar agar di perbaiki karna kami juga dalam tahap belajar dan memperbaiki diri lagi sekian dari saya.
Salam Coding Enjoy Yuhuu..
Lainnya :
Apa itu Favicon
0 Komentar