Kali ini saya akan menjelaskan langkah-langkah mendesain sebuah menu website. Saya menggunakan Adobe Fireworks, software yang sudah saya pakai ± 3 tahun untuk mendesain website. Desain menu yang kita akan kita bahas ini bergaya modern. Sebagai referensi / inspirasi silahkan baca:

• Navigation Menus: Trends and Examples
• 50 Beautiful And User-Friendly Navigation Menus

Hasil akhirnya:

Langkah Langkah sebagai berikut:

Langkah #1. Pertama-tama buatlah sebuah bar dengan “Rectangle Tool”

Langkah #2. Kemudian pilih [Gradient] – [Linear] – atur 2 warna gradasinya.

Langkah #3. Buatlah 2 buah garis horisontal, masing-masing height :1pixel. Salah satu berwarna lebih terang dan lainnya berwarna lebih gelap. Letakan kedua garis tersebut di bagian bawah bar. Untuk menghemat waktu, copy-paste 2 garis tadi lalu letakkan pula diatas bar.

Langkah #4. Ketikkan menu item yang diinginkan

Langkah #5. Sekarang kita harus membuat pemisah antara setiap menu item. Langkahnya serupa dengan #3, yaitu membuat 2 garis, salah satu berwarna lebih terang dan lainnya berwarna lebih gelap, hanya saja kali ini dengan posisi vertikal, masing-masing width:1pixel.

Langkah #6. Kita akan mulai membuat efek mouse hover.
Buatlah bar, menyerupai langkah #1 dengan width yang menyesuaikan salah satu menu item.

Langkah #7. Kemudian pilih [Gradient] – [Linear] – atur 2 warna gradasinya. Catatan: warna lebih gelap dari bar langkah #1.

Langkah #8. Membuat efek shadow sebanyak 2 kali, langkahnya sbb: [Filter] – [Shadow & Glow] – [Inner Glow].

Begini hasil sementara:

Langkah #9. Sentuhan akhir adalah dengan memberi efek shadow yang diletakkan di bawah dan diatas menu bar.

Hasil akhirnya:

Sebuah design menu website sudah selesai!

Download file hasil akhir format .PNG Fireworks

ps: artikel selanjutnya akan dijelaskan tutorial mengubah desain menu ini menjadi css & xhtml