Zombie desigN: Buat Mobile Halaman Web Antarmuka di Photoshop

Detail Tutorial

Perkiraan Waktu Penyelesaian: 90 Menit
Kesulitan: Menengah
Apps Digunakan: Adobe Photoshop

Lihat posting pada tuts + Betatuts + Beta adalah dioptimalkan, dibaca mudah mobile version-ramah dan tuts + jaringan.

Produk akhir Apa yang Anda akan Menjadi Membuat

Desain aplikasi mobile adalah salah satu bidang yang paling cepat berkembang di industri desain. Dalam tutorial ini, kami akan menunjukkan cara untuk merancang aplikasi desain antarmuka mobile menggunakan banyak alat-alat dalam Adobe Photoshop. Kita akan mulai dengan menunjukkan Anda bagaimana untuk membuat kotak dan menciptakan latar belakang yang sederhana. Kami kemudian akan menunjukkan cara untuk mengambil keuntungan dari fitur Snap Grid dan menggunakan masking dan vektor bentuk dasar untuk menciptakan satu set ikon datar. Akhirnya, kita akan menggunakan Rectangle Tool, beberapa teks, dan pencampuran dan menyelaraskan teknik dasar untuk menciptakan komponen tambahan dari antarmuka aplikasi cuaca. Mari kita mulai!

1. Buat Dokumen Baru & Setup Grid

Buka Photoshop dan tekan Command / Ctrl + N untuk membuat dokumen baru. Mengatur lebar di 640pxdan tinggi di 1136px, masukkan sisa atribut ditunjukkan pada gambar berikut kemudian klik OK. Aktifkan Grid (View> Show> Grid) dan Snap ke Grid (View> Snap To> Grid). Sebagai permulaan Anda akan perlu grid setiap 5px, jadi hanya pergi ke Edit> Preferences> Guides, Grid & Slices dan fokus pada bagianGrid. Masukkan 5 di gridline Setiap kotak dan 1 di kotak Subbagian. Juga, mengatur warna kotak di#a7a7a7 . Setelah Anda telah mengatur semua properti ini klik OK. Jangan berkecil hati oleh semua jaringan itu. Ini akan memudahkan pekerjaan Anda dan Anda dapat dengan mudah menonaktifkan / mengaktifkannya menggunakan Command / Ctrl + "pintas keyboard. Anda juga harus membuka Infopanel (Window> Info) untuk live preview dengan ukuran dan posisi bentuk Anda.

2. Mengubah Warna Background dan Membuat Ikon Cuaca

Langkah 1

Fokus pada Layers panel (Window> Layers), tahan tombol Alt dari keyboard Anda dan cukup klik dua kali pada ada layer "Background" untuk unclock itu. Pastikan bahwa lapisan Anda tetap dipilih dan pindah ke Toolbar. Klik pada warna foreground dan mengganti atribut warna yang ada dengan #bebebe . Ambil Paint Bucket Tool dan cukup klik di dalam kanvas Anda. Pada akhirnya hal-hal akan terlihat seperti pada gambar berikut.

Langkah 2

Mengatur warna latar depan di putih ( #ffffff ), pilih Rounded Rectangle Tool, fokus pada bar atas dan mengatur Radius pada 10px. Pindah ke kanvas Anda dan hanya membuat 55 x 20px persegi panjang bulat, Snap untuk Grid akan memudahkan pekerjaan Anda. Pastikan bahwa sosok putih ini tetap dipilih dan beralih ke Ellipse Tool. Periksa tombol Add dari bar bagian atas maka cukup menambahkan lingkaran30px seperti yang ditunjukkan pada gambar kedua. Pastikan bahwa bentuk vektor putih terus tetap dipilih dan menggunakan Ellipse Tool, tambahkan lingkaran 35px seperti yang ditunjukkan int dia gambar ketiga.Akhirnya, menggunakan alat yang sama, tambahkan lingkaran 25px seperti yang ditunjukkan pada gambar keempat. Pindah ke panel Layers, klik dua kali pada bentuk vektor yang dibuat dalam langkah ini dan hanya nama itu "cloudyIcon".

Langkah 3

Menggunakan Ellipse Tool, buat lingkaran 25px. Pastikan bahwa ini bentuk vektor baru tetap dipilih, lanjutkan dengan Ellipse Tool, periksa tombol Add dari bar bagian atas dan hanya menambahkan lingkaran 5px seperti yang ditunjukkan pada gambar kedua. Beralih ke Direct Selection Tool (atau Path Selection Tool), tahan tombol Alt dari keyboard Anda, klik di dalam yang kecil, 5px lingkaran maka cukup tarik ke bawah seperti yang ditunjukkan pada gambar ketiga.

Langkah 4

Terus fokus pada bentuk vektor yang dibuat pada langkah sebelumnya dan menambahkan enam lebih salinan yang 5px lingkaran seperti yang ditunjukkan pada gambar berikut. Setelah Anda selesai, pindah ke panel Layers dan nama ini vektor baru bentuk "sunnyIcon".

Langkah 5

Pilih kembali "cloudyIcon" bentuk vektor Anda dan duplikat (Command / Ctrl + J). Pilih salinan ini dan tarik beberapa piksel ke kanan untuk memisahkan dari bentuk aslinya. Terus fokus pada copy ini dan ambilRounded Rectangle Tool. Pastikan bahwa Radius ditetapkan pada 10px kemudian membuat 5 x 15pxvektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar kedua. Pilih persegi panjang ini bulat baru dan tekan Command / Ctrl + T (atau pergi ke Edit> Free Transform). Fokus pada bar bagian atas, masukkan sudut 30.00 derajat kemudian tekan Enter. Pada akhirnya hal-hal akan terlihat seperti pada gambar ketiga. Pastikan bahwa Rounded Rectangle Tool masih aktif, membuat 5 x 25px vektor bentuk dan tempatkan seperti yang ditunjukkan pada gambar keempat. Pilih persegi panjang ini bulat baru dan putar 30,00 derajat seperti yang Anda lakukan dengan yang sebelumnya. Menggunakan Rounded Rectangle Tool, membuat yang baru 5 x 15px vektor bentuk, tempatkan seperti yang ditunjukkan pada gambar keenam kemudian putar 30,00 derajat. Menggunakan alat yang sama, menciptakan 5 x 15pxvektor bentuk ketiga, tempatkan seperti yang ditunjukkan pada gambar kedelapan kemudian putar 30,00derajat. Pada akhirnya thigs akan terlihat seperti pada gambar kesembilan.

Langkah 6

Fokus pada panel Layers, reeselect salinan bahwa "cloudyIcon" vektor bentuk bersama dengan empat persegi panjang diputar bulat dan tekan Command / Ctrl + G ke Grup mereka. Terus fokus pada panelLayers dan hanya nama ini grup baru "rainyIcon"

Langkah 7

Pilih kembali "cloudyIcon" bentuk vektor Anda dan duplikat (Command / Ctrl + J). Pilih salinan ini dan tarik beberapa piksel ke kanan untuk memisahkan dari bentuk aslinya. Terus fokus pada copy ini dan ambilDirect Selection Tool. Pilih empat poin jangkar disorot dalam gambar pertama maka cukup tekan tombolDelete dari keyboard Anda. Pada akhirnya hal-hal akan terlihat seperti di gambar kedua. Pilih kembali jari"sunnyIcon" vektor bentuk dan duplikat itu (Command / Ctrl + J). Pilih salinan ini dan menempatkannya seperti yang ditunjukkan pada gambar ketiga.

Langkah 8

Terus berfokus pada bentuk vektor yang dibuat pada langkah sebelumnya. Pindah ke panel Layers, tahan tombol Command / Ctrl dari keyboard Anda dan cukup klik pada bahwa salinan dari "cloudyIcon" bentuk vektor untuk memuat pilihan di sekitarnya. Pastikan bahwa hal itu tetap aktif dan pergi ke Pilih> Modify> Expand. Masukkan "2" di jendela baru dan klik OK. Pindah ke panel Layers, pilih salinan "sunnyIcon"vektor bentuk, tahan tombol Alt dari keyboard Anda dan cukup klik pada tombol Add lapisan masker.Pada akhirnya matahari bertopeng Anda akan terlihat seperti pada gambar ketiga. Tekan Command / Ctrl + D untuk menyingkirkan seleksi itu, pindah ke panel Layers, pilih dua bentuk vektor yang membentuk ini ikon baru dan Kelompok mereka (Command / Ctrl + G). Terus fokus pada panel Layers dan nama ini grup baru "mostlyCloudyIcon".

Langkah 9

Pilih kembali "cloudyIcon" bentuk vektor Anda dan duplikat (Command / Ctrl + J). Pilih salinan ini dan tarik beberapa piksel ke kiri untuk memisahkan dari bentuk aslinya. Pastikan bahwa ini bentuk vektor baru dipilih dan tekan Command / Ctrl + T (atau pergi ke Edit> Free Transform). Fokus pada bar bagian atas, cek tombol aspek rasio mentain, masukkan 50,00% pada lebar (atau tinggi) kotak kemudian tekan Enter. Pilih kembali jari "sunnyIcon" vektor bentuk dan duplikat itu (Command / Ctrl + J). Pilih salinan ini dan menempatkannya seperti yang ditunjukkan pada gambar ketiga.

Langkah 10

Terus berfokus pada bentuk vektor yang dibuat pada langkah sebelumnya. Pindah ke panel Layers dan beban pilihan sederhana di sekitar awan kecil. Pastikan bahwa hal itu tetap aktif dan pergi ke Pilih> Modify> Expand. Masukkan "2" di jendela baru dan klik OK. Pindah ke panel Layers, memilih ulang salinan yang "sunnyIcon" vektor bentuk, tahan tombol Alt dari keyboard Anda dan cukup klik pada tombolAdd lapisan masker. Pada akhirnya matahari bertopeng Anda akan terlihat seperti pada gambar ketiga.Singkirkan bahwa seleksi (Command / Ctrl + D), pindah ke panel Layers, pilih dua bentuk vektor yang membentuk ini ikon baru dan Kelompok mereka (Command / Ctrl + G). Terus fokus pada panel Layersdan nama ini grup baru "mostlySunnyIcon".