This way when you move your icons they will stay in the pixel grid.Īs you have probably understood, we are setting all values to pixels. 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)Ĭhange Keyboard Increment to 1px.

Once it’s checked, all newly created objects will automatically snap to the nearest pixel. That’s why it’s called pixel perfect, not millimeters perfect 😉 Align New Objects to Pixel Grid Please notice that all numbers are even! It’s the way they should be. 64,23 px).Īrtboard size belongs to the icons you’re creating. Make sure you don’t leave either of these features with a comma (e.g. There are 3 key elements in creating proper pixel perfect Illustrator document: artboard dimensions, units and aligning all new objects to the pixel grid. The first step you have to take is to create a correct Illustrator file. Let me show you my way of making pixel perfect icons. Now I feel the need to share this experience.

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. However, for now it is an absolute must, or a super power for every icon designer out there!Īt the beginning of my career as an iconographer, I was struggling with making my icons pixel perfect. At some time in the future these skills might become less important as the resolutions on our devices are becoming higher. So pixel perfect is the way to go!Įvery Icon Designer should know how to create pixel perfect icons.

And you will never know how your client will use these icons in the future. 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. Imagine if road signs were blurry, what a mess they would make! Blurry icons can’t communicate as good as sharp ones. Icons are all about clarity and communication.

How to change pixels in illustrator