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.
One of the great things about vector graphics in general is that you can scale them to any size, and no matter how big you make them, they always look clean and sharp. For example, let me zoom in right over here on this little button. If I zoom in really close, even though I have these nice rounded rectangles, I have this text here, I can go even closer to look at these beautiful sharp lines. However, that isn't the case for graphics for the web, especially so for pixel based graphics. Have you ever tried downloading an image from the Internet and then zoom in really close and see it becomes pixilated? That you could actually see the individual pixels themselves? Well, let me zoom back out here for a second. Illustrator is almost giving us this full sense of reality. Here I am inside of this wonderful vector based application, but at the end of the day my graphics are going to get rasterized, and how will they look when that happens? Rather than cross your fingers and wait to find out what happens when you do so, Illustrator provides us with a different way to preview our graphics.
If we go to the View menu here, we see something here called Pixel Preview. By choosing Pixel Preview, Illustrator now renders my graphics to the screen, the same way that they would display inside of a web browser. For example, watch what happens now when I zoom in really close on this button. See how I see the pixels themselves. No longer the actual sharp vector graphics that I saw before, Illustrator is rendering that artwork as pixels. This way I know exactly how this artwork is going to look when displayed on an electronic screen. I will zoom back out again because I want to show you a great way how as a designer you could really take advantage of the regular Preview Mode inside of Illustrator and also this Pixel Preview Mode as well.
First, I will come back to the View menu and I will just turn off Pixel Preview; now I am with a Regular Preview Mode. Illustrator has a wonderful feature that allows me to see my artwork in two different possible states. I will go to the Window menu here and I will choose New Window. This actually takes my exact same artwork but creates a new window for it. Take a look. I have two tabs here at the top of my screen. I have this one here called groundswell_728x90, and then I have this one called groundswell_728x90. Its basically two ways to look at the same document, but the beautiful thing about doing things in this way is that I can change the Preview settings for one of these views but not for the other.
First, let's change how Illustrator displays these documents. Right now I am using Illustrator's new tabbed user interface that allows me to have tabs across the top of my screen, displaying the documents that are currently open, and I could swap or basically click on these to go back and forth between the two. But I would really like to see both of these at the same time. If I go up over here to the Application Bar, there is a setting here called Arranged Documents. I will click on that, and then I will choose this option here, which will allow me to choose 2-Up and basically lay these documents so that I can see both of them at the same time. I will click on the top document here and adjust my setting here so I can view it, and I will do the same for here as well. Now I am looking at the exact same document but through two different windows.
Notice over here I have a 1 and over here I have a 2. I will click in this window to make this one active, and I will go to the View menu and I will choose Pixel Preview. What I am basically seeing right now is my original artwork here, and then this is the exact same artwork but with the Pixel Preview turned on. Let me zoom in a little bit closer here on this part of the file. I will do the same down over here. Here I can see all the pixels and the way that this artwork is going to get rasterized when displayed on the web. Here is the way the vectors display. As I make adjustments to my artwork I will see them updated automatically in that window.
Notice here I can click on it, no matter what I do on either of the windows it happens exactly in the other window as well. When working this way I could very easily create things and see things just the way that I want to on the top window inside of Illustrator and get an immediate preview of what that's going to look like when its displayed on the web. If you have two monitors, feel free to actually display both these windows; one on one monitor and one on the other, in this way you can design everything that you want in a high res preview inside of Illustrator and then take a quick glance at the monitor to see what it looks like when rasterized in Pixel Preview.
Overall, when using Illustrator it's really important to take a look at how Pixel Preview renders your graphics. In doing so you will always know how your graphics will look like when they are displayed on the web.
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.