Join Justin Seeley for an in-depth discussion in this video Using Pixel Preview Mode in Illustrator, part of Illustrator CC for Web Design: Image Optimization.
- One of the advantages to working in a program like Illustrator is the fact that as you're creating your artwork, you can zoom in and out on it, and it's always going to look nice, crisp and clean. The disadvantage to that, however, is that you're not giving yourself an accurate representation of what that graphic is going to look like on the web. In this movie, I'm going to show you how to get an accurate representation of what your graphics are going to look like by turning on something called Pixel Preview inside of Illustrator. So, let's take a look at what I mean by not getting an accurate representation of what you're creating.
If I were to zoom in on this document, and I'll just zoom in quite a bit here. Let's zoom in to like 400 percent. Notice as I'm scrolling through here how everything still has nice, crisp and clean edges around it? That's because most of this is built with vector shapes. So you can see here the logo's nice and crisp and clean. Can you imagine zooming in on a JPEG 400 percent? It'd be really nasty. So how do we get an accurate representation of what we're seeing on screen? Well we have to turn on something called Pixel Preview. So, first things first.
Let's zoom out to 100 percent magnification. You can do that quickly and easily on your keyboard. Hold down the Command key on Mac, the Control key on PC and then press the number one on your number pad. Once you do that, that should zoom that out to 100 percent magnification. That's going to give you a one to one example of what these graphics are going to look like on someone else's screen. Next, go up to the View Menu. Inside of the View Menu, right here at the top, there's something called Pixel Preview, which also has a keyboard shortcut associated with it.
The keyboard shortcut is Option or ALT, Command or Control, and the letter Y. I'm just going to go ahead and click that right here. Once I click that Pixel Preview is now turned on. And you might not seen anything happen on the screen, and that's because we're at 100 percent magnification, so because of that we're not getting any type of pixelation. However, if I were to scroll up and then start to zoom in, you can see now as I zoom in on these hands that I can really start to see what those pixels are going to look like. When I get back out to 100 percent it looks just fine.
So as you start to make the transition from designing into exporting I highly recommend that you turn Pixel Preview on, so that you can see exactly what your graphics are going to look like when they're rendered out.
Find out more about using Illustrator in your web design workflows in Illustrator CC for Web Design: Core Concepts.