Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Interface Design

Menciptakan antarmuka Mobile Downloader App di Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Heri Abdi (you can also view the original English article)

Photoshop adalah aplikasi luar biasa untuk membuat mockup untuk aplikasi seluler. Alat vektornya, dikombinasikan dengan efek Layer Style, memungkinkan desainer untuk dengan cepat membuat layout untuk proyek mereka. Dalam tutorial ini, saya akan menunjukkan cara membuat desain aplikasi pengunduh untuk iPhone, di Photoshop. Setelah selesai, Anda akan memiliki pemahaman yang baik tentang cara membuat elemen antarmuka modern, serta, grafik dan grafik di Photoshop. Ayo mulai!

Tutorial aset

Anda membutuhkan aset berikut untuk menyelesaikan tutorial ini. Silakan unduh sebelum Anda mulai. Jika tidak tersedia, silakan cari alternatif.

1. Buat dokumen baru

Langkah 1

Mulailah dengan membuat file baru (File> New) 640 x 1136px, dimensi standar untuk desain retina iPhone 5. Memetakan pedoman; 20px di kedua sisi aplikasi untuk membantu Anda menyelaraskan elemen. Dokumen Anda akan terlihat seperti ini.

2. Buat Struktur Latar Belakang

Pada langkah ini kita akan membuat struktur latar belakang dasar untuk aplikasi. Jika Anda melihat desainnya, Anda akan melihat bahwa ia dipecah menjadi tiga area, Top Bar, Area Konten Utama, dan Area Rincian Bawah.

46

Langkah 1

Pilih Rectangle Tool (U) dan gambar persegi panjang mulai dari bagian atas dokumen yang tingginya 120px. Gunakan Windows Info (F5) untuk melihat dimensi bentuk.

68

Ini akan menjadi Top Bar. Beri nama layer TopBar BG. Ubah warnanya menjadi # 1a242c.

69

Pergi ke Panel Layers (F7) dan klik kanan pada layer dan pilih Blending Options. Pilih Drop Shadow dan letakkan drop shadow 2px, Angle hingga 90 derajat dengan warna # 2b3642.

Menambahkan drop shadow kecil seperti itu mungkin terasa sia-sia, tetapi saya sangat percaya bahwa itu adalah detail yang lebih kecil yang membuat perbedaan

70
Desain Anda sekarang akan terlihat seperti ini.

Langkah 2

Kami sekarang akan membuat area konten utama. Menggunakan proses yang sama dengan Top Bar, buat bentuk menggunakan Rectangle Tool (U) yang lebar 640px dengan tinggi 620px.

Gunakan color picker dan pilih # 222c36. Beri nama layer Konten Utama BG.

71

Selanjutnya pergi ke dialog Layer Styles lagi dan pilih drop shadow yang jaraknya 8px, Spread 100%, sudut 90 derajat, dengan warna # 2b3642.

Posisikan bentuk latar belakang konten utama langsung di bawah Top Bar. Letakkan 2px bentuk konten utama di bawah lapisan Top Bar sehingga Anda dapat melihat drop shadow Top Bar.

Jadi, struktur utama harus mulai terbentuk sekarang.

72

Langkah 3

Bar bagian bawah dapat dibuat sama seperti yang lain. Buat bentuk persegi panjang diposisikan langsung di bawah bentuk latar belakang konten utama yang lebar 640px dan tinggi 336px. Pilih warna #19222a. Beri nama layer Bottom BG.

73

Sekali lagi, pastikan untuk memposisikan layer secara langsung di bawah layer konten utama sehingga Anda dapat melihat drop shadow dari layer di atas. Desain Anda akan terlihat seperti ini:

3. Bilah Navigasi Teratas

Mari kita pindah ke Top Bar.

Langkah 1

Buka file PSD iOS7 GUI PSD (iPhone) yang disediakan di Aset Tutorial. Ambil bilah status putih, dan letakkan dengan menyeret dan menjatuhkannya di atas kanvas. Posisikan lapisan bilah status di bagian atas.

Langkah 2

Buka file PSD Ikon Tambahan yang disediakan dalam Aset Tutorial. Selanjutnya, seret dan jatuhkan ikon navigasi kiri (ikon 3 batang) dari ikon tambahan PSD. Dengan menggunakan panduan 20px di kedua sisi, posisikan ikon navigasi kiri sejalan dengan panduan padding 20px kiri.

Langkah 3

Selanjutnya, seret ikon pengaturan dari ikon tambahan PSD, ke dalam desain Anda dan posisikan itu di sebelah kanan kanvas, lagi menggunakan panduan bantalan 20px. Top Bar Anda sekarang telah selesai.

4. Area Konten Utama

Area konten utama mungkin terlihat rumit tetapi jika Anda melihatnya dengan cermat, itu hanya serangkaian lingkaran. Mari kita fokus pada kelompok yang lebih besar terlebih dahulu.

Langkah 1

Buat lingkaran dengan lebar 506px dengan tinggi 506px. Beri nama layer Circle 1. Sekali lagi, gunakan Window info (F5) untuk memastikan Anda memiliki dimensi yang benar. Ini akan menjadi lingkaran latar belakang. Dari color picker, pilih # 19222a sebagai warna bentuk. Pusatkan lingkaran dan posisikan 40px di bawah Top Bar.

57

Pergi ke Panel Layers (F7) dan klik kanan pada layer dan pilih Blending Options. Pilih Drop Shadow dan letakkan drop shadow 1px, Sudut 90 derajat dengan warna # 2b3642.

49

Ini adalah efek yang sama yaitu pada bentuk Top Bar. Memiliki sentuhan kecil serupa seperti ini di seluruh aplikasi menciptakan konsistensi dan menambah kesempurnaan desain jadi.

Langkah 2

Lingkaran selanjutnya adalah lebar 436px kali 436px dan diposisikan di tengah lingkaran yang lebih besar. Beri nama layer Circle 2. Dari color picker pilih # 2b3642 sebagai warna bentuk.

Langkah 3

Lingkaran lain kemudian dibuat pada lebar 385px dengan tinggi 385px. Dari warna picker pilih #222c36 sebagai bentuk warna. Namai layer ini Circle 3.

58

Selanjutnya pergi ke Blending Options untuk layer lingkaran dan pilih Inner Shadow. Ubah Opacity menjadi 5%, Jarak ke 30px dan Ukuran ke 40px Dari color picker, pilih # 000000 untuk warna Inner Shadow. Lihat di bawah ini untuk efek yang tepat.

Seperti yang Anda lihat, area tersebut mulai terbentuk sekarang

Langkah 4

Lingkaran berikutnya mungkin yang paling sulit untuk dieksekusi Ini adalah indikator kemajuan oranye. Buat lingkaran dengan lebar 458px kali 458px tinggi dan letakkan di tengah lingkaran. Beri nama layer ini Circle 4.

59

Pergi ke Blending Options dan tambahkan 45px Inner Stroke. Pilih gradien untuk goresan sesuai warna heks di bawah ini:

Sekarang ubah isian Circle 4 menjadi 0%.

56

Langkah 5

Sekarang ubah isian Circle 4 ke Next, konversikan layer ke objek pintar dengan pergi ke Layer> Smart Object> Convert to Smart Object.  

Setelah layer telah dikonversi menjadi objek pintar, letakkan drop shadow pada layer Circle 4. Pilih warna # 000000, Opacity pada 20%, Jarak 20px dan Ukuran pada 80px. Lihat di bawah untuk detail yang tepat:

Langkah 6

Ok, selanjutnya kita harus memutuskan berapa persentase indikator kemajuan oranye. Ini dibuat dengan menggunakan Layer Mask. Di bilah alat, pilih Polygonal Lasso Tool (L)

Dari tengah layer Circle 4 buat seleksi yang mirip dengan gambar di bawah ini.

Setelah Anda puas dengan pilihan, buat Layer Mask dengan pergi ke Layer> Layer Mask> Hide Selection

Langkah 7

Sekarang pilih Type Tool (T) dan pilih pusat area lingkaran dan ketik "62" dengan atribut berikut:

  • Font: Arial Black
  • Ukuran: 100pt
  • Warna#ffffff.

Sekarang pusatkan teks di dalam lingkaran.

60

Di samping "62", buat layer tipe lain dan masukkan "%" dengan detail berikut:

  • Font: Arial Regular
  • Ukuran: 20pt
  • Warna: #5b6773

Posisikan "%" sesuai gambar di bawah ini

23

Langkah 8

Langsung di bawah "62", buat layer tipe lain menggunakan Type Tool (T). Dengan perincian sebagai berikut:

  • Font: Arial Regular
  • Ukuran: 13pt
  • Pelacakan: 400
  • Warna: #5b6773.

Kemudian, ketik "UNDUH" dalam huruf kapital.

Posisikan layer jenis ini seperti gambar di bawah ini.

Jadi kami memiliki progres yang lengkap, seharusnya terlihat seperti ini:

Langkah 9

Selanjutnya adalah dua tombol melingkar yang lebih kecil. Menggunakan panduan padding di sebelah kiri, buat lingkaran menggunakan Ellipse Tool (U), lebar 100px dengan tinggi 100px. Dari color picker, pilih # 19222a. Namai layer ini Circle 5. Posisikan lingkaran ini sesuai gambar di bawah ini.

Di dalam lingkaran itu, buat lingkaran kecil lain yang lebar 78px dengan diameter 78px tinggi. Namai layer ini Circle 5a. Dari color picker, pilih # 2b3642.

Langkah 10

Pilih kedua layer, Circle 5 dan Circle 5a dan klik kanan. Pergi ke Duplicate Layers.

Setelah layer telah diduplikasi, beri nama masing-masing Circle 6 dan Circle 6a dan letakkan secara langsung di sebelah kanan untuk sejajar dengan panduan padding yang tepat.

Dari file PSD Ikon Tambahan, salin di atas ikon Jeda dan posisikan itu berpusat di dalam layer Circle 5.

61

Dari Free Icon Set, cari Ikon Tautan (baris ke-2, baris ke-5). Salin ikon ke desain Anda dan posisikan itu berpusat di dalam layer Circle 6.

62

Gunakan Transform Tool (Command / Ctrl-T) dan ubah dimensinya menjadi lebar 38px dengan tinggi 48px (200% lebih besar). Hapus efek layer yang ada pada ikon dengan mengklik kanan pada layer dan pilih Clear Layer Style. Dari warna picker pilih#a8afb6.

5. Area Bawah

Mari kita pindah ke bagian bawah. Bagian ini dibagi menjadi tiga baris.

Langkah 1

Pilih Rectangle Tool (U) dan gambar persegi panjang mulai dari atas dokumen yang tingginya 108px. Beri nama layer ini lower 1.

63

Klik dua kali pada thumbnail layer untuk mengubah warna. Pada color picker pilih warna # 19222a Pergi ke Panel Layers (F7) dan klik kanan pada layer dan pilih Blending Options. Pilih Drop Shadows dan letakkan Drop Shadow 1px, Sudut 90 derajat dengan warna # 2b3642

Gandakan layer Lower 1 dan beri nama layer baru Lower 2. Posisikan tepat di bawah Lower 1. Ulangi layer duplikasi lagi dan ganti nama layer baru menjadi Lower 3 dan tempatkan langsung di bawah layer Lower 2.

51

Langkah 2

Selanjutnya kita akan membuat ikon lingkaran kecil dan konten. Ikon pertama akan menunjukkan bahwa pengguna sedang mengunduh file, jadi kita perlu menggunakan indikator kemajuan oranye mirip dengan apa yang kita lakukan untuk lingkaran yang lebih besar.

Menggunakan panduan padding kiri, buat lingkaran kecil lebar 50px kali 50px tinggi dalam area layer Lower 1. Nama itu lebih rendah 1 lingkaran.

64

Pergi ke Blending Options untuk layer dan menempatkan 3px Outer Stroke dengan warna # eb6c4d.

Sekarang masukkan isian pada layer Lower Circle 1 menjadi 0%.

Selanjutnya konversikan layer ke objek pintar dengan pergi ke Layer> Smart Object> Convert to Smart Object.

Ok, selanjutnya kita harus memutuskan berapa persentase indikator kemajuan oranye. Ini dibuat dengan menggunakan Layer Mask. Di bilah alat, pilih Polygonal Lasso Tool (L)

Dari tengah lapisan Lower Circle 1 buat seleksi yang mirip dengan gambar di bawah ini.

Setelah Anda puas dengan pilihan buat Layer Mask dengan pergi ke Layer> Layer Mask> Hide Selection. Dari set ikon gratis yang disediakan, temukan ikon awan panah bawah (baris ke-6, baris ke-5). Salin ikon ke dalam desain Anda dan posisikan itu berpusat di dalam lapisan Lower Circle 1.

Hapus efek layer yang ada pada ikon dengan mengklik kanan pada layer dan pilih Clear Layer Style. Dari pemilih warna, pilih # db664a. Seharusnya terlihat seperti ini:

Langkah 3

Di sebelah kanan indikator unduhan kita akan menaruh beberapa teks. Jadi pilih Type Tool (T) dan klik sekitar 30px di sebelah kanan layer Lower Circle 1. Dengan perincian sebagai berikut:

  • Font: Arial Regular
  • Ukuran: 12pt
  • Warna: #5b6773

Kemudian, ketik DOWNLOAD TERBARU dalam huruf kapital.

65

Langkah 4

Selanjutnya, pilih Type Tool (T) dan klik ke panduan padding kanan. Luruskan teks dengan memilih ikon di bawah ini di jendela paragraf (Window> Paragraph).

Dengan perincian berikut, ketik "55.1 dari 81MB"

  • Font: Arial Black
  • Ukuran: sedikit 20pt
  • Warna: #a8afb6

Selanjutnya kembali dan sorot "dari" dan "MB" dan memberikan rincian berikut:

  • Font: Arial Regular
  • Ukuran font: 12pt
  • Warna: #5b6773

Mungkin perlu sedikit usaha dengan spasi teks untuk memastikan teks duduk dengan benar. Jadi begitu selesai, layer Lower 1 Anda akan terlihat seperti ini:

Langkah 5

Di Lower 2, kita perlu memasukkan informasi serupa. Menggunakan panduan padding kiri, buat lingkaran kecil lebar 50px kali 50px tinggi dalam area layer Lower 2. Beri nama Lower Circle 2. Pergi ke Blending Options untuk layer dan beri stroke luar 3px dengan warna # eb6c4d.

Sekarang masukkan isian pada layer Lower Circle 2 menjadi 0%. Sekali lagi, Dari set ikon gratis yang disediakan, temukan ikon cloud dengan panah ke atas (baris ke-6, baris ke-4). Salin ikon ke dalam desain Anda dan posisikan itu berpusat di dalam lapisan Lower Circle 2.

Hapus efek layer yang ada pada ikon dengan mengklik kanan pada layer dan pilih Clear Layer Style. Dari color picker, pilih #3c4651

53

Langkah 6

Di sebelah kanan indikator unduhan kita akan menaruh beberapa teks. Jadi pilih Type Tool (T) dan klik sekitar 30px di sebelah kanan layer Lower Circle 2. Ketik "UPLOADS TERBARU" dalam huruf kapital dengan perincian berikut:

  • Font: Arial Regular
  • Ukuran font: 12pt
  • Warna: #5b6773
66

Langkah 7

Selanjutnya cukup buat duplikat teks "55.1 dari 89MB" dengan mengklik kanan pada layer di dalam Window Layer dan pergi ke Duplicate Layer.

Seret Layer baru ke Lower 2 dan ubah teks menjadi "127.4GB".

  • Font: Arial Black
  • Ukuran: 20pt
  • Warna: #a8afb6.

Untuk GB, gunakan atribut berikut:

  • Font: Arial Regular
  • Size: 12pt
  • Warna: #5b6773

Setelah selesai baris akan terlihat seperti ini.

Langkah 8

Baris terakhir, Lower 3, akan menggunakan struktur yang sama dengan Lower 2. Kita perlu mengulangi proses yang sama seperti yang kita lakukan untuk konten di Lower 2.

Jadi, menggunakan panduan padding kiri, buat lingkaran kecil lebar 50px dengan tinggi 50px di area layer Lower 2. Beri nama Lower Circle 3. Pergi ke Blending Options untuk layer dan beri stroke luar 3px dengan warna #eb6c4d.

Sekarang masukkan isian pada layer Lower Circle 3 menjadi 0%.

Sekali lagi, Dari set ikon gratis yang disediakan, temukan ikon cloud biasa (baris ke-6, baris ke-3). Salin ikon ke dalam desain Anda dan posisikan itu berpusat di dalam lapisan Lower Circle 3.

54

Langkah 9

Di sebelah kanan indikator unduhan, kita akan memasukkan beberapa teks. Jadi pilih Type Tool (T) dan klik sekitar 30px di sebelah kanan layer Lower Circle 2. Ketik "SPACE USED" dalam huruf kapital dengan menggunakan detail berikut:

  • Font: Arial Regular
  • Font: Ukuran: 12pt
  • Warna: #5b6773
67

Langkah 10

Terakhir, buat duplikat teks "127.4GB" dari Lower 2 dengan mengklik kanan pada layer di dalam Window Layer dan pergi ke Duplicate Layer.

Seret Layer baru ke Lower 3 dan ubah teks menjadi "46.9GB".

  • Font: Arial Black
  • Ukuran: 20pt.
  • Warna: #a8afb6

GB berada di:

  • Font: Arial Regular
  • Ukuran: 12pt
  • Warna: #5b6773
55

Kesimpulan

Dalam tutorial ini, saya telah menunjukkan kepada Anda cara menggunakan layer mask, objek pintar, dan berbagai teknik lainnya untuk membantu Anda membuat desain aplikasi iPhone di Photoshop. Saya harap Anda telah mempelajari sesuatu dari semuanya, dan dapat menggunakan teknik ini untuk membuat desain aplikasi Anda sendiri.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.