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.
At the beginning of this title, we spent a significant amount of time talking about anti-aliasing, but we were really focused on making sure that our artwork look nice, clean, and sharp. However, perhaps even more importantly than the artwork itself, we have to ensure that our text is readable, and when we do save our text as an image, instead of as text itself inside of our browser, we have to really be concerned about how that text is going to be anti- aliased as well, because sometimes that blurring of the edges can make the text unreadable.
Now here is the interesting thing though, about working with text and about applying anti-aliasing. Each time that you set some text, there are different settings. There's different point sizes. You have some text that has very beautiful thick and thins, that has really nice serifs, and then you have other type that has other attributes inside of it. So each time that you set a word of text, it can really appear very different. So it is really not one magical setting that you can just say snap to the pixel grid. We really need to treat each type object as its own entity, and we need to make sure that the anti- aliasing is going to look great.
So what's really nice about Illustrator - and this is new to CS5 - is that you have the ability to choose between a variety of different anti-aliasing methods, different technologies or algorithms about how basically the monitor goes ahead, and rasterizes that text and applies the blurring or the anti-aliasing to the edges. And we choose between them, so that whatever looks best for the text that we have at time is always going to look great. So let's see how that works. I am going to focus right now on this document. It's called, Monthly Specials. This is going to be kind of an ad banner, so there isn't going to be any text, or any live editable text inside of this.
It's simply going to be exported as a GIF, or a JPEG. So I want to make sure that my text is going to look as good as possible. So the first I want to do is I want to make sure that my Pixel Preview is actually turned on, and I am actually going to zoom a little bit right here on this 250. Notice because my Pixel Preview is turned on, I can click on this text. Even though it's nice, clean, sharp, vector text when I print it out on a printer, we know that when this gets rasterized, it's going to turn into little pixels, and I will have this anti-aliasing here. And you can see that around the edges here, it appears somewhat blurry.
So what I am going to do is I am actually going to go ahead now and open up my Character panel. A quick way to find that is right here inside of the Control panel, just click on the word "Character." And at the bottom, there is a setting here for anti-aliasing. Now if we start kind of clicking on this pop-up here, we will see that there are four different options for anti- aliasing inside of Illustrator. There is actually the ability to just turn off anti-aliasing altogether. If you choose None, then anti- aliasing does not apply to this text. So it looks kind of blocky and chunky here. But in reality, sometimes when you have really small text, you don't want any anti-aliasing to be applied to it at all because that way the blurring may make the text completely unreadable.
So by disabling the anti-aliasing, by setting it to none, you are ensuring that that text is going to actually be readable, even though it might not look the greatest. Now, we can also choose some several other anti-aliasing methods though. The default setting is something called Sharp, but you can also experiment with things called Crisp, and a setting here called Strong. Now again, there is no magic setting. There is no, you know, one sitting for everything. Every font that you choose, every point size that you are at is always going to look little bit differently. So you want to make sure that when you are setting your graphics inside Illustrator and you have text that you know is going to be exported as a graphic, you want to come here to the Character panel and make sure that the correct anti-aliasing is set for that line of type.
One thing to note, by the way, if you take your Type tool and you go ahead and you kind of mouse over one of these characters, you will see that you do not have the ability to have different anti-aliasing settings for each individual character. It's kind of a setting that applies to the entire Type object as a whole. Now there is one other important thing to note about using these settings here inside of Illustrator. You see right now, Illustrator is letting us assign these settings now on the artboard. However, we need to ensure that Illustrator picks up these settings when this file is actually exported for whatever our needs are.
So I am actually going to switch now to my regular Selection tool here. I am going to choose File > Save for Web because maybe I now want to go ahead and export this art as a GIF or JPEG, for example. Notice over here on the bottom where it says Image Size, there is a setting called Art Optimized. This refers to the different types of anti-aliasing that is applied to our artwork as we export it. However, because I specified a different type of anti-aliasing for my artwork, using the Type settings inside of Illustrator, I need to also ensure that this pop-up is set to Type Optimized.
This will actually now pick up the Type settings that I have specified inside Illustrator, specifically for the text itself and allow me to now export my graphic with those settings intact.
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.