| Save for Web in Illustrator CS | |
(If you arrived at this page from a search, you can start the tutorial on page one.)
Choosing Settings
Now you need to decide what format and settings to use for the image. These settings are chosen on the right side of the save for web dialog.
Settings Menu: The Settings popup menu contains pre-defined optimization settings for GIF, JPG, or PNG images. Choose one from the list, and it sets the other options with common settings. You can use it as is, or you can change the settings to suit your image. These settings are dynamic and depend on the selected format. In the screenshot above, you can see GIF options. We will look at these in a minute.
Optimize Menu: The options here control how the files are compressed and if you are also saving html, how that is generated as well. Open the optimize menu by clicking the small triangle.
- Save Settings:
- Saves the current settings. They will be stored in Illustrator's Optimized folder in the Presets > Save for Web Setting folder so they can be loaded later from the Settings popup menu.
- Delete Settings:
- Deletes the selected custom settings from the popup menu. Default settings cannot be deleted, only custom settings you have saved previously.
- Optimize to file size:
- This lets you pick the optimized size of the file, and Illustrator will use settings to save as close to that size as it can.
- Repopulate Views:
- This draws new image previews based on the settings of the currently selected preview window.
- Link, Unlink, and Unlink All Slices:
- These have to do with sliced images.
- Edit Output Settings:
- Controls how Illustrator writes HTML.
GIF Settings
Because GIF is the chosen file type, we see GIF settings.
- Lossy:
- This slider is to let you balance some lossiness with a smaller file size, but I haven't found it works very well. It loses quality so fast it offsets any benefit to file size reduction. The small button to the right is a holdover from Photoshop that is to let you base the lossiness on alpha channels, but since there are no alpha channels in Illustrator, the button is inactive. Even if you open a Photoshop file with alpha channels in Illustrator, this option will not work.
- Color Reduction Algorithm:
- This menu determines how the Illustrator will choose the colors saved in the GIF. You are limited to 256 colors, but they can be ANY 256 colors. Briefly, Perceptual picks colors the eyes see the best. Selective picks colors the eye can see but includes more color safe shades. Adaptive bases its choices on colors that are actually in the image. Selective is default. There are also some fixed options: Web, Mac OS, Windows, B&W, and Grayscale. These all use predetermined colors.
- Colors:
- The less colors, the smaller the file size, but it also won't look as good. Here you must learn to balance appearance with file size.
- Dithering Algorithm:
- This determines how the dithered pixels are distributed. Dithering created the illusion of more colors by distributing pixels of different colors next to each other to fool the eye into thinking there are more colors that there actually are. This actually can increase file size.
- Transparency:
- This option creates areas of transparency in an image based on color, or current transparency. In the bird example, there really is nothing in the image but the actual bird...around the bird it is transparent and you can retain that using this setting. The amount setting really has no bearing since partial transparency is not supported in the GIF format.
- Matte:
- When you save an image with transparency it very often will have a halo. If you set the Matte color to the same color that the object will be placed in front of it creates a matte of that color to let the image fade into the background better. The caveat is that it will look awful against any other color of background.
- Interlaced:
- Interlaced gifs load slowly with multiple passes over the page. The advantage to this is that there is something there for the reader to see so they don't watch a big empty space until the image suddenly pops onto the page, which is what happens if the GIF is not interlaced.
- Web Snap:
- Converts colors that are similar to web-safe colors to web safe colors.
Color Table
These are the colors contained in the image. A GIF is an indexed color image.
Continued on page 5…
©2005 Sara Froehlich
