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

Buat Desain Aplikasi Cuaca untuk iOS di Adobe Illustrator

by
Read Time:21 minsLanguages:
This post is part of a series called Vector Mobile App Design.
Create a Tic Tac Toe Mobile App Icon in Adobe Illustrator
Quick Tip: How to Create iOS Map Indicators With Graphic Styles

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Desain ini digunakan bersama dengan situs mitra kita, Mobiletuts+. Bart Jacobs, pengembang yang sangat mahir, telah mengambil UI ini dan membuat aplikasi yang berfungsi dengan baik dan terbaik dari semua yang dapat Anda ikuti dan belajar cara membuat sendiri! Anda dapat menemukan seri-nya di sini: Bagian 1, Bagian 2, Bagian 3.

Dalam tutorial ini saya ingin menunjukkan kepada Anda cara membuat antarmuka pengguna retina yang siap untuk aplikasi cuaca. Kita akan menggunakan beberapa papan seni dan tipografi untuk menciptakan antarmuka yang sangat minim.

Unduh aset font di sini:

Saat menggunakan font untuk aplikasi atau untuk alasan apa pun, pastikan untuk memeriksa Perjanjian Lisensi. Karena ini hanya tutorial dan aplikasinya sendiri tidak akan tersedia untuk dijual, kita baik-baik saja dengan menggunakan font yang disebutkan di atas. Namun, jika Anda berencana untuk membuat sendiri dan ingin mendapatkan lisensi komersial, silakan ikuti petunjuk tipe desainer tentang cara melakukannya.


1. Menyiapkan Dokumen Anda

Kita akan menggunakan beberapa papan seni untuk berbagai pandangan yang dimiliki aplikasi, jadi setelah memutuskan dengan bantuan dari pengembang, kita dapat melanjutkan dan membuat dokumen dibuat.

Langkah 1

Untuk memulai kita perlu membuat dokumen ukuran perangkat mobile. Karena kita sedang mengerjakan platform iOS, kita akan mendesain untuk iPhone 5 yang memiliki ukuran layar lebih tinggi daripada inkarnasi sebelumnya dari iPhone. Saya merasa bekerja pada ukuran yang lebih besar itu mudah untuk menurunkan nanti untuk perangkat lain. Karena seluruh desain sangat minim maka akan lebih mudah untuk menghapus ruang kemudian daripada mencoba dan meningkatkannya. Untuk itu, dokumen kami akan berukuran 640 x 1136 pts (bukan piksel).

Saat melakukan brainstorming dengan pengembang, diputuskan bahwa akan ada layar utama yang akan bergeser ke kiri atau kanan untuk mengungkapkan informasi lebih lanjut. Dengan pemikiran ini kita juga akan menyiapkan beberapa papan seni saat ini juga. Satu untuk setiap jendela yang akan muncul. Pastikan untuk memeriksa screenshot secara menyeluruh untuk spesifikasinya.

chris-weather-1-1chris-weather-1-1chris-weather-1-1

Langkah 2

Setelah dokumen dibuat, kita perlu menyesuaikan profil warna. Jadi pergi ke Edit > Assign Profile dan pastikan untuk menonaktifkan semua profil warna. Ketika XCode menyiapkan aset Anda untuk dibundel dengan aplikasi, itu benar-benar menghapus profil warna apa pun yang terkait dengan aset. Karena itu, sebaiknya Anda menghapus profil warna apa pun dari dokumen Anda dan secara teratur menguji desain Anda di layar ponsel untuk memastikan hasil warna yang benar.

chris-weather-1-2chris-weather-1-2chris-weather-1-2

2. Buat Background

Langkah 1

Backgroundnya cukup sederhana. Karena bekerja dengan desain yang lebih kurang 'datar' kita akan bekerja dengan warna solid dan menyatu untuk mencapai efeknya.

Kita akan menggunakan papan art menengah untuk mewakili halaman utama dari aplikasi. Yang di sebelah kiri akan menjadi apa yang terjadi ketika Anda memilih lokasi. Dan yang di sebelah kanan akan muncul ketika Anda memilih tanggal. Mulailah dengan menggambar persegi panjang dengan tinggi dan lebar yang sama dari papan seni di tengah dan mengisinya dengan warna dasar

chris-weather-2-1chris-weather-2-1chris-weather-2-1

Langkah 2

Selanjutnya, buat lingkaran yang tepat 30 x 30pt dan isi dengan warna yang diuraikan di bawah ini.

chris-weather-2-2chris-weather-2-2chris-weather-2-2

Langkah 3

Salin lingkaran yang baru dibuat ini dan tempel di belakang yang lain. Sekarang sesuaikan ukuran menjadi 2300 x 2300pt dan jatuhkan Opacity ke 0%.

chris-weather-2-3chris-weather-2-3chris-weather-2-3

Langkah 4

Sekarang, masuklah ke Object > Blend > Blend Options… dan pilih Specific Steps kemudian atur menjadi 30. Kemudian buat (Object > Blend > Make) campuran tersebut.

chris-weather-2-4chris-weather-2-4chris-weather-2-4

Langkah 5

Dengan perpaduan yang masih dipilih pusat secara horizontal di papan seni dan kemudian pusat lingkaran di bagian paling atas papan seni seperti yang terlihat di bawah ini.

chris-weather-2-5chris-weather-2-5chris-weather-2-5

Langkah 6

Gandakan persegi panjang background datar dan tempelkan di atas campuran yang baru saja kita buat. Sekarang pilih kedua persegi panjang dan campuran dari palet layer dan pilih Object > Clipping Mask > Make. Dengan cara ini kita tidak perlu khawatir tentang perpaduan campuran kita yang agak besar ke dalam papan seni kita yang lain.

chris-weather-2-6chris-weather-2-6chris-weather-2-6

Langkah 7

Fitur rapi yang dirasa akan menambahkan beberapa bakat ke aplikasi akan memiliki warna perubahan background tergantung pada suhu. Jadi sementara background yang kita buat saat ini adalah ketika 'panas', sekarang kita akan menduplikasi elemen-elemen ini dan menyesuaikan warna dan posisi untuk mewakili nuansa yang lebih 'dingin'.

chris-weather-2-7chris-weather-2-7chris-weather-2-7

3. Tambahkan Teks Informasi Utama

Karena efek lingkaran campuran kita memiliki banyak langkah, Anda mungkin memperhatikan beberapa lagging sambil terus membuat desain aplikasi Anda. Karena ini hanya untuk tujuan estetika, kita dapat melanjutkan dan menonaktifkan lapisan campuran dan meninggalkan warna background yang datar untuk saat ini. Pastikan untuk mengaktifkan kembali lapisan campuran saat menguji pada perangkat seluler Anda sehingga Anda dapat melihat bagaimana teks bekerja dengan backgrund Anda.

Langkah 1

Kita akan sangat bergantung pada jenis untuk mendapatkan informasi cuaca. Untuk alasan ini saya memilih beberapa font yang bagus, bersih, dan mudah dibaca yang benar-benar memberikan beberapa kepribadian pada aplikasi. Saya akan menempel dengan dua keluarga font dan menggunakan berbagai lebar untuk membuat elemen yang terlihat.

Untuk memulai, kita perlu menunjukkan tanggal tertentu. Pilih Type Tool (T) dan masukkan satu hari dalam seminggu. Saya akan menggunakan "Tuesday", dan font "Tuesday" kita dengan berat diatur ke "Thin". Teks itu sendiri akan menjadi putih dan kita akan menambahkan Drop Shadow untuk membantunya berdiri dari background. Kemudian kita akan memposisikannya sehingga berpusat pada papan seni dan 20px dari atas. Untuk melakukan ini, cukup sejajarkan ke bagian paling atas tempat kotak pembatas menyentuh tepi papan seni lalu tahan tombol Shift dan tekan panah Down pada keyboard dua kali.

chris-weather-3-1chris-weather-3-1chris-weather-3-1

Langkah 2

Pilih Type Tool (T) lagi dan mari kita buat pengukur suhu kami. Saya suka gagasan tentang angka-angka itu sendiri berpusat sementara simbol "derajat" berada di sebelah kanan. Jadi, daripada memusatkan tipe pada panel Paragraph, saya membiarkannya tetap rata dan hanya mengetikkan nomor yang akan digunakan untuk placeholder. Saya akan menggunakan "86" dan font "Maven Pro" dengan informasi berikut terlihat pada gambar di bawah.

Setelah dibuat, sejajarkan dengan pusat papan seni lalu bagian atas. Setelah disejajarkan ke atas, klik kanan teks dan Transform > Move... ke bawah 210pt. Sekarang pilih jenis dan tambahkan simbol derajat.

chris-weather-3-2chris-weather-3-2chris-weather-3-2
Tips: Pastikan untuk memberi tahu pengembang Anda tentang detail ini sehingga mereka dapat mengetahui cara membuat berbagai elemen dalam aplikasi itu sendiri.

Langkah 3

Sekarang kita memiliki suhu, mari tambahkan sebuah lokasi. Ketikkan lokasi Anda, bagi saya itu adalah "Nassau, BAH" merasa bebas menggunakan milik Anda sendiri. Untuk memberikan Kota dan Negara beberapa kontras kita akan menggunakan dua bobot yang berbeda. Kota akan menjadi "Mission Gothic" diatur ke "Regular", dan Negara akan "Mission Gothic" diatur ke "Thin".

Untuk penempatannya, saya katakan sebelumnya saya suka ide tentang figur suhu yang terpusat, tetapi untuk semua teks yang lain saya ingin itu disejajarkan ke kiri berdasarkan lebar dari angka suhu. Jadi untuk saat ini saya akan secara manual menyalurkan alamat ini ke kiri suhu dan menempatkannya sekitar 20pt dari bawah. Jangan ragu untuk menyesuaikan jarak ini sesuai keinginan Anda. Pastikan untuk selalu memeriksa elemen di perangkat seluler Anda.

chris-weather-3-3chris-weather-3-3chris-weather-3-3

Langkah 4

Kita bisa berhenti di sini jika kita mau, tetapi pengembang ingin memasukkan beberapa informasi tambahan. Jadi kita akan membuat tiga baris teks terpisah. Satu untuk waktu sekarang, satu untuk kecepatan angin, dan satu lagi untuk kelembaban. Pastikan untuk membuatnya secara terpisah karena kita akan menggunakan ukuran font dan bobot yang berbeda dan ini dapat membuang ketinggian garis untuk elemen-elemen ini.

Saya suka bentuk angka dari font "Maven Pro" jadi saya akan terus menggunakan font ini untuk angka-angka dalam elemen-elemen ini hanya akan menggunakan berat "Medium" dan membandingkannya dengan font "Mission Gothic" yang disetel ke " Thin"dan untuk font yang lebih tipis ini kami juga akan mengaturnya ke" Small Caps ". Anda dapat mengatur topi kecil dengan menyorot font yang sesuai dan mengklik ikon menu di kanan atas panel Character lalu memilih Small Caps.

chris-weather-3-4chris-weather-3-4chris-weather-3-4

4. Tambahkan Ikon Informasi Utama

Tipografi kita menyampaikan pesan dengan cukup baik tetapi masih diperlukan membuat ikon untuk mewakili angka-angka apa yang berbeda dan untuk menentukan menu di aplikasi. Saya jatuh cinta dengan bentuk simbol derajat dari font "Maven Pro" jadi saya pikir akan mengikat elemen ikon bersama dengan jenisnya dengan menggunakan kembali bentuk ini untuk membuat ikon.

Langkah 1

Dengan Type Tool (T) diaktifkan, ketik simbol derajat. Ukuran yang tepat tidak masalah pada titik ini karena kita akan menyesuaikannya agar sesuai dengan ukuran ikon. Kemudian klik kanan dan pilih "Create Outlines" untuk mengonversi jenis ke bentuk yang dapat diedit. Sekarang aktifkan Direct Selection Tool (A) dan pilih jalur dalam yang lebih kecil dan keluarkan. Kita akan menggunakan stroke nanti untuk mendapatkan widget yang tepat untuk ikon. Setelah Anda memiliki bentuk persegi melengkung pastikan untuk menyesuaikan height/width sehingga mereka persis sama. Mereka akan sedikit off dan kita perlu memastikan bahwa mereka tepat ketika menambahkan elemen nanti.

chris-weather-4-1chris-weather-4-1chris-weather-4-1

Langkah 2

Kita akan menggunakan dan menggunakan kembali bentuk ini beberapa kali jadi pastikan Anda memiliki salinannya jika Anda kehilangan aslinya saat bekerja. Untuk saat ini kita akan membuat ikon untuk mewakili menu lokasi.

Dengan bentuk persegi bulat kita disalin, mari kita menyusut menjadi 32 x 32pt, dan tambahkan Stroke batin 3px

chris-weather-4-2chris-weather-4-2chris-weather-4-2

Langkah 3

Aktifkan Rounded Rectangle Tool dan buat persegi panjang yang 3 x 12pt dan tingkatkan sudut yang membulat sehingga ujungnya benar-benar bulat. Sekarang duplikat bentuk ini tiga kali lagi dan putar sehingga membentuk semacam bentuk rambut silang kemudian kelompokkan semua benda bersama-sama. Akhirnya dengan grup yang dipilih, tambahkan Drop Shadow dan tempatkan 30pt dari bagian atas dan kiri art board. Pastikan untuk memeriksa jarak pada perangkat seluler Anda dan sesuaikan dengan semestinya.

chris-weather-4-3chris-weather-4-3chris-weather-4-3

Langkah 4

Mari kita salin bentuk persegi bulat dari ikon Lokasi karena ikon lain akan didasarkan pada bentuk dan ukuran yang sama. Sesuaikan lokasi persegi panjang bulat menjadi sebelah elemen Waktu. Sama seperti simbol derajat yang sebenarnya dari elemen suhu saya ingin ikon untuk rincian tambahan ini juga berada di luar suhu saja kali ini jelas akan berada di sebelah kiri elemen.

Seperti yang Anda bayangkan, untuk elemen Waktu kita akan dibuat ikon Jam. Bentuk persegi bulat kita akan menjadi jam wajah dan sekarang kita perlu membuat jarum jam. Pilih Rounded Rectangle Tool dan buat persegi panjang yang 10 x 4pt dan sejajarkan dengan pusat dari jam wajah. Gandakan proses ini hanya kali ini membuatnya 4 x 12pt. Setelah Anda memiliki jarum jam di tempat yang nyaman, gabungkan elemen-elemen tersebut dan tambahkan Drop Shadow.

chris-weather-4-4chris-weather-4-4chris-weather-4-4

Langkah 5

Gandakan persegi membulat sekali lagi dari ikon sebelumnya dan sejajarkan di sebelah elemen Angin kita. Untuk ikon ini kita akan mencoba dan mencapai efek yang bagus di mana ikon itu sendiri membantu lebih lanjut informasi angin dengan menyediakan panah yang menunjukkan angin langsung bertiup saat ini. Jadi karena Anda dapat menebak, kami akan membuat tanda panah di tengah untuk ikon khusus ini. Mulailah dengan membuat Rounded Rectangle yang berukuran 4 x 9pt dan memusatkannya di kotak bulat. Selanjutnya, buat persegi sempurna dengan Rounded Rectangle Tool yaitu 12 x 12pt dan keluarkan salah satu sudutnya. Sekarang tutup jalur yang terbuka itu dan putar sehingga menciptakan titik atas panah kita, lalu pusatkan di atas bagian batang panah, pastikan untuk menyembunyikan sudut bulat bulat sepenuhnya.

Dengan panah selesai, kelompokkan batang dan titik bersama-sama kemudian buat tujuh salinan lagi. Putar masing-masing salinan ini secara bertahap seperempat sehingga Anda memiliki satu mengarah ke atas, satu menunjuk ke kanan atas, yang lain ke kanan, dan seterusnya. Karena bentuk utama kita bukan lingkaran lengkap, cukup dengan memutar bentuknya dengan tanda panah tidak akan berfungsi, jadi kita perlu memiliki ikon panah untuk setiap arah yang bisa ditiup angin. Setelah ini dibuat Anda dapat menyembunyikan panah yang tidak dibutuhkan dan kemudian mengelompokkan panah dan membulat persegi bersama-sama dan menerapkan Drop Shadow.

chris-weather-4-5chris-weather-4-5chris-weather-4-5

Langkah 6

Tempelkan salinan bentuk persegi bulat kami untuk terakhir kalinya dan antarkan dengan elemen Kelembaban. Sekarang buat lingkaran yang 8 x 8pt dan tengah sejajarkan dalam bentuk utama dan letakkan lebih banyak ke bawah. Aktifkan Direct Selection Tool (A) dan pilih titik anchor paling atas dari lingkaran dan tarik ke atas untuk membuat bentuk seperti drop, juga membawa pegangan sedikit untuk membuat titik yang lebih halus ke droplet. Gandakan bentuk tetesan ini dua kali lagi dan kurangi ukurannya dan letakkan di dekat bagian atas dan di kedua sisi tetesan yang lebih besar. Akhirnya Group (Control + G) elemen bersama-sama dan tambahkan Drop Shadow.

chris-weather-4-6chris-weather-4-6chris-weather-4-6

Langkah 7

Untuk ikon terakhir dari bagian utama ini kita membutuhkan sesuatu yang mewakili tanggal. Kita mulai dengan ikon kalender yang juga akan menunjukkan tanggal bulan.

Untuk mulai membuat Rounded Rectangle yaitu 40 x 36pt dan berikan stroke dalam 3pt. Sekarang pergi ke Object > Expand Appearance untuk mengonversi stroke ke bentuk yang sebenarnya. Dengan Direct Selection Tool (A) diaktifkan, pilih titik jangkar bagian dalam bagian dalam dan dorong ke bawah 9px menggunakan tombol panah pada keyboard Anda. Dengan Rounded Rectangle Tool buat dua bentuk pil bundar yang memiliki lebar 9pt dan setiap ketinggian yang Anda inginkan lalu letakkan di atas kotak bulat yang lebih besar sehingga bagian bawahnya bertemu setengah jalan di antara area putih besar. Kemudian minus bentuk-bentuk baru ini dari bentuk persegi menggunakan panel Pathfinder. Buat dua bentuk pil lagi, kali ini mereka akan menjadi 3 x 8pt dan garis mereka di dalam memotong bagian. Akhirnya kita akan menambahkan tanggal pemegang tempat dengan pengaturan berikut, kemudian kita akan mengelompokkan elemen-elemen ini dan menambahkan Drop Shadow.

chris-weather-4-7chris-weather-4-7chris-weather-4-7

5. Widget Per Jam

Ketika bernada, pengembang ingin memiliki satu set widget yang dapat digulir di sepanjang bagian bawah halaman utama aplikasi yang menunjukkan proyeksi cuaca setiap jam untuk hari itu. Jadi untuk menyelesaikan halaman utama kami dari aplikasi, mari buat itu sekarang.

Langkah 1

Aktifkan Rounded Rectangle Tool dan buat persegi panjang putih yaitu 165 x 250pt, pusat sejajarkan dengan papan seni dan tempatkan 40px dari bagian bawah papan seni.

Gandakan persegi panjang ini dan isi dengan hitam. Gandakan sekali lagi dan senggolan hingga 4px kemudian Minus Front di panel Pathfinder. Anda kemudian dapat menurunkan Opacity menjadi 15%.

chris-weather-5-1chris-weather-5-1chris-weather-5-1

Langkah 2

Gandakan persegi panjang putih kami lagi dan isi dengan hitam yang dikurangi hingga 15% Opacity. Gambarkan bentuk segi empat lain di atas yang satu ini yaitu 79pt tinggi dan lebar apa saja dan gariskan hingga ke bagian atas bentuk persegi panjang yang mendasarinya. Pilih persegi panjang barunya dan hitam yang lebih besar diisi di bawah kemudian pilih Intersect dari panel Pathfinder.

chris-weather-5-2chris-weather-5-2chris-weather-5-2

Langkah 3

Aktifkan Type Tool (T) dan masukkan suhu yang Anda pilih. Saya ingin memastikan bahwa saya memiliki cukup ruang untuk diperluas sehingga saya memilih angka "100". Untuk ini saya akan menggunakan font "Missing Gothic" dalam berat "Black" Teks itu sendiri juga akan menjadi hitam rata dengan Opacity turun menjadi 15%. Kita kemudian akan menyelaraskannya dekat bagian atas bagian putih dari wadah.

chris-weather-5-3chris-weather-5-3chris-weather-5-3

Langkah 4

Karena ini seharusnya menjadi cuaca yang diproyeksikan tidak akan begitu akurat sehingga kita juga akan menyertakan kemungkinan "rendah" dan "tinggi". Dengan Type Tool (T) lagi buat ketikkan perkiraan Anda dan daripada menggunakan berat "Black", kita akan menggunakan "Thin". Sejajarkan ini ke bagian bawah, pastikan ada cukup ruang untuk bernapas.

chris-weather-5-4chris-weather-5-4chris-weather-5-4

Langkah 5

Bar yang lebih gelap di bagian atas akan menjadi indikator waktu kita. Salin ikon jam yang kita buat sebelumnya di tutorial ini dan letakkan di tengah dan di sebelah kiri area bar yang lebih gelap ini. Anda juga dapat menyalin teks Waktu dari sebelumnya juga. Pastikan untuk menghapus Drop Shadow dari elemen-elemen ini karena tidak diperlukan.

chris-weather-5-5chris-weather-5-5chris-weather-5-5

Langkah 6

Akhirnya, tambahkan Drop Shadow ke kotak putih utama, kemudian kelompokkan elemen-elemen ini bersama-sama. Anda sekarang dapat menyalin pengelompokan ini dan menempatkannya 20px terpisah di kedua sisi elemen yang dipusatkan memastikan untuk menyesuaikan waktu untuk setiap salinan baru. Sebagai bonus tambahan, saya telah mengambil widget waktu yang keluar dari halaman dan mengurangi ukurannya menjadi 235pt tinggi. Jika Anda memiliki batasan terkunci saat mengubah ukuran ketinggian widget akan mengikuti. Ini akan memiliki angka desimal di belakangnya sehingga tidak tepat. Karena ini adalah halaman yang tidak digunakan atau topeng yang kita buat sebelumnya untuk menyembunyikan elemen yang keluar dari layar.

Dengan itu halaman utama kami selesai. Pastikan untuk mengaktifkan campuran background dan uji untuk melihat tampilannya di perangkat seluler Anda.

chris-weather-5-6chris-weather-5-6chris-weather-5-6

6. Buat Menu Lokasi

Langkah 1

Sekarang mari mulai bekerja di menu. Saya menemukan paling mudah hanya untuk menyalin layer dengan semua elemen dari halaman utama, kemudian pilih art board di sebelah kiri halaman utama dan tempelkan pada layer duplikat. Posisikan sehingga hanya ikon lokasi yang terlihat di sisi paling kanan dari papan seni. Sekarang buat topeng yang merupakan dimensi yang sama dari papan seni kita dan sembunyikan elemen-elemen yang berada di luar halaman.

chris-weather-6-1chris-weather-6-1chris-weather-6-1

Langkah 2

Karena desain keseluruhan kami adalah 'datar' alih-alih bayangan bertingkat untuk menunjukkan bahwa halaman utama berada di atas elemen menu, kita akan menggunakan persegi panjang berwarna hitam datar yang disetel ke 10% Opasitas lebar 4pt dan tinggi yang sama dengan papan seni kami .

chris-weather-6-2chris-weather-6-2chris-weather-6-2

Langkah 3

Dalam menu ini kita akan membutuhkan area untuk menambahkan lokasi baru, serta daftar dari lokasi yang ditetapkan dan beralih untuk mengaktifkan/menonaktifkan deteksi lokasi otomatis dan Unit di mana suhu ditampilkan. Mari kita mulai dengan membuat bagian lokasi baru.

Pilih Rectangle Tool (M) dan buat persegi panjang yang 640 x 100pt dan sejajarkan ke bagian atas papan seni lalu tambahkan Drop Shadow.

Sekarang aktifkan Rounded Rectangle Tool dan buat persegi panjang berukuran 8 x 32pt dan isi dengan warna hitam. Gandakan persegi panjang ini dan putar sehingga memotong bentuk sebelumnya membentuk simbol "+". Pilih kedua persegi panjang dan Unite mereka dari panel Pathfinder. Kurangi Opacity menjadi 25% dan pusatkan secara vertikal dengan elemen persegi panjang yang kita buat dengan Drop Shadow dari sebelumnya. Sekali terpusat secara vertikal menyenggolnya sehingga jaraknya sama dari kiri karena dari batas atas dan bawah.

Terakhir pilih Type Tool (T) dan masukkan kalimat "Tambah lokasi baru ..." menggunakan font "Mission Gothic" yang dikirim ke "Thin" dan jatuhkan Opacity ke 15%.

chris-weather-6-3chris-weather-6-3chris-weather-6-3

Langkah 4

Gandakan persegi panjang sebelumnya dan sejajarkan dengan bagian bawah yang sebelumnya lalu sesuaikan Drop Shadow.

Salin bentuk persegi bulat kami yang kami gunakan untuk ikon kami sebelumnya dan bukannya stroke isi dengan hitam rata kemudian kurangi Opacity menjadi 15%. Salin simbol "+" yang kita buat pada langkah sebelumnya dan putar sehingga membentuk "X" dan pusatkan di dalam bentuk persegi bulat kita lalu pilih opsi Minus Front dari panel Pathfinder.

Sekarang salin teks elemen Lokasi dari halaman utama dan hapus Drop Shadow dan atur warna font menjadi hitam dan kurangi Opacity menjadi 25%. Jangan ragu untuk menambahkan beberapa contoh agar kita dapat melihat bagaimana daftar akan terisi saat item baru ditambahkan.

chris-weather-6-4chris-weather-6-4chris-weather-6-4

Langkah 5

Mari bekerja pada elemen sakelar untuk menu ini. Elemen ini akan menempel di bagian bawah menu ini tidak peduli berapa lama daftar lokasi. Mulailah dengan membuat persegi panjang yaitu 640 x 200pt dan tambahkan Drop Shadow.

Dengan Type Tool (T), ketik label untuk switch yang akan kita buat. Satu akan untuk deteksi lokasi otomatis dan yang lain akan mengatur apakah suhu ditampilkan dalam Fahrenheit atau Celcius. Karena elemen utama switch ini berada dalam posisi 200pt maka akan masuk akal bahwa switch perlu dipusatkan dalam ruang > tinggi.

Mari tambahkan pemisah antara kedua label ini. Dengan Line Segment Tool (\), buat garis yang 476pt lebar dan berikan stroke 2pt. Stroke ini akan menjadi hitam dengan Opacity dikurangi menjadi 10pt.

chris-weather-6-5chris-weather-6-5chris-weather-6-5

Langkah 6

Untuk membuat sakelar sendiri, kita akan menggunakan kembali bentuk persegi bulat dari sebelumnya. Salin bentuk ini dan ubah ukurannya menjadi 50pt dan isi dengan hitam. Klik kanan bentuk ini dan pilih Transform > Move… lalu gerakkan 80pt secara horizontal dan klik "Copy", bukan "OK". Anda sekarang harus memiliki dua kotak bulat di samping satu sama lain.

Pilih Rectangle Tool (M) dan gambar persegi panjang yang tingginya sama dengan kotak bulat dan bertemu masing-masing secara langsung di tengah. Pilih ketiga elemen ini dan Unite mereka di panel Pathfinder. Kurangi Opacity bentuk ini menjadi 15% dan sejajarkan dengan benar di sebelah label kita.

chris-weather-6-6chris-weather-6-6chris-weather-6-6

Langkah 7

Tempelkan kotak bulat kami sekali lagi dan isi dengan putih dan sesuaikan ukurannya menjadi 40 x 40pt. Sejajarkan ke sisi kiri atau kanan sehingga ada jarak di sekitar bagian tepi. Anda sekarang dapat menduplikasi bentuk-bentuk ini dan membaliknya secara horizontal untuk menunjukkan status saklar yang berlawanan. Selanjutnya tambahkan teks Anda untuk mewakili status saklar. Lakukan ini untuk menyalakan dan mematikan.

Akhirnya Anda dapat menduplikasi elemen ini untuk pemilih Unit juga. Dan dengan itu menu lokasi kami selesai. Mari kita lanjutkan ke menu Date kita.

chris-weather-6-7chris-weather-6-7chris-weather-6-7

7. Tambahkan Menu Tanggal

Langkah 1

Menu tanggal ini akan menunjukkan cuaca untuk hari mendatang. Mari kita Ulangi beberapa langkah pertama dari lokasi menu dan salinan atas halaman utama seluruh lapisan kemudian masker dari unsur-unsur yang pergi halaman dan menambahkan sebuah persegi untuk mewakili bayangan menu.

chris-weather-7-1chris-weather-7-1chris-weather-7-1

Langkah 2

Sekarang buat persegi panjang yang 640 x 160pt dan sejajarkan ke bagian atas papan seni itu lalu beri Drop Shadow.

chris-weather-7-2chris-weather-7-2chris-weather-7-2

Langkah 3

Kita membutuhkan sesuatu untuk mewakili hari dan tanggal, sama seperti sebelumnya mari buat ikon kalender. Buat persegi panjang bulat yang 120 x 120pt dan tambahkan stroke dalam yang 8px. Sekarang pergi ke Object > Expand Appearance untuk mengonversi stroke ke bentuk yang sebenarnya. Dengan Direct Selection Tool (A) diaktifkan, pilih titik jangkar batin bagian atas dan dorong ke bawah 30px menggunakan tombol panah pada keyboard Anda. Kemudian kurangi Opacity menjadi 15%.

chris-weather-7-3chris-weather-7-3chris-weather-7-3

Langkah 4

Sekarang tambahkan teks Anda ke ikon. Kita ingin tindakan teratas menjadi hari dalam seminggu. Ini akan menjadi teks putih. Tanggal itu sendiri akan menjadi hitam dengan Opacity turun menjadi 15%. Keduanya menggunakan "Maven Pro" dalam berat "Medium".

chris-weather-7-4chris-weather-7-4chris-weather-7-4

Langkah 5

Akhirnya tambahkan suhu yang diharapkan. Font akan "Mission Gothic" untuk angka dan "Maven Pro" untuk simbol derajat. Kami juga akan menambahkan pilihan "high/low" di kanan bawah elemen.

Jika Anda ingin, Anda dapat menduplikasi elemen ini dan menyesuaikan hari/tanggal untuk sisa minggu ini.

chris-weather-7-5chris-weather-7-5chris-weather-7-5

Di sini Anda Memiliki Tiga Layar

Pastikan untuk memperhatikan jarak antar elemen dan setiap angka lokasi yang tepat yang dapat Anda pikirkan untuk membuat para pengembang menjadi lebih mudah. Semakin banyak informasi yang Anda berikan akan semakin mudah bagi pengembang untuk mengkodekan produk agar sesuai dengan desain. Saya juga tidak bisa cukup menekankan betapa pentingnya untuk selalu menguji saat Anda merancang sehingga Anda tahu desain Anda akan diterjemahkan ke layar ponsel. Semoga sukses dengan desain aplikasi Anda!

chris-weather-600chris-weather-600chris-weather-600
One subscription.
Unlimited Downloads.
Get unlimited downloads