BAGAIMANA MEMBUAT ICON YANG MENARIK UNTUK WEB Oleh : D.K. Arismawan arismawan@gmail.com

http://arismawan.myindo.net

Senior saya pernah bilang, apabila kemu ingin belajar grafis dengan cepat, cobalah rekontruksi grafis-grafis lain. Hal tersebut sudah saya buktikan memang benar karena dengan mencoba merekontruksi grafis-grafis lain maka saya lebih mudah menggunakan dan mengingat fungsi-fungsi yang ditawarkan dalam sebuah software (yang dalam hal ini saya menggunakan adobe photoshop 7). OK kita coba aja membuat icon seperti ini:

Saya harapkan dengan mencoba membuat icon-icon di atas secara otomatis kita akan dapat mengetahui fungsi tool-tool yang ada dalam photoshop. Kita mulai,.

Icon dalam grafis sebuah website merupakan hal yang patut dipertimbangkan keberadaannya dalam sebuah website. Hal tersebut dikarenakan Icon tidak hanya berfungsi sebagai alat untuk mempermudah navigasi dalam sebuah website, namun dapat juga berfungsi sebagai aksen yang menarik mata dalam sebuah website.

Yang paling utama dalam membuat icon untuk website diwakili dengan pertanyaan mewakili apa icon tersebut? Tentu saja karena fungsi utamanya adalah untuk mempermudah dalam navigasi sebuah situs, maka icon haruslah mewakili halaman apa yang akan dituju. Misalkan untuk membuat icon yang menuju ke halaman home, kita membuatnya dengan gambar rumah. Contoh yang lain lagi ketika kita akan mambuat icon untuk halaman contact kita membuat icon dengan gambar telepon. Singkatnya pesan dalam sebuah icon haruslah jelas.

Setelah kita mendapatkan ide gambar apa yang akan kita jadikan icon, hal selanjutnya adalah bagaimana membuat benda-benda dalam ide tersebut menjadi gambar kecil yang jelas bentuknya dan tentu saja menarik.

Sekarang kita mulai proyek pertama kita (icon pertama). Orang bilang sesuatu yang besar dimulai dari sesuatu yang kecil. Tapi tidak untuk icon! Sesuatu yang kecil dimulai dari sesuatu yang besar.

Dimulai dengan membuat proyek baru berukuran 640x480

1. file > new pada preset size klik kemudian pilih 640x480. Klik OK.

Buat sebuah lingkaran sempurna di tengah-tengah canvas anda kira-kira seperti gambar di kanan dan isilah dengan werna FB9400. Berikut step-step pengerjaannya:

2

Buat layer baru dengan

mengklik tanda yang ditunjukkan pada gambar diatas.

3 Pilih elliptical marquee tool

(apabila anda tidak menemukannya, anda bias mengklik lama icon dalam tool pallete anda kemudian pilih yang lingkaran)

4 Shift + alt + klik dan drag dalam layout anda. Fungsi shift dan alt disini adalah untuk membuat lingkaran sempurna dengan titik pertama sebagai pusat lingkaran

5 Ubah warna foreground menjadi orange dengan

mengklik kemudian memilih warna orange (saya menggunakan warna FB9400). Klik OK

6 Alt + backspace untuk mengisi pilihan kita dengan warna kuning.

7 Ctrl + klik layer yang ada bulatan kuning tadi untuk menyeleksinya. Nah anda bias lihat gambar yang ada pada layer tersebut terseleksi. Kemudian geser seleksi tersebut keatas kira-kira seperti gambar disamping dengan mmenggunakan tombol arrow pada keyboard anda.

8 Dengan menggunakan Dodge tool ( ) klik dan seret daerah sekitar seleksi bagian bawah. Tentunya sebelum melakukannya anda harus menyeting dulu optionnya seperti disamping ini

(jendela option ada di bagian atas, dibawah menu. Jika nggak ada anda bias memunculkannya dengan mengklik menu windows>options)

9 Ctrl + click lagi pada layer dengan bulatan yang telah anda buat untuk menyeleksinya. Kemudian buat layer baru diatasnya.

10 Ubah foreground anda menjadi warna putih, kemudian aktifkan gradient

tool ( ). Kita akan membuat sebuah warna gradasi dari putih ke transparan di layer baru yang telah anda buat

11 Dengan gradient tool aktif, klik dari titik a ke titik b, tentunya dengan setting seperti pada gambar di kiri.

12 Ctrl + T untuk mengubah ukuran gradien yang barusaja anda buat. Ubah ukurannya kira-kira seperti gambar di samping.

Tips: anda bisa menekan tombol shift dan alt ketika mengubah ukuran untuk mendapatkan perbandingan ukuran yang tepat dari panjang dan lebarnya. Selain itu dengan cara ini pusat pengubahan ukuran berada di tengah

Tekan enter

13 Atur penempatan layer dengan gradien anda. Saya memilih rada ke kiri atas biar nggak monoton :P

14 Buat huruf tanda Tanya dengan menggunakan text tool ( ) tepat di atas layer lingkaran.

15 Klik 2x layer text anda. Akan muncul jendela baru (Layer style window) kemudian klik pada bevel and emboss. Terapkan style seperti pada gambar di bawah.

16 Ctrl + Klik pada layer yang ada bulatan kuning untuk menyeleksinya. Kemudian buat layer baru dibawah layer dengan bulatan kuning tersebut.

Tips: Anda bisa membuat layer di bawah layer yang aktif dengan mengklik ctrl +

di bagian bawah jendela layer

17 Tekan D untuk mengembalikan warna foreground dan background ke posisi default (hitam dan putih)

18 Isi seleksi dengan warna hitam Tips: anda bisa mengisi warna pada sebuah seleksi dengan jalan

Alt + Backspace untuk mengisi warna yang sama dengan foreground atau

Ctrl + backspace untuk mengisinya dengan warna yang sama dengan warna background

Karena tadi kita telah men-defaultkan warna foreground dan background, maka untuk mengisinya dengan warna hitam (yang dalam hal ini sama dengan warna foreground) maka kita tinggal menekan alt + backspace

19 Ctrl + D untuk menghilangkan seleksi.

20 Ctrl + T kemudian seret bagian pojok untuk mengubah ukurannya (menjadi besar). Jangan lupa tekan shift + alt ketika anda mengubah ukurannya sehingga akan terbentuk gambar seperti disamping

Catatan : karena gambar kita nantinya untuk gambar yang kecil, maka jangan sungkan-

sungkan intuk membuat tepi yang tebal sehingga nantinya ketika kita kecilkan tepi tesebut tidak hilang atau samara.

21 Resterize layer text dengan mengklik-kanan layer tersebut kemudian pilih rasterize layer Hal ini dilakukan agar nantinya layer tersebut bisa digabung dengan layer lainnya

22 Klik layer yang paling atas kemudian gabungkan keempat layer (kecuali layer background) dengan cara menekan ctrl + E beberapa kali sampai ketiganya menjadi satu layer

23 Coba kecilkan layer gabungan tersebut sampai ukuran icon yang anda kehendaki

Nah untuk rekontruksi icon pertama kita udah selesai. Dari hal diatas anda

sudah tentu tahu beberapa teknik dasar dalam bermain grafis menggunakan photoshop 7 seperti gradasi, layer style, teknik seleksi, merubah ukuran, dll.

Well,.. saya akan meneruskan rekontruksi ikon kedua dan ketiga pada tutorial yang lain. OK, sampai jumpa.