Create Pixel Perfect Artwork for the Web in Illustrator CC 2017

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.


Why you should align objects to pixel grid when designing for the web

The very first question you may have is: why to align objects to pixel grid?
The simplest answer is: because you want crisp and sharp edges without anti-aliasing applied.
difference between antialiased edges and object aligned to pixel grid


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 2017

There are a couple of different situations and options to align objects to pixel grid in Illustrator.

Align existing objects

To 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 them

To align all new objects to pixel grid you can click on Align art to pixel grid on creation and transformation in the control panel.
Align art to pixel grid on creation and transformation


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.
Pixel Snapping Options dialog


Product used in this tutorial:
Adobe Illustrator CC 2017

Reference:
Draw pixel-perfect art

Comments

Popular posts from this blog

How to Change Artboard Size in Adobe Photoshop

Free Puzzle Pieces Actions For Photoshop and Elements

Old Weathered Vertical Wooden Planks Free Image