Tutorial Photoshop Membuat Button 3D Glossy

Tutorial Photoshop Membuat Button 3D Glossy

Anda pengen memperkaya web dengan tampilan yang wah? Ini saatnya Anda mengasah lagi kemampuan anda memanipulasi gambar dengan Program Pengolah Gambar. Kali ini saya mengulas cara membuat Button atau tombol tiga dimensi bernuansa glossy dengan Photoshop. Simak juga tutorial Photoshop yang lain di sini.

Anda sudah siap? Mari kita mulai

1. Buka Photoshop kemudian buka dokumen baru dengan ukuran sesuka Anda. Di sini saya menentukan ukuran 400×200 px.
   
2. Isi kanvas kosong ini dengan warna abu-abu gelap, di sini saya gunakan warna #4C4C4C. Pilih Rounded Rectangle Tool:
   
3. Pastikan setting Toolbar Anda terlihat seperti ini:
   
4. Saya menggunakan warna #D32424 tapi Anda bebas menggunakan warna yang Anda suka.
   
5. Rasterize Layer yang barusan Anda buat dengan Klik kanan Layer > Rasterize Layer, kemudian gandakan dengan Klik kanan Layer > Duplicate Layer. Ganti nama kedua layar dengan “Button Atas” (Layer yang di Atas) dan “Button Dasar” (Layer di bawah). Seharusnya Anda akan mendapatkan hasil seperti ini
6. Sekarang saatnya kita tambakan efek 3 dimensi. Sebelumnya, Anda perlu membuat warna dasar button Anda sedikit lebih gelap daripada Button Atas.
   Pilih Button Dasar, Pilih menu Image > Adjustments > Hue/Saturation (atau tekan dan Control+U) untuk membuka Jendela Hue/Saturation. Tentukan “Lightness” menjadi -35. Anda tidak akan langsung melihat perubahannya sampai proses berikutnya.
   
7. Sekarang tetap dengan layer Button Dasar tetap terpilih, tekan Panah Bawah Keyboard Anda 10 kali untuk memindah tampilan dasar button 10 pixel ke bawah. Hasilnya kurang lebih seperti ini:
   
8. Sekarang, tambahkan detail pada Button Atas. Pilih Button Atas pada Kotak Layer (Kanan). Tekan Ctrl + Klik pada layer tersebut. Pilih Menu Select > Modify > Contract, dan tentukan nilainya menjadi 1px.
   Selanjutnya pilih Burn Tool:
   
9. Tentukan setting-nya di taskbar atas sebagai berikut:
   Brush=65, Range=Midtones, Exposure-75% :
10. Klik di luar area seleksi. Tekan tombol Shift dan drag Burn Tool ke arah kanan, melewati seleksi Anda seperti ini:
    
11. Selanjutnya, mari kita tambahkan efek blend pada Button Atas. Deselect Layer (Ctrl + D), Klik pada Button Atas dalam Layer Palette. Pilih menu Layer > Layer Styles > Inner Glow dan atur settingnya sebagai berikut:
    
12. Lakukan hal yang sama pada Button Dasar dengan setting beikut ini:
    
13. Selanjutnya kita tambahkan efek cahaya pada button. Pertama, pilih Brush Tool, dan tentukan dengan setting berikut ini:
    
14. Pastikan, warna Foreground dan Background Anda pada posisi default (Hitam dan Putih), jika Anda tidak yakin, tekan tombol ‘D’. Kemudian tekan ‘X’ untuk menukar posisi keduanya. Sekarang, pilih Pen Tool pastikan Anda memilih “Paths”, bukan “Shape“. Untuk menentukan pilihan ini, pilih ikon Pen Tool Bar di bagian atas:
    
15. Buat path dari titik kiri ke kanan seperti gambar berikut:
    
16. Sekarang buat layer baru kemudian Pilih Path Selection Tool (atau tekan ‘A’) dan klik kanan pada Path, kemudian pilih ke bawah hingga ke bagian “Stroke Path…”. Tentukan settingnya seperti berikut ini:
    
17. Selanjutnya, klik kanan pada Path sekali lagi dan pilih “Delete Path”. Sekarang, button kita akan tampak kurang lebih seperti ini:
    
18. Mari kita tambahkan beberapa detail lagi. Pilih Dodge tool dan tentukan settingnya seperti ini:
    
19. Sekarang, pilih Layer Button Atas dengan menekan Ctrl + Klik pada Layer.
20. Dengan Dodge Tool, Klik pada tengah-tengah button kurang lebih 2 kali. Jangan terlalu banyak karena akibatnya bisa berabe.
    
21. Untuk sentuhan terakhir, pilih Burn tool dan pilih Button Dasar. Pastikan Burn Setting seperti ini:
    
22. Selanjutnya, gambar dua garis di dua sisi luar button seperti gambar berikut (Button Atas tidak tampak). Seperti ini:
    
23. Selesai! Anda telah berhasil. Selanjutnya Anda bisa tambahkan polesan ekstra seperti yang saya lakukan pada button Saya sehingga tampak seperti ini:
    

Anda puas dengan hasil Anda?