Mendesain Interface Menu Modern

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

1. Kuis Berhadiah Buku "Panduan Mudah Desain Web Professional"
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional

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.

final-large.jpg

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.

tutorial-membuat-interface-menu-modern-01.jpg

Langkah 2: Latar


Tambahkan Adjustment Layer Solid Color dengan warna #757575.

tutorial-membuat-interface-menu-modern-02.jpg

tutorial-membuat-interface-menu-modern-03.jpg

tutorial-membuat-interface-menu-modern-04.jpg

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.

tutorial-membuat-interface-menu-modern-05.jpg

tutorial-membuat-interface-menu-modern-06.jpg

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

[gallery ids="12795,12796,12797,12798" type="rectangular"]

Di bawah adalah tampilan dasar menu yang kita peroleh.

tutorial-membuat-interface-menu-modern-11.jpg

Langkah 4


Ctrl-klik shape lalu buat layer baru.

tutorial-membuat-interface-menu-modern-12.jpg

Langkah 5


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

tutorial-membuat-interface-menu-modern-13.jpg

Langkah 6


Klik Filter > Noise > Add Noise.

tutorial-membuat-interface-menu-modern-14.jpg

Langkah 7


Ubah blend mode layer ke Screen dan turunkan Opacity layer.

tutorial-membuat-interface-menu-modern-15.jpg

Langkah 8: Menu Utama


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

tutorial-membuat-interface-menu-modern-16.jpg

Tambahkan Inner Glow, Gradient Overlay, dan Stroke.

[gallery ids="12805,12806,12807" type="rectangular"]

tutorial-membuat-interface-menu-modern-20.jpg

Langkah 9


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

tutorial-membuat-interface-menu-modern-21.jpg

Beri Drop Shadow agar teks terlihat kontras dengan latarnya.

tutorial-membuat-interface-menu-modern-22.jpg

tutorial-membuat-interface-menu-modern-23.jpg

Langkah 10: Menu Drop Down


Buat shape berbentuk lingkaran dengan warna #24272f. Tambahkan Gradient Overlay dan Stroke.

tutorial-membuat-interface-menu-modern-24.jpg

tutorial-membuat-interface-menu-modern-25.jpg

tutorial-membuat-interface-menu-modern-26.jpg

tutorial-membuat-interface-menu-modern-27.jpg

Langkah 11


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

tutorial-membuat-interface-menu-modern-28.jpg

tutorial-membuat-interface-menu-modern-29.jpg

Langkah 12


Buat rounded rectangle untuk latar sub menu.

tutorial-membuat-interface-menu-modern-30.jpg

Tambahkan Layer Style berikut.

[gallery ids="12819,12820,12821,12822,12823" type="rectangular"]

Langkah 13


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

tutorial-membuat-interface-menu-modern-36.jpg

tutorial-membuat-interface-menu-modern-37.jpg

Langkah 14


Tambahkan teks menu.

tutorial-membuat-interface-menu-modern-38.jpg

Beri Drop Shadow pada teks.

tutorial-membuat-interface-menu-modern-39.jpg

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.

tutorial-membuat-interface-menu-modern-40.jpg

tutorial-membuat-interface-menu-modern-41.jpg

Ini adalah tampilan hover untuk menu lainnya.

tutorial-membuat-interface-menu-modern-42.jpg

Langkah 16


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

tutorial-membuat-interface-menu-modern-43.jpg

Tambahkan Drop Shadow.

tutorial-membuat-interface-menu-modern-44.jpg

tutorial-membuat-interface-menu-modern-45.jpg

tutorial-membuat-interface-menu-modern-46.jpg

Langkah 17: Setting


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

tutorial-membuat-interface-menu-modern-47.jpg

Langkah 18


Buat rounded rectangle dengan radius 1 px.

tutorial-membuat-interface-menu-modern-48.jpg

Langkah 19


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

tutorial-membuat-interface-menu-modern-49.jpg

Langkah 20


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

tutorial-membuat-interface-menu-modern-50.jpg

Langkah 21


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

tutorial-membuat-interface-menu-modern-51.jpg

Beri Drop Shadow, Inner Glow, dan Gradient Overlay.

[gallery ids="12840,12841,12842,12843,12844" type="rectangular"]

Langkah 22: Pemisah Antar Menu


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

tutorial-membuat-interface-menu-modern-57.jpg

Langkah 23


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

tutorial-membuat-interface-menu-modern-58.jpg

Tambahkan Drop Shadow.

[gallery ids="12847,12848" type="rectangular"]

Langkah 24: Area Pencarian


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

tutorial-membuat-interface-menu-modern-61.jpg

Langkah 25


Ubah warnanya menjadi #3e4854.

tutorial-membuat-interface-menu-modern-62.jpg

Ubah setting Gradient Overlay.

[gallery ids="12851,12852" type="rectangular"]

Langkah 26


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

tutorial-membuat-interface-menu-modern-65.jpg

Ubah setting Inner Glow.

tutorial-membuat-interface-menu-modern-66.jpg

Inilah hasilnya setelah pengubahan Gradient Overlay.

tutorial-membuat-interface-menu-modern-67.jpg

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.

tutorial-membuat-interface-menu-modern-68.jpg

Tambahkan Drop Shadow, Inner Glow, dan Gradient Overlay.

[gallery ids="12857,12858,12859,12860" type="rectangular"]

Langkah 28


Tekan Ctrl + T lalu putar ikon 45°.

tutorial-membuat-interface-menu-modern-73.jpg

tutorial-membuat-interface-menu-modern-74.jpg

Langkah 29


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

tutorial-membuat-interface-menu-modern-75.jpg

tutorial-membuat-interface-menu-modern-76.jpg

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.

final-large