In Tips & Freebies

Quick Tips: AI Setup for Pixel Perfect Icons

  1. Set your document to what ever height and width you prefer, but make sure the measurements are in pixels and are whole numbers (none of this 350.50px).
  2. Go to the top and click “View” then near the bottom you will find “Show Grid” and select it. This will display the pixel grid.
  3. Next go back to “View” and select “Pixel Preview“. As you can see in the video, the icon has gone from a smooth vector graphic to a pixellated graphic. Working in this mode will help you see if your icons are going to be sharp when rendered out.
  4. Finally you need to make whatever you create snap to the pixel grid. There are two ways of doing this. You can either go to the right side and click the button as shown in the video. If you click the arrow next to it it will give you more options that you can choose from to customise the way you want to work. Or you can also activate this by going to “View” again and selecting “Snap To Pixel” which can be found near the bottom of the list.

And that is it you can now create pixel perfect icons. If you have set this up correctly all your shapes and vector point values should be whole numbers (Note that some rounded shapes may give you values of half a pixel. To avoid this try and use even numbers as your values where ever you can.

If you found this tip useful, why not share it with a friend.

Music by www.bensound.com

Web Design Tools

Test your skills with our tools