Rambat.id – Dalam tutorial ini, saya akan menunjukkan kepada anda teknik-teknik yang digunakan untuk membuat modern dan flat user interface (UI) desain untuk aplikasi iPad.
Tutorial Aset
Untuk menyelesaikan tutorial ini anda akan memerlukan berikut aset dan plugin. Merasa bebas untuk menemukan alternatif foto dan font.
Membuat Halaman Produk
Langkah 1
Membuat dokumen baru (File > New…) menggunakan pengaturan yang ditunjukkan di bawah ini.
Langkah 2
Membuat grid (Window > Ekstensi > GuideGuide) menggunakan pengaturan berikut. Klik besar ungu GG Tombol di tengah untuk mengaktifkan panduan.
Now create a few additional guides. Delete all the measurements inside the GuideGuide Palette, except for the top margin, which you should change to 100px. Press the GG Button to add the new guide.
Using the Rectangular Marquee Tool, make a selection between the 20px and the 100px horizontal guides, and change the top margin in the GG Palette to 10px and the bottom to 10px.
Untuk menyelesaikan pengaturan grid, gunakan Rectangular Marquee Tool untuk memilih segala sesuatu di bawah 100px horizontal panduan dan masukkan kode berikut untuk margin, kolom dan selokan.
Sekarang anda harus memiliki sesuatu seperti ini:
Langkah 3
Buat layer baru dengan #5f666b mengisi. Ini adalah layer background. Sebut saja bg.
Gunakan Rectangle Tool untuk membuat bentuk persegi panjang berukuran 257px x 1024px, dengan #292c2e mengisi. Nama layer Nav bg. Semua benda-benda navigasi anda akan pergi di sini.
Gunakan Rectangle Tool untuk membuat bentuk persegi panjang berukuran 768 x 100px dengan #ffffff mengisi. Ini akan menjadi latar belakang untuk top bar area. Nama ini lapisan Atas bg.
Langkah 4
Buka Ikon Tambahan (tersedia dalam aset tutorial di atas) dan drag atau menduplikasi status bar layer ke kanvas anda. Tempat itu dalam atas 20px margin.
Dari Tambahan Ikon PSD file, pilih ikon grup dan drag atau menduplikasi logo kelompok ke kanvas anda.
Selanjutnya, pada logo bg lapisan, menulis “Sticks & Stones” menggunakan Jenis Alat, Font Pacifico, 20px, #292c2e.
Untuk menambahkan bayangan di latar belakang, klik kanan di Atas bg layer di Palet Layer dan pilih Blending Options di bagian atas.
Pilih Drop Shadow dari menu sebelah kiri dari jendela layer styles, isi dalam pengaturan berikut dan klik OK.
Langkah 5
Sekarang saatnya untuk menambahkan ikon untuk dokumen anda.
- Kita akan mulai dengan ikon pengaturan. Drag atau menduplikasi pengaturan ikon dari lapisan Tambahan Ikon PSD ke kanvas anda. Tempat berikutnya untuk margin kanan dan tengah secara vertikal antara margin atas dan bawah dari bar bagian atas.
- Drag baru panduan di atas dan letakkan di sisi lain dari pengaturan ikon sehingga terlihat seperti pengaturan ikon duduk di antara margin kanan dan panduan baru. Tarik lain panduan untuk pengaturan ikon, tapi tempat itu 20px ke kiri, menciptakan 20px selokan.
- Menggunakan Jenis Alat jenis ‘James’ di Avenir Hitam font, 14pt, #6d767c, huruf besar, dan menempatkannya di samping 20px selokan.
- Buka 50 Mini Ikon set (tercantum dalam tutorial aset), dan drag atau menduplikasi Pengguna layer ke dalam dokumen anda. Tempat itu 5px ke kiri dari James. Anda dapat menggunakan Info Palet untuk melihat yang tepat koordinat penempatan anda.
- Ulangi proses ini untuk Keranjang dan Jantung ikon sehingga hasil akhir terlihat seperti ini:
Langkah 6
- Gunakan Rounded Rectangle Tool untuk mengatur Sudut Radius untuk 5px dan membuat 230px x 30px bentuk dengan #1c1f20 isi. Nama layer pencarian bg.
- Duplikat atau tarik Pencarian ikon (dari 50 Mini Ikon) ke dalam dokumen anda.
- Tambahkan Drop Shadow untuk pencarian bg lapisan dengan pergi ke Blending Options pada layer dan menyalin pengaturan yang ditunjukkan di bawah ini.
Langkah 7
- Buat sebuah persegi panjang berukuran 230px x 310px dengan #1c1f20 mengisi. Copy layer style dari pencarian bg layer dengan mengklik kanan pada pencarian bg di Palet Layers dan pilih Copy Layer Style. Klik kanan pada MENS layer background, kemudian klik Paste Layer Style untuk menambahkan drop shadow.
- Menggunakan Ellipse Tool buat 7×7 elips dengan #88e2d2 mengisi.
- Menggunakan Jenis Alat menulis MENS di Avenir Romawi, 14pt, #ffffff, Huruf besar.
Langkah 8
- Menggunakan Rectangle Tool membuat 1x1px persegi dengan #464d51 mengisi. Tekan Shift-Pilihan-Perintah untuk menduplikasi alun-alun saat bergerak 5px turun. Ulangi sebanyak 6 kali. Anda harus memiliki garis dengan 8 titik (piksel) dengan 5px ruang antara masing-masing titik. Pilih 8 bentuk layer, klik kanan dan pilih Merge Bentuk untuk menggabungkan semua bentuk ke dalam satu layer.
- Duplikat layer dan tekan Command/Ctrl-T untuk memutar garis putus-putus 90 derajat sehingga menjadi horizontal. Bergabung dengan dua garis putus-putus seperti yang ditunjukkan pada #2 di gambar di bawah ini dan Menggabungkan dua bentuk.
- Duplikat bentuk 7 kali dan line up seperti yang ditunjukkan pada gambar #3. Menggabungkan bentuk-bentuk menjadi satu layer dan menyebutnya garis putus-putus.
- Menggunakan Jenis Alat, jenis “Celana pendek, Atasan, Sweater, Mantel, Celana, Berenang, Aksesoris” Dalam daftar vertikal. Pergi ke Karakter Palet dan pastikan pengaturan mengatur gambar di bawah ini.
- Duplikat atau tarik check-mark ikon dari Ikon Tambahan dan tempat itu 5px ke kanan dari kata Sweater.
- Menggabungkan semua layer menjadi satu kelompok dan nama Mens.
Langkah 9
- Pilih Mens Grup dan tekan Command/Ctrl-Shift-Opsi untuk menduplikasi itu sambil bergerak ke bawah.
- Mengubah nama kelompok untuk Womens dan Menghapus garis putus-putus lapisan, tanda cek ic, dan vertikal daftar kategori.
- Mengubah nama mens bg lapisan untuk Wanita bg. Tekan Command/Ctrl-T untuk mengubah ketinggian persegi panjang untuk 54px.
- Double Klik pada Elips 1 untuk mengubah warna isi untuk #6d767c.
- Duplikat Womens kelompok. Bergerak turun 15 pixel asli dari kelompok Wanita dan ganti nama segala sesuatu untuk Surfing.
- Ulangi untuk tombol Home.
Langkah 10
- Membuat persegi panjang 236×288 piksel dengan #ffffff mengisi.
- Tempat image01, seperti yang ditunjukkan di bawah ini (File > Place > …) ke dalam kanvas.
- Tekan Pilihan-Perintah-G untuk membuat clipping mask dan ukuran gambar sehingga terlihat kurang lebih sama seperti yang dilakukannya pada gambar di bawah ini. Menggabungkan dua lapisan menjadi satu kelompok dan menyebutnya produk bg..
- Duplikat produk bg group dan nama itu harga bg.
- Mengubah nama group harga bg dan di dalam group ubah nama produk bg lapisan untuk harga bg lapisan.
- Tekan Command/Ctrl-T untuk bergerak ke atas ke bawah ke 70 piksel.
- Pilih image01 lapisan dan membuat blur dengan pergi ke Filter > Blur > Guassian Blur dan atur radius untuk 20px seperti yang ditunjukkan gambar satu.
Double klik image01 layer untuk membuka Layer Styles dialog. Menerapkan Warna Overlay seperti yang ditunjukkan pada gambar di bawah ini.
Tambahkan Drop Shadow dengan harga bg layer menggunakan pengaturan berikut.
Langkah 11
- Membuat bentuk persegi panjang 50x70px dengan #88e2d2 mengisi.
- Menggunakan Line Tool, atur garis berat 1px dan menarik 30px garis – garis horizontal dan vertikal terpusat dalam bentuk persegi panjang seperti yang ditunjukkan di bawah ini.
- Jenis pengaturan untuk harga $36 harus ditetapkan sebagai berikut. Avenir Hitam, 14pt, #292c2e; Untuk Sederhana Tee Avenir Hitam, 14, #3b4244; dan untuk White Tee Avenir Menengah, 12pt, #6d767c.
- Duplikat Keranjang ic lapisan dari atas bar. Pindahkan layer sehingga duduk di tag Harga kelompok dengan seluruh lapisan. Double klik pada layer untuk mengubah mengisi #ffffff dan tempat sehingga hasil akhirnya sesuai dengan gambar di bawah ini.
Ulangi dua langkah terakhir untuk membuat seluruh gambar produk. Menggabungkan gambar produk kelompok dan nav kelompok menjadi satu kelompok, dan nama Halaman Produk.
Membuat Pengaturan Overlay
Langkah 1
- Membuat sebuah kelompok baru yang disebut Pengaturan dan pastikan bahwa itu berada di bawah Top Bar Grup dan di atas Halaman Produk kelompok.
- Di dalam kelompok, membuat new layer background diisi dengan #ffffff nama Overlay. Mengurangi Opacity untuk 80%.
- Dengan menggunakan Rounded Rectangle Tool dengan Radius Pojok set untuk 5px membuat 450x300px bentuk dengan #f0eff5 isi.
- Tambahkan Drop Shadow untuk latar belakang menggunakan pengaturan berikut.
Langkah 2
- Duplikat bg Pengaturan layer dan mengubah Pengaturan Atas bg. Double klik pada layer untuk mengubah isi untuk #ffffff.
- Menggunakan Delete Anchor Point Tool menghapus dua di bawah jangkar seperti yang ditunjukkan di bawah ini.
Menggunakan Convert Point Tool klik di bawah dua jangkar untuk meluruskan garis bawah.
Menggunakan Convert Point Tool pilih dua bawah jangkar, tekan Command/Ctrl kemudian Klik, Tahan dan Pindahkan bawah garis ke atas sampai duduk di 245px seperti ditunjukkan pada gambar 03.
Tambahkan Drop Shadow pada layer menggunakan pengaturan berikut.
- Menambahkan Pengaturan heading, horizontal dan vertikal terpusat dalam Pengaturan Atas bg memastikan anda memiliki pengaturan yang ditampilkan di bawah ini.
- Kemudian tambahkan Dilakukan dan posisi itu 20px ke kiri dari tepi kanan, di tengah secara vertikal dengan pengaturan yang ditampilkan di bawah ini.
Langkah 3
- Buat Umum Menuju pada huruf Helvetica Neue Regular, 14pt, #4f4f4f dan tempat itu 20px di bawah Pengaturan Atas Bar.
- Dengan menggunakan Rounded Rectangle Tool dengan radius sudut set untuk 5px membuat 410x88px bentuk dengan #ffffff mengisi – posisi itu 10px di bawah Jenderal Pos dan nama layer Pengaturan Bagian 01.
- Menggunakan Alat Baris, mengatur berat dari garis 1px, dan menggambar 390px baris. Vertikal pusat itu hanya persegi panjang, sementara juga menyelaraskan itu ke tepi kanan.
- Tambahkan Sekitar dan Versi judul di Helvetica Biasa 18pt #292c2e dan posisi mereka seperti yang ditunjukkan di bawah ini.
- Tambahkan 2.3 di Helvetica Biasa 18pt #b4b4b4 dan posisi seperti yang ditunjukkan di bawah ini.
- Duplikat atau Drag chevron ic dari Ikon.psd dan posisi seperti yang ditunjukkan di bawah ini.
Langkah 4
- Membuat Lokasi Jasa pos dalam huruf Helvetica Neue Regular, 14pt, #4f4f4f dan tempat itu 20px di bawah Pengaturan daerah 01.
- Dengan menggunakan Rounded Rectangle Tool dengan radius sudut set untuk 5px membuat 410x44px bentuk dengan #ffffff isi. Posisi itu 10px berikut Lokasi Layanan pos.
- Tambahkan Auto-mendeteksi Lokasi menuju Helvetica Biasa, 18pt, #292c2e dan posisi seperti yang ditunjukkan di bawah ini.
- Dengan menggunakan Rounded Rectangle tool set corner radius untuk 60px, dan membuat 51x31px bentuk diisi dengan #88e2d2.
- Menggunakan Ellipse Tool buat 30x30px Elips dengan #ffffff mengisi dan tambahkan Drop Shadow dengan pengaturan yang ditunjukkan di bawah ini.
Pengaturan tampilan akan terlihat seperti gambar di bawah ini.
Membuat Halaman Login
Langkah 1
- Matikan semua kelompok selain untuk Top Bar klik kanan, duplikat, dan mengubah nama kelompok untuk Login.
- Dalam baru Login kelompok menghapus Seperti, Belanja, dan Pengguna kelompok, serta pengaturan ic.
- Buat Layer Baru yang disebut bg di bawah Top Bg Lapisan, dengan #292c2e mengisi.
- Pilih Bg Layer, tekan Command/Ctrl-T, Klik dan Tarik persegi panjang ke bawah sampai 500px seperti yang ditunjukkan di bawah ini.
- Membuka Logo Kelompok dan re-mengatur teks dan gambar di samping sehingga mereka cocok dengan posisi logo di bawah ini.
- Menggabungkan semua layer yang – tidak termasuk bg – menjadi satu kelompok dan memanggil kelompok Atas Area.
Langkah 2
- Tekan Command-; untuk hidupkan panduan anda.
- Menggunakan Line Tool dengan 1px berat badan membuat 236px baris dengan #3d4144 isi yang sesuai di dalam kolom tengah seperti yang ditunjukkan di bawah ini. Posisi itu 150px dari Atas bg dan menyebutnya Teks garis lapangan.
- Membuat Username label. Avenir Romawi, 14pt #88e2d2. Tempat itu terhadap kiri membimbing dan 20px dari Teks garis lapangan.
- Pilih Username dan Teks bidang layer garis, tekan Shift – Opsi, klik dan bergerak turun 48px untuk membuat duplikat. Ganti nama Username duplikat untuk Password.
- Duplikat Password layer teks dengan menggunakan teknik di atas. Perubahan itu untuk Lupa Password? dan warna untuk #3d4144.
Langkah 3
- Menggunakan Rectangle Tool membuat 236x50px bentuk dengan #1c1f20 isi dan memanggil layer Login btn. Tambahkan Masuk menggunakan setting di bawah ini dan secara vertikal dan horizontal posisi teks di dalam Login btn.
- Tambahkan Drop Shadow untuk Login btn layer menggunakan pengaturan berikut.
- Menggabungkan pada lapisan ke Grup dan panggilan itu Bernyanyi di btn.
Langkah 4
- Duplikat Masuk group dan bergerak ke bawah 20px dari aslinya. Nama itu untuk Mendaftar.
- Mengubah Login btn lapisan nama untuk Pendaftaran btn, dan double klik pada layer untuk mengubah isi untuk #88e2d2. Mengubah teks untuk membaca Mendaftar dan warna teks untuk #292c2e.
- Mengubah Drop Shadow pengaturan berikut.
Layar Login anda harus terlihat seperti ini.
Kesimpulan
Dalam tutorial ini, saya akan menunjukkan anda bagaimana untuk membuat 3 layar yang berbeda untuk sebuah aplikasi iPad di Photoshop menggunakan kombinasi dari plugin, panduan garis, bentuk vektor, dan layer styles.
Ketika anda selesai, anda harus memiliki beberapa layar yang mirip dengan yang di bawah ini. Saya berharap bahwa anda telah belajar sesuatu dari tutorial ini dan dapat menggunakan teknik ini untuk membuat benar-benar menakjubkan interface mobile anda sendiri.