Creative Adobe Suite 5 Manual

							117CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Save a color table
You can save color tables from optimized images to use with other images and to load color tables created in other 
applications. Once you load a new color table into an image, the colors in the optimized image are changed to reflect 
the colors in the new color table.
1Select Save Color Table from the Color Table palette menu. 
2Name the color table and choose a location where it will be saved. By default, the color table file is given the 
extension .act (for Adobe Color Table).
If you want to access the color table when selecting Optimization options for a GIF or PNG image, save the color table 
in the Optimized Colors folder inside the Photoshop application folder.
3Click Save.
Important: When you reload the table, all shifted colors will appear as full swatches and will be unlocked.
Load a color table
1Select Load Color Table from the Color Table palette menu.
2Navigate to a file containing the color table you want to load—either an Adobe Color Table (.act) file, an Adobe 
Color Swatch (.aco) file, or a GIF file (to load the file’s embedded color table).
3Click Open.
PNG-24 optimization options
PNG-24 is suitable for compressing continuous-tone images; however, it produces much larger files than JPEG format. 
The advantage of using PNG-24 is that it can preserve up to 256 levels of transparency in an image.
Transparency and Matte Determine how transparent pixels in the image are optimized. See “Optimize transparency 
in GIF and PNG images” on page 113.
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.
More Help topics 
“Optimize an image for the web” on page 105
WBMP optimization options
WBMP format is the standard format for optimizing images for mobile devices, such as cell phones. WBMP supports 
1-bit color, which means that WBMP images contain only black and white pixels. 
The Dithering algorithm and percentage determine the method and amount of application dithering. For optimal 
appearance, use the lowest percentage of dither that provides the detail you require. 
You can select one of the following dithering methods:
No Dither Applies no dithering at all, rendering the image in purely black and purely white pixels.
Diffusion 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 
applied to the image.  
						

							118CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Note: Diffusion dither may cause detectable seams to appear across slice boundaries. Linking slices diffuses the dither 
pattern across all linked slices, and eliminates the seams.
Pattern Applies a halftone-like square pattern to determine the value of pixels.
Noise Applies a random pattern similar to the Diffusion dithering, but without diffusing the pattern across adjacent 
pixels. No seams appear with the Noise algorithm. 
More Help topics 
“Optimize an image for the web” on page 105
SWF optimization options (Illustrator)
The Adobe Flash (SWF) file format is a vector-based graphics file format for the creation of scalable, compact graphics 
for the web. Because
 the file format is vector-based, the artwork maintains its image quality at any resolution. The SWF 
format is ideal for the creation of animation frames, but you can also save raster images in SWF format or mix raster 
and vector graphics.
Optimization settings for SWF A. File format menu  B. Flash Player menu  C. Export menu  
Preset Specifies the preconfigured set of options you want to use for export. You can create new presets by setting 
options as desired, and then choosing Save Settings from the panel menu. (To open the panel menu, click the triangle 
to the right of the Preset menu.)
Flash Player Version Specifies the earliest version of Flash Player that will support the exported file. 
Type Of Export Determines how layers are exported. Select AI File To SWF File to export the artwork to a single frame. 
Select Layers To SWF Frames to export the artwork on each layer to a separate SWF frame, creating an animated SWF.
Note: Select AI File To SWF File to preserve layer clipping masks.
Curve Quality Specifies the accuracy of the bezier curves. A low number decreases the exported file size with a slight 
loss of curve quality. A higher number increases the accuracy of the bezier curve reproduction, but results in a larger 
file size.
Frame Rate Specifies the rate at which the animation will play in a Flash viewer. This option is available only for Layers 
To SWF Frames.
Loop Causes the animation to loop continuously, rather than play once and then stop, when played in a Flash viewer. 
This
 option is available only for Layers To SWF Frames.
Preserve Appearance Expands strokes into stroke-shaped fills and flattens any blending modes and transparency that 
SWF doesn’t support. 
Preserve Editability Converts strokes to SWF strokes, and approximates or ignores transparency that SWF doesn’t 
support.
Note: SWF supports object-level opacity only.
A
B
C 
						

							119CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Use the Export command instead of the Save For Web & Devices command to maintain artwork’s stacking order by 
exporting each layer to a separate SWF file. You can then import the exported SWF files into Adobe Flash 
simultaneously. 
Compressed Compresses the exported file.
Protect File Protects the file so that it cannot be imported by applications other than Flash.
Text As Outlines Converts all text to outlines to maintain appearance. If you plan to edit the text in Flash, don’t select 
this option.
SVG optimization options (Illustrator)
SVG is a vector format that describes images as shapes, paths, text, and filter effects. The resulting files are compact 
and provide high-quality graphics on the web, in print, and even on resource-constrained handheld devices.
Optimization settings for SVG A. File format menu  B. SVG Profiles menu  C. Font Subsetting menu  D. Image Location menu  E. CSS Properties menu  F. Font Type menu  
G. Encoding menu  
Compressed Creates a Compressed SVG (SVGZ) file. 
SVG Profiles Specifies the SVG XML Document Type Definition for the exported file. 
SVG 1.0 and SVG 1.1 Suitable for SVG files to be viewed on a desktop computer. SVG 1.1 is the full version of the 
SVG specification, of which SVG Tiny 1.1, SVG Tiny 1.1 Plus, SVG Tiny 1.2, and SVG Basic 1.1 are subsets.
SVG Basic 1.1 Suitable for SVG files to be viewed on medium powered devices, such as handhelds. Keep in mind 
that not all handhelds support the SVG Basic profile. As a result, selecting this option doesn’t guarantee that the SVG 
file will be viewable on all handhelds. SVG Basic doesn’t support nonrectangular clipping and some SVG filter effects.
SVG Tiny 1.1 and SVG Tiny 1.1+ Suitable for SVG files to be viewed on small devices, such as mobile phones. Keep 
in mind that not all mobile phones support the SVG Tiny and SVG Tiny Plus profiles. As a result, selecting either of 
these options doesn’t guarantee that the SVG file will be viewable on all small devices. 
SVG Tiny 1.2 Suitable for SVG files to be viewed on a variety of devices ranging from PDAs and cellphones to 
laptops and desktop computers.
SVG Tiny doesn’t support gradients, transparency, clipping, masks, symbols, or SVG filter effects. SVG Tiny Plus 
includes the ability to display gradients and transparency, but it doesn’t support clipping, masks, symbols, or SVG filter 
effects.
For additional information on SVG profiles, see the SVG specification on the World Wide Web Consortium (W3C) 
website (www.w3.org).
Decimals Determines the precision of vector data in the SVG file. You can set a value of 1 to 7 decimal places. A high 
value results in a larger file size and increased image quality.
Font Subsetting Controls which glyphs are embedded from the SVG file. Select None from the Subsetting menu if you 
can rely on the necessary fonts being installed on end-user systems. Select Only Glyphs Used to only include glyphs 
for text that exists in the current artwork. The other values (Common English, Common English + Glyphs Used, 
A
B
C
D
E
F
G 
						

							120CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Common Roman, Common Roman + Glyphs Used, All Glyphs) are useful when the textual content of the SVG file is 
dynamic (such as server-generated text or user-interactive text).
Font Type Specifies how fonts are exported. 
Adobe CEF Uses font hinting for better rendering of small fonts. This font type is supported by the Adobe SVG 
Viewer but may not be supported by other SVG viewers.
SVG Doesn’t use font hinting. This font type is supported by all SVG viewers.
Convert To Outlines Converts type to vector paths. Use this option to preserve the visual appearance of type in all 
SVG Viewers.
Image Location Specifies whether to embed or link to images. Embedding images increases file size but ensures that 
rasterized images are always available.
CSS Properties Determines how CSS style attributes are saved in the SVG code. The default method, Presentation 
Attributes, applies properties at the highest point in the hierarchy, allowing the most flexibility for specific edits and 
transformations. The Style Attributes method creates the most readable files but may increase file size. Choose this 
method if the SVG code will be used in transformations—for example, transformations using XSLT (Extensible 
Stylesheet Language Transformation). The Entity References method results in faster rendering times and reduced 
SVG file size. The Style Element method is used when sharing files with HTML documents. By selecting Style Element, 
you can then modify the SVG file to move a style element into an external stylesheet file that is also referenced by the 
HTML file—however, the Style Element option also results in slower rendering speeds.
Encoding Determines how characters are encoded in the SVG file. UTF (Unicode Transformation Format) encoding 
is supported by all XML processors. (UTF-8 is an 8-bit format; UTF-16 is a 16-bit format.) ISO 8859-1 and UTF-16 
encoding don’t preserve file metadata. 
Optimize For Adobe SVG Viewer Optimizes images for Adobe SVG Viewer.
Output settings for web graphics
Set output options
Output settings control how HTML files are formatted, how files and slices are named, and how background images 
are handled when you save an optimized image. You set these options in the Output Settings dialog box. 
You can save your output settings and apply them to other files.
1To display the Output Settings dialog box, do one of the following:
When you save an optimized image, choose Other from the Settings pop-up menu in the Save Optimized or Save 
Optimized As dialog box. 
Choose Edit Output Settings from the Optimize pop-up menu (to the right of the Preset menu) in the Save For Web 
& Devices dialog box. 
2(Optional) To display predefined output options, choose an option from the Settings pop-up menu.
3Edit each set of options as needed. To switch to a different set of options, choose an options set from the pop-up 
menu below the Settings menu. Alternatively, click Next to display the next set in the menu list; click Prev to display 
the previous set.
4(Optional) To save output settings, set the options as desired, and click Save. Type a file name, choose a location for 
the saved file, and click Save.  
						

							121CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
You can save the output settings anywhere. However, if you place the file in the Optimized Output Settings folder 
inside the Photoshop folder or in the Save For Web Settings/Output Settings folder inside the Illustrator folder, the file 
will appear in the Settings pop-up menu.
5(Optional) To load output settings, click Load, select a file, and click Open.
HTML output options
You can set the following options in the HTML set:
Output XHTML Creates web pages meeting the XHTML standard on export. Choosing Output XHTML disables other 
output options that might conflict with this standard. Selecting this option automatically sets the Tags Case and 
Attribute Case options.
Tags Case Specifies the capitalization for tags. 
Attribute Case Specifies the capitalization for attributes.
Indent Specifies a method for indenting lines of code: using the authoring application’s tab settings, using a specified 
number of spaces, or
 using no indention.
Line Endings Specifies a platform for line ending compatibility.
Encoding Specifies a default character encoding for the web page. (This option is available only in Illustrator; 
Photoshop always uses UTF-8 encoding.)
Include Comments Adds explanatory comments to the HTML code.
Always Add Alt Attribute Adds the ALT attribute to IMG elements to comply with government web accessibility 
standards.
Always Quote Attributes Places quotation marks around all tag attributes. Placing quotation marks around attributes 
is required for compatibility with certain early browsers and for strict HTML compliance. However, always quoting 
attributes is not recommended. Quotation marks are used when necessary to comply with most browsers if this option 
is deselected.
Close All Tags Adds close tags for all HTML elements in the file for XHTML compliance.
Include Zero Margins On Body Tag Removes default internal margins in a browser window. Adds marginwidth, 
marginheight, leftmargin, and topmargin tags with values of zero to the body tag.
Slice output options
You can set the following options in the Slices set:
Generate Table Aligns slices using an HTML table rather than a cascading stylesheet. 
Empty Cells Specifies how empty slices are converted to table cells. Select GIF, IMG W&H to use a 1-pixel GIF with 
width and height values specified on the IMG tag. Select GIF, TD W&H to use a 1-pixel GIF with width and height 
values specified on the TD tag. Select NoWrap, TD W&H to place a nonstandard NoWrap attribute on the table data 
and also place width and height values specified on the TD tags.
TD W&H Specifies when to include width and height attributes for table data: Always, Never, or Auto (the 
recommended setting). 
						

							122CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Spacer Cells Specifies when to add one row and one column of empty spacer cells around the generated table: Auto 
(the recommended setting), Auto (Bottom), Always, Always (Bottom), or Never. For table layouts in which slice 
boundaries do not align, adding spacer cells can prevent the table from breaking apart in some browsers.
Generate CSS Generates a cascading stylesheet rather than an HTML table. 
Referenced Specifies how slice positions are referenced in the HTML file when using CSS:
By ID  Positions each slice using styles that are referenced by a unique ID.
Inline Includes style elements in the declaration of the block element  tag.
By Class Positions each slice using classes that are referenced by a unique ID.
Default Slice Naming Choose elements from the pop-up menus or enter text into the fields to create default names for 
slices. Elements include the document name, the word slice, numbers or letters designating slices or rollover states, the 
slice creation date, punctuation, or
 none.
Background output settings
You can set the following options in the Background set of the Output Settings dialog box: 
View Document As Select Image if you want the web page to display an image or a solid color as a background behind 
the current image. Select Background if you want the web page to display the optimized image as a tiled background.
Background Image Enter the location of an image file, or click Choose and select an image. The file you specify will be 
tiled behind the optimized image on the web page.
Color Click the Color box, and select a background color using the color picker, or select an option from the pop-up menu.
Saving Files output settings
You set the following options in the Saving Files set of the Output Settings dialog box:
File Naming Choose elements from the pop-up menus or enter text into the boxes to be combined into the default 
names for all files. Elements include document name, slice name, rollover state, trigger slice, file creation date, slice 
number, punctuation, and file extension. Some options are
 relevant only if the file contains slices or rollover states.
The text boxes let you change the order and formatting of the filename parts (for example, letting you indicate rollover 
state by an abbreviation instead of the full word).
Filename Compatibility Select one or multiple options to make the filename compatible with Windows (permits 
longer filenames), Mac OS, and UNIX.
Put Images In Folder Specifies a folder name where optimized images are saved (available only with documents 
containing multiple slices).
Copy Background Image When Saving Preserves a background image that has been specified in the Background 
preferences set.  
						

							123CREATIVE SUITE 5Save for Web & Devices
Last updated 11/16/2011
Include title and copyright information with an image
You can add title and copyright information to a web page by entering information in the File Info dialog box. Title 
information appears in the web browser’s title bar when the image is exported with an HTML file. Copyright 
information is not displayed in a browser; however, it is added to the HTML file as a comment and to the image file as 
metadata.
1Choose File > File Info.
2To enter a title that will appear in the web browser’s title bar, in the Description section of the File Info dialog box, 
enter the desired text in the Document Title text box.
3To enter copyright information, in the Description section of the File Info dialog box, enter the desired text in the 
Copyright Notice text box.
4Click OK. 
						

							124
Last updated 11/16/2011
Chapter 8: Connect to CS Live
1In Adobe® Dreamweaver®, Flash® Professional, Illustrator®, InDesign®, Photoshop®, or Premiere® Pro, do one of the 
following:
Choose Window > Extensions > Access CS Live.
Click the CS Live button in the application bar.
2If necessary, click the Sign In link in the panel, enter your Adobe ID and password, and click the Sign In button.
Note: The application you’re working in automatically signs you in if you provided your Adobe ID and password 
during the installation process.
3(Optional) To remain signed in when you restart the application, select Stay Signed In. 
For more information on using individual CS Live online services, see Using Adobe CS Live.
For more information on managing your account, see the support document Adobe account, password, and login 
FAQ (tn_16721). 
						

							125
Last updated 11/16/2011
Chapter 9: CS Review
CS Review overview
CS Review is an online service in that lets you share your design content on the web so that others can provide 
feedback. The CS
 Review panel lets you create reviews and upload content to the Acrobat.com server. The CS Review 
panel is available in the CS5 and CS5.5 versions of Photoshop, InDesign, Illustrator, and Adobe
 Premiere Pro.
Note: The Clip Notes feature is not included in After Effects CS5 or Adobe Premiere Pro CS5. However, you can use 
CS
 Review in Adobe Premiere Pro CS5 to create reviews of movies made in After Effects or Adobe Premiere Pro.
Note: Adobe Premiere Pro CS5 requires version 5.0.2 or later to use CS Review. If necessary, visit the Adobe Product 
Update page and install the update before proceeding.
When you upload content, a snapshot image of your content is uploaded to a personal or shared workspace on the 
Acrobat.com server, where participants can add comments. (If you are working from Adobe
 Premiere Pro, you 
actually upload the entire video sequence for commenting.) You and others can view the comments in the web browser 
and in the CS
 Review panel of the Creative Suite application. You can continue to add and remove snapshots of your 
design content, making the review dynamic.
Use the CS Review panel to create a review and upload content from InDesign, Illustrator, Photoshop, or Adobe Premiere Pro. 
						

							126CREATIVE SUITE 5CS Review
Last updated 11/16/2011
Snapshots of InDesign documents are uploaded to Acrobat.com.A. Part comments  B. Area comments  
CS Review is part of the CS Live subscription service. A CS Live subscription is required for creating and managing 
reviews from Creative
 Suite applications. However, review participants are not required to have a CS Live subscription 
to view and comment on reviews. Reviewers need only a free Acrobat.com account. For more information on CS
 Live 
subscriptions, see 
www.adobe.com/go/cslive.
For more information on CS Review, see www.adobe.com/go/csreview or watch Using CS Review to simplify the 
creative review process on Adobe TV. 
Start a review using the CS Review panel
When you create a review using the CS Review panel, a review file is created in a workspace in the Acrobat.com 
organizer. The review can include content exported from InDesign, Illustrator, Photoshop, and Adobe
 Premiere Pro. 
Once you create a review, you use the review window on Acrobat.com to add review participants. Participants can 
open the review in their browser and add comments.
You can divide the file into parts that offer separate areas for commenting. A part is the uploaded snapshot of an 
InDesign page or spread, an Illustrator artboard, a Photoshop image, or an Adobe
 Premiere Pro video sequence.
For Adobe Premiere Pro video sequences, comments appear at specific time stamps.
Note: The CS Review panel is available in all languages. Acrobat.com is available only in English, French, German, 
Italian, Japanese, and Spanish.
1In InDesign, Photoshop, Illustrator, or Adobe Premiere Pro, open the file or video sequence you want to review.
2Do one of the following: 
In InDesign, Photoshop, or Adobe Premiere Pro, choose File > Create New Review.
Choose Create New Review from the CS Live menu in the application bar.
AA
B