smartuts.com

Membuat Simple Button dengan Photoshop

Button atau tombol adalah salah satu element interface yang sangat penting. Desain sebuah Button sebaiknya mampu menghadirkan daya tarik untuk meng-klik-nya. Bukan seperti nyamuk yang minta ditabok, tapi laksana indahnya pipi pacar anda yang membuat anda ingin mencubit atau mengelusnya .

Kali ini saya ingin berbagi tutorial membuat button yang simple namun tetap mempertimbangkan unsur estetika. Jenis button dalam tutorial ini sangat umum dan banyak digunakan pada website-website ternama. Tutorial ini saya buat sedetail mungkin sehingga bagi anda yang kurang familiar dengan Photoshop masih bisa mengikutinya. Semoga . Hasil akhir dari tutorial ini adalah seperti gambar dibawah ini :

Selamat mencoba, semoga bermanfaat..

1. Buat file baru di Photoshop : File > New atau tekan tombol Ctrl+N , setting konfigurasinya seperti gambar dibawah ini.

2. Aktifkan Rounded Rectangel tool : tekan tombol U, lalu set radiusnya menjadi 3 px

3. Buat sebuah persegi panjang seperti gambar di bawah

Tutorial 4 – 9 akan menjelaskan tentang penggunaan Grid dengan tujuan agar pengerjaan desain lebih rapi dan presisi. Penggunaan Grid akan meminimalisir kebocoran pixel pada desain anda. PENTING!

4.setting Grids melalui : edit > preferences > Guides, Grids, & Slices

5.Set nilainya seperti gambar di bawah

6.Aktifkan Grid dengan menekan Ctrl + ‘ atau dengan mengikuti gambar di bawah

7.Area kerja anda akan terlihat seperti gambar dibawah.

8.Zoom In Area Kerja anda dengan menekan Ctrl & + atau mouse scroll sambil menekan tombol Alt. Kebocoran Pixel dapat kita ketahui dengan adanya garis abu-abu pada tepi shape berwarna hitam. garis tersebut dapat kita hilangkan dengan menggeser tepi shape sesuai dengan Grid pada area kerja menggunakan transform tool ( Ctrl + t )

9.Setelah dirapikan, hasilnya akan terligat seperti gambar dibawah

10.Double Clik Layer, Aktifkan Gradient Overlay lalu setting layer style seperti gambar dibawah..

11.Aktifkan Gradient Stroke lalu setting layer style seperti gambar dibawah..

12.Aktifkan Inner Shadow lalu setting layer style seperti gambar dibawah..

13.Hasil Sementara akan terlihat seperti gambar dibawah..

14.Buat Layer baru berupa teks ( dengan menekan tombol T pada keyboard ) lalu beri tulisan seperti yang anda inginkan

15.Double Click pada layer, aktifkan Inner Shadow, lalu setting layer style eperti gambar di bawah

16.Aktifkan Drop Shadow, lalu setting layer style eperti gambar di bawah

17.Aktifkan Grid ( Ctrl + ‘ ), Buat 2 garis vertikal berukuran 1 pixel. Garis pertama diberi warna #500000 dan garis kedua diberi warna #EF0000

18.Hasil Sementara akan terlihat seperti gambar di bawah ini

19.Aktifkan Polygon Tool, set sides=nya menjadi 3

20.Buat segitiga berwarna #500000 dengan ujung runcing mengarah ke kanan

21.Double Click Layer, aktifkan Inner Shadow dan set layer style-nya seperti gambar di bawah

22.Aktifkan Drop Shadow dan set layer style-nya seperti gambar di bawah

23.Aktifkan Panel Adjustment

24.Buat Hue/Saturation adjustment Layer pada layer paling atas dan geser slider Hue untuk mendapatkan warna lain yang anda inginkan

25.Dari Hasil langkah 24, anda akan mendapatkan hasil warna seperti gambar di bawah ini

26.Untuk mendapatkan hasil akhir yang optimal, nonaktifkan layer background, dan simpan button dengan Save for Web & Devices

27.Simpan dengan konfigurasi seperti gambar di bawah ini. Klik Save

Selamat anda telah berhasil membuat sebuah button sederhana . anda juga dapat mendownload file hasil akhirnya berbentuk PSD dengan menekan button di bawah ini.

REFERENSI

• optimasi Garis 1 pixel pada Desain Website
• Call to Action Buttons: Examples and Best Practices
• Showcase of Buttons in Web Design

Tags: button, photoshop, web element