CARA MEMBUAT ICON / FAVICON DENGAN PHOTOSHOP UNTUK BLOG DAN WEBSITE
Sunday, November 2, 2014
Cara membuat icon / favicon bisa kita lakukan dengan program Adobe Photosop. Icon ini nantinya bisa digunakan untuk memberi ikon / logo pada website / blog yang kita miliki, selain itu icon icon yang dibuat juga bisa dipergunakan untuk icon shortcut suatu progam, logo perusahaan, dan sebagainya. Sebagai contoh, bila anda mempunyai blog pada blogger maka favicon default blogger (logo b putih dengan tepi persegi berwarna kuning) lah yang akan otomatis terpasang pada icon blog anda. Begitu juga bila anda memiliki blog / website wordpress maka logo wordpress lah yang secara default terpasang.
Sebenarnya ada beberapa cara membuat icon / favicon selain dengan menggunakan Photoshop / program program foto editor sejenis. Salah satunya dengan menggunakan online icon generator atau membuat favorites icon secara online di Internet. Namun biasanya cara ini tidak terlalu disukai karena kita mau tidak mau harus menggunakan template yang disediakan. Jadi untuk mengatasi hal ini, lebih baik membuat sendiri dengan Photoshop. Membuat icon sendiri dengan Photoshop dirasa bisa menjadi solusi yang tepat karena kita akan menentukan sendiri pola, tema, dan warna yang dikendaki.
Ukuran Icon / Favicon yang biasa digunakan adalah gambar berformat png (clipart) dengan bentuk bujur sangkar bersisi sama panjang seperti 50 x 50 , 100 x 100, dll. Sebagai contoh saya akan membuat icon untuk blog ini IndoINT.blogspot.com dan hanya menggunakan huruf b saja sebagai faviconnya.
1. Buka program Adobe Photoshop kemudian klik FILE - lalu NEW
2. Tentukan ukuran tinggi (height) dan lebar (width), pastikan juga Transparent sebagai mode Background Content. Klik OK jika sudah selesai.
3. Klik RECTANGLE TOOL untuk membuat Background Iconnya.
4. Masukkan RECTANGLE TOOL kedalam CANVAS yang tersedia.
5. Untuk merubah warna klik COLOR, dan pilih warna yang dikehendaki. Anda bisa memodifikasi sendiri warna, pola, dan bentuk backgroud yang dikehendaki.
6. Selanjutnya adalah menambahkan Teks. Klik menu HORIZONTAL TYPE TOOL dan buatlah teks diatas backgroud yang telah dibuat tadi. Anda juga bisa menentukan jenis font yang digunakan, ukuran, serta warna teks.
7. Seperti ini lah contoh bentuk teks iconnya.
8. Opsional : Jika ingin lebih menarik, anda bisa menambahkan style pada setiap layer yang dibuat. Caranya klik Layer, kemudian pilih elemen mana yang ingin dirubah stylenya. Contohnya teks, double click pada T dan pilih gaya yang tersedia, lalu klik OK.
9. Jika sudah selesai kemudian simpan (SAVE AS) dan pilih format PNG lalu SAVE.
Selain dengan menggunakan logo, kita juga bisa membuat icon / favicon pada blog dan website dengan menggunakan animasi yang berformat gif, foto maupun gambar dengan syarat gambar / foto yang ingin dijadikan ikon berbentuk persegi dengan ukuran yang sama pada tiap sisinya. Bila Anda ingin membuat icon menggunakan foto namun foto belum berukuran kecil / persegi. Anda bisa merubah ukuran foto tersebut. Caranya bisa dilihat pada artikel : Cara mengecilkan ukuran foto / gambar.
Demikianlah cara membuat icon / favicon dengan Photoshop paling mudah. Selain dengan teks, kita juga membuat icon dengan ikon ikon gambar seperti apple, logo android, logo hewan dan logo logo lain. Anda bisa berkreasi sendiri karena mungkin Anda lebih mahir :) . Sebagai penutup, dibawah ini adalah contoh contoh bentuk icon sederhana yang dibuat menggunakan Adobe Photoshop.
Sumber http://www.berbagiinfo4u.com/
Sebenarnya ada beberapa cara membuat icon / favicon selain dengan menggunakan Photoshop / program program foto editor sejenis. Salah satunya dengan menggunakan online icon generator atau membuat favorites icon secara online di Internet. Namun biasanya cara ini tidak terlalu disukai karena kita mau tidak mau harus menggunakan template yang disediakan. Jadi untuk mengatasi hal ini, lebih baik membuat sendiri dengan Photoshop. Membuat icon sendiri dengan Photoshop dirasa bisa menjadi solusi yang tepat karena kita akan menentukan sendiri pola, tema, dan warna yang dikendaki.
Ukuran Icon / Favicon yang biasa digunakan adalah gambar berformat png (clipart) dengan bentuk bujur sangkar bersisi sama panjang seperti 50 x 50 , 100 x 100, dll. Sebagai contoh saya akan membuat icon untuk blog ini IndoINT.blogspot.com dan hanya menggunakan huruf b saja sebagai faviconnya.
MEMBUAT ICON / FAVICON DENGAN PHOTOSHOP
1. Buka program Adobe Photoshop kemudian klik FILE - lalu NEW
2. Tentukan ukuran tinggi (height) dan lebar (width), pastikan juga Transparent sebagai mode Background Content. Klik OK jika sudah selesai.
3. Klik RECTANGLE TOOL untuk membuat Background Iconnya.
4. Masukkan RECTANGLE TOOL kedalam CANVAS yang tersedia.
5. Untuk merubah warna klik COLOR, dan pilih warna yang dikehendaki. Anda bisa memodifikasi sendiri warna, pola, dan bentuk backgroud yang dikehendaki.
6. Selanjutnya adalah menambahkan Teks. Klik menu HORIZONTAL TYPE TOOL dan buatlah teks diatas backgroud yang telah dibuat tadi. Anda juga bisa menentukan jenis font yang digunakan, ukuran, serta warna teks.
7. Seperti ini lah contoh bentuk teks iconnya.
8. Opsional : Jika ingin lebih menarik, anda bisa menambahkan style pada setiap layer yang dibuat. Caranya klik Layer, kemudian pilih elemen mana yang ingin dirubah stylenya. Contohnya teks, double click pada T dan pilih gaya yang tersedia, lalu klik OK.
9. Jika sudah selesai kemudian simpan (SAVE AS) dan pilih format PNG lalu SAVE.
MEMBUAT ICON / FAVICON DENGAN FOTO / GAMBAR
Selain dengan menggunakan logo, kita juga bisa membuat icon / favicon pada blog dan website dengan menggunakan animasi yang berformat gif, foto maupun gambar dengan syarat gambar / foto yang ingin dijadikan ikon berbentuk persegi dengan ukuran yang sama pada tiap sisinya. Bila Anda ingin membuat icon menggunakan foto namun foto belum berukuran kecil / persegi. Anda bisa merubah ukuran foto tersebut. Caranya bisa dilihat pada artikel : Cara mengecilkan ukuran foto / gambar.
Demikianlah cara membuat icon / favicon dengan Photoshop paling mudah. Selain dengan teks, kita juga membuat icon dengan ikon ikon gambar seperti apple, logo android, logo hewan dan logo logo lain. Anda bisa berkreasi sendiri karena mungkin Anda lebih mahir :) . Sebagai penutup, dibawah ini adalah contoh contoh bentuk icon sederhana yang dibuat menggunakan Adobe Photoshop.
 |  |  |  |  |