Pixel Perfect Designs in Illustrator Just Got a Lot Easier

Pixel Perfect Designs in Illustrator Just Got a Lot Easier

Adobe have updated Illustrator CC with a new feature which will make the lives of web, mobile and UX designers much easier. If you are a designer who creates graphics for screen, then this new feature may completely change how you work.

Way back in 2011, I posted an article called How to Get Pixel-Perfect Designs in Adobe Illustrator. Something which sounds simple but has always been much trickier than it should be. Fireworks was the first app I used that truly understood how vectors and pixels should work together and new apps on the scene such as Sketch also handled pixel perfect designs just as you would expect. But for a long time Illustrator has been more about 'vectors for print' than 'vectors for screen'. Until last week when amongst a list of new features for Illustrator CC 2017 such as Stock templates, improvements to Creative Cloud Libraries, and a new 'New Document' window, I noticed 'Create pixel-perfect artwork' and instantly downloaded the update.

How is the new pixel-perfect feature better?

It just works

Illustrator used to require that you choose to 'Align New Objects to Pixel Grid' when creating a new document, otherwise there was no way to turn it on and all objects would need to be aligned to the grid manually or by using an option in the Transform panel. This was very unintuitive and part of the reason why I wrote a tutorial on how to do it. I considered writing a new tutorial on how to create pixel perfect designs in Illustrator CC 2017, but it honestly isn't necessary. The feature is available on all new and existing documents, and can be toggled on and off with a button in the top right corner of the interface. All of the options are also there and can be turned on or off as you see fit. No step by step guide required. illustrator cc 2017 pixel perfect options

You can move and scale objects freely

Previously in a document with 'Align New Objects to Pixel Grid' on, new objects were indeed aligned to the grid. But unless you also checked the 'Align to Pixel Grid' option in Transform panel after drawing a shape, resizing the object or dragging it around would move the object off-grid. This is no longer the case, unless you specifically turn it off, all objects are aligned to the grid, no matter what you do to them. illustrator cc 2017 pixel perfect options

It doesn't break your artwork

Checking the 'Align to Pixel Grid' option from the Transform panel on an off-grid shape used to snap every single vector point in that shape to the grid. This could often break a shape with a rounded corners, or any shape really that was more complicated than a rectangle. The new version of Illustrator handles things much more intelligently. Rounded corners remain intact, and if the shape is very complex and cannot be made pixel perfect for obvious reasons, Illustrator will not attempt to do so (because it would break your artwork). Instead you simply get a message reading 'Selection contains artwork that cannot be made pixel perfect'. illustrator cc 2017 pixel perfect options

It's easy to toggle on and off

Previously, combining shapes with the Pathfinder tool would align the result to the pixel grid, even if you didn't want it to. This would sometimes breaks the shape (as described above), and there was no way to turn the option off. In fact the only way to get around it was to create a new document that doesn't align new objects to pixel grid. And copy and paste your artwork into it. In the updated version, if multiple off-grid shapes are combined they will not automatically be aligned to the grid unless you choose align them by using the button in the top right corner of the interface. illustrator cc 2017 pixel perfect options

Why is this feature so important?

When Adobe updates apps, the basics are rarely ever touched. Probably because most Illustrator users know how their software works and how to use it. It seems very risky to change basic functionality, when a safer option would be to add new features on top of what is already there. So when something as basic as drawing vector shapes gets an update like this, it's a pretty big deal. I for one am very happy with this update. I'm not sure when or even if I will be switching from Photoshop for Web and UI design to another tool. But if I ever do, Illustrator is now a perfectly viable alternative. One thing I know for sure is that creating SVG icons with Illustrator (a big part of my job) just got a whole lot easier!

Bonus: Zoom to selection

If the new pixel-perfect artwork feature wasn't enough, Adobe have also changed the way zooming works. Illustrator will now zoom in on active objects, points, segments, or paths. Making it much easier to zoom in and tweak artwork. Lets be honest, why else do you zoom in to a document if not to make more precise edits to what you're working on? This is a very welcome update too!

Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

See all
X

You've successfully logged in!