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”%5DDownload File PSD[/ilink] (148 KB)

Iklan

22 thoughts on “Membuat Tombol Download Glossy Berwarna Cerah (Plus Set Tombol Gratis)

  1. Silakan. Di dalam file zip tersedia juga enam tombol download dalam berbagai warna yang bisa langsung digunakan. Semua tombol sudah dalam format PNG transparan.

  2. Di dalam file zip tersedia 6 tombol dalam format PNG transparan. Bisa digunakan langsung.

    Kalau mau disesuaikan warnanya silakan edit file PSD-nya.

  3. Nanti kalau blog saya menyediakan link yang dipakai buat download saya ambil sourcenya. Keren, Mas Jeprie, kelihatan seperti gambar 3 dimensi beneran.

    Oh, ya saya perhatikan semua desain Mas Jeprie rata-rata warnanya suka yang soft, ya? Tidak suka warna yang strong dan mencolok. Seperti blog ini lebih nyaman di mata karena komposisi kontras antara teks dan backgroundnya tampak teduh di mata saya.

  4. Berdasarkan pengalaman saya, mendesain dengan warna kuat sangat sulit. Saya lebih suka dengan membuat desain-desain yang mengutamakan detail. Detail-detail ini secara sendirian tidak akan berpengaruh tapi secara bersamaan akan kesannya bagus.

    Kalau diperhatikan dalam tutorial ini saya banyak menggunakan gradasi lembut (10%-20%). Penambahan garis 1 px juga pengaruhnya besar untuk desain web seperti ini.

    Kontras terlalu besar sebetulnya tidak begitu bagus. Misalnya desain teks hitam di latar putih saat ini makin dihindari. Contoh desain warna teks yang bagus bisa dilihat di The New York Times.

  5. Ijin menerapkan ilmunya ya. 😀

    kebetulan, kemaren lihat blog teman yang ada glossy2nya. mau cari referensi cara pembuatannya, sampai sekarang belum dapat, eh mampir ke sini dapat. hehe.

    Saya coba konsepnya di GIMP dlu..

  6. Mas, hasil akhir tombol yang sdh jadi itu kok bisa jernih sekali, beda dgn gambar2 tutorial diatasnya? apa karena hasil gambarnya itu PNG-24 transparent?
    Saya membuka blog mas ini pakai Opera mini, tapi gambar hasil akhirnya itu tetap jernih.

  7. Mungkin Opera mini sengaja menurunkan kualitas gambar JPEG dengan kompresi. Saya tidak menggunakan Opera mini, jadi tidak bisa berkomentar banyak.

  8. Save for Web adalah perintah yang lebih khusus untuk menyimpan gambar di web. Ada lebih banyak pilihan di perintah ini. Kalau tidak untuk tujuan khusus, Save As juga cukup.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s