Desain Label Toko Online dengan Photoshop

Keberadaan Label seperti Produk Terbaru, Produk Terlaris, Out of Stock dan lain sebagainya dalam sebuah toko online bisa dikatakan cukup penting. Label mampu membuat display toko online anda tampak lebih menarik, sebab produk yang diberi label akan terlihat lebih menonjol. Cara membuat label custom sangat mudah dan sederhana. Di sini kita akan praktek menggunakan Adobe Photoshop. Versinya boleh berapa saja.

Langkah 1

Buat lembar kerja baru dengan ukuran Width x Height : 700 x 500 piksel dan pastikan nilai pada bagian Resolution 72 piksel, karena itu adalah standar resolusi pada sebuah website.

Langkah 2

Buat satu layer baru, kemudian gunakan Rectangular Marquee Tool (M) untuk membuat seleksi kecil pada lembar kerja. Kemudian gunakan Brush Tool (B) dengan ukuran 10 piksel dan Hardness 0%. Arahkan separuh Brush di dalam seleksi yang sebelumnya sudah kita buat, dan buat sebuah titik. Ini nantinya akan digunakan sebagai bayangan, agar label terlihat seolah keluar dari sebuah lubang.

Selanjutnya Deselect (Ctrl+D) seleksi pada Brush, dan Resize agar bayangan menjadi lebih panjang.

Langkah 3

Di bawah Layer bayangan, buat sebuah Shape kotak yang memanjang ke bawah. Gunakan Rectangle Tool (U).

Agar label tidak terlihat Flat, kita tambahkan beberapa Layer Style seperti: Gradient Overlay, Stroke dan Inner Glow. Adapun pengaturan untuk tiap-tiap Layer Style:

Gradient Overlay

Kita gunakan 3 warna untuk membuat gradasi pada label: #fc0b0b, #b62020 dan #f66a6a.

Stroke

Efek Stroke digunakan untuk memberikan efek detail pada bagian pinggir label, dan warnanya #a60808.

Inner Glow

Inner Glow digunakan sebagai pelengkap dari Stroke agar tidak tampak menyatu dengan efek gradasi.

Hasil jadinya sementara kurang lebih seperti ini:

Untuk layernya seperti ini:

Langkah 4

Gunakan Pen Tool (P) untuk menambahkan sebuah titik node di bagian tengah bawah Shape yang sebelumnya kita buat. Kemudian gunakan Panah Atas keyboard (Up Arrow) untuk menggesernya ke atas.

Langkah 5

Buat seleksi tepat pada bagian bawah bayangan, ini nanti digunakan untuk memotong kelebihan Shape yang melewati bayangan. Gunakan Rectangle Marquee Tool (M), kemudian Zoom In untuk memudahkan kita membuat seleksi.

Kemudian klik icon Add Layer Mask, untuk menambahkan masking pada layer Shape. Kita hilangkan sedikit bagian yang menonjol di atas efek bayangan.

Jadinya seperti ini:

Langkah 6

Untuk membuat efek 3D, perlu ditambahkan bayangan di bawah layer Shape. 

Duplikat layer Shape yang sebelumnya sudah kita buat. Letakkan urutan layernya di bawah layer Shape, kemudian hilangkan semua Layer Style-nya dan bentuk sedemikian rupa seperti pada gambar. Gunakan Direct Selection Tool (A).

Sebagai sentuhan terakhir tambahkan efek blur. Gunakan Filter Gaussian Blur dengan radius 2 piksel.

Dan hasil jadinya kurang lebih seperti ini:

Langkah 7

Terakhir tambahkan teks pada label, untuk label kali ini kita gunakan kata HOT untuk label produk terlaris. Gunakan Type Tool (T), dan ketikkan teks HOT di atas label. Kemudian transform dan rotate teks 90^o searah jarum jam.

Langkah 8

Sebagai pamungkas, kita dapat menambahkan efek mengkilat pada label. Duplikat layer Shape yang telah ditambahkan Layer Style, letakkan urutan layernya di atas layer teks. Kemudian hilangkan semua Layer Style-nya dan bentuk sedemikian rupa menggunakan Pen Tool (P) seperti pada gambar. Dan ganti warna shape menjadi putih #ffffff.

Tambahkan Layer Mask pada Shape dan gunakan Gradient Tool (G) untuk membuat gradasi miring pada masking. Kemudian ubah Opacity layer menjadi 30%.

Selesai. Jadinya akan seperti ini:

Inilah yang mungkin anda tunggu-tunggu, yaitu bagaimana tampilannya jika diterapkan langsung pada toko online anda:

Nah, Anda bisa memodifikasi warna dan teksnya. Anda juga bisa bereksperimen untuk bentuk maupun posisinya, Misalnya diletakkan di samping kiri atau kanan pun juga boleh. Di bawah ini adalah hasil modifikasi saya, saya jadikan wallpaper HP. Unik bukan? Jadi selamat mencoba.

Featured on MEBISO