So now we have our photograph that we've used Live Trace on and we've also used Live Color to colorize this photo and the next thing we want to do is actually bring this to the Web. So in order to do that in Illustrator we can simply go to our File menu and select Safe for Web & Devices.
This is going to bring up the Safe for Web & Devices dialog box and this is actually a fairly comprehensive dialog box and there are a number of different options that you have. So the first option that you want to consider is whether you want to look at the Original document, whether you want to look at the Optimized document or if you want to compare the Original and Optimized side by side, so you can see how your resulting image differs from the Original image or if you are not sure about that type of compression algorithm that you are going to be applying you can go to 4-Up and that way you will have the option of applying different presets to the three options. So in the top left hand side we have our Original photograph and in the top right I am going to stay with the GIF Preset and what I want to is actually reduce the number of colors down to about eight and you can see the change has been applied to this artwork immediately.
On the bottom left hand side I want to try a JPEG version. So we will go ahead and we will the reset the Preset to JPEG Low and down here slightly differently we can have Illustrator taken to all of our optimization and instead of selecting either a GIF, JPEG or PNG what I am going to do is bring up the Optimized menu and choose the Optimize to File Size option. In this case I am going to say that I want the Desired File Size to be put 8K and I wanted to start with auto selecting GIF or JPEG depending on what Illustrator thinks is most appropriate and then we will click OK.
Now you can see that we have four different versions of the same document we have our Original and a number of other presets and we can use the Hand Tool, to pan around in this document and see exactly how different elements within our artwork are going to appear as a GIF as a JPEG or as a lower quality GIF and we can see that on the top right-hand side, it's probably the best option that I have in the given options and you can see that it's about 16K and I can tell that it's going to take about 7 seconds to download on a 28.8 connection. Of course what I might want to do is consider targeting people with faster connections and I can choose that default value instead of selecting 28.8, maybe we want to see how long it would take somebody on a 56K dial up and we can select that option and the times it automatically get recalculated for us.
Also when we are looking at a particular preset, there is a lot of different options that we can modify, that we can tweak to get the best possible result. So, obviously, the first one that you have, a selection of, is the file format. So in this case we are going to stick with GIF, but you do have additional options you can save directly to a SWF file, if you are going to be taking this document in Flash or to perhaps to PNG, again if you are taking this to Flash or to Fireworks. We are actually outputting directly to the Web, so we are going to select GIF. You can also select the Color reduction algorithmic, the Dither algorithm and by the way Dither basically means that if an image contains more colors then a monitor can display, the browser will dither or approximate the colors that it can't display by blending colors that it can display.
So you might see that term fairly often and it basically just means that it's approximating colors. Down here you will notice that we have three different tabs we have the Color Table tab which will show you all of the colors that are being used in the Optimized image. You can switch over to the Image Size tab and select the dimensions for the output image or you can go to the Layers tab and you can choose to Export this document using CSS layers and if you do that, what that basically allows you to do is create CSS layers by using the Layers in your Illustrator artwork and CSS layers that are going to be generated by Illustrator are going to positioned absolutely and it can overlap.
So if we choose to Export CSS layers, we can select different layers that we have in our document and in this case we only have one layer. But you could select different layer that you have in your Illustrator document and you could create both Hidden CSS layers as well as Visible CSS layers. Or you can choose not to export them at all.
So if you are working with a complex Illustrator document that you are going to be outputting to the Web, that is one option that you have is to Export them all out as CSS layers. Now obviously in this case, because this is just a flat photograph we are not actually going to do that. So we will just deselect it and basically at this point I would go ahead and click on the Save button to bring up the Save As dialog box and again we will go back into our Desktop and select our Project Files folder, select Lesson 2 and we will just Save this as livetrace_photograph_red.gif and that basically does it. We've not taken an Illustrator artwork and saved it for the Web and that brings us to the end of this lesson.
We started with taking our scanned logo artwork and we turned it into vector art by using Live Trace and Live Paint. We also used Live Trace on a couple of photographs and I then use Live Color to recolor one of the images to give us this very stylized vector output. Lastly, we took this image, optimized it and saved it for the Web. So as you can see Illustrator is a very versatile and powerful tool that should be in every web designers toolbox.
