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