|Project Information-- • Skill level-Beginner • AdobeR Illustrator R CS2 |
In the last tutorial, we finished the web banner. Now, you are ready to optimize it with the AdobeR Save for Web optimizing feature. This Save for Web feature in IllustratorR works much the same way as it does in PhotoshopR.
But just what is optimizing? When you create an image and click File > Save, the image is saved in the Illustrator file format (.ai) by default. This is a good idea because you might want to return to the image at a future time and make changes to it. However, this Illustrator file format results in a very large image file which is too large to be used on the web. We need to do two things. First we will convert the image into a file format that can be used on a webpage. The three most common choices are JPEG, GIF and PNG. Most images created in Illustrator are vector graphics and therefore can probably be saved in GIF format. However, I have found that the gradient and the drop shadow look much better when I use the JPEG format. So for this tutorial, we will convert our banner to JPEG. Secondly, we need to reduce the file size to as small as possible for use on the web. But there is a tradeoff. When you reduce the size of the image file, you also lower the visual quality of the image. We need to find a nice balance between file size and quality. For this simple tutorial, we will choose between the built-in High, Medium and Low settings for the JPEG format.
1. Open your banner into Illustrator. If you have been following along with the last few tutorials, your banner should be ready to be optimized when you open the image into the program.
2. Save for Web. From the Menu Bar, click File > Save for Web which will open the Save for Web dialog box. At the top, you will see four tabs which will give you four different views of your image. The Original tab will show the image in its default Illustrator format before it is optimized. The Optimized tab will show you how your image will look after it is optimized at the format and compression quality of your choice. But we haven't made that choice yet, so click on the Optimized tab.
3. Start with JPEG format and High quality. In the panel on the right, you will find the section labeled Preset. There you will see some drop-down menus. The first menu on the left contains the Optimized File Format choices. Set this to JPEG. The menu under that contains the Compression Quality choices. Set this to High. Leave the other settings at their defaults.
4. Check the details. Under the Preset section is a few more tabs. Click on the Image Size tab. The finished banner image should still be 468 x 60 pixels. Under that, verify that the Anti-Alias and Clip to Artboard checkboxes are not checked. If these boxes were checked, it would effect the finished size of our image.
5. Choosing a quality setting. Now look at the bottom of the large panel containing the image. There you will find the information about your optimized image. First it tells you that the image will be converted to JPEG format. Under that is the projected file size and download time. Click on the 2-Up tab and it will show you both the original image and the optimized image. But we want to take a look at how our image will decrease in quality at the Medium and Low compression quality settings. Click on the 4-Up tab and you will see four versions of your image. Click on the second panel and set the Compression Quality to High in the drop-down menu. Click on the third panel and set the Compression Quality to Medium. Finally, click on the fourth panel and set the Compression Quality to Low. As you can see, the file size and download time are reduced for the Medium and Low settings. Now you need to compare the visual quality of these three versions and choose for yourself which quality setting is best for your project. Click on the panel for the quality setting of your choice. Finally, click Save to open the Save Optimized As dialog box. Give your final image a name and save it in the location of your choice.
AdobeR product screen shot(s) reprinted with permission from Adobe Systems Incorporated. AdobeR, PhotoshopR, PhotoshopR AlbumTM, IllustratorR, InDesignR, GoLiveR, AcrobatR, CueR, Bridge, DreamweaverR, FlashR, FireworksR, ContributeTM and FlashPaperTM are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.