Pixel – Perfect Art

What is Pixel Perfect?

Illustrations are all about clarity and communication. Blurry illustrations can’t communicate as good as sharp ones. Illustrator lets you create pixel-perfect art that looks sharp and crisp on screens at different stroke widths and alignment options. Before we start creating pixel perfect illustrations we need to make sure some settings are ready!

Initial Settings

Width and height should be even numbers. Illustrations are meant to be resized, so imagine you are creating them on a 64×64 grid and make one object 15px x 21px. When you’ll resize your icon to 32×32 (half), that object will become 7,5px x 10,5px, which will result in a blurry icon.

Use Whole Object Measurements

Every single measurement. Avoid any free-hand drawing. Instead, choose an object tool (ellipse, rectangle, etc.) and click on the screen. Enter your object dimensions manually. – no decimals!

Units

Pixels

Align New Objects to Pixel Grid

Once it’s checked, all newly created objects will automatically snap to the nearest pixel.

Illustrator Preferences
General

Change Keyboard Increment to 1px.

Units

As you have probably understood, we are setting all values to pixels.

Grid

A Gridline as the name implies is a line (be it vertical or horizontal), that Illustrator draws in order to create the Grid. The option itself controls the distance at which the software draws these lines. Change the option to 64 in our 1.024 artboart.

If the Gridline every controlled the distance at which Illustrator added the lines, the Subdivisions controls the number of sections that fall in-between those lines. By default it comes set to 4.