#Tutorial Sketch — Mari membuat design aplikasi iOS-Bag 8

Dwinawan
Dwinawan
Aug 27, 2017 · 3 min read

Pada artikel sebelumnya, kita telah mulai membuat konten berupa “card”, Dan sudah mulai mengisi bagian dalam “card tersebut”. Di artikel ini kita akan melanjutkan mengisi bagian tersebut. Yuk langsung saja….

1. Membuat Avatar

  • Buat lingkaran (tekan tombol “O”) dengan ukuran 20px X 20px
  • Tempatkan di bawah teks dengan jarak 15px
  • Beri nama “Oval”

2. Menaruh lingkaran ke dalam Folder Group

  • Select “Oval”
  • Lalu tekan Command + G
  • Sehingga akan tercipta sebuah Folder Group di sebelah kiri. Beri nama folder tersebut “avatar”

3. Masukkan foto atau gambar

  • Buka uifaces.com
  • Pilih salah satu gambar lalu klik kanan dan pilih “Copy Image”
  • Lalu setelah itu Select “Oval”
  • Lalu tekan “Command + V” untuk mem-paste gambar

4. Posisikan foto di depan lingkaran

  • Geser foto hingga menutupi lingkaran

5. Masking Gambar

  • Select “Oval” di sidebar sebelah kiri
  • Klik Kanan lalu pilih “Mask”

6. Foto akan masuk ke dalam lingkaran

  • Anda akan mendapatkan hasil seperti dibawah ini

7. Posisikan Foto sesuai dengan lebar lingkaran

  • Select Foto yang berada dalam lingkaran
  • Sehingga akan muncul kotak untuk mengatur ukuran
  • Posisikan sesuai dengan lebar lingkaran.
  • Tekan Shift saat mengatur ukuran, agar foto tidak ter-strecth

8. Setelah Foto sudah terlihat pas, kini beri nama disampingnya

  • Tekan T untuk mulai menulis
  • Posisikan tulisan 10px dari avatar dan posisikan 23px dari batas bawah card

9. Satu card telah selesai dibuat

  • Setelah melakukan langkah2 diatas, seharusnya Anda mendapatkan hasil seperti dibawah ini

10. Buat beberapa card dengan meng-copy card yang sudah ada

  • Select Folder “Card 1”
  • Tekan “Command + D” lalu geser card yang baru ke bawah
  • Posisikan Card baru berjarak 15px dari card diatasnya

Pada Tutorial bagian 8 ini seharusnya Anda mendapatkan tampilan seperti diatas ini. Jika Anda tidak mendapatkan tampilan seperti diatas silahkan periksa langkah langkah diatas atau Anda bisa menanyakan di kolom komentar bagian mana yang kurang jelas :)

Bersambung ke bagian 9, Mohon ditunggu untuk bagian 9 nya :D

Insight

UI, UX, Bisnis Design

)

Dwinawan

Written by

Dwinawan

Co-Founder Paperpillar • UI Designer • Love to create design exploration on dribbble.com/dwinawan • Find me on twitter twitter.com/dwinawan_

Insight

Insight

UI, UX, Bisnis Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade