Design Glossy Web 2.0 Button in Photoshop

Mencari reka bentuk beberapa butang Web 2.0 yang berkilat? Berikut adalah tutorial Photoshop yang mudah yang memberi anda langkah demi langkah bagaimana untuk mendapatkan butang glossy merah yang bagus.

Langkah 1 - Mencipta pangkalan

Nyalakan kanvas baru dan laraskan tetapan berikut (bertanda kuning) mengikut imej di bawah. Selebihnya harus datang sebagai lalai. Anda mungkin ingin menyemak semula dengan lalai juga.

Buat panggilan lapisan baru 'Button'

Pada 'Tombol' lapisan, pilih alat bulat persegi panjang

Berikannya jejari 7px

Lukis segiempat sama dengan imej di bawah.

Langkah 2 - Butang merah

Klik kanan pada Blending Options untuk 'Button' layer

Tweak tetapan berikut untuk

Drop Shadow

Bayang dalaman

Bevel dan Emboss

Overlay Gradiant

Butang anda sepatutnya kelihatan seperti ini

Langkah 3 - Buat kesan berkilat

Buat panggilan lapisan baru 'Kaca'

Pilih alat Marquee Retangular, pastikan anda memilih lapisan 'Butang'. HOLD ctrl key anda dan klik pada layer 'Buttons”imej kecil lapisan. Butang anda kini perlu diserlahkan.

Pilih butang 'Kaca' sekarang, pegang kekunci Alt dengan alat marquee Retangular yang dipilih. Lukis (potong) di bahagian bawah butang seperti gambar di bawah.

Isi kawasan yang dipilih dengan #ffffff warna putih menggunakan Alat Baldi Cat

Laraskan kelegapan hingga 18%

Anda sepatutnya mempunyai butang berkilat seperti ini.

Langkah 4 - Overlay Corak

Mari berikan butang beberapa lapisan corak yang sedikit. Saya akan menggunakan stripe5px tersuai yang dibuat sebelum ini. Buat panggilan lapisan baru 'Corak' di antara 'Butang' dan 'Kaca' dan teruskan dengan Pilihan Blending.

Pilih Overlay Corak, pilih Stripe5px (atau corak yang telah anda buat) dan klik OK kemudian tutup dialog.

Pastikan anda masih berada di alat Rectangular Marquee, tahan dan klik pada thumbnail thumbnail butang untuk mendapatkan butang butang. Isi kawasan yang dipilih dalam lapisan 'Corak' dengan alat Cat Bucket dan laraskan kelegapan lapisan hingga 5%

Langkah 5 - Memasukkan Teks

Buang dalam beberapa teks rawak dengan warna #ffffff putih dengan tetapan berikut

Gunakan kesan pengadunan berikut pada lapisan teks saya.

Drop Shadow

Langkah 6 - Output Akhir

Anda perlu mendapatkan imej seperti ini.