Desain tombol menggunakan Photoshop
Langkah 1 : Memulai dengan membuat lembar kerja baru
Tahap pertama sebelum kita ngoding html, kita harus membuat desain tombol yang kita inginkan menggunakan Photoshop. Okey langsung saja, kita buka aplikasi Adobe Photoshop. Buatlah sebuah lembar kerja baru dengan klik file > new. Pada kotak dialog yang muncul, isikan Name dengan nama “tombol” dengan widht dan height sebesar 120 pixels dan Resolution 72 pixels/inch.
Langkah 2 : Memulai mendesain tombol
Pilih Rounded rectangle tool pada toolbox, kemudian atur seperti berikut ini :
- Pilih fixed size
- isikan W : 120px, dan
- H:60px.
Langkah berikutnya, buatlah sebuah tombol kecil dengan warna biru (#08a6f0) dengan Rounded rectangle tool yang telah kita setting sebelumnya dan posisikan pada bagian atas.
Beri layer style pada tombol, seperti gambar berikut ini :
Gradient overlay.
Stroke.
Selanjutnya, tambahkan teks pada kotak berwarna biru dengan font Rockwell (/terserah kalian), sehingga menghasilkan tombol seperti contoh dibawah ini
Agar layer-layer lebih tersruktur, kita buat group layer-layer tombol yang telah kita buat, dengan klik create a new group, lalu isikan nama grup ini dengan “atas”, sehingga akan mempermudah dalam pembuatan tombol rellovernya.
Langkah 3 : Membuat tombol rellover
Sebelumnya kita telah membuat group pada layer, selanjutnya adalah membuat tombol rellovernya. Klik kanan pada group layer dan pilih duplicate group, rename groupnya menjadi “bawah”. Pindahkan tombolnya kebawah sehingga menghasilkan gambar seperti berikut.
Pada group “bawah”, ganti layer style pada shape 1 dengan double klik pada layer shape tersebut, lalu ganti gradient overlaynya seperti berikut ini.
Berikut hasil yang telah kita desain.
Langkah 4 : Menghilangkan background
Hilangkan layer Background dengan menghilangkan tanda mata pada layer Background.
Langkah 5 : Menyimpan dalam bentuk png
Beralih kemenu file > Save for web & devices. Ubah preset ke PNG-24 untuk menyimpan tombol dengan background transparent.
Klik Save dan tempatkan ke folder tertentu, pada contoh ini kita akan menempatkannya di folder “tombol-rellover” dengan nama file gambar “tombol”.
Membuat tombol dalam bentuk HTML dan CSS
Langkah 1 : Membuat dasar HTML
Disini, saya anggap kalian sudah mengerti dasar-dasar HTML dan CSS. Pertama siapkan alat pendukung, notepad/ code editor lainnya dan simpan ke dalam folder yang sama dengan gambar tombol yang tadi kita buat, simpan dengan anam index.html
Ketik code dasar, seperti dibawah ini
</pre>
<html>
<head>
<title>Membuat tombol rellover dari Photoshop hingga HTML</title>
</head>
<body>
</body>
</html>
<pre>
Langkah 2 : Menambahkan Link untuk gambar
Kita akan membuat metode link sebagai gambar rellover, diantara tag <body> hingga </body> tambahkan link berikut ini
</pre>
<a href="<a href="https://sciencebooth.wordpress.com/">https://sciencebooth.wordpress.com</a>/" class="tombol"></a>
<pre>
Langkah 3 : Menambahkan CSS
Kita akan membuat css langsung di dalam kode HTML, sehingga kita tidak harus membuat banyak file. Selanjutnya, tambahkan tag style CSS dan kita letakkan CSS ini di bawah sebelum tag </head>.
</pre>
<style type="text/css">
a{
margin:0 auto; /*Untuk membuat tombol ditengah*/
}
a.tombol{
border:0; /*Untuk menghilangkan garis pinggir*/
display:block;
width:120px; /*Panjang gambar*/
height:60px; /*Tinggi gambar 1*/
background:url(Tombol.png); /*Meload gambar*/
text-decoration:none; /*Menghilangkan garis bawah teks*/
}
a.tombol:hover{
background-position:0 -60px; /*Mengubah posisi background gambar dengan x=0 dan y=-60*/
}
</style>
<pre>
Simpan file html tersebut dan buka menggunakan browser anda seperti mozilla atau chrome.
Selamat mencoba (^_^)
Terima kasih kepada psdesain.com
Tags: CSS, HTML, Rollover
Science Booth 
Recent Comments