buat tombol button kul (baca:cool)

Hari ini gue coba untuk sharing lagi. Kali ini gue coba untuk sharing gimana caranya bikin tombol button supaya kliatan kul (baca : cool). Button, ini adalah salah satu atribut yang ada di html. Button ini fungsinya sangat besar sekali, yaitu untuk mengirimkan data yang akan kita sampaikan kepada yang dimaksud. Kalo kita ga ngerubah tombol button asli bawaan browser keknya website kurang JRENG…!!! Tampilan website jadi standard, nah untuk itu maenkan desain button ini. ganti button default yang ada di browser dengan image yang akan gue coba sharing ini. Ni dia caranya :

Yang pertama : buat file baru — CTRL+N / Klik File >New , sampe keluar gambar kayak dibawah ini :

untuk ukurannya, silakan diatur sendiri yaa…kalo untuk resolusinya cukup pake 72 pixel/inch. Lalu tekan tombol OK.

Yang kedua : buat Rounded Rectangle Tool (U) teken tombol huruf U atau tombolnya yang ada di tool, liat gambar dibawah ini :

Abis itu, setting Rounded Rectangle Tool - nya kayak yang ada di gambar ini :

selanjutnya, klik tombol kiri mouse tekan dan tahan sambil di geser sampe ngebentuk sesuai ukuran yang kita inginkan.

Hasilnya seperti gambar ini :

Untuk warna tombol button ini gue pilih warna biru : #2d85c3. Anda bisa mengganti dengan warna lain.

Langkah selanjutnya adalah, mainkan Layer Style dengan mengklik ganda pada layer yang dituju. Terus isi layer stylenya seperti ini :

Disini yang gue setting : Inner Glow, Gradient Overlay ama Stroke. Dibawah ini settingan Inner Glow & Stroke seperti gambar

Kalo untuk settingan Gradient Overlay, gue pilih settingan yang ada di Gradient Editornya. Caranya, klik di bagian gradient yang ada di layer style. Seperti gambar ini :

Klik bagian gradient, lalu pilih warna preset yang ada. Untuk kali ini gue pilih yang berwarna biru, seperti yang keliatan gamar dibawah :

selanjutnya klik tombol OK.

Berikutnya adalah, tambahkan tulisan “simpan”.

Langkah selanjutnya adalah pemotongan gambar sesuai ukuran tombol buttonnya. Untuk ini caranya agar lebih rapih, mendingan dibikin garis bantu potongnya. Caranya adalah teken tombol huruf “V” atau icon Move Tool (V) yang ada di tool. Terus jangan lupa tampilin penggarisnya, teken CTRL+R atau pilih View > Rules.

Klik kiri mouse sambil digeser ke pinggir-pinggir tombol yang mau dipotong, jadinya kayak gambar ini :

tuh kan, jadi keliatan garis bantu warna birunya. nah di area itu deh yang bakalan kita potong / crop gambarnya. Caranya, pilih tombol crop yang ada di tool atau teken tombol huruf C abis itu pilih deh area yang pengen di crop.

Ada baiknya sebelum kita motong/ ngecrop kita perbesar dulu tampilannya dengan Zoom. Ini supaya garis potongnya bener-bener pas. Kalo udah ok, maka bisa diklik tombol tanda centang yang ada di atas : .

Sampe disini, kayaknya dah mo abis. Eeeeiiitttt….jangan lupa disimpen filenya. Supaya enak, bisa dipake dengan sgala dasar warna background simpen filenya pake format PNG aja. Nah ini hasil akhir yang gue bikin :

Dah jadi deh tombol button kul-nya… Kalo mo ganti2 warnanya, bisa dimaenin layer style yaaa…