When I started working at Adobe nearly 10 years ago, I got up in the Illustrator PM’s face. AI9 had just implemented Pixel Preview mode for Web and screen designers, but the feature was maddeningly incomplete. I made my point forcefully, and over the years Illustrator has made improvements (e.g. enabling inside/outside/center placement of strokes), but the job just wasn’t done.
Until now.
You can now set up a document so that all art automatically snaps to pixel boundaries, meaning that, for example, 1-pixel black strokes will remain 1 pixel in width instead of looking like blurry 2-pixel gray strokes. You can also snap objects selectively to the grid, and you can choose among anti-aliasing options on text. See the Illustrator help docs for more info, or better yet, watch this three-minute video:
But don’t take my (or Mordy’s) word for it. Recently the noted Web designer Jon Hicks (creator of the Firefox logo, among other things) was unhappy with Illustrator for Web work. What a difference a month & a version make:
- March 22: “Illustrator [CS4] in particular irritated the hell out of me with it’s pixel preview artefacts.”
- April 30: After trying Illustrator CS5, “I’m rather smitten with it… Having pixels work properly in Illustrator is fantastic.”
Awesome news!
However, what isn’t clear is whether the underlying vector is actually moved, or if the alignment only happens as part of the rendering process.
This is obviously important as if the vector is changed, then the accumulation of those changes could cause problems after a number of moves (and consequent adjustments).
Therefore, I’m guessing/hoping that it’s the latter. John, could you clarify?
In simple cases, the path itself is moved. If you watch Mordy’s video carefully you’ll see that un-checking the checkbox does not make the stroke fuzzy again – it does not move the path back, so it is not the same as undo. In more complex cases, like multiple strokes or effects applied on a path, Illustrator is adjusting the rendered output.
* hug * 🙂 thanks for this! Please disregard that part of my email! 🙂
One thing though, illustrator still insists on turning *on* snap to pixel in the view menu when I switch to pixel preview mode. I think the reasoning behind that has actually been made redundant by this awesome new feature – so I hope that can be turned off. (and we all win… I’m impressed 🙂
Aren’t “view > snap to pixel” and this document wide feature actually the same? What’s the difference?
Kind greetings,
When is PS going to be pixel accurate? The brush tool is still .7 pixels off target.
And on the topic of Illustrator’s most important tool, the pen tool in Photoshop CS5 has issues. When clipping over a 128 RGB gray (exact value depends on color profile), the pen path completely disappears. This is only with OpenGL off.
With CS4 and below, there is plenty of contrast on any background.
This got a lot of applause at the Sydney Roadshow on Monday 🙂
This feature alone makes me want to upgrade.
Nice, something that I as a Fireworks user can really appreciate.
This is wonderful! We create barcodes on low res printers and this is something that we have been waiting for forever.
This was such a nightmare for me for over 10 years. I had made scripts that snapped selected artwork to whole pixel numbers but the artwork always had slight artifacts on the horizontal lines; almost a blurry effect. It made the output almost useless for detailed work. Unfortunately Fireworks and Illustrator are not compatible, they don’t even handle color, gradients or drop shadows in the same manner.
All our designers worked in Illustrator first to get the design right and redid the last version in Fireworks to output the artwork. That’s countless man-hours lost, but we don’t have a choice.
So congratulations to the illustrator team for figuring out what a pixel is.
Great feature but why is this not available in Photoshop too ?
The pixel grid is also in Ps but I couldn’t find to any option to snap to this pixel grid.
This is a great feature, but somewhat uncontrollable. It’s better than not having it, but what I would like to see is:
1. Direction. A direction box – so all points could be forced to move “down and to the left” to find the nearest pixel, that sort of thing.
2. Revert FROM Pixel Grid. As implied in the first couple of posts here.
3. Preserve Vertical/Horizontal Alignment. An automatic alignment range that is controllable – all horizontal and vertical points within x-number of points (or even pixels) snap to the same line, etc.
4. Pixel Range. Snap to closest pixel within x-number of pixels. So not must snapping to nearest, but allowing Illustrator the ability to, for example, make sure that square boxes stay square.
5. Maintain Proportions. From the idea of Pixel Range . . . a checkbox for this, too.
6. Pixel Snapping Panel. Move this feature out of the “Align” panel, and make it’s own panel. Using it in “Align” implies that alignment actually *should* happen when snapping to pixels, which is not necessarily true. I think it is at least equally important to maintain ratios.
I realize that some of these ideas present significant challenges for complex shapes, and for curves, but the options should exist regardless.
Despite these criticisms, I do think that the feature is a great feature as is, and “Thanks!” to the people who made it happen!
Works great while drawing. Saving however still introduces AA artifacts. See http://tweetphoto.com/38314743 for example.
Can you elaborate on how you are saving this? Save for Web or export, or some other method? This is working well for many people.
can anyone tell me if it possible to draq a one pixel width diagonal line in illustrator now without it forcing anti-aliasing?
[Try choosing Effect->Rasterize, then choosing 72ppi and no anti-aliasing. –J.]