Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise, I'm going to introduce you to the Save for Web & Devices command which allows you to export an illustration for use inside of a web browser. You can either export an image file, whether it be a JPG, or a GIF, or a PNG file, or you can export an object file like an SWF or an SVG. I am looking at this graphic called Alternative queen.ai found inside the 12_exporting folder and I'm looking at the first artboard. That's important, if you are following along with me because Save for Web & Devices exports just one artboard at a time. It's going to be the artboard that you see here inside of the illustration window.
Then go up to the File menu and choose Save for Web & Devices, which has a keyboard shortcut of mash your fist down and press the S key. That's Ctrl+Shift+Alt+S on the PC and Command+Shift+Option+S on the Mac. You are going to bring up this whoppingly big Save for Web & Devices dialog box. Now mostly, this dialog box is about saving for the web. It does have this Device Central button right here that allows you to preview what your image is going to look like on a cell phone, for example. If you are interested in going that route. But we are going to be focusing on web browsers in these exercises.
Notice these tabs along the top of the screen start off with Original, which allows you to see your original graphic in its proper color. So it's a color managed view of your graphic and we are seeing that it's Alternative queen.ai. So in other words, it's an AI file, which is not really designed for use in a web browser. Plus, it's huge. It's 1.25M, much too big to be positing inside of a web page. It would just take up too much room; it would be too slow to download, and so on. I am going to switch over to Optimized which is going to be the web optimized version of the graphic, subject to whatever settings you have established over here on the right side of the dialog box. Also, you will see, right now it's a GIF graphic by default. Much smaller. 76K versus 1.25M. It's going to take 28 seconds to download, so that's a very long time, but notice over a 28 KBPS connection, which is a very slow connection. That's a modem speed connection.
If you are interested in checking out some other connection, then you would go up here to this little menu icon. Notice that there are several menu icons inside this dialog box. You would choose the setting that you prefer. I would say something like 256 KBPS is more representative of the public at large. You will see that this graphic would only take 4 seconds to download. Now that's best case scenario, assuming that there is no connectivity problems, no other things going on, at the same time no upload is going on, no other downloads, and so on. This is taking full advantage of the bandwidth there.
Then you can also see a 2-Up display, so that you are comparing, for example, the original version of the illustration over here on the left to the optimized version of the illustration over here on the right. You can change choose in each position, if you want to, but that's the way it's set up by default. You even have the option -- if you are not sure where you are going with the graphic -- of a 4-Up display, so that you are comparing the original in the upper-left hand corner to three different optimized versions here in the other quadrants, all which are GIFs by default, for me anyway.
Incidentally, if you are curious why am I saying GIF, when it's clearly GIF. A lot of people do say GIF. The folks who created the format in the first place, over at CompuServe back in the old days, they called it GIF. So that's what they said, so I'm just going with that. Anyway, back to 2-Up. That's the view I want to work in, as we are trying to determine what settings we ought to apply. So I just want to introduce you to the dialog box, give you a sense of what's going on here. I want to show you one more thing. Isn't it weird that the text isn't appearing either in the proper view, the original view of the illustration right here or the optimized view, even though it's so clearly visible back here in the background? Well, there is a mistake with my graphic and this goes to the point, I was making in a previous chapter. So let's go ahead and cancel out, for now, of Save for Web. We will come back to it in the very next exercise. I just want you to see what's going on there, but why is my white text dropping out? Is that just like some, kind of, crazy bug? Or is it a function of the fact that it used to be black text? Recall that, I had this text set to black in the previous chapter. It was a nice rich black because I had turned on -- if I go ahead and zoom in on this here, it doesn't look rich -- but I had turned on Overprinting. So this text is set to Overprint. If I bring up my little Attributes palette right there, you can see Overprint Fill, which means when I have the Overprint Preview turned on, that it looks nice and thick and weighty. This is what I was telling you in the previous chapter, why it's so important to have Overprint Preview turned on is because otherwise you have this non- representative view, if you are doing any Overprinting inside of your document.
I am going to go ahead and turn it off again, so I can make my point. I'll set my text back to white. It looks great, right? I go ahead and bring up Attributes again. What happens when have Overprint Fill set to white text? Well, you get this little warning. If I hover over the warning, I'll see that it says Selection includes overprinted process white colors, which is Illustrator's way of saying, what in the world are you are doing? Your text is about to go invisible. If I go to the View menu and choose Overprint Preview, it drops out because if you overprint white, then you don't knock anything out anymore. It just goes away. So we obviously don't want Overprint turned on. That's our problem. If you are working with the white, don't have Overprint on. I need to do the same thing with my invisible type over here. Bring up the Attributes palette, turn off Overprint. Now things are back in business here. So if you run into anymore of that, you will know what the culprit is. We could either turn Overprint Preview on or off.
Another thing I want to show you about Overprint Preview, as long as we are on the topic, is how it affects your setting up of the artboard. I'm going to go ahead and zoom out here for a moment. I'm going to switch over to the Artboard tool. Notice that we are not getting that grayness around the artboard anymore. For some reason, it gets turned off when you are looking at the Overprint Preview. If you turn off Overprint Preview, you go back to your standard artboard view. Just one of those "go figure" things about Illustrator. Anyway, I'm going to switch back to the Black Arrow tool. That was a complete segue way, but something I needed to know because I had a problem with this file.
In the next exercise, we are going to save out this illustration as a JPG image. Join me, won't you?
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 57678 Viewers
119 Video lessons · 67222 Viewers
84 Video lessons · 16616 Viewers
125 Video lessons · 29509 Viewers
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.