Grid dan Guide Line - Alat Bantu Saat Membuat Icon Pixel Perfect

Grid dan Guide Lines, adalah 2 fitur yang efektif dan sangat membantu anda dalam proses pembuatan Icon sehingga anda dapat bekerja secara efesien. Penasaran? Bagaimana cara penggunaannya?

Untuk membuat sebuah atau satu set icon yang pixel perfect, seorang icon designer tentunya harus tau dan paham betul apa itu fitur Grid dan Guide pada Adobe Illustrator khususnya.

Bicara tentang Pixel Perfect, akan kita bahas pada artikel terpisah, bisa anda lihat disini

Sekilas tentang Pixel perfect, dimana icon yang akan kita buat diharuskan tepat dan masuk pada kotak-kotak pixel, sehingga jika kita lihat menggunakan Pixel Preview (pada adobe illustrator) atau kita kecilkan Icon yang kita buat, maka Icon tersebut masih terlihat jelas, atau masih terlihat bentuknya (setidaknya tidak blur).

Kita akan membagi menjadi 2 pembahasan, Grid dan Guide Lines.

Grid

Grid adalah salah satu fitur bawaan dari Adobe Illustrator (tentunya software grafis berbasis vector juga punya) yang membuat lembar kerja kita menampilkan kotak-kotak atau garis bantu untuk memudahkan kita membuat sebuah desain agar mempunyai konsistensi dalam ukurannya.

Gambar diatas adalah tampilan Grid, penggunaan Grid pada artboard 50x50 Pixel dengan Gridline per 1 pixel, anda dapat menghitung jumlah kotak dari samping pada artboard yang berjumlah 50. 1 kotak Grid mewakili 1 kotak Pixel layar digital baik itu mobile smartphone atau monitor.

Anda bisa melihat icon plus (+) yang dilihat menggunakan Pixel Preview diatas, dimana satu line mempunyai nilai stroke (tebal garis) 2 pixel, sehingga garis/line diatas menempati 2 kotak pixel.

Untuk mengakses pengaturan jumlah per pixel pada grid, anda dapat mengaksesnya melalui Menu Edit -> Preferences -> Guides & Grid...

Ada beberapa pengaturan didalamnya, terbagi menjadi 2 bagian Guides dan Grid, seperti pada gambar dibawah ini.

Anda dapat merubah mulai dari warna Guide dan Grid serta gaya/style dari Guide line dan Grid, ada 2 style untuk Guide line dan grid, yaitu Line dan Dots yang masing-masing dengan tampilan sama, kemudian dibagian Grid ada sedikit pengaturan Gridline every untuk satu kotak per berapa pixel, dan Subdivision adalah jumlah sub kotak.

Untuk lebih jelasnya anda dapat melihat pada gambar dibawah ini.

Sebelumnya saya merubahnya menjadi seperti pada gambar diatas. Dan hasilnya menjadi seperti ini.

Karena saya merubah kolom Subdivision menjadi 4 maka anda dapat melihat ada kotak/grid yang lebih besar dan lebih tebal garisnya dan berisi 4x4 pixel, itu adalah Subdivision, kemudian warna garis grid atau guide berubah menjadi seperti yang kita inginkan.

Guide Line

Guide line tidak jauh berbeda dengan Grid, Guide line adalah salah satu fitur dan alat bantu juga untuk memudahkan anda dalam membuat desain grafis, tetapi yang lebih menariknya adalah kita dapat membuat sendiri Guide line tersebut sesuai dengan kebutuhan dan keinginan kita.

Khususnya dalam mendesain Icon yang Pixel Perfect, banyak tersebar di internet guide line template yang bisa anda download dan anda gunakan untuk membuat Icon pack, sehingga anda tidak perlu susah payah membuat guide line, seperti contoh Google material, yang membuat beberapa rule mengenai ini.

Untuk lebih lanjutnya anda dapat melihat artikelnya disini

Guide line dibuat bertujuan untuk memudahkan Desainer untuk membentuk grafis maupun icon sesuai keinginan, untuk membuatnya pun tidak terlalu sulit. Guide line tercipta dari beberapa path yang kita bentuk menggunakan Pen Tool.

Mari kita ulas garis besarnya.

Saya asumsikan anda sudah membuatnya seperti ini menggunakan Pen Tool, kemudian anda dapat seleksi semua garis tersebut dan terakhir klik kanan pilih Make Guides.

Maka garis-garis yang sebelumnya kita buat akan menjadi Guide Lines seperti dibawah ini dan sudah dapat anda gunakan untuk membuat icon.

Selamat mencoba, semoga bermanfaat.

Thank you

Referensi

https://material.io/