Mendesain Search Bar Untuk Template Web

Hari ini kita akan belajar bagaimana mendesain search bar untuk template web di Photoshop menggunakan Rounded Rectangle Tool dan style-nya dengan Gradient Overlay dalam 10 langkah mudah.

Final Result

Langkah 1

Pertama-tama, buat dokumen/ proyek baru di Photoshop dengan resolusi 1280 x 1024 pixels dan isi background menggunakan Gradient Tool pilihan kamu. Kemudian pilih Rounded Rectangle Tool dengan radius 10 pixels dan gambar bentuk persegi panjang horizontal menggunakan tool tersebut dengan warna #2d2d2d.

Langkah 2

Sekarang, untuk memiliki Search Field, pilih Rounded Rectangle Tool lagi dengan radius 10 pixels menggunakan warna putih.

Langkah 3

Untuk merancang Search Button-nya, pilih lagi Rounded Rectangle Tool dengan radius 10 pixels dan gambar sebuah persegi panjang seperti yang ditunjukkan pada screenshot di bawah ini dengan warna #740023.

Langkah 4

Untuk membuatnya terlihat seperti sebuah tombol/ button, gambar bentuk persegi panjang yang persis seperti tombol/ Search Button sebelumnya, tapi dengan ukuran yang sedikit berbeda. Radius-nya masih tetap 10 pixels, tapi dengan warna hitam.

Langkah 5

Tekan menu Layer→Layer Style→Gradient Overlay dan atur proprti warnanya sebagai berikut.

Langkah 6

Sekarang, klik Horizontal Type Tool dan ketik "Enter Your Search Term Here" atau apa pun terserah kamu dalam kolom Search Field menggunakan warna #b6b6b6.

Langkah 7

Seakali lagi pilih Horizontal Type Tool dan ketik "Search" di atas tombolnya menggunakan warna putih.

Langkah 8

Pilih Rounded Rectangle Tool dengan radius 10 pixels dan gambar tiga buah persegi panjang di bawah Search Bar dengan warna #9d9d9d (lihat gambar).

Langkah 9

Terapkan Layer Style berikut ke tiga buah persegi panjang yang telah kamu buat barusan.

- Drop Shadow

- Gradient Overlay

Ini dia hasilnya setelah kita menerapkan Layer Style

Langkah 10

Terakhir, ketik tiga buah teks di atas ketiga bidang persegi panjang tersebut dengan warna #c5478b.

Saya berharap kamu menikmati tutorial ini.