Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
In the world of printing, graphics are usually printed at an extremely high resolution. For example, image setters that create film or plates for printing often print graphics at 3600 DPI or 3600 dots per inch. However, web graphics always display on a computer screen, and computer screens have far lower resolution. In fact, 72 pixels per inch is often regarded as the standard resolution for most computer screens. It's important to realize this because normally when you are working inside of the world of vector graphics you are used to expecting very clean and sharp output, but on lower resolution computer screens that may not always be the case.
For example, let's zoom in really close on this word right here, BOARDS. Notice how you see nice, clean, smooth edges that appear here around the letter D or around the curves of the letter S. Even though our monitor is relatively low resolution I am still seeing nice smooth edges because the computer employs a certain technology called anti-aliasing. Anti-aliasing slightly blurs the edges of color that appear on a computer screen to make it look like its smooth. You can easily see this by turning off that feature. I will go over here to the Illustrator menu, or on Windows you would go to Edit menu, choose Preferences, and then I will choose General. I will uncheck the option here called Anti-aliased Artwork. In doing so, if I take a look now, I now see there are jagged edges around this area. I will zoom in closer so you could even see that a little bit better. I will turn that setting back on again, and you could see that now those jagged edges go away.
Because web graphics are always going to appear on a computer screen, I always have to keep in mind that this anti- aliasing will occur, and sometimes it will do some things to my graphics that I may not expect. To illustrate this let me Zoom out for a second here, just about right about over here, and I will split my screen into two windows. I will go to Window, choose New Window. I will set my setting over here to display it one on top of each other; let me go ahead and position it just right over here. You might get a little bit closer on some of these. On the window on the bottom I will turn my Pixel Preview on. I will go to View and I will choose Pixel Preview. Take a look, what was once a nice clean sharp line right over here, turns into this fat ugly line right here. How did that happen? Notice that the text itself doesn't read that well, like it does over here.
More importantly, take a look at the edges of that rounded corner right here. See how this is nice and clean and smooth, and on the anti-alias version I see a stair-step effect. Since we have the Grid turned on, let's see exactly what's happening here inside of Illustrator. I get even closer on the file right here on the top. Take a look at this. Right now the actual dimensions of my file right here are 91 Pixels by 21 Pixels. That's because the actual path itself; if I count off the pixels that are here, are 10 and 20, so it's exactly 20. But because I have a 1 Pixel Stroke and because my Stroke is painted on the center line of that particular path, I am seeing a half a pixel being added as a width on the outside, and half a pixel on the inside. If I add a half a pixel on the outside here and I add a half a pixel over here, I end up with a total of 21.
Here's the problem. Each of the squares in this particular grid actually represent a single pixel, but a computer screen only has the ability to turn the pixel on or off. There is no way for your computer to only paint half of a pixel. So how will this particular pixel appear when rendered to my screen, it only has artwork that fills up half of that particular pixel? Well, that's where anti-aliasing comes into play. This 1 Pixel line that appears here, literally right in the middle of twp pixels, will turn into two fat pixels, and to simulate the line, Illustrator will kind of drop back to color a little bit, so that it doesn't appear as if my line weigh just grew twice in width.
Let's zoom in on the bottom here to see exactly where that's happening. My path, as you can see, goes right through literally the border of two particular pixels, and instead of me filling a half a pixel for this it actually fills up the whole pixel. So what's interesting to see about anti -aliasing here is that even though the computer is trying to make my graphic look better by smoothing out the lines using anti-aliasing, the effect is a graphic that ends up looking worse. Instead of me getting a nice, clean sharp line, I get a fat line that doesn't look anywhere nearly as good. With this in mind, there are several things that I could do to correct this problem. First of all, let's go back over here to the top window. I will select this object and I will go to my Stroke panel. Notice that there is an option here called Align Stroke. By default, Illustrator paints the Stroke on the center line of the path, which is really the cause of the problem right here.
I can choose to align the stroke to the inside of the path, and in doing so, notice that now my path becomes a single solid pixel and not the two pixels that it was before. Again, this is happening because the full weight of that particular stroke right now is taking up a single pixel. It's not falling on the boundary between pixels which would cause a problem. Another thing to do is just to avoid using strokes altogether. In fact, when I am creating my web designs, I try to avoid using strokes and I use filled shapes instead. If I want to draw a line, rather than draw just a single line, I draw a rectangle that's one pixel in width. That way I always know what I am getting.
As we learn more about creating web graphics inside of Illustrator, we will always come back to this point, understanding what anti-aliasing is doing to our artwork. Now that we know what to look for and how to solve it, we can create great looking pixel based web graphics using Illustrator.
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.