Trik Menggambar Rounded Rectangle – Pixel Perfect

Di tutorial ini, saya akan tunjukkan cara menggambar rounded rectangle dan membuat double rounded rectangle yang proporsional seperti di gambar kiri.
Trik Menggambar Rounded Rectangle - Pixel Perfect

Memahami Rounded Rectangle

Sebelumnya, kita perlu memahami anatomi dari rounded rectangle. Apa itu rounded rectangle dan bagaimana cara pembuatannya? Rounded rectangle adalah sebuah persegi panjang dengan pojok berupa seperempat lingkaran. Rounded memiliki parameter panjang dan lebar —seperti persegi panjang— dengan radius untuk seperempat lingkaran di pojoknya.

Untuk menyederhanakan, berikut adalah rounded rectangle dengan radius 16 px.

Trik Menggambar Rounded Rectangle - Pixel Perfect
Adapun berikut adalah bentuk rounded rectangle yang sama, dibuat secara manual menggunakan 2 persegi dengan empat lingkaran dengan jari-jari (radius)16 px.
Trik Menggambar Rounded Rectangle - Pixel Perfect

Perhatikan pojok keduanya.

Trik Menggambar Rounded Rectangle - Pixel Perfect

Menggambar Rounded Rectangle Secara Manual

Langkah 1

Kita akan menggambar sebuah rounded rectangle dengan radius 16 px seperti yang dalam contoh di atas secara manual di Photoshop.

Buat file baru di Photoshop (Ctrl + N). Aktifkan ruler dengan klik Ctrl + R. Klik dan geser dari ruler ke atas kanvas untuk membuat guide dengan jarak 16 px di keempat sudut. Lihat gambar di bawah untuk referensi.

Trik Menggambar Rounded Rectangle - Pixel Perfect

Langkah 2

Aktifkan tool Circle Shape lalu buat shape lingkaran dengan cara klik dan geser sambil menahan Shift. Seperempat bagian lingkaran harus berada tepat di persimpangan guide. Ukuran lingkaran dalam Baris Pilihan seharusnya 32 px, ini menunjukan diameter, yaitu dua kali jari-jari (radius).

Trik Menggambar Rounded Rectangle - Pixel Perfect

Langkah 3

Tambahkan lagi lingkaran yang sama di pojok lainnya. Pastikan Anda memilih mode path Unite di Baris Pilihan.

Trik Menggambar Rounded Rectangle - Pixel Perfect

Langkah 4

Tambahkan persegi panjang untuk menyambungkan keempat pojoknya.

Trik Menggambar Rounded Rectangle - Pixel Perfect
Trik Menggambar Rounded Rectangle - Pixel Perfect

Hasil

Inilah perbandingan antara bentuk rounded rectangle manual dan otomatis dengan radius yang sama, 16 px.

Trik Menggambar Rounded Rectangle - Pixel Perfect
Trik Menggambar Rounded Rectangle - Pixel Perfect

Menggambar Dua Rounded Rectangle Secara Proposional

Selanjutnya, setelah mengetahui cara menggambar rounded rectangle secara manual, kita akan menggambar rounded rectangle bersarang. Ini sering ditemukan dalam desain ikon Android dan iOs yang menggunakan rounded rectangle sebagai batas terluarnya.

Langkah 1

Kita masih meneruskan rounded rectangle yang dibuat secara manual tadi. Kita tinggal menambahkan lingkaran lagi —bisa lebih besar atau lebih kecil— dengan titik tengah sama seperti lingkaran sebelumnya. Gunakan radius genap, jangan ganjil, agar hasilnya simetris lingkaran sempurna.

Trik Menggambar Rounded Rectangle - Pixel Perfect

Langkah 2

Berikutnya, tinggal menambahkan persegi panjang untuk menyambungkan keempat lingkaran tadi.

Trik Menggambar Rounded Rectangle - Pixel Perfect

Hasil

Sisi kiri adalah tampilan rounded rectangle yang kita peroleh. Perhatikan bahwa kedua pojoknya seimbang.

Bandingkan dengan bentuk rounded rectangle yang ada di kanan, kedua radius pojoknya tidak seimbang. Bentuk rounded rectangle di bagian dalam dibuat dengan menduplikasi bentuk luar dan mengubah ukurannya dengan perintah Free Transform (Ctrl + T).

Trik Menggambar Rounded Rectangle - Pixel Perfect
Anda bisa melihat perbandingan radius pojoknya secara lebih detail di bawah.

Trik Menggambar Rounded Rectangle - Pixel Perfect
Perbandingan ini akan lebih jelas menunjukkan perbedaannya.

Trik Menggambar Rounded Rectangle - Pixel Perfect

Contoh Aplikasi Rounded Rectangle Dalam Ikon Applikasi

Mungkin Anda masih bingung, apa tujuannya memahami desain ini? Agar lebih jelas, lihatlah contoh desain ikon berikut yang menggunakan prinsip yang sama, perhatikan bagaimana pojok rounded rectangle yang digunakan seimbang.

Trik Menggambar Rounded Rectangle - Pixel Perfect
Icon for Interior design applicaion

Trik Menggambar Rounded Rectangle - Pixel Perfect
Wild Game Reserve logo

Trik Menggambar Rounded Rectangle - Pixel Perfect
Gym Genius app icon

Trik Menggambar Rounded Rectangle - Pixel Perfect
Treehouses app icon

Trik Menggambar Rounded Rectangle - Pixel Perfect
waffle iphone icon

Trik Menggambar Rounded Rectangle - Pixel Perfect
Veggie Meals app icon

Download File

Download File PSD

Iklan

One thought on “Trik Menggambar Rounded Rectangle – Pixel Perfect

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s