Mendesain Aplikasi Email iOS7 di Photoshop

Tutorial ini akan memperlihatkan cara mendesain aplikasi email di iOS7 yang terkenal dengan gaya flat-nya. Desain ini dibuat di Photoshop menggunakan standar aplikasi iOS7 sesuai ketentuan dari Apple. Desain terinspirasi oleh aplikasi gmail.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Aplikasi Email iOS7 di Photoshop

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam desain interface. Dimulai dari sketsa, mendesain ikon satu per satu, lalu menempatkan setiap elemen secara manual mengikuti aturan standar iOS7. Di bawah adalah beberapa langkah dalam tutorial.

Mendesain Aplikasi Email iOS7 di Photoshop
Mendesain Aplikasi Email iOS7 di Photoshop
Mendesain Aplikasi Email iOS7 di Photoshop
Mendesain Aplikasi Email iOS7 di Photoshop
Mendesain Aplikasi Email iOS7 di Photoshop
Mendesain Aplikasi Email iOS7 di Photoshop

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Mendesain Interface Tampilan Waktu dan Cuaca Terinspirasi Android

Sekarang kita akan coba mendesain display interface jam dan cuaca yang ada di HP Android. Kita akan menggunakan vektor shape dan layer styles untuk menghasilkan bentuk dasar interface. Kita juga akan menggambar manual dengan tool Brush dan Smudge untuk membuat ikon matahari tertutupi awan.

[hr]

Preview

Inilah tampilan interface yang akan kita peroleh.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Vektor Shape, Layer Style
  • Lama Pengerjaan: 30 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

[hr]

Tutorial

Langkah 1: Latar Display

Mulai dengan membuat sebuah shape rounded rectangle untuk dasar display dengan radius 10 px. Gunakan warna #242424. Tambahkan Inner Shadow, Inner Glow, Gradient Overlay, dan Outer Glow.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 2

Turunkan Fill layer ke 50%. Dengan cara ini, kita bisa membuatnya semi transparan. Latar di belakangnya akan terlihat sebagian.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 3

Buat lagi shape yang sama namun lebih pendek. Tambahkan Gradient Overlay.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Turunkan Fill layer ke 0%. Ini akan menjadikannya kilauan di bagian atas dasar display.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 4: Jam

Buat sebuah rounded rectangle dengan warna putih. Duplikasi (Ctrl + J) dan sembunyikan shape asli..

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 5

Aktifkan tool pen lalu klik dua titik paling bawah untuk menghapusnya.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 6

Alt-klik untuk mengubah kedua titik menjadi titik tajam dan menghasilkan garis lurud di bagian bawah shape.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 7

Geser garis ke atas sehingga setengah dari tinggi semula.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 8

Tambahkan Inner Shadow dan Gradient Overlay.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 9

Turunkan Fill layer ke 0%.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 10

Munculkan kembali shape asli yang menjadi latar jam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 11

Ulangi proses yang sama untuk bagian bawah latar jam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Seperti ini hasil yang kita peroleh.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 11

Simpan ketiga shape ke layer grup. Di CS6 tekan Ctrl + J untuk menduplikasinya. Di versi sebelumnya, Anda perlu menggesernya ke atas ikon New Layer. Simpan di bawah shape asli. Seleksi titik-titik paling atas dengan tool Direct Selection lalu geser ke atas 3 px. Ulangi juga pada titik paling bawah dengan menggesernya 3 px ke bawah.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 12

Ulangi kembali pada shape terakhir sehingga ada 3 lapis shape.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 13

Ctrl-klik shape terakhir.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 14

Buat layer baru dan simpan di belakang latar jam. Isi layer dengan hitam. Hilangkan seleksi dengan menekan Ctrl + D. Klik Filter > Blur > Gaussian Blur untuk menghaluskan bayangan.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 15

Ctrl-klik latar utama display.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 16

Klik ikon Add Layer Mask untuk menyembunyikan bayangan di luar latar display.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 17

Tambahkan teks untuk informasi jam dengan warna hitam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 18

Tambahkan Gradient Overlay. Atur gradasi warnanya hitam-putih-hitam-putih dengan posisi setepat mungkin sehingga perubahan gradasi tepat berada di tengah teks.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Di gambar ini, titik warna yang saya gunakan dalam gradasi ini berada di posisi 0%, 44%, 48%, dan 100%.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 19

Tambahkan Inner Shadow dan Drop Shadow.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Ini akan memberi kesan teks menjorok ke dalam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 20

Dengan tool Pencil, gambar garis hitam dan putih 1 px di layer terpisah tepat memotong teks.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 21

Turunkan Opacity kedua layer hingga diperoleh efek inset.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Tampilan di perbesaran 100%.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 22: Ikon Cuaca

Untuk memudahkan, kita sembunyikan dulu jam. Aktifkan tool brush, lalu load brush awan. Pastikan warna depan diisi dengan putih. Klik beberapa kali hingga diperoleh bentuk awan.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 23

Selanjutnya menggambar matahari. Buat shape dengan warna orange di belakang awan.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 24

Aktifkan tool Brush dengan Opacity rendah. Tambahkan layer mask lalu lukis bagian tengah bawah lingkaran dengan hitam.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 25

Tambahkan Inner Shadow, Inner Glow, dan Outer Glow. Inner Shadow menggunakan warna putih dengan mode Color Dodge untuk memperkuat efek kilauan bercahaya di dalam shape.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Di Blending Options, aktifkan Layer Mask Hides Effects agar Layer Style disembunyikan oleh layer mask.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 27

Lukis orange gelap di belakang matahari untuk membuat intinya semakin panas menyala.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 28

Lukis orange gelap di sekeliling matahari. Lukis juga garis-garis tipis dengan tool brush lembut.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 29

Gunakan tool Smudge untuk menggeser pixel ke luar menjauhi matahari dan menghasilkan sunflare.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 30

Lukis detail-detail lain yang diperlukan.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

Langkah 31

Tampilkan jam. Simpan ikon matahari berawan di atas jam. Tambahkan informasi nama tempat dan tanggal. Beri Drop Shadow hitam pada teks agar lebih mudah dibaca.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android
Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

[hr]

Hasil Akhir

Berikut adalah tampilan display jam dan cuaca dengan gambar latar.

Mendesain Interface Waktu Tampilan Waktu dan Cuaca Terinspirasi Android

[hr]

Download Link

[ilink style=”download” url=”http://psdfreemium.com/android-inspired-time-and-weather-display/”%5DDownload File PSD[/ilink].

Menggambar Grafik Garis di Photoshop CS6

Photoshop CS6 memiliki beberapa fitur baru yang banyak berguna bagi para desainer interface. Salah satu yang paling menonjol adalah vektor shape yang kini benar-benar dalam format vektor seperti di Illustrator. Dalam tutorial ini, kita akan belajar menggunakan beberapa fitur baru di CS6 untuk menggambar sebuah grafik garis.

[box type=”info”]Dari informasi yang saya peroleh, Photoshop CS6 Beta masih tersedia gratis hingga akhir Mei.[/box]

[hr]

Preview

Di bawah adalah gambar grafik garis yang akan kita buat di Photoshop.

[hr]

Detail Tutorial

  • Tingkat Kesulitan: Menengah
  • Software yang Digunakan: Adobe Photoshop CS6
  • Teknik yang Dipelajari: Vector Shape, Pharagraph Styles
  • Lama Pengerjaan: 45 menit

[hr]

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

[hr]

Tutorial

Langkah 1: Menyiapkan Kanvas

Buat file baru dengan ukuran 700 px × 600 px.

Menggambar Grafik Garis di Photoshop CS6

Langkah 2: Background

Klik ikon lingkaran hitam dan putih untuk membuka Adjustment Layer baru. Pilih Solid Color.

Menggambar Grafik Garis di Photoshop CS6

Pilih warna abu-abu terang.

Menggambar Grafik Garis di Photoshop CS6

Langkah 3

Klik ganda layer dan tambahkan Pattern Overlay dengan pola pixel dari PSDfreemium.

Menggambar Grafik Garis di Photoshop CS6

Di bawah adalah tampilan latar dalam perbesaran 100%.

Menggambar Grafik Garis di Photoshop CS6

Langkah 4

Buka panel Preferences (Ctrl + K). Pastikan terpilih Snap Vector Tools di bagian awal kotak dialog. Fitur ini akan memungkinkan semua tool untuk tepat pada pixel, sehingga tidak akan ada setengah pixel dan memberikan hasil yang sangat akurat.

Menggambar Grafik Garis di Photoshop CS6

Langkah 5: Latar Grafik

Buat shape rounded rectangle. Di baris pilihan pilih Fill: putih dan Stroke: #c3c3c3 dengan Size 1 pt. Perhatikan bahwa secara otomatis, bentuk vektor shape akan langsung menempel pada pixel sehingga sisinya tidak buram.

Menggambar Grafik Garis di Photoshop CS6

Aktifkan Outer Glow.

Menggambar Grafik Garis di Photoshop CS6
Menggambar Grafik Garis di Photoshop CS6

Langkah 6: Judul

Tambahkan judul di bagian atas latar.

Menggambar Grafik Garis di Photoshop CS6

Langkah 7: Menggambar Sumbu Grafik

Aktifkan tool Line dan pilih Weight 2 px untuk membuat garis vertikal selebar 2 px. Di baris pilihan, pilih Fill: #d1d1d1 dengan Stroke: None.

Menggambar Grafik Garis di Photoshop CS6

Langkah 8

Tahan Shift. Lakukan hal yang sama, kali ini secara horizontal. Sekali lagi, Anda bisa melihat bahwa garis tetap pada pixel grid, tidak ada sisi yang buram.

Menggambar Grafik Garis di Photoshop CS6

Langkah 9: Menggambar Grid

Buat garis vertikal 1 px dengan jarak 40 px dari sumbu y.

Menggambar Grafik Garis di Photoshop CS6

Langkah 10

Seleksi garis dengan tool Path Selection. Tekan Ctrl + Alt + T untuk menduplikasi sekaligus mentransformasi garis. Geser 40 px ke kanan dengan cara tekan Shift + panah kanan empat kali.

Menggambar Grafik Garis di Photoshop CS6

Langkah 11

Ulangi proses duplikasi dan transformasi dengan menekan Ctrl + Shift + Alt + T. Lakukan hingga seluruh area grafik dipenuhi garis vertikal.

Menggambar Grafik Garis di Photoshop CS6

Langkah 12

Ulangi proses yang sama, kali ini horizontal dengan jarak 20 px dari sumbu x.

Menggambar Grafik Garis di Photoshop CS6

Langkah 13

Pilih Stroke #dadada dan aktifkan Dashed Line.

Menggambar Grafik Garis di Photoshop CS6

Langkah 14

Duplikasi dan transformasi garis hingga diperoleh grid seperti di bawah.

Menggambar Grafik Garis di Photoshop CS6

Langkah 15

Buka panel Paragraph Styles dan tambahkan style baru.

Menggambar Grafik Garis di Photoshop CS6

Langkah 16

Klik ganda style untuk mengeditnya.

Menggambar Grafik Garis di Photoshop CS6
Menggambar Grafik Garis di Photoshop CS6

Langkah 17

Buat teks untuk penanda bulan di sumbu x. Pastikan teks masih terpilih lalu klik style untuk mengaplikasikan style tersebut.

Menggambar Grafik Garis di Photoshop CS6

Langkah 18

Buat juga Paragraph Style untuk angka di sumbu y.

Menggambar Grafik Garis di Photoshop CS6

Langkah 19

Jadi, apa fungsi style? Jika berpengalaman dengan software publishing semacam InDesign, Anda akan tahu bahwa style berperan penting untuk menghasilkan setting tipografi yang konsisten. Dengan style, kita cukup mengubah style untuk mengubah semua teks yang menggunakan style tersebut.

Dalam contoh di bawah, font dalam Paragraph Style bulan diubah ke Bebas dan secara otomatis semua teks bulan berubah.

Menggambar Grafik Garis di Photoshop CS6

[box type=”note”]Perlu diketahui bahwa proses editing style –baik paragraf dan karakter– di CS6 beta sangat lambat. Kadang Anda perlu menunggu sampai beberapa menit dan selama itu Photoshop terlihat macet.[/box]

Langkah 20: Mulai Menggambar Garis

Aktifkan tool Line dengan Weight 3 px. Ubah warna fill dan kosongkan Stroke. Klik dan geser untuk menambah garis baru.

Menggambar Grafik Garis di Photoshop CS6

Langkah 21

Shift-drag untuk menambah segmen garis baru.

Menggambar Grafik Garis di Photoshop CS6

Langkah 22

Buat shape lingkaran baru dengan warna Stroke sama seperti garis dan Fill sama seperti warna latar grafik.

Menggambar Grafik Garis di Photoshop CS6

Tambahkan Stroke putih dengan posisi di luar.

Menggambar Grafik Garis di Photoshop CS6

Di bawah adalah tampilan dalam 100%.

Menggambar Grafik Garis di Photoshop CS6

Langkah 23

Alt-drag untuk menduplikasi path.

Menggambar Grafik Garis di Photoshop CS6
Menggambar Grafik Garis di Photoshop CS6

Langkah 24

Terus duplikasi lingkaran hingga diperoleh cukup titik di setiap segmen garis.

Menggambar Grafik Garis di Photoshop CS6

Langkah 25

Buat lebih banyak segmen garis dengan warna berbeda. Di bagian atas buat legenda grafik berupa garis sederhana diikuti keterangan namanya.

Menggambar Grafik Garis di Photoshop CS6

Langkah 26: Navigasi

Buat shape persegi di belakang latar grafik.

Menggambar Grafik Garis di Photoshop CS6

Langkah 26

Aktifkan tool Polygon dengan Sides: 3. Buat sebuah segitiga di atas kotak. Buat lagi navigasi yang sama untuk sisi sebaliknya.

Menggambar Grafik Garis di Photoshop CS6

Hasil Akhir

Di tutorial ini, Anda baru saja mempelajari fitur baru Vektor Shape dan Paragraph Styles di Photoshop CS6. Tentu saja, masih ada fitur baru lainnya yang perlu dipelajari.

Di bawah adalah hasil akhir tutorial yang kita peroleh.

[hr]

Download Link

[ilink style=”download” url=”http://psdfreemium.com/line-graph-psd-cs6/”%5DDownload File PSD[/ilink]

Mendesain Interface Aplikasi Twitter

Dalam tutorial ini, saya akan memperlihatkan proses pembuatan interface twitter secara detail dengan sangat perhatian pada setiap pixelnya. Tutorial ini adalah hasil kolaborasi dengan Syarip Yunus dan ditulis ekslusif untuk Psdtuts+.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam desain interface. Di bawah adalah beberapa langkah dalam tutorial.

Mendesain Interface Aplikasi Twitter
Mendesain Interface Aplikasi Twitter
Mendesain Interface Aplikasi Twitter
Mendesain Interface Aplikasi Twitter
Mendesain Interface Aplikasi Twitter
Mendesain Interface Aplikasi Twitter
Mendesain Interface Aplikasi Twitter
Mendesain Interface Aplikasi Twitter

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Mendesain Interface Menu Modern

[box type=”info”]

Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.

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
7. Pemenang Kuis Panduan Mudah Desain Web Profesional
[/box]

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

Preview

Berikut adalah hasil yang akan kita peroleh.

[hr]

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

[hr]

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

[hr]

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.

[hr]

Download Link

[ilink style=”download” url=”https://desaindigital.com/wp-content/uploads/2012/03/tutorial-membuat-interface-menu-modern/timeline-menu.zip”%5DDownload File PSD[/ilink]

Mendesain Interface Video Player Minimalis dan Futuristik

Trend interface saat ini sangat minimalis, fungsional, dan penuh dengan detail-detail tajam. Trend ini bukan saja terlihat professional, yang paling penting adalah memberi kesan dapat diandalkan, dan itulah dicari setiap orang. Oleh karena itu, saya akan menunjukkan langkah demi langkah cara pembuatan sebuah interface video player bertema minimalis. Tutorial ini ditulis ekslusif untuk Hongkiat.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Interface Video Player

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam mendesain objek. Di bawah adalah beberapa langkah dalam tutorial.

Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player
Mendesain Interface Video Player

[hr]

Link Tutorial

[unordered_list style=”bullet”]

[/unordered_list]

Mendesain Skin Player MP3

Ini adalah tutorial terbaru saya untuk PSDtuts+. Dalam tutorial ini, kita akan mendesain skin MP3 player dengan tampilan bersih dan minimalis. Dalam prosesnya, kita akan menggambar secara manual dan menggunakan banyak layer styles.

[hr]

Preview

Berikut adalah hasil akhir yang diperoleh.

Mendesain Skin Player MP3

[hr]

Sebagian Langkah dalam Tutorial

Tutorial ini sangat detail dan membahas banyak teknik yang umum digunakan dalam desain interface. Di bawah adalah beberapa langkah dalam tutorial.

Mendesain Skin Player MP3
Mendesain Skin Player MP3
Mendesain Skin Player MP3
Mendesain Skin Player MP3
Mendesain Skin Player MP3
Mendesain Skin Player MP3
Mendesain Skin Player MP3
Mendesain Skin Player MP3
Mendesain Skin Player MP3

[hr]

Link Tutorial

Tutorial ini ditulis ekslusif untuk Psdtuts+.
[unordered_list style=”bullet”]

[/unordered_list]