Tambah Efek Teks Glossy di Grafik Butang

Note terkini: Link download telah di’fix. Enjoy…

Beberapa minggu yang lepas saya telah menghadiahkan template button kepada subscriber di mana korang boleh meletak teks sendiri di button tersebut. Tak sangka pulak ramai yang mengemel semula minta saya tunjukkan cara untuk meletak teks di template butang. Ada yang saya nampak telah cuba mengedit dan menggunakan button tu…good job untuk anda

Grafik Yang Bakal Dibina

Pengenalan dan Persediaan

Memandangkan button tersebut adalah dalam format .png dan .gif, saya hanya akan tunjukkan cara nak meletak teks di button tersebut di dalam Photoshop. Rasanya step ini simple sahaja dan yang paling asas, rasanya ramai yang dah tahu terutamanya yang mengikut saya di grafikjualan. Jadi tutorial ini adalah sebagai bonus kepada mereka yang nak mula menyesuaikan diri dengan photoshop.

Bagi yang belum download butang yang saya berikan, sila klik di sini. Kita perlukan template butang ini bagi mengikuti tutorial ini.

Langkah 1 – Permulaan dan Pemilihan Font

Baiklah, pertama sekali, di photoshop korang, buka mana-mana butang berformat .png yang saya berikan. Tapi bagi mengikuti tutorial ini, buka butang yang berwarna hijau seperti di bawah:

Klik ‘Type Tool’ di tools, dan pilih font yang diinginkan.

Orait, dah pilih ke?

Pilih je mana-mana font menarik dan bersesuaian dengan button kita. Kalau rasa tiada yang sesuai, saya berikan sedikit tips untuk memilih font.

Lihat butang yang saya berikan. Lihat bentuknya dan lihat jenis grafiknya. Bucu bulat dan ala-ala glossy kan?

Jadi untuk mencari teks yang bersesuaian dengan grafik sebegini biasanya saya akan menggunakan font yang bulat atau ‘rounded’.

Font yang saya gunakan ialah font ‘Vag Rounded’ dan ‘Vagabond’. Jika tiada font ini, boleh klik sini untuk download.

Setelah download dan letakkan di folder font di control panel di komputer.

Seterusnya klik semula pada ‘type tool’ dan pilihlah font ‘Vagabond’.

Bagi tutorial ini kita akan menggunakan font ‘Vag Rounded’ dan ‘Vagabond’ kerana ketebalan font2 tersebut amatlah sesuai kalau kita nak buat teks yang glossy.

Langkah 2 – Tambah Teks

Setelah memilih font, klik di atas butang mula menaip. Kita taip ‘Order’ besar-besar agar ketara dan orang ramai pun sedar akan kewujudan butang ini di surat jualan kita nanti.

Lihat di ‘layer palette’ di kanan, akan ada satu layer teks ‘order’ yang terhasil secara otomatik.

Bagi mengubah saiz teks, highlight keseluruhan teks, lihat di type toolbar di atas, bawakan pointer korang di bahagian saiz font, dan gerakkan mouse ke kiri dan kanan bagi mendapatkan saiz yang sesuai.

Berikut ialah saiz yang telah saya pilih: 49pt

Dan untuk mengubah warna font, kita akan gunakan blending tool tapi bagi totorial ini saya hanya tunjukkan pemilihan warna di type toolbar. Klik dua kali di foreground color, dan color picker akan pop out seperti di bawah.

Di sini saya telah memilih warna hijau gelap, #334c00. Kemudian klik ok.

Note: Anda boleh memilih warna terang atau gelap, tapi pastikan ia mudah di baca.

Langkah 3 – Tambah Efek Glossy

Masih di layer teks ‘order’, klik di keyboard, CTRL+SHIFT+N serentak untuk memmbina layer baru dan namakan layer baru ini sebagai ‘glossy’.

Tekan ok. Lihat, di layer palette sebelah kanan, terdapat satu layer baru ‘glossy’.

Masih di layer glossy, kita klik butang CTRL di keyboard, dan serentak bawakan mouse ke layer teks ‘ORDER’ dan klik di bahagian kotak berhuruf T seperti gambar di bawah.

Lihat di butang grafik sekarang, terdapat garis putus-putuskan?

Jika ada, kita teruskan langkah yang seterusnya.

Pergi ke “SELECT>>MODIFY>CONTRACT” dan masukkan nilai 1 atau 2 pixels.

Pergi ke tools palette, klik kanan pada marquee tool, dan marquee option akan keluar. Pilih eliptical marquee tool.

Sambil menekan butang SHIFT+ALT, klik kanan mouse dan buatkan satu bentuk oval (ataupun bulatan) separuh atau 1/3 sebahagian atas teks korang.

Di tools kita, pilih gradient tool, dan pilih gradient tool (dari fill ke transparent).

Untuk mengubah warna, ubah sahaja pada foreground color. Di sini saya biarkan sahaja warna putih.

Klik dari bahagian atas butang hingga ke lebih kurang separuh teks dan lepaskan mouse.

Kemudian klik CTRL + D untuk hilangkan garisan putus.

Langkah 3 – Langkah Terakhir

Sekarang teks kita kelihatan glossy. Ini simple glossy sahaja, boleh di’cantikkan lagi dengan bermain dengan filter, opacity dan sebagainya, take your time untuk mendapatkan efek yang cantik. Dan sudah tentu terdapat cara berlainan untuk menambah glossy seperti menggunkan blending tool, tapi saya tunjukkan dulu cara ini agar korang dapat lebih mengenali tools dan fungsinya.

Kebanyakkan butang yang saya nampak di web jualan adalah tenggelam dan kadang-kadang pelanggan tidak tahupun akan kewujudan order button ataupun tidak tahu bahawa butang tersebut perlu di klik untuk ke proses yang seterusnya.

Untuk butang ini, saya telah rekakannya dua bahagian tambahan agar lebih menyerlah dan kebanyakkan pelanggan pun terus klik dan beli produk kita.

Di bahagian atas boleh sertakan ayat tambahan call-to-action seperti, klik di sini, klik sekarang, click now dan sebagainya. Dan di bahagian bulatan, boleh letakkan harga produk.

Gunakan step yang sama untuk meletak teks lain di butang dan maka siaplah butang glossy yang sungguh menyerlah!

Tutorial Video

Ikuti video tutorial langkah demi langkah yang saya jelaskan di atas sambil menikmati musik background yang santai

Kesimpulan

Simple bukan tutorial ini? Sekarang anda tahu bagaimana untuk menggunakan template butang yang saya berikan. Malah di dalalm tutorial ini juga anda dapat mempelajari cara pemilihan font dan menambah efek glossy. Sudah tentu anda dapat mengaplikasikan teknik ini untuk apa sahaja grafik yang korang mahu. Untuk lebih menarik, jadikan teks dan butang tersebut beranimasi.

Sampai berjumpa lagi. Jangan lupa tinggalkan komen anda di bawah.