Advertisements

Membuat Tombol Rollover Menggunakan Photoshop dan HTML

19 May

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 :

  1. Pilih fixed size
  2. isikan W : 120px, dan
  3. H:60px.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML

Langkah berikutnya, buatlah sebuah tombol kecil dengan warna biru (#08a6f0) dengan Rounded rectangle tool yang telah kita setting sebelumnya dan posisikan pada bagian atas.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML_2

Beri layer style pada tombol, seperti gambar berikut ini :

Gradient overlay.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML_8

Stroke.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML_4

Selanjutnya, tambahkan teks pada kotak berwarna biru dengan font Rockwell (/terserah kalian), sehingga menghasilkan tombol seperti contoh dibawah ini

Membuat Tombol Rollover Menggunakan Photoshop dan HTML_5

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.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML_6

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.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML

Pada group “bawah”, ganti layer style pada shape 1 dengan double klik pada layer shape tersebut, lalu ganti gradient overlaynya seperti berikut ini.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML_8

Berikut hasil yang telah kita desain.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML_7

Langkah 4 : Menghilangkan background

Hilangkan layer Background dengan menghilangkan tanda mata pada layer Background.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML_10

Langkah 5 : Menyimpan dalam bentuk png

Beralih kemenu file > Save for web & devices. Ubah preset ke PNG-24 untuk menyimpan tombol dengan background transparent.

Membuat Tombol Rollover Menggunakan Photoshop dan HTML_11

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

Advertisements

One Response to “Membuat Tombol Rollover Menggunakan Photoshop dan HTML”

  1. Jaka July 8, 2013 at 2:41 PM #

    Terimakasih sudah membagi ilmu saya melalui blog anda, tapi akan membuat saya lebih senang jika anda memasang sebuah link sumber juga 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: