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,pixel perfect.Preview
Sebelum mulai, lihat terlebih dahulu tombol download yang akan kita
buat. Terlihat menarik? Lanjutkan dengan mengikuti tutorial di bawah.
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.
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.
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.
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.
Langkah 4: Ikon download
Buat sebuah shape lingkaran di sisi kiri tombol. Ubah Fill ke 0% dan Opacity layer 80%. Beri layer style
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.
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.
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.
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.
Langkah 9
Tambahkan layer style Gradient Overlay bertipe radial. Geser posisi gradasi.
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.
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.
Langkah 12
Buat seleksi kotak di belakang pita dan isi dengan warna abu-abu gelap. Bagian ini menjadi bagian belakang pita.
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.
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.
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.
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.
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.
0 komentar:
Posting Komentar