Membuat tombol rollover dari photoshop hingga html

Posted on

Berbeda dengan tutorial-tutorial yang pernah saya bahas sebelumnya, terutama dalam mendesain tombol-tombol untuk website. Kali ini kita akan mencoba membuat sebuah tombol mulai dari mendesain di photoshop hingga membuat coding dalam bentuk HTML dan CSS dan siap dipublish ke internet, Berikut tutorialnya.

Preview Desain

Klik disini untuk melihat hasilnya.

Detail tutorial

  • Tingkat kesulitan : Pemula/Menengah
  • Software yang digunakan : Adobe Photoshop, Coding editor (Notepad/Dreamweafer/dll)
  • Materi yang dipelajari : Dasar coding dan jenis desain untuk tombol rellover
  • Lama pembuatan : 25 Menit

Tutorial

Mendesain tombol di photoshop

Langkah 1 : Memulai dengan membuat lembar kerja baru

Sebelum masuk ke dalam pengkodingan di html, langkah pertama yang harus kita lakukan adalah mendesain tombolnya diphotoshop. Untuk itu bukalah program desain Adobe photoshop anda terlebih dahulu.

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 photoshop, dan atur menu fixed size dengan menekan tombol segitiga kecil dan isikan W : 120px dan H:60px.

Rounded rectangle tool

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

Mendesain tombol

Pada tombol tersebut, beri layer style seperti berikut.

Gradient overlay.

Gradient overlay

Stroke.

Stroke

Lalu tambahkan teks dengan font Rockwell sehingga menghasilkan tombol setidaknya seperti desain berikut ini.

Menambah teks

Group layer-layer tombol yang telah kita buat sebelumnya, Anda bisa mengubah namanya menjadi “atas” sehingga akan mempermudah dalam pembuatan tombol rellovernya.

Layer

Langkah 3 : Membuat tombol rellover

Jika sebelumnya anda telah membuat group pada layer, selanjutnya adalah membuat tombol rellovernya. Klik kanan pada group layer dan pilih duplicate group, rename groupnya menjadi bawah atau semacamnya. Pindahkan tombolnya kebawah sehingga menghasilkan gambar seperti berikut.

Tombol hasil desain

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

Gradient overlay

Berikut hasil yang telah kita desain.

hasil desain tombol photoshop

Langkah 4 : Menghilangkan background

Hilangkan layer Background dengan menghilangkan tanda mata pada layer Background.

Menghilangkan 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.

Save image

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 asumsikan anda mengerti dasar-dasar HTML dan CSS. Dasar dalam html, buatlah code pendukung awalnya seperti berikut dengan notepad atau code editor lainnya dan simpan kedalam folder yang sama dengan gambar tombol yang telah kita desain dengan photoshop sebelumnya, simpan dengan nama index.html

<html>
<head>
<title>Membuat tombol rellover dari Photoshop hingga HTML</title>
</head>
<body>
</body>
</html>

Langkah 2 : Menambahkan Link untuk gambar

Kita akan membuat metode link sebagai gambar rellover, diantara tag <body> hingga </body> tambahkan link berikut ini

<a href="http://psddesain.com/" class="tombol"></a>

Langkah 3 : Menambahkan CSS

Kita akan membuat css dengan metode internet css, sehingga kita tidak harus membuat banyak file. Selanjutnya, tambahkan style css berikut ini sebelum </head>

<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>

Simpan file html tersebut dan buka menggunakan browser anda seperti mozilla atau chrome, jika anda berhasil .

Bagikan artikel ini jika anda rasa bermanfaat. :)

Gravatar Image
Panggil saya Jaka, saya suka desain. Saya orang yang mudah untuk diajak berinteraksi, temukan juga saya diwebsite pribadi Jakazulham.