Membuat Tombol Download Glossy Berwarna Cerah (Plus Set Tombol Gratis)

Dalam tutorial ini, saya akan memperlihatkan pembuatan tombol download dengan tema glossy dan tampilan 3 dimensi. Tutorial ini akan membahas secara lengkap hingga ke pembuatan gambar transparan dalam format PNG-24. Semua elemen dalam tombol ini dibuat dari vector shape, ini membuat tombol bisa ditransformasi ke ukuran berapa pun tanpa menurunkan kualitasnya. Karena desain ini untuk web, kita akan bekerja dengan sangat akurat hingga ke detail 1 pixel. Semua ini diperlukan untuk mencapai desain yang pixel perfect.

[hr]

Preview


Sebelum mulai, lihat terlebih dahulu tombol download yang akan kita buat. Terlihat menarik? Lanjutkan dengan mengikuti tutorial di bawah.
Membuat Tombol Download Glossy Berwarna Cerah


[hr]

Detail Tutorial:



  • Tingkat Kesulitan: Pemula.

  • Software yang Digunakan: Adobe Photoshop.

  • Materi yang Dibahas: Penggunaan Layer Style, Proses Transformasi, Menggambar Shape Vektor.

  • Lama Pengerjaan: 10 menit.



[hr]

Tutorial


Langkah 1: Bentuk dasar tombol


Aktifkan tool rounded rectangle, pilih radius 7 px lalu buat shape persegi seperti di bawah. Beri layer shape ini base. Saya menggunakan warna biru muda di sini, Anda bisa menggunakan warna apapun yang Anda suka. Tidak masalah. Kita bisa mengubahnya nanti.

Tambahkan layer style Gradient Overlay dengan setting seperti di bawah. Style ini akan memberi kesan menggelembung pada shape.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 2


Di dalam shape base tombol, buat lagi sebuah rounded rectangle kali ini dengan radius 5 px. Ubah fill layer ke 0%. Beri stroke berupa gradasi dari abu-abu ke putih, set blend mode ke Screen untuk mempertahankan hanya warna putih di bagian atas. Stroke seperti ini memberi efek sedikit bevel di bagian dalam tombol.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 3: Refleksi


Gandakan layer shape base lalu secara manual tambahkan path berbentuk gelombang. Pilih intersect path untuk memotong kedua path. Ubah fill ke 0%. Lihat gambar di bawah untuk referensi.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 4: Ikon download


Buat sebuah shape lingkaran di sisi kiri tombol. Ubah Fill ke 0% dan Opacity layer 80%. Beri layer style
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 5


Di dalam shape lingkaran tadi, buat lagi sebuah shape lingkaran dan beri layer style Gradient Overlay dengan tipe radial. Klik dan geser pada gambar untuk menggeser pusat gradasi agar tidak tepat di tengah-tengah lingkaran.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 6


Aktifkan tool custom shape dan dari daftar shape pilih salah satu shape panah. Buat shape panah berwarna hitam di tengah lingkaran. Ubah fill ke 11% lalu tambahkan layer style Bevel and Emboss dan Stroke. Bevel and Emboss akan memberikan efek emboss atau cekung ke dalam sementara Stroke akan memperkuat highlight di bagian bawah dalam cekungan dan memperkuat kesan 3 dimensi.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 7: Teks DOWNLOAD


Beri teks DOWNLOAD ke atas tombol. DI sini saya menggunakan font Arial Rounded karena terlihat menyatu dengan bentuk tombol. Teks besar biasanya akan lebih renggang dan ini tidak terlihat bagus ketika dibaca, ini salah satu konsep dasar dalam tipografi. Buka panel Character lalu perkecil tracking karakter hingga -25. Tambahkan layer styles Bevel and Emboss dan Gradient Over bertipe Gradient untuk memberi kesan teks cembung ke dalam.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 8: Menambah pita


Sekarang kita menambahkan pita yang bisa diisi dengan keterangan singkat. Buat shape berbentuk persegi. Dengan tool pen klik titik pojok kiri bawah untuk menghapusnya dan menghasilkan bentuk segitiga. Gandakan path segitiga, geser lima pixel ke kanan dan lima pixel ke atas. Pilih subtract path untuk mengurangi path sebelumnya.
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 9


Tambahkan layer style Gradient Overlay bertipe radial. Geser posisi gradasi.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 10


Zoom lebih dekat. Buat dua garis di sisi terluar pita dengan pensil 1 px berwarna putih. Tambahkan keterangan misalnya FREE dan putar 45 derajat. Simpan teks ke atas pita. Karena teks ini sangat kecil, agar mudah dibaca kita perlu memperbesar nilai tracking melalui panel Character.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 11


Saat ini, pita terlihat melayang. Buat layer baru di antara pita dan tombol. Buat garis hitam menggunakan brush lembut. Lakukan proses transformasi, klik kanan dan pilih Warp. Geser kotak tengah hingga bagian tengah garis terlihat melengkung. Turunkan opacuty layer ke 30%. Dengan tool eraser hapus bagian bayangan yang tidak dibutuhkan.
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 12


Buat seleksi kotak di belakang pita dan isi dengan warna abu-abu gelap. Bagian ini menjadi bagian belakang pita.
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 13: Bayangan tombol


Buat layer baru seleksi di bagian paling bawah. Buat seleksi ellipse memanjang di bawah tombol. Isi dengan hitam dan beri filter Gaussian Blur untuk menghaluskan bayangan.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 14: Mengubah warna tombol


Kita ingin agar tombol ini seflexibel mungkin, warnanya bisa diubah dengan mudah tanpa perlu melakukan editing rumit. Untuk ini kita akan menggunakan adjustment layer Hue/Saturation. Tambahkan adjustment layer Hue/Saturation di atas layer shape base.

Tambahkan juga adjustment layer Hue/Saturation di atas layer pita. Khusus yang ini, ubah menjadi clipping mask dengan menekan Ctrl + Alt + G. Dengan cara ini, Hue/Saturation hanya akan mempengaruhi warna pita.
Membuat Tombol Download Glossy Berwarna Cerah

Langkah 15


Jika kita ingin mengubah warna tombol, misalnya agar sesuai dengan color scheme situs, kita tinggal mengaktifkan adjustment layer Hue/Saturation, pastikan pilihan Colorize aktif lalu geser ketiga slider yang tersedia. Dengan mudah warna tombol dan pitanya akan berubah. Lihat hasil yang saya peroleh hanya dengan mengubah slider di kedua adjustment layer.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah

Langkah 16: Menyimpan sebagai ikon transparan


Langkah terakhir kita adalah menyimpan gambar sebagai ikon transparan. Sembunyikan Background lalu tekan Ctrl + Shift + Alt + S. Di pilihan yang muncul pilih Preset: PNG-24 dan aktifkan pilihan Transparency.
Membuat Tombol Download Glossy Berwarna Cerah

Membuat Tombol Download Glossy Berwarna Cerah


[hr]

Hasil Akhir


Akhirnya, inilah desain yang kita peroleh. Perhatikan bahwa formatnya sudah transparan sehingga latar gambar tetap terlihat. Seperti biasa, di akhir tutorial ini saya menyediakan file source yang digunakan. Tersedia juga lima tombol dalam berbagai warna dengan format file PNG transparan yang bisa langsung Anda gunakan jika mau.
Membuat Tombol Download Glossy Berwarna Cerah


[hr]

Download Link



[ilink style="download" url="http://dl.dropbox.com/u/7116487/desaindigital/tutorial/tombol-download-glossy-desaindigital.zip"]Download File PSD[/ilink] (148 KB)