Join Mordy Golding for an in-depth discussion in this video Creating pixel-perfect web graphics, part of Illustrator CS5 New Features.
Many designers choose to use Illustrator for creating Web graphics and any graphics destined to be displayed on a screen. However, there are some challenges in creating pixel-perfect Web graphics. It seems that when you create graphics inside of Illustrator and then you export them for use on the Web, artwork, at times, appears to be fuzzy or soft. The reason for this is something called anti-aliasing. Because screens display artwork at a much lower resolution than you would see in print, artwork goes through this process called anti-aliasing that slightly blurs the edges of graphics to avoid a jagged edge appearance.
Now, traditionally, with vector graphics, we know that we can zoom into artwork. For example, I'll zoom in really close in this area, and I'll always see nice, clean, sharp graphics. However, Illustrator also features something called a Pixel Preview mode that allows you to see what your artwork looks like after it goes through this anti-aliasing process. It's a great way for you to see what your artwork looks like when it's going to be displayed on the Web. To turn that Preview mode on, you would to go to the View menu and choose something called Pixel Preview. In doing so, you'll see the actual pixels and, more importantly, the result of the anti-aliasing.
What was a clean sharp line before has now been softened, giving it a blurry appearance. Well, several new features have been added now to Illustrator to help you with this. First of all, notice that you can actually now view the pixel grid. When you're in Pixel Preview mode, as you zoom into artwork, you'll actually see exactly where each pixel is. As you zoom out, at different zoom levels, you'll see that that grid disappears. It only appears when you zoom in closer to your artwork, similar to the way that Photoshop works. However, while this clearly displays where the problems are, it doesn't really help you fix them.
And that's where this next feature comes into play. I'll go ahead now and select this rectangle right here. I'll go to the Window menu and open up my Transform panel. Normally, you'd use the Transform panel to adjust the coordinates or the width and height of your artwork. But you'll notice that there's a new option at the bottom of the Transform panel called Align to Pixel Grid. When you have artwork selected and you choose this option, Illustrator will automatically snap your artwork directly to the grid itself. In doing so, you can see that the anti-aliasing goes away, and I get a nice, clean, sharp line. If I zoom out just a bit here, you'll see that this artwork looks sharp and clean as opposed to the others, which look a little bit blurry and fuzzy.
You can certainly just select all of your artwork at once and turn that option on to apply it to all of your artwork. This ensures that your artwork will look crisp and clean when exported for the Web. This is a fantastic feature that you can apply on an as-needed basis for each piece of artwork. But you may find it tedious to apply this setting to all of your artwork. Let me go ahead and select all this artwork now and actually disable that option and show you that there are two other ways, inside of Illustrator now, to automatically make sure that your artwork is going to be aligned to that Pixel Grid. The first way is via the use of symbols.
If you select your artwork here - I'm just going to go ahead and deselect the background here so just this artwork you selected - I can turn that into a symbol, but notice there's an option here called Align to Pixel Grid. By choosing this option, I'll be assured that no matter where I place that symbol, it will always snap to that pixel grid, ensuring the best anti-aliasing results. I'll click OK, and I'll show you one other example of how Illustrator can ensure that your artwork is always going to be perfect. I'm going to go to the File menu here and choose to create a new document. In the New Document dialog box, if I click on the Advanced button, I'll see an option here called Align New Objects to Pixel Grid.
If I check this box, I'm ensured that every piece of art that I draw in that document will always snap perfectly to the pixel grid. You'll notice if you go to the New Document profile and choose the Web profile, that option is automatically checked. So, really, any time that you create a new Web document inside of Illustrator, you're assured to get nice, crisp and clean graphics that will display beautifully in a Web browser or any computer screen.
- Creating complex art from basic shapes with the Shape Builder tool
- Transforming flat artwork using perspective grids and vanishing points
- Creating variable-width strokes
- Controlling dashed line length, corners, and gaps
- Creating original brushes using the Brushes panel
- Adding arrowheads to strokes
- Creating web-ready graphics, text, and slices
- Integrating with Flash Catalyst