BAGAIMANA MEMBUAT ICON YANG MENARIK UNTUK WEB

BAGAIMANA MEMBUAT ICON YANG MENARIK UNTUK WEBOleh : D.K. Arismawanarismawan@gmail.comhttp://arismawan.myindo.netSenior saya pernah bilang, “apabila kemu ingin belajar grafis dengan cepat,cobalah rekontruksi grafis-grafis lain”. Hal tersebut sudah saya buktikan memangbenar karena dengan mencoba merekontruksi grafis-grafis lain maka saya lebihmudah menggunakan dan mengingat fungsi-fungsi yang ditawarkan dalam sebuahsoftware (yang dalam hal ini saya menggunakan adobe photoshop 7). OK kita cobaaja membuat icon seperti ini:Saya harapkan dengan mencoba membuat icon-icon di atas secara otomatiskita akan dapat mengetahui fungsi tool-tool yang ada dalam photoshop. Kitamulai,….Icon dalam grafis sebuah website merupakan hal yang patut dipertimbangkankeberadaannya dalam sebuah website. Hal tersebut dikarenakan Icon tidak hanyaberfungsi sebagai alat untuk mempermudah navigasi dalam sebuah website, namundapat juga berfungsi sebagai aksen yang menarik mata dalam sebuah website.Yang paling utama dalam membuat icon untuk website diwakili denganpertanyaan “mewakili apa icon tersebut”? Tentu saja karena fungsi utamanya adalahuntuk mempermudah dalam navigasi sebuah situs, maka icon haruslah mewakilihalaman apa yang akan dituju. Misalkan untuk membuat icon yang menuju kehalaman home, kita membuatnya dengan gambar “rumah”. Contoh yang lain lagiketika kita akan mambuat icon untuk halaman contact kita membuat icon dengangambar telepon. Singkatnya pesan dalam sebuah icon haruslah jelas.Setelah kita mendapatkan ide gambar apa yang akan kita jadikan icon, halselanjutnya adalah bagaimana membuat benda-benda dalam ide tersebut menjadigambar kecil yang jelas bentuknya dan tentu saja menarik.Sekarang kita mulai proyek pertama kita (icon pertama). Orang bilangsesuatu yang besar dimulai dari sesuatu yang kecil. Tapi tidak untuk icon! Sesuatuyang kecil dimulai dari sesuatu yang besar.

Dimulai dengan membuat proyekbaru berukuran 640x4801. file > newpada preset size klikkemudian pilih 640x480. KlikOK.Buat sebuah lingkaran sempurna ditengah-tengah canvas anda kira-kiraseperti gambar di kanan dan isilahdengan werna FB9400. Berikutstep-step pengerjaannya:2Buat layer baru denganmengklik tanda yangditunjukkan pada gambardiatas.3 Pilih elliptical marquee tool(apabila anda tidakmenemukannya, anda biasmengklik lama icondalam tool pallete andakemudian pilih yanglingkaran)4 Shift + alt + klik dan dragdalam layout anda. Fungsishift dan alt disini adalahuntuk membuat lingkaransempurna dengan titikpertama sebagai pusatlingkaran

9 Ctrl + click lagi pada layerdengan bulatan yang telahanda buat untukmenyeleksinya. Kemudianbuat layer baru diatasnya.10 Ubah foreground andamenjadi warna putih,kemudian aktifkan gradienttool ( ). Kita akanmembuat sebuah warnagradasi dari putih ketransparan di layer baru yangtelah anda buat11 Dengan gradient tool aktif,klik dari titik a ke titik b,tentunya dengan settingseperti pada gambar di kiri.12 Ctrl + T untuk mengubahukuran gradien yangbarusaja anda buat. Ubahukurannya kira-kira sepertigambar di samping.Tips: anda bisa menekantombol shift dan alt ketikamengubah ukuran untukmendapatkan perbandinganukuran yang tepat daripanjang dan lebarnya. Selainitu dengan cara ini pusatpengubahan ukuran beradadi tengahTekan enter

13 Atur penempatan layerdengan gradien anda. Sayamemilih rada ke kiri atas biarnggak monoton :P14 Buat huruf tanda Tanyadengan menggunakan texttool ( ) tepat di atas layerlingkaran.15 Klik 2x layer text anda.Akan muncul jendela baru(Layer style window)kemudian klik pada “beveland emboss”. Terapkan styleseperti pada gambar dibawah.

16 Ctrl + Klik pada layer yangada bulatan kuning untukmenyeleksinya. Kemudianbuat layer baru dibawah layerdengan bulatan kuningtersebut.Tips: Anda bisa membuatlayer di bawah layer yangaktif dengan mengklik ctrl +di bagian bawah jendelalayer17 Tekan D untukmengembalikan warnaforeground dan backgroundke posisi default (hitam danputih)18 Isi seleksi dengan warnahitamTips: anda bisa mengisiwarna pada sebuah seleksidengan jalanAlt + Backspace untukmengisi warna yang samadengan foreground atauCtrl + backspace untukmengisinya dengan warnayang sama dengan warnabackgroundKarena tadi kita telah mendefaultkanwarna foregrounddan background, maka untukmengisinya dengan warnahitam (yang dalam hal inisama dengan warnaforeground) maka kita tinggalmenekan alt + backspace19 Ctrl + D untukmenghilangkan seleksi.20 Ctrl + T kemudian seretbagian pojok untukmengubah ukurannya(menjadi besar). Jangan lupatekan shift + alt ketika andamengubah ukurannyasehingga akan terbentukgambar seperti disampingCatatan : karena gambar kitanantinya untuk gambar yangkecil, maka jangan “sungkan-

sungkan” intuk membuat tepiyang tebal sehingga nantinyaketika kita kecilkan tepitesebut tidak hilang atausamara.21 Resterize layer text denganmengklik-kanan layertersebut kemudian pilih“rasterize layer”Hal ini dilakukan agarnantinya layer tersebut bisadigabung dengan layerlainnya22 Klik layer yang paling ataskemudian gabungkankeempat layer (kecuali layerbackground) dengan caramenekan ctrl + E beberapakali sampai ketiganyamenjadi satu layer23 Coba kecilkan layergabungan tersebut sampaiukuran icon yang andakehendakiNah untuk rekontruksi icon pertama kita udah selesai. Dari hal diatas andasudah tentu tahu beberapa teknik dasar dalam bermain grafis menggunakanphotoshop 7 seperti gradasi, layer style, teknik seleksi, merubah ukuran, dll.Well,.. saya akan meneruskan rekontruksi ikon kedua dan ketigatutorial yang lain. OK,… sampai jumpa.pada