Membuat Desain Interface Menu Bergaya Apple

Dalam tutorial ini kita akan membuat interface menu serupa situs Apple. Interface Apple ini khas karena sangat minimalis dengan area white space yang luas. Sebelum mengikuti tutorial ini, saya sarankan Anda untuk berkunjung terlebih dahulu ke situs Apple dan mengamati langsung desainnya.

Preview

Berikut adalah interface menu yang akan kita buat. Klik pada gambar untuk melihatnya di ukuran 100%.

preview.jpg

Detail Tutorial:

  • Tingkat kesulitan: Dasar, Menengah
  • Lama pengerjaan: 20 menit
  • Program: Photoshop

Tutorial

Langkah 1: Bentuk Dasar Interface

Buat shape dasar interface dengan rounded rectangle. Gunakan radius 5 px. Beri layer style berikut.

tutorial-interface-menu-apple-01.jpg
tutorial-interface-menu-apple-02.jpg
tutorial-interface-menu-apple-03.jpg
tutorial-interface-menu-apple-04.jpg

Langkah 2: Ikon Home

Kita akan membuat ikon home sendiri di Photoshop. Sederhana sekali, kita tinggal menggabungkan bentuk rectangle dan segitiga. Gunakan pilihan subtract dan add untuk memperoleh bentuk rumah. Perhatikan bahwa dalam gambar di bawah, opacity layer diturunkan ke 0% agar path mudah dilihat.

tutorial-interface-menu-apple-05.jpg
tutorial-interface-menu-apple-06.jpg
tutorial-interface-menu-apple-07.jpg
tutorial-interface-menu-apple-08.jpg

Langkah 3: Pemisah

Buat tiga garis dengan warna putih, hitam, putih di layer terpisah. Atur opacity-nya ke 10%, 30% dan 10%. Simpan ketiga layer ini dalam sebuah group agar mudah diduplikasi.

tutorial-interface-menu-apple-09.jpg
tutorial-interface-menu-apple-10.jpg
tutorial-interface-menu-apple-11.jpg

Langkah 4: Menambah Teks Link

Buat teks menu dan beri Drop Shadow untuk memberi efek letterpress.

tutorial-interface-menu-apple-12.jpg
tutorial-interface-menu-apple-13.jpg

Langkah 5

Ulangi proses ini untuk memberi lebih banyak teks di menu.

tutorial-interface-menu-apple-14.jpg

Langkah 6: Link Aktif

Kita juga perlu mendefinisikan link aktif yang akan membedakannya dari link biasa. Tutupi link aktif dengan shape rectangle hitam dan beri Gradient Overlay.

tutorial-interface-menu-apple-15.jpg
tutorial-interface-menu-apple-16.jpg
tutorial-interface-menu-apple-17.jpg

Langkah 7

Di atasnya beri teks kali ini dengan warna putih dan Drop Shadow hitam.

tutorial-interface-menu-apple-18.jpg
tutorial-interface-menu-apple-19.jpg

Langkah 8: Search

Buat kotak pencarian dengan tool rounded rectangle. Gunakan nilai radius yang besar agar kedua ujungnya bulat. Beri layer style berikut.

tutorial-interface-menu-apple-20.jpg
tutorial-interface-menu-apple-21.jpg
tutorial-interface-menu-apple-22.jpg

Langkah 9

Buat ikon search berbentuk kaca pembesar sederhana berwarna hitam lalu putar sekitar 15 derajat. Beri layer style berikut.

tutorial-interface-menu-apple-23.jpg
tutorial-interface-menu-apple-24.jpg
tutorial-interface-menu-apple-25.jpg
tutorial-interface-menu-apple-26.jpg

Langkah 10

Beri tulisan search di samping ikon. Jangan gunakan warna yang terlalu kontras seperti hitam dan jangan memberinya efek khusus. Kita harus membuat tulisan ini sesederhana mungkin untuk mempertahankan konsep minimalis dan menghindari konflik dengan teks di menu.

tutorial-interface-menu-apple-27.jpg

Langkah 11

Sebagai pemanis, saya buat sedikit bayangan di bawah menu. Buat seleksi dengan tool marquee ellipse lalu isi dengan hitam. Haluskan bayangan dengan memberinya filter Gaussian Blur.

tutorial-interface-menu-apple-28.jpg
tutorial-interface-menu-apple-29.jpg

Hasil Akhir

Di bawah adalah hasil akhir interface yang kita peroleh. Klik pada gambar untuk melihatnya pada ukuran 100%.

Seperti bisa Anda lihat dalam tutorial ini, kita banyak bekerja dengan detail kecil hingga 1 px. Inilah satu hal yang membedakan proses desain untuk cetak dan web. Dalam desain cetak, kita bekerja dalam ukuran cm yang bisa berarti ratusan ratusan pixel sehingga 1 px tidaklah begitu signifikan penting. Dalam desain web 1 px memiliki efek signifikan dalam layar.

preview
Iklan

12 thoughts on “Membuat Desain Interface Menu Bergaya Apple

  1. Ya Jir. Ada banyak permintaan untuk menggambar desain interface, permintaan pasar tinggi dan persaingannya rendah. Kalau desain web, seperti yang ini, ini sekadar latihan saja. Sudah terlalu banyak desainer web yang bagus, ga akan mampu bersaing.

  2. Desain menu di blog saya juga mengacu kesana Mas, tapi saya buat menggunakan CSS3. Memang belum begitu sempurna & lama pengerjaannya 2 hari…he..he..he…..

  3. Sekarang postingnya ada penambahan keterangan Detail Tutorial-nya kayak di buku, Mas Jeprie? Kalau Tingkat kesulitan masih Dasar, Menengah, ini masih kelas saya. Ha Ha Ha 😀

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s