Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Mordy Golding demonstrates how to be more productive, efficient, and creative by taking advantage of Adobe Illustrator to create pixel-perfect web graphics and interactive Flash content. Illustrator CS4 for the Web investigates the pros and cons of pixel- and vector-based web graphics, demonstrates efficient workflows, and explores the creative options available in Illustrator. Mordy also covers design techniques, such as creating typography that works well on screen, adding reflections, and making Flash animations. He discusses new Illustrator CS4 features, including using multiple artboards, bringing art into Dreamweaver, and utilizing Flash Catalyst. Exercise files accompany the course.
It can be easy to forget sometimes, but really as a designer our biggest job is to make sure that we deliver our message. That being the case, whenever we create some kind of text and we put that up onto the web, we need to make sure that text is readable. Now, you may notice that I am here inside of Photoshop because I want to show you a few settings that Photoshop has for making text look really great for the web. With my Type tool selected, I will go ahead and I will select this text and you will see that in the Tool Options bar towards the top, I have several options for how that text should be anti- aliased. I can either turn off the Anti-Aliasing altogether or I can go ahead and choose something called Sharp, Crisp, Strong or Smooth.
Depending on the typeface that I choose and what size I may producing it at, I may choose between some of these different settings in order to get the best looking type for the web. Now unfortunately, Illustrator does not have any of these settings at all. In fact, if you remember, Illustrator is always optimized for print. So type really is never anti-aliased at all. However, when you are creating graphics for the web, it is and we do need to care about how that type looks like when it is anti-aliased on the web. So let's take a look at Illustrator and see what options we do have. I am going to use my Regular Selection tool here to start working with some of this text that's right here. Let me zoom in a little bit so we can see the text a little bit better. Now I have my Pixel Preview turned on right now, so that's why I am seeing an anti- aliased version of my text.
While we don't have the five wonderful settings that Photoshop has for anti-aliasing text, we do have three different settings that we can use. What I'll show you is those three different settings side by side and then again on the individual basis, depending on the typeface and the size that you said your type, you will choose whichever works best for you. Let me select these two text objects here on the top. I am going to go to the Effect menu, I will choose Rasterize and I will go over here on the bottom where it says Anti-aliasing and make sure it's set to None. In doing so when I click OK, this text will not get anti-aliased at all.
Next, I will click on these two objects right here. I will go back to the Effect menu, choose Rasterize once again. But this time, instead of leaving Anti-aliasing set to None, I will choose an option here called Art Optimized or Supersampling. If I go ahead and I choose that one and click OK, Illustrator will use that method of anti-aliasing for that particular text. Finally, I come down to these last two text objects, select those, once again choose to apply the Rasterize effect. But this time, instead of choosing Art Optimized, I will choose Type Optimized or Hinted.
Now I will click OK and we could easily compare how these look like directly on the screen. One thing that's interesting to note about, the bottom option where I chose the Type Optimized version of anti-aliasing is exactly the same as setting your type to Smooth inside of Photoshop. The Art Optimized version, which is the middle that you see right here, is the same as setting as your anti-aliasing in Photoshop to the Strong setting. And then finally of course, on top, this is the same as setting your text to None as well. So while Photoshop does have five settings for anti-aliasing, Illustrator does have three of those. So when you want your text to look just right on the web, as you should, try experimenting with these three different methods to get the best results.
There are currently no FAQs about Illustrator CS4 for the Web.
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.