Step 1
Mulailah dengan sebuah piksel 80x32 dokumen baru dengan latar belakang biru # 0082B0.
Kemudian pilih bentuk persegi panjang otomatis bulat (pada panel Tools) dan menggambar persegi panjang kemudian pergi ke Properties Auto Shape (Window> Auto Properti Shape) untuk memodifikasi persegi panjang untuk 60x28 dengan sudut dibulatkan 2px. Lihat Gambar 1.
Gambar 1: Auto Shape Properti
Sebagai alternatif untuk bentuk persegi panjang bulat otomatis Anda dapat menggunakan persegi panjang dengan kebulatan dari 2 px terapan.
Step 2
Menerapkan gradien radial, putih di tengah dengan # 666666 untuk latar belakang, kemudian memperluas pegangan sedikit, untuk membuat efek sedikit lembut. Lihat Gambar 2.
Gambar 2: gradien radial diperbesar 300%
Step 3
Lalu oleskan 2 Bayangan batin untuk menciptakan efek bevel karena bevel Fireworks tidak bekerja sangat baik untuk kasus ini.
Pertama Shadow, batin: warna putih, satu piksel lebar, 270 sudut dan opacity 65%. The Inner Shadow kedua akan memiliki sudut 90.
Gambar 3: Bayangan batin
Gambar 4: Hasil akhirnya diperbesar 300%
Stroke tipis (1px) pada persegi panjang bulat tidak membuat sangat baik di Fireworks. set stroke di PI tampaknya membuat lebih berat di sudut-sudut saat mengatur stroke ke 'dalam' atau 'pusat'. Keduanya tampak membuat baik ketika stroke diatur ke 'luar' sekalipun. Sebagai alternatif Anda mungkin telah menggunakan Stroke dari Efek Photoshop Live atau sudut bulat ketika stroke diatur ke 'luar', sudut terlihat hampir sempurna.
Step 4
Sekarang saatnya untuk menerapkan tepi gelap untuk meniru efek dari bevel batin.
Gambar 5: Cahaya 1
Gambar 6: Cahaya 2
Tombol Anda akan terlihat seperti ini:
Gambar 7: Hasil akhirnya diperbesar 300%
Step 5
Sekarang kita harus menambahkan efek gloss yang mencirikan benda kristal, hanya copy dan paste tombol kami pada lapisan lain, menghapus semua efek dan mengeditnya di properti otomatis bentuk menugaskan 14px tinggi dan menetapkan 0 untuk sudut. Lihat Gambar 9.
Kita perlu menerapkan putih untuk gradien linier putih, dengan opacity 80% di sebelah kiri dan opacity 40% di sebelah kanan. Lihat Gambar 8.
Gambar 8: efek glossy
Gambar 9: Hasil akhir diperbesar 300%
Terapkan lapisan paduan modus untuk menciptakan efek bercahaya.
Berikut adalah definisi Photoshop resmi untuk blending mode Overlay:
Mengalikan atau layar warna, tergantung pada warna dasar. Pola atau warna overlay pixel yang ada sambil menjaga highlight dan bayangan dari warna dasar. Warna dasar tidak diganti tapi dicampur dengan warna campuran untuk mencerminkan terang atau gelap dari warna aslinya.
Gambar 10: overlay modus campuran diperbesar 300%
Pada titik ini itsef tombol dilakukan dan kita bisa berhenti di sini. Ini terlihat seperti tombol Vista dengan efek kristal dan bersinar.
Step 6
Langkah berikutnya prihatin dengan tombol dan sekitar tombol (8 px di kiri / kanan)
warna dasar
Buatlah persegi panjang 80x32 dan mengisinya dengan warna biru gelap # 007A94 kemudian menerapkan Kecerahan / Kontras filter, -50% untuk kecerahan dan 0 untuk kontras. Ini akan menjadi warna dasar kita. Lihat Gambar 17.
Persegi panjang persegi panjang Kontras kontras terdiri dari gradien, filter Kecerahan / Kontras dan blending mode overlay.
Gradien Tambah jumlah persegi panjang 8X32 dengan gradien linier di atas warna dasar. Lihat Gambar 11. Gradien menciptakan efek bayangan di atas, memberikan kesan bahwa cahaya datang dari bawah dan memungkinkan untuk mengontrol intensitas dari efek glowing.
Gambar 11: gradien untuk persegi panjang kontras
Kontras / Kecerahan saringan Kemudian menerapkan kecerahan dan filter kontras, 0 untuk kecerahan dan 20 untuk kontras.
Saya menerapkan kecerahan / kontras untuk meningkatkan kontras antara warna, cara ini jauh lebih mudah untuk membuat perubahan di masa depan, sehingga, Anda hanya perlu untuk mengubah tingkat Constrast, tapi tidak warna.
Tampilan Sekarang menerapkan lapisan paduan modus
Gambar 12: persegi panjang kontras
Untuk memberikan kristal gloss untuk tombol efek refleksi, kita membutuhkan sebuah rectangle 80x16 kecil di atas persegi panjang kontras dengan putih untuk opacity gradien linier putih 60% ke kiri dan 40% ke kanan.
Gambar 13: persegi panjang gloss kristal
Kemudian kami mengatur opacity layer menjadi 60%, jadi ini mungkin sesuai selera pribadi Anda, tapi saya pikir 60% adalah nilai yang baik. Ingat, lapisan ini harus tepat di belakang tombol.
Step 7
Gambar 14: lapisan agar
Sekarang tombol akan terlihat seperti ini.
Gambar 15: Tombol akhir
9-slice skala Tutorial ini tidak akan lengkap jika saya tidak mengajarkan cara untuk mengubah ukuran tombol tanpa distorsi. Kami akan menggunakan fitur 9-slice skala dapat Anda temukan di CS3 dan lebih tinggi.
Pertama kita rasterize tombol, pilih semua layer dan sebaiknya dikelompokkan (CTRL + G) semua item dan pergi ke menu Modify> Ratakan Seleksi, sekarang gambar telah dikonversi menjadi bitmap.
Sekarang mengkonversi gambar ke simbol (F8) dan mengaktifkan skala 9-slice, memodifikasi panduan seperti pada Gambar 19 dengan luas 2px di pusat.
Gambar 16: 9-slice panduan skala
Sekarang kita dapat mengubah ukuran simbol kami ke sebuah bar lebar 300px tanpa distorsi
Gambar 17: barMulticolor crystal buttons
Gambar 18: multicolor bar
Read more: http://www.webdesign.org/raster-graphics/fireworks/crystal-button.21679.html # ixzz1xyT0czvK
