Create Pixel Perfect Artwork for the Web in Illustrator CC 2017
Starting with November 2016 update for Illustrator CC 2017 we have a couple of improvements to draw pixel perfect artwork for the web applications.
The very first question you may have is: why to align objects to pixel grid?
Why you should align objects to pixel grid when designing for the web
The simplest answer is: because you want crisp and sharp edges without anti-aliasing applied.
This is desired in most cases and keep in mind that curved objects and round corners must have anti-aliasing applied. It is not the fault of Illustrator or web browser and user's device but rather the fault of technology that we are using and its limitations. Nothing is perfect, believe it or not!
You can read more about anti-aliasing and how it works in my post: Anti-aliasing in Photoshop. That's why anti-aliasing must be applied and how it works on any device.
How to align objects to pixel grid in Illustrator CC 2017There are a couple of different situations and options to align objects to pixel grid in Illustrator.
Align existing objectsTo align already drawn the object to pixel grid do the following:
- Select object using Selection tool
- Right click and choose: Make Pixel Perfect (1) or click the Align selected art to pixel grid icon (2) in the control panel. You can also use Object > Make Pixel Perfect command.
Align new objects while drawing, moving and scaling themTo align all new objects to pixel grid you can click on Align art to pixel grid on creation and transformation in the control panel.
There is also and Pixel Snapping Options dialog for more control over snapping options. To open this panel click on the triangle next to Align art to pixel grid on creation and transformation icon.
Product used in this tutorial:
Adobe Illustrator CC 2017
Draw pixel-perfect art