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.
As you create web graphics inside of Illustrator, nothing is more important than the pixel dimensions that we used to define those graphics. What's great about Illustrator is because its object based and vector graphics are very precise in nature, it can be very easy for us to create just the right size graphics that we need. For example, if I click on this rectangle right over here, I can go over here to the top where it says Width and Height and see that the size is exactly 90 pixels wide by 20 pixels high. By the way, this is referred to as the Control panel inside of Illustrator, and what's great about the Control panel is that it actually senses the resolution that you have your monitor set to.
If you have a smaller monitor or if your monitor is set to a lower resolution, you may not see these up here. In fact, that's one of the reasons why I had the Transform panel always available on sight for me. Again, a quick look here shows me that I have a Width of 90 pixels and a Height of 20 pixels for the selected object. But is it really 90x20? Let's take a closer look at this. I am going to go ahead and I am going to Zoom in on this shape right over here, and I will see that this object right here has a 1 pixel Stroke. Now, the way that Illustrator draws graphics is that it creates the actual Stroke on the center line of the path. So that means the Stroke weight right now is distributed a half a point on the inside and half a point on the outside of the path. So pixel dimensions that are displayed here on the Transform panel aren't of the actual physical representation of that graphic, they are the size of the path.
So what I am seeing right here is that the path is 90x20, but because I do have a 1 pixel Stroke on this particular object, in reality the object is really 91x21. Now, normally when I am using Illustrator for print graphics, I really wouldn't care about this. However, every pixel counts when I am working in web design. Because I rely on precise pixel measurements, I really need to make sure that I am seeing exactly the way the graphic is going to reproduce itself, not the path itself. So to make sure that I am always seeing the right pixel dimensions, I am going to turn on our Preference inside of Illustrator, and I will choose Illustrator > Preferences. Again, if I were Windows right now, I would choose Edit > Preferences. Then I will choose the General area.
You will notice there is a setting here; by default its unchecked, its called Use Preview Bounds. What that setting does is it allows Illustrator to define a value, not by the dimensions of its path, but by the dimensions of its appearance. So I will turn that option on and click OK. Take a look now at what I am seeing here on the Transform panel. That exact same object here is displaying with a Width and Height of 91x21, not 90x20. Because it's so important for me to be able to account for every pixel on my design, I want to make sure when I am working with web graphics inside of Illustrator that I have that Use Preview Bounds setting turned on. This way the values that I see in the Transform panel are exactly the way those files are going to display on a computer screen.
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.