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
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.
baru berukuran 640×480
1. file > new
pada preset size klik
kemudian pilih 640×480. 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
menemukannya, anda bias
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
memilih warna orange (saya
menggunakan warna
FB9400). Klik OK
6 Alt + backspace untuk
mengisi pilihan kita dengan
warna kuning
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
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.
menjadi warna putih,
kemudian aktifkan gradient
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 .
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
dengan gradien anda. Saya
memilih rada ke kiri atas biar
nggak monoton
dengan menggunakan text
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
buat layer baru dibawah layer
dengan bulatan kuning
tersebut.
Tips: Anda bisa membuat
layer di bawah layer yang
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
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


















November 13th, 2008 17:41
bagus juga nih tutorialnya…coba dong icon yg kedua..yg dibawahnya ada bayangannya…terima kasih sebelumnya…
February 28th, 2009 12:07
oke pak, nanti saya coba2 buat lagi