Go Klik-Info,Untuk mendesain
user interface sebuah website di Adobe Photoshop tentu Anda akan sangat banyak membutuhkan
layer. Satu tampilan halaman
website bisa menghasilkan puluhan hingga ratusan
layer tergantung dari tingkat kedetilan desain
interface-nya. Selain mengorganisir tiap
layer-nya ke dalam
layer folder, memaksimalkan sebuah
layer untuk
button dengan
“layer style effect” juga menjadi
point yang penting. Untuk membuat
polish dan detail sebuah
button, Anda cukup hanya menggunakan satu
layer saja (dan satu
layer lagi untuk teks). Berikut tutorial singkat untuk pembuatan tiga buah
button dibawah ini dan Anda akan dapat mengetahui
“layer style effect” apa saja yang digunakan dan fungsinya.
3 Layer Style Buttons
Button 1
Step ke-1
Bikin file baru di Photoshop
Buka Adobe Photoshop anda lalu buat
file baru dengan ukuran 550 pixel x 350 pixel, resolusi 72 pixel/inch dan Color Mode dalam RGB 8 bit.
Step ke-2
Bikin shape box untuk button
Bikin
layer baru lalu buatlah sebuah
rounded box untuk
button dengan memilih”Rounded Rectangle Tool” pada toolbox sebelah kiri. Klik 2 kali di dalam lembar kerja dan otomatis akan membuka
action box untuk membuah sebuah
rounded box. Isikan
width dengan 220 pixel,
height 60 pixel dan
radius 4 px, lalu klik OK.
Step ke-3
Pilih warna untuk button
Setelah rounded box (kita sebut
button 1) tadi selesai dibuat, lalu ganti warnanya dengan klik 2 kali pada
box layer shape (pada panel
layer sebelah kanan) lalu ganti warnanya dengan #ff4e00.
Step ke-4
Buat teks button
Langkah selanjutnya, buatlah
layer baru untuk teks dan tuliskan
“Button Style 1″. Posisikan teks presisi di tengan
button 1.
Step ke-5
Layer effect untuk teks
Tetap pada layer teks, pilih opsi
layer effect style pada
Layer Panel (liat pada gambar); pilih
layer effect
Drop Shadow dengan opsi : Blend Mode (multiply), Angle (90 derajat),
Use global light (matikan check-nya), Distance (1), Spread (0), dan Size
(2) lalu klik OK.
Step ke-6
Layer effect: Stroke
Oke kita mulai memberikan sentuhan
layer effect untuk
button
1, dimulai dengan Stroke. Untuk Stroke berikan opsi : Size (5),
Position (outside), Blend Mode (normal), Opacity (100%), Fill Type
(Color), dan warna stroke (#e1e1e1). Klik OK untuk mengaplikasikan
efeknya.
Step ke-7
Layer effect: Inner Shadow
Layer effect berikutnya, Inner Shadow. Dengan opsi : Blend
Mode (normal), warna (#ffffff / putih), Opacity (50%), Angle (90
derajat), Use global light (matikan check-nya), Distance (2), Choke (0),
dan Size (0). Klik OK untuk mengaplikasikan efeknya.
Step ke-8
Layer effect: Inner Glow
Layer effect berikutnya lagi yaitu, Inner Glow. Dengan opsi :
Blend Mode (normal), Opacity (100%), Noise (0), warna (#e03c00),
Technique (softer), Source (edge), Choke (100), dan Size (1). Klik OK
untuk mengaplikasikan efeknya.
Step ke-9
Layer Effect: Gradient Overlay
Layer Effect yang terakhir yaitu, Gradient Overlay. Opsinya :
Blend Mode (Overlay), Dither (tidak di checkmark), Opacity (65%),
Gradient (pilih gradasi dari hitam ke putih), Style (Linear), Angle (90
derajat), dan aktifkan Align with Layer
checkmark.
Step ke-10
Button 1 selesai
Bila anda betul melakukan langkah-langkah diatas, hasil
button 1 akan terlihat seperti pada gambar diatas ini.
Button 2
Okey, mari kita lanjutkan untuk membuat
button yang ke-2. Kali ini kita akan membuat sebuah
effect pada
button agar terlihat memiliki dimensi (
3d Button); tetap dengan hanya menggunakan satu
layer saja dan memaksimalkan penggunaan
layer effect :).
Step ke-1
Duplikasi layer button dan teks
Duplikasi layer untuk
button dan teks pada
button 1 ke posisi bawah, lalu rubah teks menjadi “
Button Layer Style 2“. Pilih
layer button dan rubah warnanya menjadi #0084ff (cara mengganti warna dengan menklik
box warna avatar pada
layer button di
panel layer sebelah kanan).
Step ke-2
Layer Effect : Stroke
Layer effect yang pertama yaitu Stroke. Dengan opsi : Size
(1), Position (Inside), Blend Mode (Normal), Opacity (100%), dan Fill
Type (Gradient). Klik bar
gradient dan buatlah gradasi dari warna biru muda ke biru tua, perhatikan gambar di bawah ini.
Contoh gradasi untuk Stroke
Step ke-3
Layer Effect : Inner Shadow
Layer effect yang kedua adalah Inner Shadow. Untuk Inner Shadow akan memberikan visual garis 1 pixel lebih “light” di bagian atas button.
Inner Shadow opsi : Blend Mode (Normal), Color (#ffffff / white),
Opacity (50%), Angle (90 derajat), Use Global Light (hilangkan checkmark-nya), Distance (2), Choke (0), dan Size (0).
Step ke-4
Layer Effect : Gradient Overlay
Layer effect yang ketiga untuk
button style ke-2 ini yaitu Gradient Overlay. Dengan opsi : Blend Mode (Overlay) Dither (hilangkan
checkmark-nya), Opacity (65%), Gradient (pilih gradasi dari kiri “hitam ke kanan “putih), Reverse (hilangkan
checkmark-nya), Style (Linear), dan Angle (90 derajat).
Step ke-5
Layer Effect : Drop Shadow
Layer effect yang terakhir adalah Drop Shadow. Dengan opsi : Blend Mode (Normal), Color (
Dark Blue #0067ca), Angle (90 derajat), Use Global Light (hilangkan
checkmark-nya), Distance (5), Spread (0), dan Size (0). Selanjutnya silahkan klik OK untuk mengaplikasikan semua
layer effect tersebut.
Step ke-6
Button 2 selesai
Untuk
button style yang ke-2 sudah selesai. Apabila anda benar dalam mengatur semua
layer effect-nya, hasilnya akan seperti gambar diatas ini.
Button 3
Dan untuk
button yang ketiga (terakhir);
button ini akan kita beri warna hijau dan sentuhan
pattern pada permukaan atasnya. Baik kita mulai saja!
Step ke-1
Duplikasi layer button dan teks
Sama seperti langkah awal membuat
button ke-2, silahkan duplikasi layer untuk
button dan teks pada
button 2 ke posisi bawah, lalu rubah teks menjadi “
Button Layer Style 3“. Pilih
layer button dan rubah warnanya menjadi #4bae00.
Step ke-2
Layer Effect : Stroke
Layer Effect yang pertama adalah Stroke. Dengan opsi : Size
(1), Position (Inside), Blend Mode (Normal), Opacity (100%), dan Fill
Type (Gradient). Klik bar
gradient dan buatlah gradasi dari warna hijau muda ke hijau tua, perhatikan gambar di bawah ini.
Contoh gradasi warna untuk Stroke
Step ke-3
Layer Effect : Inner Shadow
Layer effect yang kedua yaitu Inner Shadow. Serupa seperti
button style ke-2, untuk Inner Shadow akan memberikan visual garis 1 pixel lebih
“light” di bagian atas
button. Inner Shadow opsi : Blend Mode (Normal), Color (#ffffff /
white), Opacity (50%), Angle (90 derajat), Use Global Light (hilangkan
checkmark-nya), Distance (2), Choke (0), dan Size (0).
Step ke-4
Layer Effect : Gradient Overlay
Layer effect yang ketiga yaitu Gradient Overlay. Dengan opsi : Blend Mode (Overlay) Dither (hilangkan
checkmark-nya), Opacity (65%), Gradient (pilih gradasi dari kiri “hitam” ke kanan “putih”), Reverse (hilangkan
checkmark-nya), Style (Linear), dan Angle (90 derajat).
Step ke-5
Layer Effect : Pattern Overlay
Layer effect yang ke-4 adalah Pattern Overlay. Pilih pattern
overlay yang sudah anda unduh pada bagian “Informasi Tutorial” diatas.
Cara memasukkan
pattern-nya cukup lakukan
double click pada file
pattern-nya. Opsinya cukup dengan Blend Mode (Multiply) dan Opacity (100%).
Step ke-6
Layer Effect : Drop Shadow
Layer effect yang terakhir adalah Drop Shadow. Dengan opsi :
Blend Mode (Normal), Color (hitam #000000), Opacity (35%), Angle (90
derajat), Distance (2), Spread (0), dan Size (4). Klik Ok untuk
mengaplikasikan semua
layer style tersebut.
Step ke-7
Button style ke-3 selesai
Apabila anda benar dalam mengaplikasikan seluruh
layer effect tersebut, hasil akhir
button-nya akan terlihat seperti diatas.
Penutup
Bagaimana? Cukup mudah bukan, dan tidak memerlukan banyak
layer untuk membuat sebuah sebuah
button yang detail dan keren. Nantikan tutorial mengenai desain seputar
website hanya di
BisaKomputer.
Ciaooo…
***Jangan Lupa komentarnya Ya!!!***
***Terima Kasih***
Artikel Terkait:
Share :
