Cara Menggunakan Layer Style Untuk Desain Button

Cara Menggunakan Layer Style Untuk Desain Button

Tutorial Information

ProgramAdobe Photoshop
VersionCS
DifficultyPemula
Estimated Time10 Menit
DownloadClick this link

Untuk mendesain user interface sebuah website di Adobe Photoshop tentu Anda akan sangat banyak membutuhkan layer. Satu tampilan halaman website bisa menghasilkan puluhan hingga…

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

3 Layer Style Buttons

Button 1

Step ke-1

Bikin file baru di Photoshop

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 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

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 text button

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

05-step

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

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

07-step

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

08-step

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

09-step

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

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

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 : 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

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 : 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

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 : 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 : 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 : 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

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…

Tag: , , , ,

2 Comments

Leave Comment
  1. Topan says:

    Realy Nice… Thanks

  2. Hanggar PS says:

    Belakangan ini tak lihat di BisaKomputer.com kuk lebih sering ke tutorial Adobe Photoshop yah

Write Comment

Your email will not be published. The marked label is required.