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 we've learned, one of the benefits of using the GIF file format is that it supports transparency. That means that you have an object that's irregularly shaped. For example, say a logo. It's not a rectangular or a square. Take for example this little surf logo right here. If I were to go ahead and now put it on to a different colored background, I might see artifacts from that. So let's take a look at some of those considerations here and see how we can overcome these challenges. I'll start over here in this case by just turning off the background. Let's imagine we want to make this trapped to a white background on a web page. Now I'll go to choose File, then I'll choose Save for Web & Devices. I want to focus on just that particular piece of the graphic, so I'll use my Hand Grabber tool here. Then simply kind of move along to see that part of the file. Now I will switch to my Slice Select tool and click on that to make sure that that is now selected. Since I want to work with the GIF itself, I'll actually click over here to select that GIF file format. Notice that I see that it's here selected. And if you take a close look over here what's going on, let me zoom in just a little bit here with a Magnifying Glass tool.
You can see that there is kind of a white edge around the particular graphic here. So because my graphic was created on a white background inside of my layout, the drop shadow here has to fade to some kind of color so it fades right now to white. Remember that when you are working with transparency inside of a GIF file, you can only have one color be transparent. So in this case here, the white area that was here is defined as a transparent color. But since the white here starts to have some gray shades in there which taking to effect the drop shadow that was added, I no longer have the ability to make that transparent as well.
Now this is fine if I am going to take this graphic and place it on to a white background on a web page. But let's say I put this on to a like a blue background. What I am going to see is this really ugly large white border around the particular graphic. So to get around that problem I am going to use the setting called Matte. In doing so I am going to define or at least tell Save for Web the exact color that this object is going to be placed upon. This way rather than fade to white, Save for Web will automatically modify that drop shadow to fade to the correct color. Obviously to make this work, you need to know what the actual background color is going to be. I come over here to where it says Matte, click on the little pop-up list here and choose Other. For example let's say now it's going to be some kind of a red color Lets go over here and choose something red. Click OK and you can see that now that drop shadow fades directly to red. In this case now when I place this artwork onto that particular color background it will blend seamlessly into that background.
Another thing to keep in mind when you are working with Matte and Transparency in a GIF file was that you also have the ability to change which color does become transparent. To do that you'll use the Eye Dropper tool. By selecting the Eye Dropper tool, I can click on any color in my graphic. Notice that in the color table window here, this particular setting comes up. By clicking on the little checkerboard pattern here that's going to turn that color into transparent. Now that you know how to take advantage of both the transparency and the Matte settings for the GIF file format, you know that your graphics will always look pixel perfect when put on to a web page.
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.