Sebelumnya saya sudah jelaskan bagaimana cara membuat gambar favicon blog dengan menggunakan aplikasi pengolah gambar Macromedia FreeHand dan CorelDraw. Nah sekarang bagaimana pula cara membuat gambar favicon tersebut dengan menggunakan Adobe Photoshop? Berkut langkah detailnya.
Pada contoh ini, saya menggunakan Adobe Photoshop CS6. Versi berapa pun yang anda gunakan tidak masalah, yang penting anda paham prinsip dan tool yang digunakan. Kemudian sebagai bahan demo, disini saya akan membuat favicon blog ini. Nanti setelah paham caranya, anda bisa terapkan untuk membuat favicon blog anda sendiri.
Sekarang silahkan buka program Adobe Photoshop yang sudah terinstall pada komputer atau laptop anda. Jika belum ada, silahkan diinstall dulu.
Nah beginilah interface Adobe Photoshop CS6 saat baru dibuka. Untuk memulainya, silahkan anda buat dokumen baru dengan cara mengklik menu File kemudian pilih New (lihat no.1 dan no.2). Maka nanti akan terbuka jendela pengaturan dokumen seperti gambar dibawah ini.
No.1 adalah nama file dari favicon anda. No.2 adalah dimensi perkalian faviconnya, dan juga satuannya. No.3 adalah, jenis backgroundnya. Pada contoh ini saya pilih dengan bacgkround transparant, agar yang muncul nanti hanya gambar faviconnya tanpa latar belakang. Setelah semua pengaturan itu sesuai keinginan anda, baru klik tombol OK (lihat no.4), sehingga halaman dokumennya, nanti akan terbuka seperti ini:
Lho kok kecil amat?
Memang kecil. Karena yang akan anda buat, hanya sebuah favicon. Tapi saat mengerjakannya, anda bisa perbesar tampilanya sesuai kebutuhan anda dimana anda akan merasa nyaman dalam bekerja. Caranya gunakan kombinasi shortcut (CTRL + Spasi) untuk memperbesar tampilan halaman kerja, dan (CTRL + SHIFT + Spasi) untuk memperkecil tampilan halaman kerja. Contohnya seperti ini
Pada gambar diatas tampak
Halaman kerja yang tadinya kecil, kini sudah besar. Yang saya lakukan adalah dengan menekan tombol CTRL + Spasi, lalu mengklik area kerja yang ingin dibesarkan.
Selanjutnya mari kita lanjutkan bagaimana cara membuat objeknya. Dalam hal ini sebagai contoh, membuat favicon blog ini secara global. Langkah pertama adalah, dengan membuat bidang yang menjadi latar dari huruf b sebagai logo blogernas. Caranya, kliklah pada ikon Rectangle tool seperti gambar diatas. Letaknya pada panel sebelah kiri halaman kerja. Setelah itu akan terbuka beberapa pilihan model bidang yang anda gunakan. Pada contoh ini, saya memilih Rounded Rectangle Tool, yang artinya, bidang yang setiap sudutnya, melengkung.
Bukti bahwa fitur Rounded Rectangle Tool, saat anda jalankan kursor ke area kerja, bentuknya akan menjadi seperti gambar diatas.
Kemudian sebelum membuat bidangnya, lakukankalh beberapa pengaturan yang anda butuhkan. Misalnya pada contoh ini saya akan mmbuat bidang berwarna orange tanpa garis pinggir. Maka pada bagian Fill, saya pilih warna orange (lihat no.1). Kemudian pada bagian Stroke (saya pilih tanda silang merah). Setelah itu baru buat bidangnya dengan cara, drag (klik tarik) kursor mouse pada area kerja sambil membentuk kotak bujursangkar. Contohnya seperti dibawah ini.
Tampak bidang bujursangkar yang terbentuk setiap sudutnya langsung melengkung. Setelah bidang yang terbentuk telah sesuai keinginan anda, baru lepaskan kliknya, sehingga tampilan bidang yang sebenarnya, menjadi muncul seperti dibawah ini sesuai pengaturan anda sebelumnya.
Selanjutnya anda tinggal menambahkan huruf atau logonya diatas bidang diatas. Pada contoh ini yang akan saya tambahkan adalah, huruf b. Karena itu saya gunakan Horizontal Type Tool seperti bisa anda lihat dibawah ini.
Bukti bahwa fitur ini sudah aktif, saat kursor berada di area kerja, bentuknya menjadi seperti ini
Setelah itu anda bisa melakukan beberapa pengaturan yang anda inginkan seperti apa tampilan hurufnya nanti setelah anda buat.
No.1 fitur untuk memilih jenis huruf
No.2 fitur untuk memilih font style
No.3 fitur untuk menentukan besar huruf
No.4 fitur untuk menentukan posisi dan perataan huruf
No.5 fitur untuk memilih warna huruf
Setelah semuanya anda atur sesuai keinginan anda, baru lakukan pembuatan hurufnya. Caranya?
Sekarang kliklah pada area kerjanya. Karena pada contoh ini saya memilih jenis perataanya center, maka begitu saya klik, kursor untuk membuat hurufnya, juga langsung berada ditengah. Kemudian ketiklah salah satu huruf yang anda inginkan, sesuai inisial logo dari blog anda. Pada contoh ini saha mengetik huruf b kecil. Hasilnya menjadi seperti ini.
Nah sampai disini, selesai sudah sebuah gambar favicon atau logo blog sederhana. Selanjutnya anda tinggal simpan hasil kerja ini. Caranya?
Sekarang kembalikan dulu kursornya dengan mengklik ikon Move Tool seperti gambar diatas.
Sekarang kliklah menu File dan pilih Save for Web.
Selanjutnya kliklah tombol Save
Sekarang tentukan pada folder mana file gambar ini akan anda simpan. Kemudian tulislah nama filenya pada bagian no.1. Terakhir baru anda klik tombol Save (lihat no.2)
Nah sebagai contoh, inilah file gambar favicon yang baru saja saya buat. Selanjutnya anda tinggal pasang gambar tersebut sebagai favicon blog anda. Caranya bisa anda ikuti pada: Cara Praktis Memasang Favicon Blog.
