Top Menu

Dapatkan buku The Power of Photoshop. Disertai bonus video tutorial. Harga: Rp 78.800 Rp 54.500

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.

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.

Mendesain Interface Menu Modern

Langkah 2: Latar

Tambahkan Adjustment Layer Solid Color dengan warna #757575.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

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.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

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

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Di bawah adalah tampilan dasar menu yang kita peroleh.

Mendesain Interface Menu Modern

Langkah 4

Ctrl-klik shape lalu buat layer baru.

Mendesain Interface Menu Modern

Langkah 5

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

Mendesain Interface Menu Modern

Langkah 6

Klik Filter > Noise > Add Noise.

Mendesain Interface Menu Modern

Langkah 7

Ubah blend mode layer ke Screen dan turunkan Opacity layer.

Mendesain Interface Menu Modern

Langkah 8: Menu Utama

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

Mendesain Interface Menu Modern

Tambahkan Inner Glow, Gradient Overlay, dan Stroke.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 9

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

Mendesain Interface Menu Modern

Beri Drop Shadow agar teks terlihat kontras dengan latarnya.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 10: Menu Drop Down

Buat shape berbentuk lingkaran dengan warna #24272f.

Mendesain Interface Menu Modern

Tambahkan Gradient Overlay dan Stroke.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 11

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

Mendesain Interface Menu Modern

Beri sedikit Drop Shadow.

Mendesain Interface Menu Modern

Langkah 12

Buat rounded rectangle untuk latar sub menu.

Mendesain Interface Menu Modern

Tambahkan Layer Style berikut.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 13

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

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 14

Tambahkan teks menu.

Mendesain Interface Menu Modern

Beri Drop Shadow pada teks.

Mendesain Interface Menu Modern

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.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Ini adalah tampilan hover untuk menu lainnya.

Mendesain Interface Menu Modern

Langkah 16

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

Mendesain Interface Menu Modern

Tambahkan Drop Shadow.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 17: Setting

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

Mendesain Interface Menu Modern

Langkah 18

Buat rounded rectangle dengan radius 1 px.

Mendesain Interface Menu Modern

Langkah 19

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

Mendesain Interface Menu Modern

Langkah 20

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

Mendesain Interface Menu Modern

Langkah 21

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

Mendesain Interface Menu Modern

Beri Drop Shadow, Inner Glow, dan Gradient Overlay.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 22: Pemisah Antar Menu

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

Mendesain Interface Menu Modern

Langkah 23

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

Mendesain Interface Menu Modern

Tambahkan Drop Shadow.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 24: Area Pencarian

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

Mendesain Interface Menu Modern

Langkah 25

Ubah warnanya menjadi #3e4854.

Mendesain Interface Menu Modern

Ubah setting Gradient Overlay.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 26

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

Mendesain Interface Menu Modern

Ubah setting Inner Glow.

Mendesain Interface Menu Modern

Inilah hasilnya setelah pengubahan Gradient Overlay.

Mendesain Interface Menu Modern

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.

Mendesain Interface Menu Modern

Tambahkan Drop Shadow, Inner Glow, dan Gradient Overlay.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 28

Tekan Ctrl + T lalu putar ikon 45°.

Mendesain Interface Menu Modern
Mendesain Interface Menu Modern

Langkah 29

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

Mendesain Interface Menu Modern

Beri Drop Shadow.

Mendesain Interface Menu Modern

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.

Download Link

Download File PSD

, ,

8 Responses to Mendesain Interface Menu Modern

  1. ad 12 March 2012 at 7:13 pm #

    gi mana menterjemahkannya ke html/css bro?

  2. andre 16 March 2012 at 4:38 pm #

    untuk yang ini cara digabung dengan CSS nya gmana ya?

Trackbacks/Pingbacks

  1. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula | DesainDigital - 10 March 2012

    [...] 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 [...]

  2. Kuis Berhadiah Buku "Panduan Mudah Desain Web Profesional" | DesainDigital - 10 March 2012

    [...] 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 [...]

  3. 8 Tips Belajar Desain Web | DesainDigital - 14 March 2012

    [...] 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 [...]

  4. Mendesain Login Form Gelap Bergaya Modern | DesainDigital - 14 March 2012

    [...] 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 [...]

  5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web | DesainDigital - 14 March 2012

    [...] 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 [...]

Tinggalkan komentar Anda.