Mendesain Interface Menu Modern Bagian 3

Langkah 21

Tambahkan path lingkaran lalu tambahkan lingkaran lebih kecil dengan mode path Subtract.

Beri Drop Shadow, Inner Glow, dan Gradient Overlay.

Langkah 22: Pemisah Antar Menu

Ada yang terlewat. Buat garis hitam 1 px dengan tool rectangle di antar setiap menu.

Langkah 23

Tambahkan layer mask lalu lukis bagian atas dan bawah dengan hitam.

Tambahkan Drop Shadow.

Langkah 24: Area Pencarian

Buat latar untuk area pencarian. Prosesnya sama seperti latar tombol setting dan menu utama.

Langkah 25

Ubah warnanya menjadi #3e4854.

Ubah setting Gradient Overlay.

Langkah 26

Duplikasi latar lalu tambahkan persegi dengan mode Subtract. Ubah warnanya ke #23262d dan ubah setting Gradient Overlay.

Ubah setting Inner Glow.

Inilah hasilnya setelah pengubahan Gradient Overlay.

Langkah 27

Kita akan membuat ikon search. Buat sebuah rounded rectangle 1 px, tambahkan lingkaran di atasnya. Di dalam lingkaran itu, tambahkan lingkaran lebih kecil dengan mode Subtract. Ini akan menghasilkan sebuah ikon kaca pembesar.

Tambahkan Drop Shadow, Inner Glow, dan Gradient Overlay.

Langkah 28

Tekan Ctrl + T lalu putar ikon 45°.

Langkah 29

Tambahkan teks Search di atas area pencarian. Gunakan warna teks yang lebih cerah agar mudah dibaca.

Beri Drop Shadow.

Hasil Akhir

Desain menu yang dibuat di sini tidak saja bergunakan dalam web tapi juga bisa digunakan dalam interface aplikasi. Di bawah adalah hasil akhir tutorial yang kita peroleh.