Photoshop Buat Web 2.0 Button
Butang tutorial Photoshop mungkin salah satu kategori paling hangat di mana-mana laman tutorial Photoshop dan sejak Web 2.0 adalah topik hangat sekarang, mari pergi melakukan butang mudah yang sesuai untuk mana-mana aplikasi Web 2.0 dari laman web. Tutorial selepas melompat.
Buat kanvas kosong pada kira-kira 500px (lebar) x 400px (ketinggian) untuk memulakan reka bentuk butang. Buat panggilan lapisan baru 'bg01'. Pilih Alat Rectangular Bulat, tahan SHIFT dan lukis persegi bulat di tengah. Mana-mana warna adalah baik pada peringkat semasa.
Panggilan Pilihan Blending daripada 'bg01'dan menyesuaikan gaya berikut:
Drop Shadow
- Kelegapan: 40%
- Jarak: 0px
- Penyebaran: 0%
- Saiz: 6px
Overlay Gradiant
- Perhentian warna: 0%, # d00031
- Perhentian warna: 100%, # ff2b5d
Pegang CTRL, klik kiri pada 'bg01'Thumbnail Layer untuk memilih bentuknya. Pergi Pilih -> Ubah suai -> Kontrak dan masukkan nilai '2px'. Ini akan mengecutkan kawasan yang dipilih dengan 2 piksel.
Buat panggilan lapisan baru 'bg02'dan mengisi kawasan yang diketengahkan (selepas menyusut) dengan warna apa pun. Saya menggunakan # 000000 hitam di sini. Klik dua kali pada 'bg02' untuk melancarkan Pilihan Blending dan tweak gaya berikut.
Overlay Gradiant
- Perhentian warna: 0%, # c6002f
- Perhentian warna: 100%, # c6002f
Buat satu lagi lapisan baru untuk teks, sebut 'txt'. Masukkan teks butang anda. Saya akan menggunakan abjad untuk mewakili. Gaya font yang saya gunakan di sini adalah seperti berikut:
- Bulat Arial Bold
- 150pt
Begitu juga, selepas memutuskan teks anda, klik dua kali pada 'txt' untuk melancarkan Pilihan Blending dan tweak gaya berikut.
Drop Shadow
- Kelegapan: 25%
- Jarak: 0px
- Spread: 0px
- Saiz: 5px
Bayang dalaman
- Kelegapan: 10%
- Jarak: 0px
- Choke: 0
- Saiz: 10px
Bevel Emboss
- Kedalaman: 1px
- Arah: Turun
- Saiz: 0px
- Softten: 0px
- Sorotan Mod Highlight: 32%
- Kesan Mod Shadow: 32%
Overlay Gradiant
- Henti Warna: 0% # d2d2d2
- Henti Warna: 100% # f0efef
Butang hampir selesai. Mari kita memberi sedikit cahaya di bahagian atas. Tahan CTRL, klik kiri 'bg02'Thumbnail Layer untuk menyerlahkan bentuk luar; pilih Eclipse Marquee Tool. Sekarang tahan ALT, dengan Eclipse Marquee Tool dipilih, seret adalah merentasi bahagian bawah kawasan yang diserlahkan. Rujuk kepada imej di atas.
Dengan bahagian teratas yang diserlahkan dan Alat Eclipse Marquee masih dipilih, klik kanan dan pilih Bulu; masukkan 15px untuk jejari.
Buat lapisan baru, panggil 'bersinar'dan isi bahagian yang diserlahkan dengan putih [#ffffff]. Ini harus menambah kesan cahaya ke bahagian atas butang anda. Produk akhir sepatutnya kelihatan seperti imej di bawah.
Sesuatu yang lebih ...
Tweak Pilihan Blending 'bg01'dan'bg02'akan memberikan anda lebih banyak butang yang menarik. Berikut adalah tutorial Photoshop lain pada butang yang saya lakukan sebelum ini - Buat butang Glossy untuk Web 2.0
Muat turun Sampel
