Mendesain Interface Menu Modern

Di tutorial ini, saya akan menjelaskan proses pembuatan menu yang digunakan oleh Syarip Yunus dalam theme tumblr premiumnya, Timeline. Saya sengaja memilih desain ini karena tampilannya yang unik dan mirip dengan desain interface sebuah aplikasi.

Preview

Berikut adalah hasil yang akan kita peroleh.

Tampilan 100%

Detail Tutorial

• Tingkat Kesulitan: Pemula, Menengah
• Software yang Digunakan: Adobe Photoshop
• Teknik yang Dipelajari: Penggunaan Tool Vektor, Layer Mask, Layer Style
• Lama Pengerjaan: 30 menit

Tutorial

Langkah 1: Mempersiapkan Kanvas

Buat file baru dengan ukuran 725 × 220 px.

Langkah 2: Latar

Tambahkan Adjustment Layer Solid Color dengan warna #757575.

Langkah 3: Area Menu

Aktifkan tool rectangle lalu buat shape di bagian atas kanvas dengan warna #23262d. Pastikan sisi dan kanan shape berada di luar area kanvas. Zoom lebih dekat dengan tool zoom dan beri jarak 1 px dengan bagian atas kanvas.

Klik ganda layer lalu tambahkan Layer Style Drop Shadow, Inner Glow, Gradient Overlay, dan Stroke dengan setting seperti berikut.

Di bawah adalah tampilan dasar menu yang kita peroleh.

Langkah 4

Ctrl-klik shape lalu buat layer baru.

Langkah 5

Isi layer dengan hitam dengan klik Edit > Fill dan pilih warna hitam.

Langkah 6

Klik Filter > Noise > Add Noise.

Langkah 7

Ubah blend mode layer ke Screen dan turunkan Opacity layer.

Langkah 8: Menu Utama

Gambar sebuah rounded rectangle dengan radius: 3 px dan warna #23262d.

Tambahkan Inner Glow, Gradient Overlay, dan Stroke.

Langkah 9

Beri teks menu di dalam area shape. Beri juga jarak yang cukup.

Beri Drop Shadow agar teks terlihat kontras dengan latarnya.

Langkah 10: Menu Drop Down

Buat shape berbentuk lingkaran dengan warna #24272f.

Tambahkan Gradient Overlay dan Stroke.

Langkah 11

Aktifkan tool polygon dengan Sides: 3. Buat segitiga di dalam lingkaran dengan warna #858794.

Beri sedikit Drop Shadow.

Langkah 12

Buat rounded rectangle untuk latar sub menu.

Tambahkan Layer Style berikut.

Langkah 13

Tambahkan path segitiga di bagian atas persegi dengan mode Add to Shape.

Langkah 14

Tambahkan teks menu.

Beri Drop Shadow pada teks.

Langkah 15

Tambahkan latar untuk kondisi hover, yaitu ketika kursor berada di atasnya. Untuk menu kedua, caranya dengan menduplikasi latar sub menu lalu menambahkan persegi menutupi menu lainnya dengan mode Subtract.

Ini adalah tampilan hover untuk menu lainnya.

Langkah 16

Buat shape rectangle hitam dengan tinggi 1 px di antar setiap menu.

Tambahkan Drop Shadow.

Langkah 17: Setting

Buat latar untuk tombol setting. Prosesnya sama seperti latar untuk menu utama.

Langkah 18

Buat rounded rectangle dengan radius 1 px.

Langkah 19

Aktifkan path dengan tool Path Selection dan tekan Ctrl + Alt + T untuk memduplikasi dan mentransformasi path. Putar 45°.

Langkah 20

Tekan Ctrl + Shift + Alt + T beberapa kali hingga diperoleh seperti di bawah.

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.

Tampilan 100%

Download Link