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.
Berikut adalah interface menu yang akan kita buat. Klik pada gambar untuk melihatnya di ukuran 100%.
Buat shape dasar interface dengan rounded rectangle. Gunakan radius 5 px. Beri layer style berikut.
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.
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.
Buat teks menu dan beri Drop Shadow untuk memberi efek letterpress.
Ulangi proses ini untuk memberi lebih banyak teks di menu.
Kita juga perlu mendefinisikan link aktif yang akan membedakannya dari link biasa. Tutupi link aktif dengan shape rectangle hitam dan beri Gradient Overlay.
Di atasnya beri teks kali ini dengan warna putih dan Drop Shadow hitam.
Buat kotak pencarian dengan tool rounded rectangle. Gunakan nilai radius yang besar agar kedua ujungnya bulat. Beri layer style berikut.
Buat ikon search berbentuk kaca pembesar sederhana berwarna hitam lalu putar sekitar 15 derajat. Beri layer style berikut.
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.
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.
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
Berikut adalah interface menu yang akan kita buat. Klik pada gambar untuk melihatnya di ukuran 100%.
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.
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.
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.
Langkah 4: Menambah Teks Link
Buat teks menu dan beri Drop Shadow untuk memberi efek letterpress.
Langkah 5
Ulangi proses ini untuk memberi lebih banyak teks di menu.
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.
Langkah 7
Di atasnya beri teks kali ini dengan warna putih dan Drop Shadow hitam.
Langkah 8: Search
Buat kotak pencarian dengan tool rounded rectangle. Gunakan nilai radius yang besar agar kedua ujungnya bulat. Beri layer style berikut.
Langkah 9
Buat ikon search berbentuk kaca pembesar sederhana berwarna hitam lalu putar sekitar 15 derajat. Beri layer style berikut.
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.
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.
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.
