How to Save Your Artwork for the Web with Adobe Illustrator CS6
If you need to save artwork for the web, no feature is better than Save for Web in Adobe Illustrator CS6. This dialog box opens a preview pane where you can test different file formats before you save the file.
Before going through the steps to save a graphic for the web, make sure that the artboard is resized to the bounds of the graphic; otherwise, you’ll have ext→ space surrounding your graphic.
To save an Illustrator file that you intend to use in a web page, just follow these steps:
1Choose File→Save for web.
The Save for web dialog box appears, showing your artwork on the Optimized tab.
2Select a tabbed view: Original, Optimized, or 2-Up.
You see as a default the artwork in Optimized view, which previews the artwork as it will appear based on the settings to the right. The best choice is 2-Up view because it shows your original image versus the optimized version.
3Select a setting for your file from the options on the right.
If you want to make it easy on yourself, select a preset from the Preset drop-down list. Keep these points in mind:
Graphics Interchange Format (GIF) is generally used for artwork with spans of solid color. You can make your artwork smaller by reducing the number of colors in the image — hence the choices, such as GIF 64 No Dither (64 colors). The lower the number of colors, the smaller the file size.
Dithering tries to make your artwork look like it has more colors by creating a pattern in the colors. It looks like a checkerboard pattern up close and even far away. It also makes a larger file size. Most designers don’t like the effect and choose the No Dither option.
Joint Photographic Experts Group (JPEG) is used for artwork that has subtle gradations from one shade to another. Photographs are often saved in this format. If you have drop shadows or blends in your artwork, select this format. JPEG is a lossy file format — it reduces an image to a lesser quality and can create odd artifacts in your artwork.
PNG-8 is quite similar to the GIF file format. Unless you have a certain reason for saving as PNG-8, stick with the GIF file format.
PNG-24 supports the best of two formats (GIF and JPEG). The Portable Network Graphics (PNG) format supports not only the nice gradients from one tonal value to another (such as JPEGs) but also transparency (such as GIFs).
4When you’re satisfied with your chosen settings, click Save.
When saving illustrations for the web, keep these points in mind — they make the whole process much easier for you and anyone who uses your illustrations:
Keep file sizes small. Don’t forget that if you’re saving illustrations for a web page, many other elements will also be on that page. Try to conserve on file size to make downloading the page quicker. Most visitors don’t wait more than ten seconds for a page to download before moving to another website.
Preview the file before saving it. If you want to see the artwork in a web browser before saving it, click the Preview button at the bottom-left corner of the Save for web dialog box. The browser of choice appears with your artwork in the quality level and size in which it will appear.
Change the size. Most people generally view their browser windows in an area measuring approximately 700 x 500 pixels. This setting may cover the entire screen on a 14-inch monitor. Even viewers with 21-inch, high-resolution monitors often set their resolutions to approximately 700 x 500 pixels. When choosing a size for your artwork, choose one with proportions similar to these.
Finish the save. If you aren’t finished with the artwork but want to save your settings, hold down the Alt (Windows) or Option (Mac) key and click the Remember button. When you’re finished, click the Save button and save your file in the appropriate location.