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.
In the world of web graphics you hear the following term tossed around a lot. 72 pixels per inch, right? I mean think about it. Anytime that you ever talk about screen resolution or any kind of web graphics, people always say 72 ppi. They may say 72 dpi, which is incorrect. That stands of Dots Per Inch, which only applies to printing. But ppi stands for Pixels Per Inch. Now as a web designer though, you really don't care at all about that resolution. In fact, you should just rid your mind of there's 72 pixels per inch altogether. Why is that? The reason is because pixel dimensions are far more important than the actual resolution itself. So the file that I have here on my screen, it's called resolutions.ai. It's something that will really kind of bring that point home.
So what I have here on the screen itself on the upper left-hand part over here is a banner that I've created and the banner was created at 728x90. That's 728 pixels wide by 90 pixels tall. When you're working with web graphics, that's the most important thing, how many wide by how many pixels tall. Let's take our monitor, for example. You may know that your monitor can be set to a variety of different resolutions. In fact, right over here I have three gray areas and each of them are indicating a different resolution. This is the size that a 1024x768 monitor would be. This one is 1440x900, which is wide-screen, and then this one is 1600x1200.
Now the thing is that your monitor doesn't change in physical size when you change its resolution. All that's really happening is the pixels themselves get bigger or smaller, and in reality, many of today's monitors are much higher than 72 pixels per inch. For example, Apple displays exceed 120 pixels per inch and even the iPhone has a really high-resolution screen of 160 ppi. To better understand this concept, let's take a look at something else. I am going to go over here to my Layers panel. I am going to turn off the Resolutions layer. I am going to turn on this layer called Monitors. See here I have the exact same physical monitor, but this monitor is set to different resolutions, and as you can see, the same banner that I created at 728x90 appears very large when my monitor is set to 800x600. It kind of fits really nicely in the middle of the screen at 1024x768, but that same monitor set to a much higher resolution of 1280x1024, my 728x90 pixel banner appears much smaller on the screen.
So rather than thinking about resolution, when you're creating web graphics, the important thing is just to understand what the pixel dimensions are. Trust me, if you have the pixel dimensions right when you get started, everything else will just fall into place.
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.