Cara Membuat Button/Tombol Download (Elegant Style)

Tutorial kali ini, saya akan coba menjelaskan bagaimana cara membuat button/tombol “Download” dengan Adobe Photoshop. Pada tombol ini, saya memberikan sentuhan Elegant Style agar terlihat lebih simple, eyecatching, professional dan tampak bersih. Blog ini juga menggunakan button ini untuk link download, contohnya bisa dilihat disini, disini, dan disini.

Hasilnya akhir akan seperti ini:

Variasi Warna:

Oke, langsung saja buka program Adobe Photoshop anda. Berikut ini tutorialnya:
(tutorial ini akan membuat button dengan warna hitam, tapi di akhir posting akan diberikan kode warna lain)

Buat dokumen baru dengan ukuran:

• Width: 170 pixels - Height: 40 pixels
• Resolution: 300 px/inch - Background: White 

Tahap 1 : Membuat Bagian Dasar dari Button
1. Buat sebuah persegi panjang dengan Rounded Rectangle Tool sebagai bagian dasar dari button, Radius: 8 px. Lalu, layer diberi nama Warna Dasar. Lalu layer di Rasterize Layer: Right click pada layer. Ukuran persegi panjang jangan terlalu pas dengan background, beri ruang sedikit agar efek glow terlihat nantinya

 Rasterize Layer: Klik kanan pada layer.

Hasil sementara:

 

2. Add Layer Style pada layer Warna Dasar (Double Click di layer Warna Dasar). Ikuti settingan berikut:

Add Layer Style:

Gradient Overlay: 

Inner Glow:

 

 Outer Glow:

Hasil Sementara:

Tahap 2 : Membuat Kotak Icon

1. Buat sebuah persegi dengan Rounded Rectangle Tool sebagai wadah icon, Radius: 5 px. Lalu, layer diberi nama Kotak Icon dan di Rasterize. Letakkan di sebelah kiri dan atur hingga terlihat simetris. Seperti screenshoot ini:

2. Add Layer Style pada layer Kotak Icon. Ikuti settingan berikut:

Gradient Overlay:

 

 Inner Glow:

Hasil Sementara:

Tahap 3 : Membuat Icon Segitiga 
1. Buat sebuah bentuk/shape segitiga dengan Custom Shape Tool dan letakkan di dalam kotak icon, atur hingga simetris. Layer diberi nama Icon dan di Rasterize. Screenshootnya:

 Hasil sementara:

2. Add Layer Style pada layer Icon. Ikuti lagi settingan berikut:

Gradient Overlay:

Hasil Sementara:

Tahap 4 : Membuat Garis Batas 
1. Buat sebuah bentuk/shape garis vertikal (berdiri) dengan Line Tool dengan Weight: 1 px dan letakkan di samping kotak icon, atur hingga simetris. Layer diberi nama Garis Batas dan di Rasterize. Screenshootnya:

Hasil sementara:

Tahap 5 (Finish) : Membuat Text Download
1. Buat sebuah tulisan DOWNLOAD NOW dengan Type Tool, saya memakai font Calibri, lalu letakkan di samping garis batas, atur hingga simetris. Layer jangan di Rasterize agar kita dapat mengubah tulisan (jika ingin diubah). Screenshootnya:

 

 2. Add Layer Style pada layer text DOWNLOAD NOW. Ikuti lagi settingan berikut:

Gradient Overlay:

 

Inner Glow:

Outer Glow:

Selesai. dan hasil akhir akan seperti ini:

Tambahan:

Anda juga dapat merubah warna dasar dari button ini. Anda hanya merubah 3 kode warna di Gradient Overlay pada layer Warna Dasar dengan kode berikut:

• Biru      :  # 008aca - # 00baff - # 21c3ff
• Merah  :  # b60000 - # fd0000 - # fb5454
• Hijau    :  # 68bd04 - # 94df08 - # 68bd04

Selamat Berkreasi..!!!

Related Articles