Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Affinity Designer
Webdesign

Membuat Desain Aplikasi Kebugaran pada Affinity Designer

by
Difficulty:BeginnerLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Final product image
What You'll Be Creating
Final product image
Apa yang Akan Anda Buat

Pada tutorial ini saya akan menuntun Anda pada proses mendesain sebuah layar pembuka untuk aplikasi kebugaran iOS. Kita akan bekerja menggunakan Affinity Designer, sebuah alat yang baru dan menjanjikan yang dibuat oleh Serif, dan aplikasi hebat untuk desain UI.

Anda tidak memerlukan pengalaman terdahulu dengan aplikasi ini. Pada akhir tutorial nanti, Anda akan mendapatkan pengetahuan dasar tentang bagaimana alur kerja Affinity Designer. Kita akan bekerja dengan tipe, vektor, gambar, dan model layer.

Membuat Lembar Kerja

Langkah 1

Mari kita mulai dengan membuat dokumen baru.

Setelah membuka Affinity Designer, pergi ke File > New dari menu utama. Pada popup yang muncul Anda dapat membuat parameter spesifik yang akan memenuhi kebutuhan Anda. Untuk sekarang mari kita fokus pada dua hal saja: Type dan Page Preset. Kita akan mendesain Aplikasi iPhone sehingga jalan yang terbaik adalah dengan memilih Type: Devices dan Preset: iPhone 5 (Retina). Affinity Designer akan secara otomatis mengatur pilihan lain untuk kita.

Langkah 2

Selanjutnya, kita perlu mempersiapkan sebuah lingkungan untuk bekerja. Saya adalah penyuka penggunaan grid pada desain. Kita tidak harus merenungkannya begitu dalam sekarang, tetapi kita akan membangun tata letak grid yang sederhana. 

Desain ini akan bersandar pada dasar-dasar Pedoman Antarmuka Manusia Apple, yang berarti mengikuti beberapa hirarki tertentu.  Kita perlu untuk mengalokasikan ruang untuk Status Bar (20 pt). Kemudian, walaupun transparan akan ada Navigation Bar sederhana di bawahnya (44 pt).

Selanjutnya, sebuah ruang untuk info utama tentang tampilan pengguna dan tempat untuk sebuah tombol untuk mulai berolahraga.

Pergi ke View > Guides manager dan sebuah popup akan muncul, dengan garis pedoman horizontal dan vertikal (untuk sekarang masih kosong). Klik pada ikon kecil halaman kosong di bawah section Horizontal Guides.  Melakukannya akan menambahkan garis horizontal. Kemudian klik dua kali pada nilai yang muncul pada daftar dan ubah menjadi 20pt. Tambahkan pedoman lain menggunakan atribut yang ditunjukkan di bawah ini.

Aplikasi Latar Belakang

Langkah 1

Sekarang kita akan membuat aplikasi latar belakang kita. Dari menu alat pada bagian kiri pilihlah Rectangle Tool (M), dan gambar sebuah persegi yang menutupi seluruh area kerja. Pada bagian kiri panel ada section Transform. Anda dapat memeriksa dimensi persegi Anda di sini, sekaligus menjadi titik awal mula (Anda harus memiliki dimensi X:0, Y:0 and W: 320 pt, H: 568 pt).

Langkah 2

Sekarang, kita akan mengubah warna pada latar belakang. Pergi ke Context Toolbar di bawah Toolbar utama (jika Anda tidak melihatnya, pergi ke View > Show Context Toolbar pada menu utama). Pada bagian kiri context toolbar Anda akan melihat properti yang berhubungan dengan bentuk yang telah kita buat. Klik pada persegi putih kecil yang dideskipsikan sebagai Fill (dengan persegi tadi telah dipilih).  Pilih RGB Hex Slider dari daftar section, kemudian masukkan #151515 pada bagian input parameter HEX dan tekan Enter.

Langkah 3

Pergi ke panel Layers. Klik dua kali pada layer yang mengandung bentuk buatan kita tadi dan ubah namanya menjadi “BG”. Kemudian klik pada ikon gembok kecil untuk mengunci layer BG. Dengan cara ini Anda tidak akan menghancurkannya dengan tidak sengaja ketika mengerjakan elemen lain.

Bar Status and Navigasi

Langkah 1

Fokuskan perhatian Anda pada Status Bar. Kita tidak perlu membuat ulang lingkaran, melainkan unduhlah file sumber yang dilampirkan pada tutorial ini untuk menemukan file stat-bar.  Kemudian pergilah ke File > Import pada menu utama Affinity Designer, pilih file stat-bar.afdesign dan klik satu kali di manapun pada desainnya.

Pilih grup dan letakkan pada bagian paling atas dari layar aplikasi.

Langkah 2

Sekarang waktunya kita membuat menu hamburger kita. Untuk memulai, nyalakan grid, pixel, dan guide yang tersembunyi pada Main Toolbar.  Ubah warna utama Anda menjadi “putih” pada bagian kiri atas dari jendela aplikasi. Pilih panel Rectangle Tool dari panel Tools di bagian kiri dan gambar persegi 18 x 2 pt. Tahan tombol Alt+Shift dan klik kemudian seret persegi tersebut di bawah persegi yang asli (kita hanya menggandakan perseginya). Lakukan sekali lagi dan Anda akan mendapatkan ikon menu hamburger.

Pilih ketiga bentuki ini (Shift+Kllik) dan klik pada tombol Add di Affinity Designer di bagian atas sudut kanan untuk  menyatukannya. Temukan ikon Anda pada panel Layer dan ubah namanya menjadi “menu-ikon-hamburger”.

Langkah 3

Pilih Artistic Text Tool (T) dari panel tool dan klik di mana saja pada ruang navigation bar pada desain kita. Masukkan teks “Running App” dan pilih seluruhnya. 

Klik pada tombol Character, ubah atribut teks seperti yang terlihat di bawah dan hilangkan popup. 

Sekarang, ketengahkan teks pada area navigation bar. Mereka akan tersembunyi secara otomatis. Jika tidak, pastikan untuk mengaktifkan opsi sembunyikan pada toolbar utama di bagian atas.

Sekarang waktunya untuk bersih-bersih pada panel layer. Klik Add New Layer pada bagian bawah panel Layer dan geser ikon hamburger, judul aplikasi dan status bar menjadi satu, kelompokkan judul aplikasi dan layer menu ikon bersama sama (pilih keduanya dan klik Cmd+G) kemudian ubah nama layer seperti yang ditunjukkan di bawah ini.

Grafik Progress

Langkah 1

Pilih Circle Tool (M) dari panel alat dan gambar lingkaran. Dengan bentuk baru Anda telah dipilih kemudian buka panel Stroke Properties pada bagian atas kiri dan ubah parameternya menjadi seperti yang terlihat di bawah ini.

Mulailah menggambar dari guide tengah yang kita buat sebelumnya, kemudian tekan dan tahan Cmd (gambar dari poin tengah) dan Shift (gambar lingkaran bukan elips) ketikamenggambar. Lingkaran Anda harus berkisar antara 200x200pt.

Pilihlah lingkarannya dan tekan Convert to Curve pada menu toolbar. Pilih Node Tool (A) dan klik tombol Break Curve. Dengan Node Tool yang masih dipilih buatlah dua titik pada lekukan sekitar ¾ dari tingginya. 

Catatan: Anda dapat membuat guide tambahan untuk menggaris noktah-noktah baru ini lebih baik. Tekan Cmd+R untuk menunjukkan Rulers kemudian klik dan tahan pada bagian atas penggaris/ruler, kemudian seret kursor ke bawah untuk membuat guide.

Pilih noktah atas pada lingkaran dan klik Delete dari keyboard Anda untuk menghilangkannya. Kini Anda memiliki dasar yang baik untuk grafik lingkaran terbuka.

Langkah 2

Pilih bentuk grafik dan gandakan (CMD+J). Pilih bagian atas kirinya dengan Node tool dan hapuslah. Buka panel Stroke Properties dan ubah nilai seperti yang terlihat di bawah ini. Warna hijau adalah #4DFA41 dan kuning #F7D203.

Langkah 3

Pilih Artistic Text Tool dan masukkan beberapa informasi tambahan, kemudian letakkan dan format menjadi seperti yang terlihat di bawah ini.

Kita sekarang telah memiliki progress yang dahsyat dengan tambahan informasi tentang pencapaian pengguna!

Tombol Mulai Berlari

Langkah 1

Pilih Rectangle Tool (M) dari panel Tool dan gambar persegi, dimensi sekitar 290ptx44 pt. Pada “Pedoman Antarmuka Manusia untuk iOS” desainer Apple menyarankan 44 pt sebagai tinggi tombol yang sempurna untuk ketukkan yang lebih mudah.

Shift-klik pada latar belakang aplikasi dan bentuk persegi yang baru saja kita buat, kemudian klik Align Horizontal to Center pada bagian kiri atas layar. Letakkan pada bagian bawah dari desain UI Anda. Anda juga dapat memilih bentuk persegi dan mengubah pengaturan X/Y nya pada panel Transform seperti yang terlihat di bawah ini:

Langkah 2

Pilih bentuk yang baru saja Anda buat. Bukalah panel Color Fill pada bagian kiri layar dan ubah warna isian menjadi transparan. Kemudian ubah stroke menjadi #4CFA41. Bukalah penel Stroke Preferences (di sebelah warna), atur ketebalan stoke menjadi 2pt dan garislah pada bagian dalam bentuk/shape Anda.

Langkah 3

Sekarang untuk label tombol. Pilih Artistic Text Tool dan gunakan untuk membuat sebuah label pada bagian tengah persegi yang baru saja Anda buat. Ketik “Muli Berlari” dan bukalah jendela Character dengan meng-klik tombol Character pada menu tool atas (dengan objek teks telah dipilih). Ubah semua preferensi untuk merefleksikan contoh seperti yang terlihat di bawah ini:

Sampel Statistik

Kita akan meletakkan tampilan status sederhana antara grafik progress dan tombol “Mulai Berlari”. Kita akan menampilkan kecepatan lari rata-rata, angka total lari, dan kalori yang terbakar.

Langkah 1

Kunjungi website Icons8 dan unduh Running icon, Stopwatch icon, dan Fire Element icon. Icons8 adalah sebuah tempat yang hebat untuk menemukan ikon yang modern dan elegan. Anda dapat memiliki PNG secara gratis (ingat untuk membuat link kembali pada website Icon8 jika Anda menggunakannya) atau belilah versi vektor. 

Langkah 2

Mulai dengan meletakkan ikon berlari pada desain Anda. Pergi ke File>Place dan pilihlah file, atau seret file nya pada Affinity Designer. Letakkan pada bagian tengah secara vertikal di bawah grafik progress.

Selanjutnya pergi ke panel Effect (dengan ikon tetap dipilih) dan bukalah tab Colour Overlay. Ubah warna overlay/lapisan atas menjadi #4CFA41.

Kemudian ubah tab Style dan buatlah style yang dibuat sendiri dari galeri pilihan dengan meng-klik pada menu ikon drop-down kecil pada bagian kanan, dan pilih Add Style from Selection. Dengan melakukan hal ini, akan lebih mudah untuk menggunakan style kita lagi kemudian.

Langkah 3

Sekali lagi, pilih Artistic Text Tool dan buatlah objek dua teks. Ketiklah angka sampel dan teks “Total Lari”. Formatlah menjadi seperti yang terlihat di bawah ini. Ketengahkan secara vertikal dan letakkan pada bagian bawah dari ikon Running Man (Manusia yang Berlari).

Langkah 4

Letakkan ikon lain yang telah diunduh pada desain UI. Dengan salah satunya telah dipilih, pilihlah style yang telah ada pada panel Style. Tara! Style kita telah terterapkan tanpa harus membentuk dari awal lagi.

Dengan ikon yang masih dipilih klik Cmd+C atau pergi ke Edit > Copy. Pilihlah ikon dan klik Cmd+Shift+V atau pergi pada Menu > Edit > Paste Style. Hal ini akan menempelkan (paste) style dari objek yang telah disalin (copy) sebelumnya pada area baru. Sangat ringkas, bukan?

Sentuhan Akhir

Langkah 1

Ketika kita memiliki seluruh komponen pada kanvas kita, sekarang waktunya untuk bekerja pada beberapa detail. Pertama, kita memiliki rongga yang tidak enak dilihat pada bagian tengah desain, mari lakukan sesuatu tentang ini.

Jika Anda mempertahankan layer Anda terorganisir, hal ini akan menjadi mudah. Pilih layer/kelompok dengan grafik progress kita dan pindahkan menjadi sekitar 50pt ke bawah. Jika layer Anda tidak terorganisir, langkah ini akan lebih sulit—hal ini memudahkan Anda sekali!

Langkah 2

Mari kita juga mempercantik latar belakang. Buatlah persegi berdimensi 320x320pt dan letakkan pada bagian atas desain. Pilih persegi ini dan pilihlah Corner Tool (C) dari panel tool.  Klik pada salah satu titik jangkar dari persegi tersebut untuk membuatnya dapat disunting, aktifkan Guides yang telah ada (Cmd+;) dan klik pada bagian tengah sudut bawah dari persegi untuk membuat sebuah noktah. Pilih dan pindahkan ke bawah sejauh 40 pt. Dan kini kita memiliki bentuk panah buatan sendiri. Pergilah pada panel Layers dan pindahkan pada layer latar belakang (letakkan pada bagian atas).  

Langkah 3

Dapatkan sumber file yang terlampir pada tutorial ini dan lihatlah foto daro jalan Parisian yang indah. Ini adalah salah satu foto yang saya ambil ketika mengunjungi Paris. Foto ini terlihat baik dan merupakan tempat yang sangat bagus untuk berlari. Bukalah pada Affinity Designer dan Copy/Salin (Cmd+C).

Kembalilah pada desain dan pilih bentuk paah yang kita buat tadi (pada panel Layers). Kemudian klik Cmd+Alt+V untuk menempel/paste di dalam bentuk. Pindahkan untuk potongan yang Anda inginkan. Pilih bentuk panah ini dan gelapkankegelapannya menjadi 40%. Klik Cmd+G untuk meletakkan kurva pada Group dan ubah Blending Mode dari Normal menjadi Glow.

Langkah 4

Dengan grup yang masih dipilih dapatkan Transparency Tool (Y) dari menu tool dan buatlah Linear Blending Gradient pada grup (klik dan seret) dari bawah menuju ke atas. Anda dapat bermain dengan tool untuk meraih hasil yang Anda inginkan.

Langkah 5

Sekarang mari tambahkan bayangan di bawah panah kita. Pilihlah grup dan pergi pada panel Effects. Luaskan tab Outer Shadow dan aktifkan. Radius 20pt dan 15pt imbangan merupakan angka yang bagus.

Kesimpulan

Anda telah selesai! Anda telah berhasil membuat desain aplikasi mobile dengan Affinity Desainer. Dengan keberuntungan, langkah-langkah yang berulang selama proses ini akan berhasil mengajarkan Anda teknik alur kerja Affinity Designer yang sangat bermanfaat. Saya menunggu untuk melihat desian lain yang Anda buat dengan Affinity Design!

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.