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.
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.
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'.
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.
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!
From swatch libraries and brush packs to actions and graphic styles, this tutorial will show you two different methods for installing and using custom Illustrator presets that you have downloaded from the web or created yourself.Read more
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.Read more
This tutorial is a follow up to one of my older posts on how to create custom letterforms in Illustrator, this time showing you how to take vector letterforms from Illustrator and convert them into a full font that you can use in your designs.Read more
In this tutorial we will create a scattered confetti effect. This effect could potentially be very time consuming to draw, resize, rotate and rearrange each shape manually, so we will use Scatter Brushes to simplify the whole process and make it much more fun!Read more
Supercharge your design
Medialoot has thousands of free hand-made design resources to help make your life easier. Fonts, icons, bootstrap themes, mobile app designs, textures, styles, vectors, and much more. Check it out and start downloading in seconds: