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.

Preview

Berikut adalah hasil akhir yang diperoleh.

final.png

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.

Link Tutorial

Iklan

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.

Preview

Inilah tampilan interface yang akan kita peroleh.

final.jpg

Detail Tutorial

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

Resource yang Dibutuhkan

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

Lanjutkan membaca Mendesain Interface Tampilan Waktu dan Cuaca Terinspirasi Android

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. Dari informasi yang saya peroleh, Photoshop CS6 Beta masih tersedia gratis hingga akhir Mei.

Preview

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

final-large.jpg

Detail Tutorial

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

Resource yang Dibutuhkan

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

Lanjutkan membaca Menggambar Grafik Garis di Photoshop CS6

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+.

Preview

Berikut adalah hasil akhir yang diperoleh.

final-large.jpg

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.

Link Tutorial

Mendesain Interface Menu Modern

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

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.

Preview

Berikut adalah hasil yang akan kita peroleh.

final-large.jpg

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

Lanjutkan membaca Mendesain Interface Menu Modern

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.

Preview

Berikut adalah hasil akhir yang diperoleh.

final.jpg

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.

Link Tutorial

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.

Preview

Berikut adalah hasil akhir yang diperoleh.

final.jpg

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.

Link Tutorial

Tutorial ini ditulis ekslusif untuk Psdtuts+.

Mendesain Interface Video Game dengan Photoshop

Ini adalah tutorial terbaru untuk PSDtuts+. Dalam tutorial ini, saya akan membahas cara pembuatan interface video game. Dalam membuat interface ini, saya mengambil referensi dari beberapa game multiplayer populer seperti Age of Empires, Starcraft, dan The Settlers.

Hasil Akhir

tutorial-mendesain-interface-video-game-1.jpg

Sebagian Langkah dalam Tutorial

Dalam tutorial ini saya membahas banyak teknik desain interface. Semua dijelaskan dengan sangat lengkap termasuk detail satu pixel.

Link Tutorial

Head Up Display (HUD) Terinspirasi dari Film

Head Up Display (HUD) adalah layar transparan yang memungkinkan melihat informasi tanpa perlu mengalihkan mata ke tempat lain. Head Up Display digunakan pertama kali dalam layar pesawat. Ini membantu pilot sehingga bisa tetap fokus pada area di depannya tanpa melihat ke bawah ketika menjalankan pesawat.

Kini, HUD dikembangkan juga dalam video game. HUD menjadi bagian dari sistem informasi karakter game, misalnya kesehatan, skor, level, dan pemilihan senjata. HUD makin populer setelah digunakan dalam sistem pengendalian robot di film Iron Man. Sebelum di Iron Man, HUD canggih juga sempat digunakan Tom Cruise dalam film Minority Report.

HUD Terinspirasi Dari Iron Man

Film Iron Man diambil dari komik Marvel dengan judul sama. Menceritakan seorang miliuner yang berubah menjadi super hero berkat baju besi berteknologi tingginya.

Iron Man HUD Effect

Dalam adegan ini, teman Tony Stark (saya tidak tahu namanya), menggunakan kostumnya untuk pertama kali.

Koleksi Head Up Display (HUD) Terinspirasi dari Iron Man

Iron Man HUD

Klip potongan film Iron Man. Dalam adegan ini, Tony Stark berada di dalam baju Iron Man.

AWESOME Augmented reality Glasses “StarkHUD 2020” from FUJIKAWA

Video ini merupakan salah satu iklan untuk film Iron Man, memperlihatkan interface HUD di dalam kaca mata.

Iron Man Part 1 & 2

Di sini dijelaskan penjelasan proses di bayar layar pembuatan HUD Iron Man langsung dari pembuatnya.

After Effects: Heads Up Display

HUD buatan fans Iron Man. Dibuat menggunakan Adobe After Effects.

HUD – Ironman

HUD buatan fans Iron Man.

Iron Man HUD Effect

HUD buatan fans Iron Man.

HUD Terinspirasi Dari Minority Report

Minority Report adalah salah satu film fiksi ilmiah terbaik yang pernah dibuat. Ceritanya diambil dari novel Phillip K. Dick, dengan sutradara Steven Spielberg, dan pemain utama Tom Cruise.

Interactive UI in Minority Report

Di ruangan inilah Tom Cruise melacak kejahatan di masa depan.

Minority Report E-Newspaper

Dalam adegan ini, bahkan HUD muncul dalam koran.

Minority Report – Iris Identification

After Effects Minority Report Interface HUD

HUD mirip Minority Report dibuat dengan After Effect.

Teknologi HUD dalam Kehidupan Nyata

HUD canggih yang ditampilkan dalam film Minority Report dan Iron Man bukanlah sesuatu yang mustahil. Prototipe HUD dengan kerumitan menyamai di film sudah muncul.

SIGGRAPH 2007 Minority report screen

Microsoft Surface Demo @ CES 2008

Layar sentuh dari Microfot. Layar ini bisa terhubung dengan objek lainnya. Misalnya, jika digunakan di rumah makan, layar ini bisa mendata isi gelas dan langsung menyatukannya ke dalam tagihan.

Minority Report interface prototype

g-speak – minority report os demo

Minority Report at CeBIT 2008

Crazy Multi-Input Touch Screen

PointScreen – Minority Report Style Interface

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

Lanjutkan membaca Membuat Desain Interface Menu Bergaya Apple