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