BAGAIMANA MEMBUAT ICON YANG MENARIK UNTUK WEB

Kali ini aku mau share tentang buat ikon menarik dengan cara singkat nih, aku dapet tutor singkat ini lumayan cukup lama, setelah aku cobain lumayan gak susah-susah banget dan hasilnya gak mengecewakan. aku sengaja post artikel ini smoga bermanfaat buat yang baca.

Buat yang nulis artikel ini aku ucapin makasih banget dah mau share ilmunya, gak ada maksud untuk mengclone tulisan anda, saya yakin anda juga sependapat dengan saya, klo postingan ini bermanfaat buat yang membaca..

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:

untitled12.jpg

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 proyekuntitled3.jpg

baru berukuran 640×480

1. file > new

pada preset size klik

kemudian pilih 640×480. Klik

OK.

untitled4.jpg 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

untitled5.jpg

dengan mengklik tanda yang

ditunjukkan pada gambar

diatas.

3 Pilih elliptical marquee tool

untitled6.jpg(apabila anda tidak

menemukannya, anda bias

mengklik lama icon untitled7.jpg

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 untitled8.jpg 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 untitled9.jpg

bulatan kuning tadi untuk

menyeleksinya. Nah anda

bias lihat gambar yang ada

pada layer tersebut

terseleksi. Kemudian geser

seleksi tersebut keatas kirakira

seperti gambar

disamping dengan

mmenggunakan tombol

arrow pada keyboard anda.

8 Dengan menggunakan

Dodge tool ( untitled10.jpg) 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 untitled11.jpg

menjadi warna putih,

kemudian aktifkan gradient

tool ( untitled33.jpg). 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 untitled22.jpg

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 untitled131.jpg

dengan gradien anda. Saya

memilih rada ke kiri atas biar

nggak monoton :P

14 Buat huruf tanda Tanya untitled14.jpg

dengan menggunakan text

tool ( untitled34.jpg) 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.

untitled15.jpg

16 Ctrl + Klik pada layer yang

ada bulatan kuning untuk

menyeleksinya. Kemudian untitled16.jpg

buat layer baru dibawah layer

dengan bulatan kuning

tersebut.

Tips: Anda bisa membuat

layer di bawah layer yang

aktif dengan mengklik ctrl + untitled44.jpg

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 mendefaultkan

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 “sungkansungkan”

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

untitled17.jpg

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

VN:F [1.9.3_1094]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.3_1094]
Rating: 0 (from 0 votes)
Related Posts with Thumbnails




2 Responses to “BAGAIMANA MEMBUAT ICON YANG MENARIK UNTUK WEB

  • 1
    Adi Wahyu
    November 13th, 2008 17:41

    bagus juga nih tutorialnya…coba dong icon yg kedua..yg dibawahnya ada bayangannya…terima kasih sebelumnya…

    VA:F [1.9.3_1094]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.3_1094]
    Rating: 0 (from 0 votes)
  • 2
    Astomo Hasto
    February 28th, 2009 12:07

    oke pak, nanti saya coba2 buat lagi

    VN:F [1.9.3_1094]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.3_1094]
    Rating: 0 (from 0 votes)

Leave a Reply