Preparing the Illustrator file.

Why Pixel Perfect is important?

Icons are all about clarity and communication. Blurry icons can’t communicate as good as sharp ones. Simple as that. Imagine if road signs were blurry, what a mess they would make!

When you’re working with bigger icons (>64px), blurry edges usually look unaesthetic, and if you need to use them on a smaller scale (16px - 32px) they might be even unrecognizable. And you will never know how your client will use these icons in the future. So pixel perfect is the way to go!

Every Icon Designer should know how to create pixel perfect icons. At some time in the future these skills might become less important as the resolutions on our devices are becoming higher. However, for now it is an absolute must, or a super power for every icon designer out there!

At the beginning of my career as an iconographer, I was struggling with making my icons pixel perfect. Sometimes it was a fail after a fail, but now, with all the experience behind my back, I can proudly say that my icons are sharp as hell! I learned the importance of pixel perfect design the hard way, but it was totally worth it.

Now I feel the need to share this experience. Let me show you my way of making pixel perfect icons.

Setting up the document

So you want to make pixel perfect icons. Great. The first step you have to take is to create a correct Illustrator file.

There are 3 key elements in creating proper pixel perfect Illustrator document: artboard dimensions, units and aligning all new objects to the pixel grid.

1. Dimensions

Width and height should be even numbers. Make sure you don’t leave either of these features with a comma (e.g. 64,23 px).

Artboard size belongs to the icons you’re creating. It could be of any standard size: 16x16; 28x28; 30x30; 40x40; 48x48; 64x64; 92x92; 128x128, etc.

Please notice that all numbers are even! It’s the way they should be.

2. Units

Pixels. That’s why it’s called pixel perfect, not millimeters perfect ;)

3. Align New Objects to Pixel Grid

Ok, this one is very important. Go and check this feature. Once it’s checked, all newly created objects will automatically snap to the nearest pixel.

Illustrator Preferences

Wonderful, now when you have a proper document, it’s time to adjust some of the Illustrator’s preferences.

First and foremost, go to Illustrator > Preferences > General (or press Cmd + K if you are a Macbook user)

General

Change Keyboard Increment to 1px. This way when you move your icons they will stay in the pixel grid.

Units

As you have probably understood, we are setting all values to pixels. Go to the Units menu and change General and Stroke values to pixels. Type can remain in points, because you rarely use fonts in icons.

That’s it!

You have upgraded your Adobe Illustrator making it a real icon factory. Still, there is a lot more you need to know about pixel perfect icons if you want to nail it.

In my next newsletter I’ll be talking tips and tricks you should use to make super sharp icons. It will come out on Monday. So, stay tuned!

This was my first lesson ever. Huh. If you have any questions or suggestions, drop me an email. I want to give you all the best quality content I can. Please help me get better at teaching and writing! :)

Stay awesome, space cadets!