Sekarang Web 2.0 style menjadi populer di mana-mana, tiap situs-situs baru yang kita lihat memiliki tipikal yang simple, cerah dan mengkilat. Tidak ada standar untuk membuat elemen-elemen Web 2.0 tapi ada beberapa fitur yang umum seperti warna yang bersih dan gradiasi.
Saat ini saya akan tunjukan bagaimana membuat tombol WebStyle 2.0
dengan menggunakan Photoshop CS2.

Langkah-langkahnya adalah sebagai berikut :

Buka Photoshop dan buat dokumen baru untuk tombol.

Buat bentuk tombol pada layer baru dengan menggunakan Rounded Rectangle Tool pada toolbar atau tombol keyboard 'U', tentukan radius lengkungannya (mis 15px) dan pilih warna yang diinginkan. Beri nama layer tersebut "Button"

 

Klik kanan mouse pada rectangle layer di layers palette, pilih Blending Options

Set parameter Gradient Overlay effect, contohnya warna untuk first dan second thumb #434343, third thumb #000000.

 Pada Stroke Effect, pilih warna dengan parameter #363636

 

Set opsi Inner Glow Effect 

 

Hasil yang akan didapat adalah sebagai berikut :

Buat kotak lagi pada layer baru dengan Rounded Rectangle Tool yang akan digunakan sebagai efek kilat pada tombol, beri nama pada layer "glare" dan letakkan di atas kotak tombol (layer "Button") yang telah kita buat.

 

Klik kanan pada layer "glare" dan pilih Rasterize Layer.

Klik Edit in Quick Mask Mode di toolbar atau tekan tombol keyboard 'Q'.

Pilih Gradient Tool ('G') buat gradiasi seperti gambar ini :

 

 Keluar dari  Edit in Quick Mask Mode di toolbar atau tekan tombol keyboard 'Q', akan ada garis-garis seleksi di situ kemudian tekan 'delete' pada keyboard.

 

Buat text pada layer dengan isi "Entries RSS" dan tambahkan icon RSS, set parameter efek Drop Shadow seperti ini :

 

Setelah itu kita dapat melihat hasilnya seperti ini :

 

Setelah merubah parameter pada efek-efek tadi dan juga menambahkan serta merubah beberapa elemen maka tombol kita dapat menjadi seperti ini :

 

File sumber PSD dapat diambil dengan meng-klik gambar tombol-tombol di atas, atau jika tidak ingin repot dengan hal-hal di atas,silahkan gunakan file style untuk Photoshop CS2 di sini.

 Selamat berkreasi dan salam. 

 

 

 

Last Updated on Wednesday, 10 June 2009 17:19  

Komunitas Pengguna Joomla Indonesia