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

Yuk langsung saja :)

1. Buat Artboard (tekan huruf “A”)

dengan ukuran 375 x 667 atau kamu bisa langsung pilih dari opsi Artboard di sebelah kanan. Ukuran 375 x 667 adalah ukuran layar iPhone 7 dan iPhone 6.

2. Berikan warna background untuk Artboardnya.

Kita akan memberi warna abu abu dengan color code #F5F5F8

3. Masukkan teks (tekan huruf “T”)

Tulis “Inbox” dan sesuaikan dengan properti disebelah kanan. Kali ini kita menggunakan font Raleway. Kalian bisa mendownloadnya di google font.

4. Membuat menu bar

  • Buat sebuah rectangle / kotak dengan menekan huruf “R”.
  • Atur panjang-nya sesuai dengan panjang Artboard yaitu 375px.
  • Atur tinggi-nya sebesar 60px.
  • Hilangkan border nya
  • Beri warna putih
  • Tempatkan di bawah

5. Beri shadow pada menu bar

Shadow bertujuan untuk memperjelas bahwa menu bar adalah komponen terpisah.

A: “Kenapa enggak pakai garis atas saja kalau gitu?” , 
B: “Trend nya lagi diffuse shadow bro…. :p”
A: #Plakkkkkk

Berikut adalah properti shadow yang saya gunakan.

6.Bagi menu bar menjadi 4 bagian sama panjang

Karena kita akan menempatkan 4 menu di menu bar ini. Berikut caranya:

  • Buat duplikat dari menu bar yang ada dengan cara select menu bar yang ada dan tekan Command+D, sehingga akan ada dua Menu Bar.
  • Ganti nama “Menu Bar Copy” menjadi Icon-1 , dengan cara double click di namanya.
  • Semula “Icon-1” memiliki panjang 375px karena kita akan menempatkan 4 menu di menu bar ini maka masing masing menu memiliki panjang 375/4. Tulis langsung di properti width nya seperti dibawah ini dan tekan “Enter”
  • Maka panjang “Icon-1” menjadi 93.75px. Setelah itu beri warna merah atau warna apapun terserah Anda, memberi warna hanya untuk penanda saja.
  • Setelah itu tinggal membuat duplikasi sebanyak 3 buah dari “Icon-1” (Tekan Command+D untuk men-duplikasi), beri nama masing masing Icon-2, Icon-3 dan Icon 4 lalu beri warna berbeda beda dan atur posisinya sehingga Anda mendapatkan hasil seperti dibawah ini

7. Menempatkan nama menu pada menu bar

Kita akan memulai untuk membuat susunan menu pada menu bar. Untuk langkah awalnya kita akan memasukkan nama menu terlebih dahulu. Pertama kita akan memasukkan menu “Home”. Disini saya menggunakan ukuran “10” untuk teks “Home.”

Setelah itu posisikan teks “Home” tersebut di tengah tengah Layer “Icon-1”, dengan cara men-select Layer “Icon-1” dan teks “Home” lalu tekan icon bertanda merah dibawah ini

Sehingga posisi “Home” akan berada di tengah, Selanjutnya geser menu home ke bawah. Dan buat jaraknya 10px dari bawah.

Untuk mengetahui jaraknya Anda bisa men-select teks “Home” lalu tekan-tahan tombol Alt dan arahkan Cursor ke bagian “Icon-1”, sehingga akan muncul info jarak seperti dibawah ini.

Ulangi langkah-langkah diatas sehingga Anda mendapatkan susunan seperti dibawah ini.

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