| Save for Web in Illustrator CS | |
Using Save for Web in Illustrator CS
When
using Illustrator, you may not think of it as a web design tool, but with an
excellent Save for Web feature you can use Illustrator to make and save your
web graphics.
Illustrator's Save for Web is so full of features that to really cover it would take a book. From the Save for Web dialog, you can save sliced web pages, save the slices in different web formats for the very best image quality possible, export whole web pages including the HTML, or even export Flash animations! Even though this tutorial was written for Illustrator CS, it is also relevant for previous versions of Illustrator as well as Photoshop.
When you add images to your web page, you increase the overall page size. It is the goal of the Save for Web dialog to let you keep the quality of the images without keeping the large file sizes, thus making your overall page size smaller. Why is this important? Because the smaller the overall page size, the faster the page loads. This tutorial will show you how to choose the settings to get great looking GIFs and JPGs. Before you can make choices for saving your images for the web, you need to need to know a little about the GIF and JPG graphics formats.
File Formats
The two most common web file formats are GIF and JPG. Even though Illustrator can save in several other formats, these are the two we will talk most about in this tutorial.
JPG or JPEG (Joint Photographic Experts Group)
I know that's an odd name, but it's the name of the original committee that
wrote the format. The JPG format supports millions of colors, making it ideal
for photos or other images with a lot of colors or gradient fills. The drawback
is that to make the files smaller it compresses the images by getting rid of
color information. Many times this is not noticeable to the eye, but because
the color information is actually discarded every time you save the image, it
can degrade quickly. This is why JPG is a lossy
format.
• More JPEG
Information
GIF (Graphic Interchange Format)
The GIF format is a compressed format that makes small files. It supports transparency,
so the background of a GIF can be rendered transparent to let the web page background
show through. Because the GIF format only supports 256 colors, it is most suitable
for line art, text, or images like illustrations with flat areas of color, rather
than photos or images with many colors or gradient fills. Unlike JPG, GIF is
a lossless format. You can save it repeatedly without losing any more quality
(except for the caveat that if the image started out as a photo with thousands
of colors, it will now have only 256, and thus be degraded in that way, but
at least repeated saving will not make it any worse.) Another thing that is
nice about the GIF format is that it supports GIF animations. Neither JPG nor
PNG do.
• More GIF Information
PNG (Portable Network Graphics)
While this format can be saved by Illustrator's Save for Web, we won't use
it because it is not yet supported by all browsers. Support is growing, however,
and with its support for millions of colors, lossless compression, and transparency
support, it is a great web format. It even supports degrees of transparency,
something that the GIF does not. Because it is lossless, saving, opening, editing,
and re-saving a PNG image will not degrade its quality.
• More PNG Information
JPEG 2000
This is the JPG of the future, which is now, sort of. It is not supported by
all programs yet, but it has the best features of the JPG format—support
for millions of colors and small file size; in fact, even smaller, being able
to compress a file up to 20% smaller than its predecessor—and the best
of the GIF format: support for transparency, and it is lossless.
• More JPEG
2000 Information
Now that you know more than you wanted to about file formats, let's look at how to save a GIF or JPG for the web using Illustrator's Save for Web.
Continued on Page 2…
©2005 Sara Froehlich
