Saving an illustration for the web

In this exercise, I am going to introduce you to a command under the File Menu, that goes by the name Save for Web & Devices. And its purpose is to allow you to export graphics for inclusion on a website. You can also use it to email an Artboard to somebody if you like, because it really does get the file sizes down to their absolute minimum. So there's one of two ways you can go; you could either export an illustration as an image file, that is a pixel-based image. And that might be a JPEG image if you're working with a continuous tone image, or one that has a lot of gradients and smooth transitions, as does this piece of artwork.

Or if you've got a low color high contrast piece of art, then you can export it to GIF or PNG, and we'll see how that works. You can also export the graphic as a scalable vector file, either to the SVG or SWF format. So I am working inside of that file called Ghost Robot with PDF.ai, that's the version that I added the metadata to, and it's found inside the 12_exporting folder. And the thing to note about Save for Web & Devices is it allows you to export just one Artboard at a time, so you want to make sure to select the Artboard that you're going to be working with.

In my case, I want to export the Magazine cover, the very first Artboard. So go ahead and click inside that first Artboard to make it active. Then go up to the File Menu and choose Save for Web & Devices or mash your fist and press the S key, so it's Ctrl+Shift+Alt+S on the PC or Cmd+Shift+Option+S on the Mac. Now, you may wonder what's going on here, Save for Web, that's the part we are going to be focus on, but then there's & Devices. What is that & Devices about? Well, down here in the lower right-hand corner of this ginormous dialog box that comes up on screen, you'll see this Device Central button, and if you click on it, then you can preview your illustration on a cell phone screen.

And Device Central offers you a wide array of different cell phone models, basically everything except Apple's iPhone. And you can take a look at those if you like. However, I am going to focus on the Save for Web attribute of this dialog box, which is everything but that button. Now, up here in the upper-left hand corner of the screen, you will see four tabs, and they are Original, Optimized, 2-Up and 4-Up. Right now we're looking at the Optimized view. And what Optimized means is we are seeing the graphic that we will actually export.

In this case, in the GIF format, because GIF is selected by default, and in case you're wondering why I am pronouncing it GIF when it is so obviously GIF, there it is GIF. Well, the folks who originally created that file format at CompuServe, they called it GIF, so I'm just following their lead. Anyhow, the Optimized view is showing me the GIF graphic. If I want to see the original version of the illustration, that is not subject to any compression settings, then I would click on Original right here. But you have to take Original with a grain of salt, because it's not actually zoomable.

If I press Ctrl+[Plus] in order to zoom in on that graphic, Cmd+[Plus] on the Mac, you'll see big pixels, because once you zoom in beyond a 100%, big pixels is what you get. So you don't get the kind of clarity that you see outside in the illustration window. So it's not really exactly Original, but you are seeing a color accurate version of the image, and that's very important. Let me show you what I mean by that. I'm going to switch to the 2-Up display, so that I can compare two different versions of my illustration, and I'll click in the left-hand side to make sure that it's set to Original, which it is. So that's my Original view over on the left.

And if I click in the right-hand side, I can see that this is the GIF version of the graphic, so one of many Optimized versions that I might establish here inside this dialog box. But notice the colors, do you see side-by -side here that the colors are actually growing more garish on the right-hand side, and this is most obvious when I switch from Original over to Optimized. Watch the colors, especially along the borders of this graphic, when I switch to Optimized, they become more saturated. So what in the world is going on there? Well, if you go over to the Optimized fly out Menu, on the far right-hand side of the screen, you'll notice the command that says Convert to sRGB.

It's turned on by default. If you turn it off, your colors are going to drop. This is a very misleading feature by the way. What it makes you think is that, that's the right thing to do, because now you are not going to make your color so garish. So here's the Original version of the illustration, which is color accurate, once again, and then here's the Optimized version, which also looks nice and accurate. So obviously I should not have Convert to sRGB turned on. Wrong, that's actually not true. You should have it on. So I am going to switch over to the 2- Up display so we can see them both, and I am going to turn Convert to sRGB back on.

Here is the deal, try to wrap your mind around this one. Even though this is a CMYK illustration, which is ultimately academic for our purposes, when we are seeing the RGB version, which we are here inside of the Safe for Web dialog box, we are seeing that image in the Adobe RGB space, which is an elevated saturation color space. Now, the reason we're seeing the colors in Adobe RGB is because that's the working RGB space that we chose way at the outset of this series using the Color Settings command under the Edit Menu.

Over here on the right-hand side, because your Web Browser is not set up to display Adobe RGB colors, those colors are going to decline in terms of their intensity. So the colors need to be elevated and that's what happens when you convert the colors to sRGB. They appear oversaturated, because Illustrator then turns around and displays the colors in your chosen working space, which is Adobe RGB, which is a mistake on Illustrator's part, it shouldn't do that, it should actually show the colors in sRGB, but it doesn't, and as a result it gives us this misleading preview here.

Now, if you were to go back to the Edit Menu and choose the Color Settings command and change that first RGB option back to sRGB; the way it is by default, then you wouldn't see these elevated saturation values. However, you would only be doing that for your own sake, psychologically in other words, because it doesn't make a lick of difference. Now, just to demonstrate that this is true, even though you are going to see elevated color saturation here, you definitely do want to turn on Convert to sRGB. Let me go ahead and show you a couple of versions of this graphic here.

I am going to go ahead and open two variations of the graphic, both saved as JPEG images incidentally, and I'm viewing the images as unprofiled images, which is the standard way to go inside of Firefox. So over here on the left-hand side, we're seeing the image converted to sRGB, and as a result we have accurate colors. So I'll go ahead and move this Browser window over a little bit, so you can see the original color accurate view of the image in the background. That is the view, by the way, inside of the Save for Web dialog box and you can see that the colors match, between the Original view and the one that's been converted to sRGB.

Compare that to the same graphic which was not converted to sRGB, notice that the colors are extremely drab as a result. So we're losing a lot of punch and color intensity inside of our graphic. So despite what we are seeing on screen, Convert to sRGB is definitely the way to go. Now, something else I want to show you. If you Zoom in on this graphic, we've got a lot of dithering going on, this noisy color in the background, don't worry about that for a moment, that's the function of GIF. We are going to ultimately go with the JPEG format for this graphic.

But notice if you Zoom in on the word BOO right there, that we have some iffy edge transitions. So instead of seeing a nice line, the way we do along the bottom of the letters, it's basically a one pixel line, we're seeing a kind of three pixel line, so we are seeing a dark line in the center and then we're seeing a row of light pixels over on the right-hand side and a row of light pixels over on the left-hand side as well. Then the first O in BOO, is just a total mess over here on the right-hand side.

And if you Zoom in on this frame edge, you'll see that where we really want just a single line right there, we've got a double line going on. And how do we take care of that? Well, what we need to do is, before we visit Save for Web & Devices, we need to go ahead and investigate the image inside of the pixel grid, and I am going to show you how to do that, as well as a new way to align your artwork to that pixel grid, in the next exercise.