RSS

Desain Tombol Web

10 May

sumber: http://painthink.com/

Kamu ingin elemen web keren? Atau mungkin mau mendesain tombol web yang elegan? Kamu mendarat di tempat yang tepat, karena pada tutorial Photoshop kali ini saya akan menguak rahasia bagaimana trik mendesain tombol web glossy, elegan dan terkesan modern.

Preview Hasil Akhir dari Gambar

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 1

Pertama, siapkan background untuk tombol yang akan kita buat. Saya disini menggunakan pattern kotak-kotak, namun kamu tidak harus menggunakan yang sama, bisa menggunakan pattern yang lain atau warna solid tertentu. Setelah itu, kita akan membuat bentuk dasar dari tombol, buat path seperti gambar dibawah lalu klik Layer > New Fill Layer > Solid Color, pilih warna putih lalu tekan OK. Beri nama layer baru ini dengan nama Outer Shape.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Klik dua kali layer Outer Shape untuk memunculkan Jendela Layer Style. Pertama berikan Drop Shadow pada layer dengan pengaturan sebagai berikut.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Layer berikutnya adalah Inner Shadow.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Sekarang kita tambahkan Gradient Overlay pada layer Outer Shape. kamu bisa menggunakan setting seperti gambar di bawah ini.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Bagian terakhir dari Langkah 1, kita tambahkan Stroke pada layer Outer Shape dengan menggunakanGradient sebagai Fill Type. Berikut setting yang saya gunakan.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Dari Langkah 1 ini kita hasilkan gambar seperti di bawah ini.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 2

Buat path baru yang sedikit lebih kecil dari path yang kita buat pada Langkah 1. lakukan hal yang sama yaitu klik Layer > New Fill Layer > Solid Color, pilih warna putih lalu tekan OK. Beri nama Layer ini dengan Inner Shape dan ubah Fill Opacitynya menjadi 0%.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Beri style Gradient Overlay pada layer Inner Shape dengan setting sebagai berikut. Gunakan Gradient dari putih ke transparan dengan style Reflected. Jangan lupa beri tanda cek pada kotak Reverse.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Sampai Langkah 2 ini kita dapatkan gambar sebagai berikut.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 3

Buat path tipis di bagian bawah dari tombol, kemudian pilih Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Beri nama Layer ini dengan LowLight,ubah Fill Opacitynya menjadi 0% dan Opacity menjadi 10%.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Beri style Gradient Overlay pada layer LowLight dengan Gradient dari hitam ke transparan dan styleReflected. Saya menggunakan setting seperti screenshot di bawah ini.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 4

Buat path sedikit lebih tebal dari yang kita buat pada langkah sebelumnya di bagian bawah dari tombol, kemudian klik Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Beri nama Layer ini dengan HighLight,ubah Fill Opacitynya menjadi 0% dan Opacity menjadi 30%.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Beri style Gradient Overlay pada layer HightLight dengan Gradient dari putih ke transparan dan styleReflected. Saya menggunakan setting seperti tampak berikut ini.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 5

Buat path di bagian kiri tombol dengan bentuk seperti screenshot di bawah. Pilih Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Kita sebut layer ini dengan nama Emboss Stroke.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Dobel klik layer Emboss Stroke, setelah muncul jendela Layer Style pilih Gradient Overlay. Gunakan Gradient dari hitam ke putih dengan style Linear, jangan lupa beri tanda cek pada kotak Reverse.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Setelah menyelesaikan lima langkah, kita peroleh hasil sementara sbagai berikut.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 6

Pada langkah ini kita akan memberi efek Gloss pada tombol. Yang pertama harus dilakukan adalah membuat path dengan bentuk seperti gambar di bawah. Pilih Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Ubah Opacity layer ini menjadi 63% dan Fill Opacity menjadi 46%. Kita sebut layer ini dengan nama Gloss.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Beri style Gradient Overlay pada layer Gloss dengan Gradient dari putih ke transparan dan styleLinear. Saya menggunakan setting seperti tampak berikut ini.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Sampai Langkah 6 kita hasilkan gambar sebagai berikut.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 7

Saatnya membuat background warna biru di belakang tanda panah. Pertama, buat path seperti pada Langkah 5 namun kali ini kita buat dengan ukuran lebih kecil. Pilih Layer > New Fill Layer > Solid Color, gunakan warna biru #1bb3eb lalu tekan OK. Beri nama layer ini dengan Arrow Bg.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Klik dua kali layer Arrow Bg, setelah muncul jendela Layer Style pilih Gradient Overlay. Gunakan Gradient dari hitam ke putih dengan style Radial, jangan lupa beri tanda cek pada kotak Reverse.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Sampai disini kita dapatkan gambar seperti di bawah ini.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 8

Buat path seperti yang kita buat pada Langkah 7 dengan ukuran sedikit lebih kecil. Pilih Layer > New Fill Layer > Solid Color, gunakan warna putih lalu tekan OK. Ubah Fill Opacity layer ini menjadi 0%. Kita sebut layer ini dengan nama Gradient Overlay.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Dobel klik layer Gradient Overlay untuk memunculkan jendela Layer Style. Beri style Inner Shadowdengan pengaturan seperti berikut. Jangan Tekan OK terlebih dahulu.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Beri style Gradient Overlay pada layer Gradient Overlay dengan Gradient dari hitam ke transparandan style Linear. Jangan lupa beri cek pada kotak Reverse.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 9

Buat path baru berbentuk panah menghadap kebawah seperti gambar berikut lalu simpan path karena kita akan menggunakannya lagi. Setelah itu pilih Layer > New Fill Layer > Solid Color, gunakan warna hitam lalu tekan OK. Ubah Blending Mode layer ini menjadi Overlay dan atur Opacitynya menjadi 45%. Kita sebut layer ini dengan Arrow Shadow.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Sekarang kita berikan style Outer Glow pada layer Arrow Shadow. Gunakan petunjuk di bawah ini untuk mengatur komposisi Outer Glow.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Jadikan layer Arrow Shadow sebagai Clipping Mask dari layer Arrow Bg yang kita buat pada Langkah 7. Jadi susunan layer yang kita miliki sekarang seperti berikut ini.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 10

Dengan menggunakan path yang kita buat pada Langkah 9, kita buat layer baru dengan klik Layer > New Fill Layer > Solid Color, gunakan warna hijau #b2eb42 lalu tekan OK. Letakkan layer ini di atas semua layer dan ubah namanya menjadi Arrow. Klik dua kali layer Arrow untuk memunculkan jendela Layer Style. Sekarang pilih Inner Shadow dan gunakan setting sebagai berikut.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Style berikutnya yang kita berikan pada layer Arrow adalah Gradient Overlay. Gunakan Gradient darihitam ke putih dengan style Radial, jangan lupa beri tanda cek pada kotak Reverse.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Terakhir kita berikan Stroke pada layer Arrow.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Dalam sepuluh langkah ini kita sudah menyelesaikan sebagian besar gambar tombol. Kita hanya butuh menambahkan sedikit teks untuk menyelesaikannya.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 11

Inilah saatnya kita tambahkan teks ‘DOWNLOAD‘ pada tombol. Gunakan font Helvetica Rounded10.4pt dengan warna #9c9c9c.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Berikan Drop Shadow pada teks ‘DOWNLOAD’ dengan setting seperti screenshot di bawah.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Berikutnya kita tambahkan Inner Shadow pada teks.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Style berikutnya yang kita berikan pada layer teks adalah Gradient Overlay. Gunakan Gradient darihitam ke putih dengan style Linear.

tutorial Photoshop membuat tombol web glossy modern dan elegan

Langkah 12

Sebagai sentuhan terakhir kita tambahkan sedikit teks yaitu ‘Get the latest version‘. Gunakan fontHelvetica CE Regular dengan ukuran 5.2pt dan warna #4a4a4a.

Hasil Akhir

tutorial Photoshop membuat tombol web glossy modern dan elegan

Semoga tutorial ini bermanfaat, jangan lupa subscribe

 
Leave a comment

Posted by on May 10, 2011 in Photoshop

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: