Learn How to Save Graphics for Web and Other Devices in Illustrator CS5
How do you optimize an Illustrator graphic for web?
When you save a graphic for web you need to make sure to reduce its file size for faster download, change its color mode to RGB, and give it a resolution 72dpi. The process can be annoying; however, Illustrator offers us a built-in option to make this process straightforward and easy. This tutorial will teach you how to save a button graphic for web using the Save for Web & Devices option.
We stand behind Server Intellect and their support team. They offer dedicated servers, and they are now offering cloud hosting!
STEP ONE:
Let’s say you created this web-button in Illustrator CS5 for a web-site that you are going to create:
The first thing we need to do is to select the area that we want to export for web. So, go ahead and select the Artboard Tool (Shift + O) 
and select the part of the image you want to save for web.
If you prefer, you can choose one of the Presets sizes located at the Artboard Options Toolbar:
STEP TWO:
Now, how can we correctly save it for web? There are many formats and ways to save elements for web. To make life easier for us this process in Illustrator has a Save for Web & Devices option that we can use. This option is located under File (File > Save for Web & Devices). Or, open this option by pressing Mac: Alt + Shift + Command + S, PC: Alt + shift + Control + S.
A Save for Web & Devices dialog box will appear:
Notice that the area we selected appeared cropped.
STEP THREE:
The Save for Web & Devices dialog box offers us four different ways to compare our original graphic with the one we are going to optimized. They are: Original, Optimized, 2-Up, and 4-Up.
In my opinion, the best setting is the 4-Up view. The 4-Up view shows the original graphic, a high quality version, a lower quality version with 100% dither, a lower quality version with 0% dither, along with a comparison of file sizes and download times.
Here we can notice which graphic looks the best and select it.
STEP FOUR:
At the Preset options we can select the file format, compression quality, matte, if any, and other specifications.
The best way to make the right choice is to change settings and compare.
The Optimized File Format drop-down menu has 7 different web-file formats available for saving: GIF, JPEG, PNG-8, PNG-24, SWF, SVG, and WBMP.
- GIF: Supports animation and transparencies. This format is color limited; so, is not suitable for images with a range of colors.
- JPEG: The most common used method to save images for web. It allows different levels of compression with low loss in image quality.
- PNG-8: Good for graphics with 8 or fewer bits deep.
- PNG-24: True-color or RGB images. It specifies colors as RGB and can contain up to 17 million colors.
- SWF: Good for animated graphics.
- SVG: Graphics saved as SVG are defined as XML files. They can be created and edited using any text editor.
- WBMP: Graphics are converted into black and white to keep a minimal file size for mobile devices.
STEP FIVE:
The Save for Web & Devices dialog box also offers us the option to preview our image in your default browser. Click this button: 
to preview it.
Here is the preview of my graphic:
This option gives us the description of our saved graphic with a HTML code we can use to add it to our web-page.
STEP SIX:
Once you are satisfied, click the Save button to save your optimized graphic to a folder.
As you observed, Save for Web & Devices option is an excellent way to optimize graphics for the web. Repeat this process to practice how to save more graphics for web. Don’t forget to pay attention to file sizes and download times!
TIP: If you need to save a transparent graphic for web make sure to choose GIF or PNG as the file format. Pick a matte color identical to your web-site background color to blend transparent pixels against your web-site background.
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
