Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
Anti-aliasing has its pros and its cons. I mean, first of all we know that we need it in order to make our graphics look nice and clean when viewed on a computer screen, so we don't see jagged edges. But at the same time if we're not careful about anti-aliasing, it can also make our artwork look blurry at times. So we need to strike this even balance. In this example, this file here called explore_logo, notice over here in my View mode I have Pixel Preview turned on, and I'm going to zoom in close so that we can start to see where the anti-aliasing is going wrong.
If we look over here at the top of the line here, I see nice, crisp, smooth lines. But on this part of the line here, I start to see the blurred edge. When it comes to anti-aliasing the thing that we care most about are the straight lines. Now the curve lines really need anti- aliasing because that's where jagged edges show up the most. However, straight lines should always be clean and crisp. For example, if you look at this part of the bridge here we'll also see that even though some of these lines are straight, we start to see some of these blurry edges and we don't want that.
First, let's understand why this happens at all. If I select this path right here, I can see the path, but the path itself is not lined up perfectly with the grid itself. Now, here's the thing about working with computer graphics. We know that our screen is made up of pixels, which are presented by these little squares here on this grid, but a computer has no way to fill in just half of a pixel. In other words, every little pixel has to be either filled with color or without any color at all. So if my path itself falls somewhere in between these pixels, then based on my stroke weight, I may see these blurry lines.
Of course, the way to avoid this problem is to always make sure that the artwork that you create is aligned perfectly to this grid. But even that can be problematic, because sometimes we create strokes that have various widths, and those widths may also not line up perfectly with this grid. In fact, it's for this very reason why Adobe added a new feature to Illustrator CS5, something called Align to Pixel Grid. This is a feature that automatically aligns the appearance of your artwork and snaps it perfectly to the grid, so that you can avoid these blurry edges wherever there are straight lines or straight edges inside of your artwork.
Now there are several ways that you can use this feature, but let me show you one of them now. I'm asking you to go here to the Window menu and I'm going to choose to open up my Transform panel. As we'll soon see the Transform panel is really important when working with web graphics. Notice over here there is a check box that says Align to Pixel Grid. I'm going to press Command+A to select all of my artwork and take a close look now at the line that appears over here and also the edges on this part of the bridge. I'm going to click on the Align to Pixel Grid setting and you can see that Illustrator automatically snapped that artwork perfectly to the grid.
So I'm just going to press Undo for a second. This is before. We can see the blurry edges on both the bridge over here and on this part of the stroke, but if I redo this, you'll see now how clean and sharp the artwork actually is. This feature is actually fantastic and it ensures that when creating web graphics in Illustrator, you'll always get nice, clean, sharp lines without the blurry edges. Now, of course you can imagine to be somewhat tedious to have to click on this feature every single time that you create artwork inside of Illustrator. Well, let's take a look at some other settings that we have.
If I go to the flyout menu in the Transform panel, we'll see there is a setting here that says Align New Object to Pixel Grid. This means that as I create new artwork inside of my document, that artwork by default automatically snapped to the pixel grid. Going even a step further though, this pixel snapping feature can actually be set by default in all new documents that you create. In fact, I'm going to press Command+N or Ctrl+N to create a new document and you can see over here on the bottom there is an Advanced section. You can click on this to reveal more information and when I choose to create a new document using the Web New Document Profile, which we'll talk about in the next chapter.
You can see that on the bottom there is a setting here that says Align New Objects to Pixel Grid, which is turned on by default. In other words anytime that you create a new document using this Web profile, all of your artwork will automatically snap to this grid. So in reality you don't need to think about this at all. As you create artwork, it will always look nice and clean and sharp. Now there is one other place inside of Illustrator where this feature is available and that's when working with symbols. I'm going to click Cancel here. I'm going to zoom out just a bit over here. Press Command+0 or Ctrl+0 to fit this in my window, and with this artwork selected I'm going to turn it into a symbol.
I'm going to go to my Symbols panel here and create a new symbol, and you can see that in the Symbol Options dialog box there is now a setting here called the Align to Pixel Grid. If I turn this setting on, then no matter where I position this symbol inside of my document or no matter how I scale it, Illustrator will always take the artwork and snap it that aligns perfectly to the pixel grid, so I avoid those blurry edges and horizontal and vertical lines. So if you look at the big picture here, we kind of get the best of both worlds. We get anti-aliasing to make our artwork look nice and clean without the jagged edges on a computer screen, but at the same time Illustrator has got our back.
It makes sure that all of our artwork actually snaps perfectly to the pixel grid, so that our artwork does not look blurry.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.