Membuat Tombol Web Menarik

Membuat Tombol Web Menarik

Pada suatu halaman web, biasanya tombol digunakan sebagai penghubung antara halaman web tersebut dengan dokumen maupun halaman web lainnya. Karena halaman web yang baik adalah halaman web yang desainnya menarik dan mudah dipahami, tentu tombol-tombol yang ada didalamnya juga perlu di desain dengan menarik. Berikut ini akan diterangkan beberapa langkah untuk membuat tombol web yang menarik.

A.     Buat atau cari gambar tekstur yang menarik

Desain tombol yang menarik bermula dari komposisi warna pada tombol yang apik. Karena itulah, gunakan tekstur warna yang menarik sebagai bahan dasar pembuatan tombol website. Untuk mendapatkan tekstur yang menarik, kita bisa membuatnya sendiri maupun mencarinya di internet.

Berikut ini adalah contoh tekstur yang akan digunakan untuk membuat tombol web:

B.      Bentuklah tombol dari tekstur yang ada

Setelah mendapatkan tekstur yang menarik, bentuklah pola tombol dari gambar tersebut. Gunakan software picture editor untuk membentuk pola tombolnya. Berikut ini saya contohkan salah satu cara membentuk pola tombolnya (Picture editor : Adobe Photoshop CS 5):

1.         Gunakan selection tool untuk membuat pola di lokasi tekstur yang diinginkan

2.        Klik kanan pada gambar tekstur, lalu pilih “Select Inverse”

3.        Bagian yang tidak perlu dihapus menggunakan eraser tool lalu “Crop” di bagian pola-pola tombol.

4.        Berikan efek “bevel/emboss” agar gambar terkesan “timbul”

5.        Setelah itu, jadikan 3 tombol ini menjadi file gambar yang terpisah dengan cara “crop -> save as” sehingga menjadi seperti gambar-gambar tombol dibawah

C.      Gunakan tombol yang telah dibuat kedalam halaman web

Setelah tombol-tombol dibuat, maka kita tinggal gunakan tombol tersebut dengan cara menuliskan syntax berikut kedalam page source (file halaman web) dari halaman web anda:

<a href=”index.html”> <img src=”gambar/tombol/tombol1.png”> </a>

”index.html” merupakan link dari dokumen atau halaman web tujuan, sedangkan ”gambar/tombol/tombol1.png” merupakan link dari file tombol yang ingin digunakan.