Photoshop Buat Tombol Web 2.0
Tutorial Tombol Photoshop mungkin adalah salah satu kategori terpanas di situs tutorial Photoshop mana pun dan karena Web 2.0 adalah topik yang sangat panas sekarang, mari kita lanjutkan dengan melakukan tombol sederhana yang cocok untuk aplikasi situs web Web 2.0. Tutorial setelah lompat.
Buat kanvas kosong sekitar 500px (lebar) x 400px (tinggi) untuk memulai desain tombol. Buat panggilan layer baru 'bg01' Pilih menu Alat Persegi Panjang Bulat, tahan SHIFT dan gambarlah persegi berbentuk bujur sangkar di tengah. Warna apa pun baik-baik saja pada tahap saat ini.
Memanggil Opsi Blending dari 'bg01'dan sesuaikan gaya berikut:
Drop Shadow
- Opacity: 40%
- Jarak: 0px
- Spread: 0%
- Ukuran: 6px
Hamparan Gradiant
- Perhentian warna: 0%, # d00031
- Pemberhentian warna: 100%, # ff2b5d
Tahan CTRL, klik kiri pada 'bg01'Layer Thumbnail untuk memilih bentuknya. Pergi Memilih -> Memodifikasi -> Kontrak dan masukkan nilainya '2px' Ini akan mengecilkan area yang dipilih sebesar 2 piksel.
Buat panggilan layer baru 'bg02'dan mengisi area yang disorot (setelah menyusut) dengan warna apa pun. Saya menggunakan # 000000 hitam di sini. Klik dua kali pada 'bg02' untuk membuka menu Opsi Blending dan mengubah gaya berikut.
Hamparan Gradiant
- Perhentian warna: 0%, # c6002f
- Pemberhentian warna: 100%, # c6002f
Buat layer baru untuk teks, sebut saja 'txt' Masukkan teks tombol Anda. Saya akan menggunakan alfabet untuk mewakili. Gaya font yang saya gunakan di sini adalah sebagai berikut:
- Arial Bold yang bulat
- 150pt
Sama, setelah memutuskan teks Anda, klik dua kali pada 'txt' untuk meluncurkan Opsi Blending dan mengubah gaya berikut.
Drop Shadow
- Opacity: 25%
- Jarak: 0px
- Spread: 0px
- Ukuran: 5px
Bayangan batin
- Opacity: 10%
- Jarak: 0px
- Tersedak: 0
- Ukuran: 10px
Bevel Emboss
- Kedalaman: 1px
- Arah: Bawah
- Ukuran: 0px
- Lembutkan: 0px
- Opacity Mode Sorot: 32%
- Opacity Mode Bayangan: 32%
Hamparan Gradiant
- Pemberhentian Warna: 0% # d2d2d2
- Pemberhentian Warna: 100% # f0efef
Tombol hampir selesai. Mari kita beri sedikit cahaya di bagian atas. Memegang CTRL, klik kiri 'bg02'Layer Thumbnail untuk menyorot bentuk luar; memilih Alat Marquee Eclipse. Sekarang tahan ALT, dengan Eclipse Marquee Tool dipilih, seret menyilang minus setengah bagian bawah dari area yang disorot. Lihat gambar di atas.
Dengan bagian atas disorot dan Eclipse Marquee Tool masih dipilih, klik kanan dan pilih Bulu; memasukkan 15px untuk radius.
Buat layer baru, sebut saja 'cahaya'dan isi bagian yang disorot dengan putih [#ffffff]. Ini akan menambahkan efek cahaya ke bagian atas tombol Anda. Produk akhir harus terlihat seperti gambar di bawah ini.
Sesuatu yang ekstra ...
Tweak the Blending Options of 'bg01'dan'bg02'akan memberi Anda tombol yang lebih menarik. Ini tutorial Photoshop lain pada tombol yang pernah saya lakukan sebelumnya - tombol Buat Glossy untuk Web 2.0
Unduh Sampel
