Join Mordy Golding for an in-depth discussion in this video Pixel Preview mode and anti-aliasing, part of Illustrator CS5 for Web and Interactive Design.
In the last movie, we mentioned how certain digital devices have different resolutions. For example, desktop computer monitors generally fall within the range of about 120 to about 150 pixels per inch, and some of the newer mobile devices like the iPhone 4 sport a resolution of over 300 pixels per inch. Now while those numbers may sound high, they pale in comparison to the resolutions that high-end printers normally work with. For example, high-end image setters sometimes have resolutions of over 2500 pixels per inch or more accurately dots per inch.
So if I understand that my artwork is always going to be broken down into the smallest elements, be it pixels or dots, I can see that there is a large disparate number between what I normally get on a computer screen and what I would get on paper. This is especially evident when we start thinking about graphics inside Illustrator, which are all vector-based. In fact, one of the benefits of using Illustrator is that you can zoom in really close to your artwork and you'll always see, nice, clean, smooth, sharp lines. For example, for this Explore California logo I'm going to zoom in really close right up here on the girl riding the bike.
You can see that even though I've zoomed in really close, I still see nice, clean, sharp lines. Now, since the resolution of computer screens is much lower, my eye would be able to detect little jagged edges along curved lines in my artwork. That's because I'd be able to see the actual pixels themselves. But as you can see here on the screen though, I see a nice smooth appearance. That's because computers employ something called anti-aliasing. It's a method of slightly blurring edges of color, so that they appear smooth on a computer screen.
Now, if I were to print this graphic on a high-end printer, I would expect smooth edges, but the reason why this artwork appears smooth here inside of Illustrator is because Illustrator is applying this anti-aliasing to these edges. In fact, if I go now to over here where it says Illustrator and I open up my General Preferences panel -- in Windows by the way I'd find that in the Edit menu -- I can choose an option here called Anti-aliased Artwork. This is on by default, but if I turn it off and I click OK, I can now see that there are jagged edges in the artwork here.
That's because Illustrator is now not applying that anti-aliasing. I'll point out by the way that this has no effect whatsoever on my printed output. This anti-aliased setting that I just turned off only affects the screen setting that I'm seeing right now. The reason why Illustrator even gives me this option to begin with is because in older versions of Illustrator and on older computer hardware, this anti-aliasing would sometimes slow down the redraw of artwork. Although nowadays, I'm just going to press Command+K or Ctrl+K to open up my Preferences panel.
I'm just going to turn that back on, because there's really no difference at all in screen redraw by having that setting turned on. So I'm going to click OK. So I now see the smooth edges again. However, when graphics are actually displayed in a web browser, anti-aliasing is applied there as well and in fact when you use certain features inside of Illustrator, those features are hardwired at 72 pixels per inch. For example, if you go to the File menu here and choose Save for Web & Devices, this is a setting that actually allows you to export images in GIF or JPG format, for example.
Your artwork when exported via Save for Web & Devices will always be 72 pixels per inch. That's probably the case because when Save for Web & Devices was first introduced, that was the general setting used for web graphics, but as we discussed in the previous movie, we know that many digital devices have higher resolutions than that. Still Illustrator will always export this artwork at 72 pixels per inch. I'm going to click Cancel here. But obviously right now my monitor is set to a higher resolution, so the anti- aliasing here looks nice, clean, and sharp.
However, if I'm working with graphics that are only about 72 pixels per inch, the anti-aliasing may reveal a different story. The problem though is that as a web Designer how do I know really what my artwork is going to look like when I export my art for the web. So if I go to the View menu here, I'll see that Illustrator has a Preview mode, something called pixel preview. When you choose this option, Illustrator displays your graphic as it would appear when exported at 72 pixels per inch. It also allows me to clearly see where the anti-aliasing is happening inside of my artwork.
Now, right now I'm zoomed in about 1300%. I'm going to zoom out just a little bit. Let's go back to about 100% right here. This is what my artwork would appear at 100% on the web, but if I zoom in a little bit closer here, you can see even at this view, let's go back to about 600%. You'll notice at 600%, Illustrator kicks in this grid view where I could actually see each individual pixel, and you can see that even though I have a solid line over here around the border of my artwork, at the top over here the line looks nice and crisp. I could also tell by the way that it's exactly four pixels in width.
However, if I look at the line over here on the right side, I can see that the line actually takes up five pixels in width and they are like different shades of gray. It gives a kind of this blurry appearance. We'll talk more about why that happens in another movie, but for now it's important to realize that when we're working with this Pixel Preview mode, we can get a really good idea about how our artwork is going to appear when exported for viewing on the web or on other computer screens. So as we go along and start working with Illustrator and building web graphics, we're going to use this Pixel Preview mode to make sure that we're seeing our artwork in the right way and we're also going to be conscious about anti-aliasing and how that might affect the appearance of our artwork.
- Getting perfectly sized pixel graphics from Illustrator
- Setting up preferences in Illustrator for web design
- Creating custom document profiles
- Getting great color on the web
- Understanding web graphic file formats (GIF, JPG, PNG, SWF, and SVG)
- Setting great-looking type
- Slicing artwork for various tasks
- Creating Flash animations directly from Illustrator
- Working with Photoshop Smart Objects
- Exporting HTML and CSS from Illustrator
- Integrating with Flash Catalyst
Skill Level Intermediate
Q: In the chapter 5 movie, "Simulating the CSS box model," the author details the CSS box, but names the inner portion the margin and the outer portion the padding. This is reversed from what I’ve have seen elsewhere. Is this an error in the video?
A: This video does indeed contain an error where the author describes the margin and padding. The padding should be described as the area inside the border, and the margin the area outside the border.