Creative Adobe Suite 5 Manual

							107CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Note: If you save the settings in a another location, they will not be available from the Preset pop-up menu.
3To delete a preset, select the preset from Preset menu, and select Delete Settings from the Optimize menu. 
Work with slices in the Save For Web & Devices dialog box
If your image contains multiple slices, you must specify the slices to be optimized. You can apply optimization settings 
to additional slices by linking the slices. Linked slices in GIF and PNG-8 format share a color palette and dither pattern 
to prevent the appearance of seams between the slices.
To show or hide all slices, click the Toggle Slices Visibility button .
To select slices in the Save For Web & Devices dialog box, choose the Slice Select tool , and then click a slice to 
select it. Shift-click or Shift-drag to select multiple slices. 
Note: In the Save For Web & Devices dialog box, unselected slices are dimmed. This does not affect the color of the final 
image.
To view slice options in the Save For Web & Devices dialog box, select the Slice Select tool, and double-click a slice.
To link slices, select two or more slices and choose Link Slices from the Optimize pop-up menu  (to the right 
of the Preset menu). The link icon  appears on the linked slices. 
To unlink a slice, select the slice, and then choose Unlink Slice from the Optimize pop-up menu.
To unlink all slices in an image, choose Unlink All Slices from the Optimize pop-up menu.
Compress a web graphic to a specific file size
1Choose File > Save For Web & Devices. 
2Click a tab at the top of the Save For Web & Devices dialog box to select a display option: Optimized, 2-Up, or 4-Up. 
If you select 4-Up, select the preview you want to optimize. 
3(Optional) Select the slices you want to optimize and the file format you want to use. 
4Select Optimize To File Size from the Optimize menu (to the right of the Preset menu). 
5Enter the desired file size.
6Select a Start With option:
Current Settings Uses the current file format.
Auto Select GIF/JPEG Automatically selects the optimal format depending on image content. 
7Select a Use option to specify whether you want to apply the specified file size to current slice only, to each slice in 
the image, or to all slices. Click
 OK. 
Resize artwork while optimizing 
In the Save For Web & Devices dialog box, you can resize an image to specified pixel dimensions or to a percentage of 
the original size. 
1Click the Image Size tab in the Save For Web & Devices dialog box.
2Set any of the additional options:
Constrain Proportions Maintains the current proportions of pixel width to pixel height. 
Quality (Photoshop only) Specifies the interpolation method. Bicubic Sharper generally produces better results when 
you are reducing image size. 
						

							108CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Anti-Alias (Illustrator only) Removes jagged edges in the artwork by applying anti-aliasing.
Clip To Artboard (Illustrator only) Clips the artwork size to match the document’s Artboard boundary. Any artwork 
outside the Artboard boundary will be deleted. 
Note: None of the features in the Image Size palette are available for the SWF and SVG file formats except Clip To 
Artboard.
3Enter new pixel dimensions or specify a percentage by which to resize the image, and click Apply.
Generate CSS layers for web graphics
You can use layers in your Illustrator artwork to generate CSS layers in the resulting HTML file. A CSS layer is an 
element that has an absolute position and can overlap with other elements in a web page. Exporting CSS layers is useful 
when you plan to create dynamic effects in your web page.
The Layers palette in the Save For Web & Devices dialog box gives you control over which top-level layers in your 
artwork are exported as CSS layers, and whether exported layers are visible or hidden.
1Click the Layers tab in the Save For Web & Devices dialog box.
2Select Export As CSS Layers. 
3Select a layer from the Layer pop-up menu, and set the following options as desired:
Visible Creates a visible CSS layer in the resulting HTML file.
Hidden Creates a hidden CSS layer in the resulting HTML file.
CSS layers are the same as GoLive layers. Using Adobe GoLive, you can animate a CSS layer and use built-in 
JavaScript actions to create interactive effects.
More Help topics 
“Save For Web & Devices overview” on page 103
“Optimize an image for the web” on page 105
Preview optimized images in a web browser
You can preview an optimized image in any web browser installed on your system from the Save For Web & Devices 
dialog box (File
 > Save For Web & Devices). The browser preview displays the image with a caption listing the image’s 
file type, pixel dimensions, file size, compression specifications, and other HTML information.
To preview an image in your default web browser, click the browser icon at the bottom of the Save For Web & 
Devices dialog box. 
To select a different browser, select Other from the browser pop-up menu (next to the browser icon).
To add, edit, or remove a browser in the browser pop-up menu, select Edit List from the browser pop-up menu. In 
the Browsers dialog box, you can find all browsers on your computer and set the default browser to preview your 
image.
Save a file to e-mail
1Choose File > Save For Web & Devices.
2Click the Optimized tab at the top of the Save For Web & Devices dialog box.
3Choose JPEG Low from the Preset menu. 
						

							109CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
4In the Image Size area, click the chainlink icon to the right of the W and H boxes to retain image proportions. Then 
enter a width.
For e-mail, 400 pixels is a good size. Use a smaller size if your recipient has a slow Internet connection.
5Click Save. Enter a file name and location in which to save the file. Under Format, make sure that Images Only is 
selected. Again click Save.
Now you are ready to e-mail the file. In some e-mail programs, you can drag the file into the body of the message. In 
other programs, you use the Attach or Insert command.
Web graphics optimization options
Web graphic formats
Web graphics formats can be either bitmap (raster) or vector. The bitmap formats—GIF, JPEG, PNG, and WBMP—
are resolution-dependent, meaning that a bitmap image’s dimensions, and possibly image quality, will change at 
different monitor resolutions. The vector formats—SVG and SWF—are resolution-independent and can be scaled up 
or down without losing any image quality. The vector formats can also include raster data. You can export from Save 
For Web & Devices to SVG and SWF in Adobe Illustrator only.
JPEG optimization options
JPEG is the standard format for compressing continuous-tone images such as photographs. Optimizing an image as a 
JPEG format relies on lossy compression, which selectively discards data. 
Note: Since image data is lost when saving a file in JPEG format, it’s a good idea to save the source file in its original 
format (for example, Photoshop .PSD) if you plan to edit the file further or create additional JPEG versions.
Optimization settings for JPEG (Photoshop version)A. File Format menu  B. Compression Quality menu  C. Optimize menu  
Quality Determines the level of compression. The higher the Quality setting, the more detail the compression 
algorithm preserves. However, using a high Quality setting results in a larger file size than using a low Quality setting. 
View the optimized image at several quality settings to determine the best balance of quality and file size.
Optimized Creates an enhanced JPEG with a slightly smaller file size. The Optimized JPEG format is recommended 
for maximum file compression; however, some older browsers do not support this feature.
Progressive Displays the image progressively in a web browser. The image appears as a series of overlays, enabling 
viewers to see a low-resolution version of
 the image before it downloads completely. The Progressive option requires 
use of the Optimized JPEG format.
Note: Progressive JPEGs require more RAM for viewing and are not supported by some browsers.
C
A
B 
						

							110CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Blur Specifies the amount of blur to apply to the image. This option applies an effect identical to that of the Gaussian 
Blur filter and allows the file to be compressed more, resulting in a smaller file size. A
 setting of 0.1 to 0.5 is 
recommended.
Embed Color Profile (Photoshop) or ICC Profile (Illustrator) Preserves color profiles in the optimized file. Some 
browsers use color profiles for color correction. 
Matte Specifies a fill color for pixels that were transparent in the original image. Click the Matte color swatch to select 
a color in the color picker, or select an option from the Matte menu: Eyedropper Color (to use the color in the 
eyedropper sample box), Foreground Color, Background Color, White, Black, or Other (to use the color picker). 
Note: The Foreground Color and Background Color options are only available in Photoshop.
Pixels that were fully transparent in the original image are filled with the selected color; pixels that were partially 
transparent in the original image are blended with the selected color.
More Help topics 
“Optimize an image for the web” on page 105
GIF and PNG-8 optimization options
GIF is the standard format for compressing images with flat color and crisp detail, such as line art, logos, or 
illustrations with type. Like the GIF format, the PNG-8 format efficiently compresses solid areas of color while 
preserving sharp detail.
PNG-8 and GIF files support 8-bit color, so they can display up to 256 colors. The process of determining which colors 
to use is called indexing, so images in GIF and PNG-8 formats are sometimes called indexed color images. To convert 
an image to indexed color, a color lookup table is built to store and index the colors in the image. If a color in the 
original image does not appear in the color lookup table, the application either chooses the closest color in the table or 
simulates the color using a combination of available colors. 
In addition to the following options, you can also adjust the number of colors in the image’s color table. See 
“Customize the color table for GIF and PNG-8 images” on page 114.
Optimization settings for GIF (Photoshop version)A. File Format menu  B. Color Reduction Algorithm menu  C. Dithering Algorithm menu  D. Optimize menu  
Lossy (GIF only) Reduces file size by selectively discarding data. A higher Lossy setting results in more data being 
discarded. You
 can often apply a Lossy value of 5–10, and sometimes up to 50, without degrading the image. The Lossy 
option can reduce file size by 5% to
 40%. 
Note: You cannot use the Lossy option with the Interlaced option or with Noise or Pattern Dither algorithms.
D
A
B
C 
						

							111CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Color Reduction Method and Colors Specifies a method for generating the color lookup table and the number of colors 
you want in the color lookup table. You can select one of the following color reduction methods:
Perceptual Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity. 
Selective Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the 
preservation of web colors. This
 color table usually produces images with the greatest color integrity. Selective is the 
default
 option.
Adaptive Creates a custom color table by sampling colors from the predominant spectrum in the image. For 
example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most 
images concentrate colors in particular areas of the spectrum. 
Restrictive (Web) Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) 
palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. 
(This palette is also called the web-safe palette.) Using the web palette can create larger files, and is recommended only 
when avoiding browser dither is a high priority. 
Custom Uses a color palette that is created or modified by the user. If you open an existing GIF or PNG-8 file, it 
will have a custom color palette.
Use the Color Table palette in the Save For Web & Devices dialog box to customize the color lookup table. 
Black and White, Grayscale, Mac OS, Windows Use a set palette of colors.
Dithering Method and Dither Determines the method and amount of application dithering. Dithering refers to the 
method of simulating colors not available in the color display system of your computer. A higher dithering percentage 
creates the appearance of more colors and more detail in an image, but can also increase the file size. For optimal 
compression, use the lowest percentage of dither that provides the color detail you require. Images with primarily solid 
colors may work well with no dither. Images with continuous-tone color (especially color gradients) may require 
dithering to prevent color banding. 
GIF image with 0% dither (left), and with 100% dither (right)
You can select one of the following dithering methods:
Diffusion Applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are 
diffused across adjacent pixels.
Pattern Applies a halftone-like square pattern to simulate any colors not in the color table.
Noise Applies a random pattern similar to the Diffusion dither method, but without diffusing the pattern across 
adjacent pixels. No seams appear with the Noise dither method. 
Transparency and Matte Determines how transparent pixels in the image are optimized. 
To make fully transparent pixels transparent and blend partially transparent pixels with a color, select 
Transparency and select a matte
 color. 
To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, select a matte 
color and deselect Transparency. 
						

							112CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, select an 
option from the Matte menu: Eyedropper Color (to use the color in the eyedropper sample box), Foreground Color, 
Background Color, White, Black, or Other (to use the color picker).
Note: The Foreground Color and Background Color options are only available in Photoshop.
Examples of transparency and mattingA. Original image  B. Transparency selected with a matte color  C. Transparency selected with no matting  D. Transparency deselected with a 
matte color  
Transparency Dithering When the Transparency option is selected, you can choose a method for dithering partially 
transparent pixels:
No Transparency Dither applies no dither to partially transparent pixels in the image.
Diffusion Transparency Dither applies a random pattern that is usually less noticeable than Pattern dither. The 
dither effects are diffused across adjacent pixels. If you select this algorithm, specify a Dither percentage to control 
the amount of dithering that is applied to the image. 
Pattern Transparency Dither applies a halftone-like square pattern to partially transparent pixels.
Noise Transparency Dither applies a random pattern similar to the Diffusion algorithm, but without diffusing the 
pattern across adjacent pixels. No seams appear with the Noise algorithm.
AB
CD 
						

							113CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Example of Pattern Transparency dithering (left) and applied to a web page background (right)
Interlace Displays a low-resolution version of the image in a browser while the full image file is downloading. 
Interlacing can make downloading time seem shorter and can assure viewers that downloading is
 in progress. 
However, interlacing also increases file size.
Web Snap Specifies a tolerance level for shifting colors to the closest web palette equivalents (and prevent the colors 
from dithering in a browser). A higher value shifts more colors. 
More Help topics 
“Optimize an image for the web” on page 105
Optimize transparency in GIF and PNG images
Transparency makes it possible to create nonrectangular images for the web. Background transparency preserves 
transparent pixels in the image. This allows the background of the web page to show through the transparent areas of 
your image. Background matting simulates transparency by filling or blending transparent pixels with a matte color 
that can match the web page background. Background matting works best if the web page background is a solid color 
and if you know what that color is.
Use the Transparency and Matte options in the Save For Web & Devices dialog box to specify how transparent pixels 
in GIF and PNG images are optimized.
(GIF and PNG-8) To make fully transparent pixels transparent and blend partially transparent pixels with a color, 
select Transparency and select a matte
 color.
To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, select a matte 
color and deselect Transparency.
(GIF and PNG-8) To make all pixels with greater than 50% transparency fully transparent and all pixels with 50% 
or less transparency fully opaque, select Transparency and select None from the Matte menu.
(PNG-24) To save an image with multilevel transparency (up to 256 levels), select Transparency. The Matte option 
is disabled since multilevel transparency allows an image to blend with any background color.
Note: In browsers that do not support PNG-24 transparency, transparent pixels may be displayed against a default 
background color, such as gray. 
To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, select an option 
from the Matte menu: Eyedropper Color (to use the color in the eyedropper sample box), Foreground Color, 
Background Color, White, Black, or Other (to use the color picker).
Note: The Foreground Color and Background Color options are only available in Photoshop. 
						

							114CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
View the color table for an optimized slice
The color table for a slice appears in the Color Table panel in the Save For Web & Devices dialog box. 
❖Select a slice that is optimized in GIF or PNG-8 format. The color table for the selected slice appears in the Save For 
Web & Devices color table.
If an image has multiple slices, the colors in the color table may vary between slices (you can link the slices first to 
prevent this from happening). If you select multiple slices that use different color tables, the color table is empty and 
its status bar displays the message “Mixed.” 
Customize the color table for GIF and PNG-8 images
You use the color table in the Save For Web & Devices dialog box to customize the colors in optimized GIF and PNG-8 
images. Reducing the number of colors often preserves image quality while reducing the file size of the image.
You can add and delete colors in the color table, shift selected colors to web-safe colors, and lock selected colors to 
prevent them from being dropped from the palette.
Sort a color table
Choose a sorting order from the Color Table palette menu:
Unsorted restores the original sorting order.
Sort By Hue sorts by the location of the color on the standard color wheel (expressed as a degree from 0 to 360). 
Neutral colors are assigned a hue of 0 and located with the reds.
Sort By Luminance sorts by the lightness or brightness of a color.
Sort By Popularity sorts by the colors’ frequency of occurrence in the image.
Add a new color to the color table
You can add colors that were left out in building the color table. Adding a color to a dynamic table shifts the color in 
the palette closest to the new color. Adding a color to a fixed or Custom table adds an additional color to the palette.
1If any colors are currently selected in the color table, choose Deselect All Colors from the Color Table palette menu 
to deselect them. 
2Choose a color by doing one of the following:
Click the Eyedropper Color box in the Save For Web & Devices dialog box and choose a color from the color picker.
Select the Eyedropper tool in the Save For Web & Devices dialog box and click in the image.
3Do one of the following:
Click the New Color button  in the color table. 
Select New Color from the Color Table palette menu. 
To switch the color table to a Custom palette, hold down Ctrl (Windows) or Command (Mac OS) when you add the 
new color.
The new color appears in the color table with a small white square in the lower right corner, indicating that the color 
is locked. If the color table is dynamic, the original color is displayed in the upper left and the new color is displayed 
in the lower right. 
						

							115CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Select colors in the color table
A white border appears around selected colors in the Color Table.
To select a color, click the color in the Color Table.
To select multiple colors in the color table, press Shift and click another color. All colors in the rows between the 
first and second selected colors are selected. To
 select a nonadjacent group of colors, press Ctrl (Windows) or 
Command (Mac
 OS) and click each color that you want to select. The Color Table palette menu also provides 
commands for selecting colors.
To select a color in the preview image, click in the preview with the Save For Web & Devices Eyedropper tool. 
Shift-click to select additional colors.
To deselect all colors, choose Deselect All Colors from the Color Table palette menu.
Shift a color
You can change a selected color in the color table to any other RGB color value. When you regenerate the optimized 
image, the selected color changes to the new color wherever it appears in the image. 
1Double-click the color in the color table to display the default color picker.
2Select a color.
The original color appears at the upper left of the color swatch and the new color at the lower right. The small square 
at the lower right of the color swatch indicates that the color is locked. If you shift to a web-safe color, a small white 
diamond appears at the center of the swatch.
3To revert a shifted color to its original color, do one of the following:
Double-click the swatch for the shifted color. The original color is selected in the color picker. Click OK to restore 
the color.
To revert all shifted colors in a color table (including web-shifted colors), choose Unshift All Colors from the Color 
Table palette menu.
Shift colors to the closest web palette equivalent
To protect colors from dithering in a browser, you can shift the colors to their closest equivalents in the web palette. 
This ensures that the colors won’t dither when displayed in browsers on either Windows or Macintosh operating 
systems capable of displaying only 256 colors. 
1Select one or more colors in the optimized image or color table.
2Do one of the following:
Click the Web Shift button  in the Color Table palette. 
Choose Shift/Unshift Selected Colors To/From Web Palette from the Color Table palette menu.The original color 
appears at the upper left of the color swatch and the new color at the lower right. The small white diamond
  in 
the center of the color swatch indicates that the color is web-safe; the small square at the lower right of the color 
swatch indicates that the color is locked.
3To set a tolerance for shifting, enter a value for Web Snap. A higher value shifts more colors.
4To revert web-shifted colors, do one of the following:
Select a web-shifted color in the color table and click the Web Shift button  in the Color Table palette.
To revert all web-shifted colors in the color table, choose Unshift All Colors from the Color Table palette menu. 
						

							116CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Map colors to transparency
You can add transparency to an optimized image by mapping existing colors to transparency.
1Select one or more colors in the optimized image or color table.
2Do one of the following:
Click the Map Transparency button  in the Color Table palette. 
Choose Map/Unmap Selected Colors To/From Transparent from the Color Table palette menu.
The transparency grid  appears in half of each mapped color. The small square at the lower right of the color swatch 
indicates that the color is locked.
3To revert transparency to original color, do one of the following:
Select the colors you want to revert and click the Map Transparency button  or choose Map/Unmap Selected 
Colors To/From Transparent from the Color Table palette menu.
To revert all transparency-mapped colors, choose Unmap All Transparent Colors.
Lock or unlock a color
You can lock selected colors in the color table to prevent them from being dropped when the number of colors is 
reduced and to prevent them from dithering in the application.
Note: Locking colors does not prevent them from dithering in a browser. 
1Select one or more colors in the color table.
2Lock the color by doing one of the following:
Click the Lock button . 
Choose Lock/Unlock Selected Colors from the Color Table palette menu. 
A white square  appears in the lower right corner of each locked color.
3Unlock the color by doing one of the following:
Click the Lock button .
Choose Lock/Unlock Selected Colors from the Color Table palette menu.
The white square disappears from the color swatch.
Delete selected colors 
You can delete selected colors from the color table to decrease the image file size. When you delete a color, areas of the 
optimized image that previously included that color are rerendered using the closest color remaining in the palette.
When you delete a color, the color table automatically changes to a Custom palette. This is because the Adaptive, 
Perceptual, and Selective palettes automatically add the deleted color back into the palette when you reoptimize the 
image—the Custom palette does not change when you reoptimize the image.
1Select one or more colors in the color table.
2Delete the color by doing one of the following:
Click the Delete icon .
Choose Delete Color from the Color Table palette menu.