Copyright: Copyright 1998 Adobe Systems, Inc.


Quick Reference

Toolbox overview

Viewing

Selecting and moving objects

Painting

Type Tool

*Path editing

ImageReady Slicing and Optimizing

Actions palette

*Paths palette

History palette

*Channels palette

Common palette shortcuts

Layers palette

Blending Mode

Brushes palette

*Swatches palette

*Extract Image toolbox shortcuts

*Color palette

Info palette

Transform of selections, selection borders, and paths

ImageReadyColor Table palette

ImageReady Animation palette


Toolbox overview
Quick Reference

Toolbox overview

 Shift      [image] Key      * Not in ImageReady

Toolbar shortcuts

•   Alt + click tool or [image] + press shortcut key to cycle through hidden tools (except [image] [image] [image] [image] [image] [image] [image]).

•   Double-click tool, or select tool and press Enter to display Options palette.

•   Ctrl + click to display context-sensitive menu.

•   Press [image] to constrain dragging or drawing to straight line or multiples of 45°.

•   Press Caps Lock to use precise cross hair for brushes.

•   Press Enter to apply an operation of a magnetic tool, or press Esc to cancel the operation.


Viewing
Quick Reference

Viewing

 Shift      [image] Key      * Not in ImageReady

Fits image on screen	Double-click [image], or Ctrl + Ø (zero)
100% magnification	Double-click [image], or Alt + Ctrl + Ø (zero)
Zooms in or out	Ctrl + [image] or
or	Ctrl + spacebar, or Alt + spacebar
Applies zoom percentage, and keeps zoom percentage box active	+ Enter in Navigator palette*
Zooms in on specified area of an image	Ctrl + drag over preview in Navigator palette*
Scrolls image with hand tool	Spacebar + drag, or drag view area box in Navigator palette*
Scrolls up or down 1 screen	Page Up or Page Down†
Scrolls up or down 10 units	+ Page Up or Page Down†
Moves view to upper left corner or lower right corner	Home or End
*Toggles layer mask on/off as rubylith	\
†Hold down Ctrl to scroll left (Page Up) or right (Page Down).


Selecting and moving objects
Quick Reference

Selecting and moving objects

 Shift      [image] Key      * Not in ImageReady

Repositions marquee while selecting	Any marquee tool (except single column and single row) + spacebar + drag
Adds to or subtracts from selection	Any selection tool + [image] or Alt + drag
Intersects a selection	Any selection tool + [image] + Alt + drag
Constrains marquee to square or circle	+ drag
Draws marquee from center	Alt + drag
	Ctrl (except when [image] or any pen tool is selected)
*Switches from [image] to	Alt + drag
*Switches from [image] to	Alt + click
Moves copy of selection	+ Alt + drag selection
Moves selection area 1 pixel	Any selection + [image] [image] [image] [image] †
Moves selection 1 pixel	+ [image] [image] [image] [image] †
Moves layer 1 pixel when nothing selected on layer	Ctrl + [image] [image] [image] [image] †
*Increases or decreases detection width	+ [ or ]
Accepts cropping or exits cropping	+ Enter or Esc
*Makes protractor	+ Alt + drag end point
Snaps guide to ruler ticks	+ drag guide
Toggles guide orientation	Alt + drag guide
†Hold down [image] to move 10 pixels.


Painting shortcuts
Quick Reference

Painting

 Shift      [image] Key      * Not in ImageReady

	Any painting tool + Alt
Selects background color	+ Alt + click
*	+
*Deletes	+ Alt + click
Sets opacity, pressure, or exposure for painting mode	Any painting or editing tool + number keys (e.g., 0 = 100%, 1 = 10%, 4 then 5 in quick succession = 45%)
*Cycles through blending modes	+
Fills selection/layer with foreground or background color	Alt + Backspace, or Ctrl + Backspace†
*Fills from history	Alt + Ctrl + Backspace†
Displays Fill dialog box	+ Backspace
Turns Preserve Transparency option on/off	/
Connects points with a straight line	Any painting tool + [image] + click
†Hold down [image] to preserve transparency.


Type Tool dialog box
Quick Reference

Type Tool

 Shift      [image] Key      * Not in ImageReady

*Moves type in image	Drag type when Type Tool dialog box is displayed
*Aligns left, center, or right	+ [image] + Ctrl + L, C, or R
*Aligns top, center, or bottom	+ [image] + Ctrl + L, C, or R
Selects 1 character to the left/right or 1 line below/above	+
Selects characters from insertion point to mouse click point	+ click
Moves 1 character left/right, 1 line down/up, or 1 word left/right	, [image] [image], or Ctrl +
*Faux Bold, Faux Italic, Faux Underline	Ctrl + B, Ctrl + I, Ctrl + U
Decreases/increases type size of selected text 2 points/pixels	+ Ctrl + < >
Decreases/increases type size of selected text 10 points/pixels	+ Alt + Ctrl + < >
Decreases/increases leading 2 points/pixels	Alt + [image] [image] †
Decreases/increases baseline shift 2 points/pixels	+ Alt + [image] [image] †
Decreases/increases kerning/tracking 20/1000 ems	Alt +
Decreases/increases kerning/tracking 100/1000 ems	Alt + Ctrl +
*

†Hold down Ctrl to decrease/increase leading or baseline shift 10 points/pixels.


*Path editing
Quick Reference

*Path editing

 Shift      [image] Key      * Not in ImageReady

Selects multiple anchor points	+ [image] + click
Selects entire path	+ Alt + click
Duplicates a path	+ Alt + Ctrl + drag
Switches from [image] [image] [image] to	Ctrl
Switches from [image] to	Alt
Switches from [image] to	Alt
Switches from [image] to [image] when pointer is over anchor point or direction point	Alt + Ctrl
Switches from [image] to	Alt
Closes path	+ double-click
Closes path with straight-line segments	+ Alt + double-click
Deletes last point	+ Backspace
Converts path to selection	Any pen tool + Enter (on numeric keypad)
Switches from [image] to	Alt + drag
Switches from [image] to	Alt + click


ImageReady Slicing and Optimizing
Quick Reference

ImageReady Slicing and Optimizing

 Shift      [image] Key      * Not in ImageReady

Toggles browser dither for selected image pane in Optimized view	+ Ctrl + Y
Toggles through gamma previews in selected image pane	Alt + Ctrl + Y
Shows Optimized/2up/4up/Original window	Ctrl + Y
Toggles between Slice tool and Slice selection tool	Ctrl
Draws square slice	+ drag
Draws from center outward	Alt + drag
Draws square slice from center outward	Alt + [image] + drag
Moves slices with Slice creation tool still active	Spacebar + drag
Toggles snap to slices on and off	Ctrl while drawing a slice
Opens slice’s contextual menu	Right mouse button on slice


Actions palette
Quick Reference

Actions palette

 Shift      [image] Key      * Not in ImageReady

A. Turns set on/off.

B. Turns action on/off.

C. Turns command on/off; Alt + click turns current command on and all others off.

D. Turns breakout point on/off; Alt + click turns on current breakout point, and turns off all other breakout points in an action.

E. Stops action.

F. Records action.

G. Plays action; Ctrl + click plays a command.

H. Creates new set.

I. Creates new action and begins recording; Alt + click creates and begins recording new actions without confirmation.

J. Double-click changes action options; Ctrl + double-click plays entire action; Alt + click collapses/expands all components of an action.

K. Turns on all breakout points in an action.

L. Double-click records commands again(double-click set or action displays Options dialog box).

Other action shortcuts

•  F9 shows/hides palette.

•  [image] + click selects multiple items of the same kind.


*Paths palette
Quick Reference

*Paths palette

 Shift      [image] Key      * Not in ImageReady

A. Path name; [image] + Ctrl + click adds path to selection; [image] + Alt + Ctrl + click retains intersection of path; Alt + Ctrl + click removes pathfrom selection; [image] + Ctrl + H hides path.

B. Fills path with current foreground color; Alt + click sets options.

C. Strokes path with current stroke tool; Alt + click sets options.

D. Loads path as selections; Alt + click sets options.

E. Makes selection a work path; Alt + click sets options.


History palette
Quick Reference

History palette

 Shift      [image] Key      * Not in ImageReady

A. Sets source for history brush.

B. Snapshot.

C. States of the image, from first to most recent; [image] + Ctrl + Z steps forward; Alt + Ctrl + Z steps backward; *double-click on snapshot displays Rename Snapshot dialog box; Alt + click duplicates all states except the current state.

D. Drag slider moves selection between states.

E. Creates new document from current state or snapshot.

Other history shortcuts

*•  Alt + Clear History (in History menu) clears history permanently (No Undo).


*Channels palette
Quick Reference

*Channels palette

 Shift      [image] Key      * Not in ImageReady

A. Shows/hides channels; Clicking top icon shows/hides composite channel.

B. Loads channel as a selection.

C. Saves current selection as a new channel; Alt + click sets options.

D. Ctrl + click creates a new spot channel.

E.   + click color channel selects/deselects in multiple color-channel selection.

Other channel shortcuts

•  [image] + click alpha channel selects/deselects alpha channel and shows/hides as a Quick Mask.

•  Double-click alpha channel to view channel options.

•  ~ displays composite.

•  Ctrl + ~ selects composite


Common palette shortcuts
Quick Reference

Common palette shortcuts

 Shift      [image] Key      * Not in ImageReady

A. Ctrl + click thumbnail loads as selection. + Ctrl + click thumbnail adds to current selection. Alt + Ctrl + click thumbnail subtracts from current selection. + Alt + Ctrl + click intersects with current selection.

B. Creates new layer, channel, path,or snapshot; Alt + click sets options.

C. Deletes selected layer, channel, path, or state; Alt + click deletes without confirmation.

Other common palette shortcuts

•  Tab shows/hides all palettes.

•  [image] + Tab shows/hides all palettes except the toolbox.


Layers palette
Quick Reference

Layers palette

 Shift      [image] Key      * Not in ImageReady

A. Double-click adjustment layer opens Adjustment dialog box.

B. Shows/hides layer; Alt + click shows this layer only/shows all layers.

C. Click between layer and layer mask thumbnails links/unlinks them.

D. Links/unlinks layers.

E. Indicates active paint layer (brush icon if layer image is active, mask icon if layer mask is active).

F. Layer effect. (Palette icon ImageReady only)

G. Adds new layer mask; Alt + click adds inverted mask.

*H. Ctrl + click adds new adjustment layer.

I. Alt + click line between layers creates clipping group.

J. Double-click changes layer or layer mask options; [image] + click turns layer mask on/off; *Alt + click switches between layer mask view/composite image; * [image] + Alt + click turns rubylith on/off.

*K. Type layer; double-click edits type layer.

L. Layer effect icon; *double-click edits the last-edited layer effect; *Alt + double-click clears the most recent layer effect.

*M. Layer effect warning icon; occurs when an ImageReady file with Gradient/Pattern fill applied is brought into Photoshop.

Layers menu shortcuts

•  Alt + Merge Down copies current layer to layer below.

•  Alt + Merge Visible copies all visible layers to active layer.

•  Alt + Merge Linked copies visible linked layers to active layer.

Other layer shortcuts

•  F7 shows/hides palette.

•  Alt + [ ] descends/ascends through visible layers.

•  Alt + Ctrl + [ ] moves active layer down/up.

•  [image] + Alt + [ ] activates bottom/top layer.

*•  Alt + double-click on [image] removes layer effect.

*•  Drag effect in image when Layer Effects dialog box is displayed moves effect in image.


Blending Mode
Quick Reference

Blending Mode

 Shift      [image] Key      * Not in ImageReady

All the shortcuts are [image] + Alt +the letter.

Other Blending mode palette shortcuts

•  [image] + [image] + Alt + J to desaturate.

•  [image] + [image] + Alt + A to saturate.

•  [image] [image] + [image] + Alt + W to dodge/burn shadows.

•  [image] [image] + [image] + Alt + V to dodge/burn midtones.

•  [image] [image] + [image] + Alt + Z to dodge/burn highlights.

•  [image] + Alt + L to threshold (Bitmap mode only)

•  [image] + Alt + R to clear (Paintbucket and line tools only)

•  [image] + Alt + Q to paint behind (Paintbrush tool only)


Brushes palette
Quick Reference

Brushes palette

 Shift      [image] Key      * Not in ImageReady

•  F5 shows/hides palette.

*• Click in empty area of palette createsnew brush.

*• Ctrl + click brush deletes brush.

•  [ or ] cycles through brushes backward or forward

•  [image] + [ selects first brush.

•  [image] + ] selects last brush.

*• Double-click brush edits current settings.


*Swatches palette
Quick Reference

*Swatches palette

 Shift      [image] Key      * Not in ImageReady

•  Click empty swatch creates new swatch.

•  [image] + Alt + click inserts new swatch.

•  Ctrl + click swatch deletes swatch.

•  Alt + click swatch selects background color.

•  [image] + click swatch replaces color.


*Extract Image toolbox shortcuts
Quick Reference

*Extract Image toolbox shortcuts

 Shift      [image] Key      * Not in ImageReady

A. Edge highlighter tool (B)

B. Fill tool (K)

C. Eraser tool (E)

D. Eyedropper tool (I)

E. Zoom tool (Z)

F. Hand tool (H)


*Color palette
Quick Reference

*Color palette

 Shift      [image] Key      * Not in ImageReady

•  Click empty swatch creates new swatch.

•  [image] + Alt + click inserts new swatch.

•  Ctrl + click swatch deletes swatch.

•  Alt + click swatch selects background color.

•  [image] + click swatch replaces color.


Info palette
Quick Reference

Info palette

 Shift      [image] Key      * Not in ImageReady

•  F8 shows/hides palette.

*•  Click eyedropper icon [image] to change color readout modes.

*•  Click cross-hair icon [image] to change measurement units.


Transform of selections, selection borders, and paths
Quick Reference

Transform of selections, selection borders, and paths

 Shift      [image] Key      * Not in ImageReady

•  Alt transforms from center or reflects.

•  [image] constrains.

•  Ctrl distorts.

•  Enter applies.

•  Ctrl + [image] or Esc cancels.

•  Alt + Ctrl + T free transforms with duplicate data.

•  [image] + Alt + Ctrl + T transforms again with duplicate data.


ImageReadyColor Table palette
Quick Reference

ImageReadyColor Table palette

 Shift      [image] Key      * Not in ImageReady

•  Alt + click on swatch chooses swatch asbackground color.

•  [image] + click on a second color selects multiple contiguous colors. Last color clicked becomes foreground color

•  Ctrl + click on multiple colors selects multiple discontiguous colors. Last color clicked becomes foreground color.

•  Alt + click on new color button or drag color proxy from Tool palette onto new color button adds the current background color.

•  Ctrl + click on new color button or drag color proxy from Tool palette onto new color button inserts foreground color and creates a custom palette.


ImageReady Animation palette
Quick Reference

ImageReady Animation palette

 Shift      [image] Key      * Not in ImageReady

Frame shortcuts

•  [image] + click on second frame selects/deselects multiple frames.

•  Command + click on multiple frames selects/deselects multiple discontiguous frames.

•  [image] + paste frames inserts pasted frames after the current image.

•  Alt + paste frames duplicates the layers used in the frame in the layers palette, and includes them in the frame.

•  [image] + Alt + paste frames replaces thedestination frame with the copied frames.

•  [image] + Ctrl + [image] - drag moves the content of selected layer concurrently in all selected animation frames.


Getting Started

Welcome to Adobe(R) Photoshop(R) 5.5, the world-standard image-editing solution with improved support for the Web. Photoshop 5.5 delivers powerful, industry-standard image-editing tools for professional designers who want to produce sophisticated graphics for print and the Web. The combination of Adobe Photoshop and Adobe ImageReady(TM) provides a comprehensive environment for designing both print and Web graphics.

See also:

Getting to know Photoshop 5.5

The Adobe Photoshop 5.5 package contents

Installing Adobe Photoshop and ImageReady

Starting Adobe Photoshop and ImageReady

Registering Adobe Photoshop and ImageReady

Learning Adobe Photoshop and ImageReady

Using Adobe Online


Getting to know Photoshop 5.5
Getting Started

Getting to know Photoshop 5.5

Photoshop’s improved Web support, in combination with ImageReady’s cutting-edge Web features, lets you create, refine, and optimize Web graphics with ease, or produce Web animations, rollover effects, and other dynamic Web graphics. Selective refinements to the core set of image-editing tools help you mask complex images more easily and expand your creative power with new painting tools and contact sheets.

Included with Photoshop 5.5 is ImageReady 2.0. ImageReady includes many of the basic color correction, painting, and selection tools familiar to users of Photoshop, plus a powerful set of Web tools for optimizing and previewing images, batch processing of images with droplets in the Actions palette, and creating GIF animations.

See also:

What’s new in Photoshop 5.5

What’s new in ImageReady 2.0


What's new in Photoshop 5.5
Getting to know Photoshop 5.5

What’s new in Photoshop 5.5

This version of Photoshop offers the following new and enhanced features:

Save for Web dialog box Allows two-up and four-up previewing of images in different Web graphics file formats and with different file attributes. You can also save and apply named optimization settings and resize the image.

New Web features Optimize images for the Web in GIF, JPEG, and PNG file format, create background transparency and background matting, and preview and control dithering.

Magic eraser tool Erases solid-colored areas to transparency with a single click.

Background eraser tool Erases areas to transparency by dragging. This tool is useful for assigning transparency to the background around hard-edged objects.

Extract command Extracts foreground objects from their background. As a sophisticated masking feature, the Extract command is designed to isolate objects with wispy or intricate edges.

Art history brush tool Paints with stylized strokes that approximate the look of different paint styles.

Automated export of multiple images Three new or enhanced commands automate the export of multiple images: Contact Sheet II places a series of images as thumbnail previews on a single page; Picture Package places multiple copies of a source image on a single page, similar to the photo packages traditionally sold by portrait studios; Web Photo Gallery exports a collection of images as a Web site, automatically creating the required HTML files.

Auto Contrast command Lets you adjust the highlights and shadows of images automatically.

Contiguous option Restricts the action of the magic wand or paintbucket tool to pixels immediately adjacent to the area clicked. Deselecting this option allows all eligible pixels in the image to be selected or filled.

New Type options in the Type tool dialog box  Let you apply simulated type styles, choose from various anti-aliasing methods, and better control the placement of low-resolution type.

New Indexed color options under the Indexed Color command  Let you control dithering, the color table, and assign background transparency. In addition, you can use the color table to assign transparency to a specified color in the image.

GIF and PNG transparency support Provide direct support for transparent areas in indexed-color images. In addition, GIF directly supports transparency in RGB images.

Direct GIF support for RGB images Lets you save RGB images directly in GIF format using the Save a Copy command now.

Expanded TIFF support Opens (in Photoshop) TIFF files that have been saved using the Deflate and JPEG compression methods.

New JPEG Save options Let you control the appearance of originally transparent areas, compress file sizes further, and preview the size and download time of the file when saving as JPEG.

PDF color support for CMYK images Lets you embed ICC profiles when saving a CMYK image in PDF format.


What's new in ImageReady 2.0
Getting to know Photoshop 5.5

What’s new in ImageReady 2.0

ImageReady 2.0 provides improved optimization and animation, as well as new advanced Web layout features, and creative tools to create special Web design effects such as slicing and rollovers.

Improved optimization ImageReady allows two-up and four-up viewing of images, and automatically generates smaller optimized versions of the current image. You can also save and apply named optimization settings.

Slicing Sophisticated slicing capabilities enable you to divide a document into sections, making it easier to arrange multiple elements (such as buttons, banners, and graphics), and selectively optimize sections of a document.

Rollovers You can create rollover effects in which different states of an image are activated when a user rolls over or clicks a slice, for example. You can display images or animations as rollover states.

Improved animation  It is easier to select frames (including multiple contiguous or discontiguous frames), to specify delay or duration, and to optimize animation files. You can also import QuickTime-compatible movie formats, including MOV, AVI, and Flic to view and edit.

Layer Effects and Styles ImageReady includes layer effects—automated effects that you can apply to layers. ImageReady includes pattern and gradient fill effects, as well as all the layer effects available in Photoshop—drop shadows, glows, bevelling, embossing, and solid color fill. ImageReady also includes Styles—sets of layer effects that you can save and reapply.

Shape tools New shape tools, including the rectangle, rounded rectangle, and ellipse tools, let you draw basic shapes on an image. Like the line tool, the shape tools create bitmap shapes (not vector objects).

Type enhancements  ImageReady editable type is now fully compatible with Photoshop type. New options in the Type tool dialog box let you apply simulated type styles, choose from various anti-aliasing methods, and better control the placement of low-resolution type. You can also add type directly on the type layer in an image (rather than in the Type Tool dialog box).


The Adobe Photoshop 5.5 package contents
Getting Started

The Adobe Photoshop 5.5 package contents

The Adobe Photoshop 5.5 software package includes both Photoshop and ImageReady software and documentation:

•   The Adobe Photoshop 5.5 Application CD.

•   The Adobe Photoshop 5.0 Tutorial CD.

•   Adobe Photoshop 5.0 User Guide (not included with upgrades from Photoshop 5.0).

•   Adobe Photoshop 5.5 User Guide Supplement.

•   Adobe Photoshop/ImageReady Quick Reference Card.

•   Registration card.

The Adobe Photoshop 5.5 Application CD contains everything you need to install and run both Photoshop and ImageReady—the common Photoshop/ImageReady installer, PostScript(R) printer driver installers, and tour and tutorial files. For a complete listing of all CD contents, see the ReadMe First! file on the CD.


Installing Adobe Photoshop and ImageReady
Getting Started

Installing Adobe Photoshop and ImageReady

Photoshop and ImageReady use the same installer. You must install the applications from the Adobe Photoshop 5.5 Application CD onto your hard disk; you cannot run the program from the CD. Follow the on-screen instructions. For more detailed information about installation, see the InstallReadMe file that is included on the CD.

Make sure your serial number is accessible before installing the application; you can find the serial number on the registration card or CD sleeve.


Starting Adobe Photoshop and ImageReady
Getting Started

Starting Adobe Photoshop and ImageReady

You start Photoshop and ImageReady just as you would any software application.

To start Adobe Photoshop or ImageReady in Microsoft(R) Windows(R):

Choose Start > Programs > Adobe > Photoshop 5.5 > Adobe ImageReady 2.0 or Adobe Photoshop 5.5.

To start Adobe Photoshop or ImageReady in Mac OS:

Open the Adobe Photoshop 5.5 folder, and double-click the Adobe Photoshop 5.5 or ImageReady 2.0 program icon. (If you installed the program in a folder other than Adobe Photoshop, open that folder.)

The Adobe Photoshop program window or the Adobe ImageReady window appears. You can now open a document or create a new one and start working.


Registering Adobe Photoshop and ImageReady
Getting Started

Registering Adobe Photoshop and ImageReady

Registering your software helps Adobe offer technical support and inform you about new software developments. Please register your copy by filling out and returning the warranty registration card included with your software package.


Learning Adobe Photoshop and ImageReady
Getting Started

Learning Adobe Photoshop and ImageReady

Adobe provides a variety of options for you to learn Photoshop and ImageReady, including printed guides and tutorials, online Help, tool tips, and easy access to the Adobe home page on the World Wide Web, where you can find service, products, and continually updated tips for using Photoshop and ImageReady.

Adobe Acrobat(R) Reader software, included on the Photoshop CD, lets you view PDF files. Acrobat Reader or Adobe Acrobat is required to use the tutorials and view many technical documents included on this CD.

See also:

Using the reference guides

Using the tours, tutorials, and movies

Using online Help

Other learning resources


Using the reference guides
Learning Adobe Photoshop and ImageReady

Using the reference guides

Three printed documents are included with Photoshop 5.5.

Adobe Photoshop 5.5 User Guide Supplement Contains an overview of the functionality that Photoshop and ImageReady share and gives detailed information on the features new to Photoshop 5.5 and the advanced Web features available in ImageReady 2.0.

This cross-platform user guide provides instructions for using Photoshop and ImageReady on both the Windows and Mac OS platforms. The text notes any differences in procedures and commands between platforms.

Complete documentation of all ImageReady features and all Photoshop features is also available in the online Help systems of the respective applications.

This user guide assumes you have a working knowledge of your computer and its operating conventions, including how to use a mouse and standard menus and commands. It also assumes you know how to open, save, and close files. For help with any of these techniques, please see your Windows or Mac OS documentation.

Adobe Photoshop 5.5 with Adobe ImageReady 2.0 Quick Reference Card Contains basic information about the Adobe Photoshop and ImageReady tools and palettes, and shortcuts for using them.

Adobe Photoshop 5.0 User Guide  Contains complete information about using Photoshop 5.0. This user guide covers all features that are not new to Photoshop 5.5. This same information is also available in Photoshop 5.5 online Help.


Using the tours, tutorials, and movies
Learning Adobe Photoshop and ImageReady

Using the tours, tutorials, and movies

Several tutorials and movies introducing you to Photoshop and ImageReady are included with Photoshop 5.5.

Chapter 1 of the Adobe Photoshop 5.5 User Guide Supplement is an instructional Quick Tour that provides an overview of features new to Photoshop 5.5— this tour focuses primarily on the Photoshop and ImageReady Web features. The graphics and document files used in the tour are included on the CD so you can follow along.

Four Photoshop 5.0 tutorials in PDF format are included. These are excerpted from the Adobe Photoshop 5.0 Classroom in a Book(R), which is sold separately. These step-by-step instructions help you learn how to create typical documents. All files used in the tutorials are included on the CD. (These tutorials cover features that have not changed between Photoshop 5.0 and Photoshop 5.5.)

Three Photoshop 5.0 movies are also included. The Photoshop 5.0 Quick Tour movie gives a basic overview of Adobe Photoshop features. The New Features movie introduces and demonstrates new features in Adobe Photoshop 5.0, including re-editable type, layer effects, the history palette, and new transformation commands. The Layers movie teaches you how to use layers.


Using online Help
Learning Adobe Photoshop and ImageReady

Using online Help

Adobe Photoshop and Adobe ImageReady each include complete documentation in online Help. The Photoshop help system includes the Photoshop 5.0 online Help system (all of the information in the Adobe Photoshop 5.0 User Guide) plus the documentation of features new to Photoshop 5.5 included in the Adobe Photoshop 5.5 User Guide Supplement. The ImageReady help system includes complete documentation of all ImageReady features. In addition, online Help for both Photoshop and ImageReady includes keyboard shortcuts, full color illustrations, and more detailed information about some procedures. The applications also include tool tips, which help you identify a tool or control in the work area.

See also:

To identify a tool or control

To display tool tips (Photoshop)


To identify a tool or control
Using online Help

To identify a tool or control:

Position the pointer over a tool or control and pause. A tool tip appears showing the name and keyboard shortcut (if any) for the item.

In Photoshop, if tool tips don’t appear, the preference for displaying them may be turned off.

See also:

To display tool tips (Photoshop)


To display tool tips (Photoshop)
Using online Help

To display tool tips (Photoshop):

1  Choose File > Preferences > General.

2  Select Show Tool Tips, and click OK.

Note: Tool tips are not available in most dialog boxes.

See also:

To identify a tool or control


Other learning resources
Learning Adobe Photoshop and ImageReady

Other learning resources

Other learning resources are available but are not included with your application.

See also:

Classroom in a Book

Official Adobe Print Publishing Guide

Official Adobe Electronic Publishing Guide

The Adobe Certification program


Classroom in a Book
Other learning resources

Classroom in a Book

Is the official training series for Adobe graphics and publishing software. This book is developed by experts at Adobe and published by Adobe Press. The Adobe Photoshop Classroom in a Book includes lessons about using both Photoshop and ImageReady. For information on purchasing Adobe Photoshop Classroom in a Book, visit the Adobe Web site at www.adobe.com, or contact your local book distributor.

See also:

Official Adobe Print Publishing Guide

Official Adobe Electronic Publishing Guide

The Adobe Certification program


Official Adobe Print Publishing Guide
Other learning resources

Official Adobe Print Publishing Guide

Provides in-depth information on successful print production, including topics such as color management, commercial printing, constructing a publication, imaging and proofing, and project management guidelines. For information on purchasing the Official Adobe Print Publishing Guide, visit the Adobe Web site at www.adobe.com.

See also:

Classroom in a Book

Official Adobe Electronic Publishing Guide

The Adobe Certification program


Official Adobe Electronic Publishing Guide
Other learning resources

Official Adobe Electronic Publishing Guide

Tackles the fundamental issues essential to ensuring quality online publications in HTML and PDF. Using simple, expertly illustrated explanations, design and publishing professionals tell you how to design electronic publications for maximum speed, legibility, and effectiveness. For information on purchasing the Official Adobe Electronic Publishing Guide, visit the Adobe Web site at www.adobe.com.

See also:

Classroom in a Book

Official Adobe Print Publishing Guide

The Adobe Certification program


The Adobe Certification program
Other learning resources

The Adobe Certification program

Offers users, instructors, and training centers the opportunity to demonstrate their product proficiency and promote their software skills as Adobe Certified Experts, Adobe Certified Instructors, or Adobe Authorized Learning Providers. Certification is available for several different geographical regions. Visit the Partnering with Adobe Web site at www.partners.adobe.com to learn how you can become certified.

See also:

Classroom in a Book

Official Adobe Print Publishing Guide

Official Adobe Electronic Publishing Guide


Using Adobe Online
Getting Started

Using Adobe Online

If you have an Internet connection and a Web browser installed on your system, you can use the Adobe Online feature to access the Adobe Systems home page on the World Wide Web.

Adobe Online provides access to up-to-the-minute information about services, products, and tips for using Adobe products. When you set up Adobe Online to connect to your Web browser, Adobe can either notify you whenever new information is available or automatically download that information to your hard disk. If you choose not to use the Adobe automatic download feature, you can still view and download new files whenever they are available from within the Adobe Online window.

See also:

To access the Adobe home page for your region

To use Adobe Online


To access the Adobe home page for your region
Using Adobe Online

To access the Adobe home page for your region:

1  From within your Web browser, open the Adobe U.S. home page at www.adobe.com.

2  From the Adobe Sites menu on the Web page, choose your geographical region. The Adobe home page is customized for a number of different geographical regions.

See also:

To use Adobe Online


To use Adobe Online
Using Adobe Online

To use Adobe Online:

1  Choose File > Adobe Online, or click the icon at the top of the toolbox.

Note: You must have an Internet connection and an Internet browser installed. Adobe Online will launch your browser using your default Internet configuration.

2  Do any of the following:

•   Click Update to make sure you have the latest version of the Adobe Online window and its buttons. It is important to update Adobe Online periodically so that the current options are available for you to choose from.

Note: You must click the Update button the first time you use Adobe Online.

•   Click Configure to specify update options, proxy settings, or to select a different Web browser (Mac OS only).

•   Click any text button in the Adobe Online window to open the Web page to which the button is linked.

•   Click Close to return to Photoshop or ImageReady.

See also:

To access the Adobe home page for your region


Using the New Photoshop 5.5 Features

Adobe Photoshop 5.5 offers a number of powerful new features that help you select, paint, export, and assign transparency to your images with increased accuracy and versatility. This chapter describes the new features that pertain to using Photoshop as a stand-alone application.

See also:

Preparing images for the Web

Erasing areas of a layer to transparency

Extracting objects from their background

Using the art history brush tool

Creating multiple-image layouts

Adjusting contrast automatically

Using enhanced tools and commands


Preparing images for the Web
Using the New Photoshop 5.5 Features

Preparing images for the Web

This version of Photoshop offers a number of new features that greatly enhance your ability to process images for the Web. By using Photoshop in conjunction with ImageReady, you can produce sophisticated graphics quickly and effectively.


Erasing areas of a layer to transparency
Using the New Photoshop 5.5 Features

Erasing areas of a layer to transparency

Two new tools—the magic eraser and the background eraser—make it easier for you to erase sections of a layer to transparency. This can be helpful, for example, when you want to delete the background area around a hard-edged object.

See also:

Using the magic eraser tool

Using the background eraser tool


Using the magic eraser tool
Erasing areas of a layer to transparency

Using the magic eraser tool

When you click in a layer with the magic eraser tool, the tool automatically erases all similar pixels to transparency. You can choose to erase contiguous pixels only or all similar pixels on the current layer.

To use the magic eraser tool:

1  Double-click the magic eraser tool ( [image]) to select the tool and display its Options palette. The magic eraser tool is grouped with the eraser tool in the toolbox.

2  Enter a tolerance value.

The tolerance defines the range of colors that can be erased. A low tolerance erases pixels within a range of color values very similar to the pixel you click. A high tolerance erases pixels within a broader range.

3  Specify an opacity to define the strength of the erasure. An opacity of 100% erases pixels to complete transparency. A lower opacity erases pixels to partial transparency.

4  Select Use All Layers to sample the erased color using combined data from all visible layers.

5  Select Anti-aliased to smooth the edges of the area you erase.

6  Select Contiguous to erase only pixels contiguous to the one you click, or leave unselected to erase all similar pixels in the image.

7  Click in the part of the layer you want to erase. All similar pixels within the specified tolerance range are erased to transparency.


Using the background eraser tool
Erasing areas of a layer to transparency

Using the background eraser tool

The background eraser tool lets you erase pixels on a layer to transparency as you drag. By specifying different sampling and tolerance options, you can control the range of the transparency and the sharpness of its boundaries.

For additional information, see “Using the Options palette for painting and editing tools” and “Choosing the foreground and background colors” in Chapter 9 of the Photoshop 5.0 printed guide or in “Painting” of Photoshop 5.0 online Help.

To use the background eraser tool:

1  In the Layers palette, select the layer containing the areas you want to erase.

2  Double-click the background eraser tool ( [image]) to select the tool and display its Options palette. The background eraser tool is grouped with the eraser tool in the toolbox.

3  Choose an eraser from the Options palette menu:

•   Discontiguous to erase the sampled color wherever it occurs in the layer.

•   Contiguous to erase areas that contain the sampled color and are connected to one another.

•   Find Edges to erase connected areas containing the sampled color, while better preserving the sharpness of object edges.

4  For Tolerance, enter a value or drag the slider. A low tolerance limits erasure to areas that are very similar to the sampled color. A high tolerance erases a broader range of colors.

5  For Sampling, choose one of the following:

•   Continuous to sample colors continuously as you drag. Use this option to erase adjacent areas that are different in color.

•   Once to erase only areas containing the color that you first click. Use this option to erase a solid-colored area.

•   Background Swatch to erase only areas containing the current background color.

6  Select Protect Foreground Color to prevent the erasure of areas that match the foreground color in the toolbox.

7  If you are using a pressure-sensitive tablet, set stylus options.

8  Select a brush in the Brushes palette.

9  Drag in the image to erase areas of the active layer to transparency.

The background eraser tool pointer appears as a brush shape with a cross-hair indicating the tool’s hot spot.

To switch between the eraser, magic eraser, and background eraser tools, press Shift+E.


Extracting objects from their background
Using the New Photoshop 5.5 Features

Extracting objects from their background

The Extract command provides a sophisticated way to isolate a foreground object from its background. Even objects with wispy, intricate, or undefinable edges may now be clipped from their backgrounds with a minimum of manual work. You must be working in a layer to use the Extract command.

To extract an object, you first use the Extract dialog box to highlight the edges of the object. Then you define the object’s interior and preview the extraction. You can refine and preview the extraction as many times as you wish. When you are ready to perform the extraction, Photoshop erases the background to transparency, leaving just the extracted object.

 For information on making history snapshots, see “Making a snapshot of the image” in Chapter 8 of the Photoshop 5.0 printed guide or in “Editing and Retouching” of Photoshop 5.0 online Help.

See also:

To extract an object from its background

To set Extract tool options


To extract an object from its background
Extracting objects from their background

To extract an object from its background:

1  In the Layers palette, select the layer containing the object you want to extract. To avoid losing the original image information, duplicate the layer or make a snapshot of the original image state.

2  Choose Image > Extract.

The Extract dialog box appears. You specify which part of the image to extract by using the tools and previews in this dialog box. If needed, you can resize the dialog box by dragging its bottom right corner.

3  Select the edge highlighter tool ( [image]) in the dialog box, and set tool options as explained in the next procedure. Drag in the preview to highlight the edge of the object you wish to extract.

Use the following techniques to enhance the effectiveness of your highlight:

•   Draw the highlight so that it slightly overlaps both the foreground and background regions around the edge. For fuzzy edges, such as hair or fur, cover areas where the foreground blends into the background.

•   To base the highlight on a selection saved in an alpha channel, choose the alpha channel from the Load Highlight menu. The alpha channel should be based on a selection of the edge boundary, rather than the object itself.

•   Use a smaller brush to highlight sharper edges more precisely. Use a larger brush to highlight wispy, intricate edges such as hair or trees, loosely covering the entire “question” area of edges.

•   If the object has a well-defined interior, make sure that the highlight forms a complete enclosure. You do not need to highlight areas where the object touches the image boundaries.

•   To erase the highlight, select the eraser tool ( [image]) in the dialog box, and set tool options. Then drag over the highlight in the preview.

•   To magnify the preview, select the zoom tool ( [image]) in the dialog box, and click in the preview. To zoom out, hold down Alt (Windows) or Option (Mac OS), and click with the zoom tool in the preview.

•   To view a different part of the preview, select the hand tool in the dialog box and drag in the preview.

4  If the object has a well-defined interior, select the fill tool ( [image]) in the dialog box, and set tool options. Then click inside the object to fill its interior, and skip to step 6.

Selected area highlighted and filled

5  If the object is especially intricate or lacks a clear interior, make sure that the highlight covers the entire object, and select Force Foreground. Select the eyedropper tool ( [image]) in the dialog box, and then click inside the object to sample the color to be treated as the foreground. This technique works best with objects that contain tones of a single color.

6  Click Preview to preview the extracted object.

Use the following techniques to view and refine the extraction:

•   Use the View menu to switch between previews of the original and extracted images.

•   Use the Show menu to preview the extracted object against a colored matte background or as a grayscale mask. To display a transparent background, choose None.

•   Select the Show Highlight or Show Fill option to display the object’s extraction boundaries.

•   Use the edge highlighter, eraser, and fill tools to edit the extraction boundaries. Clicking a filled area with the fill tool removes the fill. If needed, you can change the colors of the highlight and fill to view them more clearly.

•   Drag the Smooth slider or enter a value to help remove stray artifacts in the extraction.

When you are finished editing, click Preview again to view the edited extraction. You can edit and preview the extraction repeatedly until you achieve the desired result.

7  Click OK to apply the final extraction.

All pixels on the layer outside the extracted object are erased to transparency.

8  If needed, use the background eraser and history brush tools in the toolbox to clean up any stray edges in the image.

See also:

To set Extract tool options


To set Extract tool options
Extracting objects from their background

To set Extract tool options:

Specify the following settings:

•   For Brush Size, enter a value or drag the slider to specify the width of the highlighter or eraser tool.

•   For Highlight, choose a preset color option, or choose Other to specify a custom color for the area covered by the highlighter tool.

•   For Fill, choose a preset color option, or choose Other to specify a custom color for the area covered by the fill tool.

See also:

To extract an object from its background


Using the art history brush tool
Using the New Photoshop 5.5 Features

Using the art history brush tool

The art history brush tool lets you paint with stylized strokes, using the source data from a specified history state or snapshot. By experimenting with different paint style, fidelity, size, and tolerance options, you can simulate the texture of painting with different colors and artistic styles.

For a variety of visual effects, experiment with applying filters or filling an image with a solid color before painting with the art history brush tool. For example, set the source history state to the original image, fill the image with white, and use the art history brush tool to paint. You can also experiment with custom, non-circular brushes in the Brushes palette.

A. Original B. White fill C. Large brush D. Small brush

To use the art history brush tool:

1  In the History palette, click the left column of the state or snapshot to use as the source for the art history brush tool. A brush icon appears next to the source history state.

2  Select and double-click the art history brush tool ( [image]) to display its Options palette. The art history brush tool is grouped with the history brush tool in the toolbox.

3  Specify blending mode and opacity options.

For information on setting tool options, see “Using the Options palette for painting and editing tools” in Chapter 9 of the Photoshop 5.0 printed guide or in “Painting” of Photoshop 5.0 online Help.

4  Choose an option from the paint style menu, located below the blending mode menu in the Options palette. This option controls the shape of the paint stroke.

5  For Fidelity, enter a value or drag the slider to control how much the paint color deviates from the color in the source state or snapshot. The lower the fidelity, the more the color will vary from the source.

6  For Area, enter a value to specify the area covered by the paint strokes. The greater the size, the larger the covered area and more numerous the strokes.

7  For Tolerance, enter a value or drag the slider to limit the regions where paint strokes may be applied. A low tolerance lets you paint unlimited strokes anywhere in the image. A high tolerance limits paint strokes to areas that differ considerably from the color in the source state or snapshot.

8  If you are using a pressure-sensitive tablet, select any of the following stylus options:

•   Size to have increased pressure result in a larger area covered by the paint. (Size refers to the area of coverage, not the brush size.)

•   Opacity to have increased pressure result in more opaque paint.

9  Select a brush in the Brushes palette. (The brush corresponds to the size of individual paint strokes, not the total area covered by the paint.)

10  Drag in the image to paint.

To switch between the history brush and art history brush tools, press Shift+Y.


Creating multiple-image layouts
Using the New Photoshop 5.5 Features

Creating multiple-image layouts

Photoshop offers new and enhanced features for exporting multiple images automatically as contact sheets, picture packages, and navigable HTML pages.

See also:

Creating contact sheets

Creating picture packages

Creating Web image galleries


Creating contact sheets
Creating multiple-image layouts

Creating contact sheets

By displaying a series of thumbnail previews on a single page, contact sheets let you easily preview and catalog groups of images. You can automatically create and place thumbnails on a page using the Contact Sheet II command.

To create a contact sheet:

1  Choose File > Automate > Contact Sheet II.

2  Click Choose to specify the folder containing the images you want to use. Select Include All Subdirectories to include images inside any subfolders of the chosen folder.

3  Under Document, specify the dimensions, resolution, and color mode for the contact sheet, using the menus to specify measurement units.

4  Under Thumbnails, specify layout options for the thumbnail previews:

•   For Place, choose whether to arrange thumbnails horizontally (from left to right, then top to bottom) or vertically (from top to bottom, then left to right).

•   Enter the number of columns and rows that you want per contact sheet. The maximum dimensions for each thumbnail are displayed to the right, along with a visual preview of the specified layout.

•   Select Use Filename As Caption to label the thumbnails using their source image filenames. Use the menu to specify a caption font.

5  Click OK to create the contact sheet.


Creating picture packages
Creating multiple-image layouts

Creating picture packages

With the Picture Package command, you can place multiple copies of a source image on a single page, similar to the photo packages traditionally sold by portrait studios. You can choose from a variety of size and placement options to customize your package layout.

To create a photo package from a single image:

1  Choose File > Automate > Picture Package.

2  Specify the source image you want to use:

•   Click Choose to specify a saved image file as the source.

•   Select Use Frontmost Document to use the image currently active in Photoshop as the source.

3  For Layout, choose a preset layout option. Layout dimensions are measured in inches, and a preview of the chosen layout appears in the dialog box.

4  Enter a resolution value for the package layout, using the menu to specify resolution units.

5  Choose a color mode appropriate to the package layout.

6  Click OK to create the package layout.


Creating Web image galleries
Creating multiple-image layouts

Creating Web image galleries

The Web Photo Gallery command lets you export your images as a gallery Web site, complete with a thumbnails index page, individual JPEG image pages, and navigable links. Photoshop automatically processes the images and HTML code to simplify the task of publishing your images online.

To export images as a gallery Web site:

1  Choose File > Automate > Web Photo Gallery.

2  For Source, click Choose to specify the folder containing the images you want to export. Select Include All Subdirectories to include images inside any subfolders of the chosen folder.

3  For Destination, click Choose to specify the destination folder for the exported HTML files.

4  Under Site, enter the information that you want to appear on the gallery pages:

•   For Site Name, enter the title of the Web site.

•   For Photographer, enter the authorship credit.

•   For Date, enter the date you want to appear on the Web site. By default, Photoshop uses the current date (the date of the Web site creation).

5  Specify Thumbnails options:

•   For Size, choose the size of thumbnail preview you want to use for the contents page.

•   Select Use Filename As Caption to label the images using their original filenames.

6  If desired, select Resize Gallery Images to have Photoshop resize the source images for placement on individual image pages. Then specify resizing options:

•   For Size, choose an option from the menu or enter a resize percentage.

•   For Quality, choose an option from the menu, enter a value between 0 and 12, or drag the slider. A higher value results in better image quality but larger file size.

7  Click OK to create the HTML gallery pages.

Photoshop places the following HTML and JPEG files in your destination folder:

•   A gallery homepage, index.htm. Open this file in any Web browser to preview your photo gallery.

•   JPEG images, inside an images subfolder.

•   HTML page files, inside a pages subfolder.

•   JPEG thumbnail images, inside a thumbnails subfolder.


Adjusting contrast automatically
Using the New Photoshop 5.5 Features

Adjusting contrast automatically

The new Auto Contrast command lets you adjust the highlights and shadows of an image automatically. The command maps the darkest and lightest pixels in the image to black and white, causing highlights to appear lighter and shadows darker.

When adjusting the contrast, Photoshop ignores the first 0.5% range of both the white and black pixels in the image. This clipping of color values ensures that white and black values are representative areas of the image’s content, rather than extreme pixel values.

To adjust contrast automatically:

Choose Image > Adjust > Auto Contrast.


Using enhanced tools and commands
Using the New Photoshop 5.5 Features

Using enhanced tools and commands

A number of Photoshop tools and commands offer new or enhanced options.

See also:

Using the Contiguous option

Using type

Converting to indexed color

Using the color table

Saving GIF and PNG images with transparency

Saving RGB images in GIF format

Opening TIFF files

Saving in JPEG format

Saving in PDF format


Using the Contiguous option
Using enhanced tools and commands

Using the Contiguous option

The magic wand and paint bucket tools have a new Contiguous option in their Options palettes. By default, this option is selected, restricting the selection or fill to areas connected to the area clicked. Deselecting the Contiguous option allows all eligible areas in the image to be selected or filled.


Using type
Using enhanced tools and commands

Using type

Several new options in the Type Tool dialog box let you apply simulated type styles, choose from various anti-aliasing methods, and better control the placement of low-resolution type. For more information on these options, see Using type.


Converting to indexed color
Using enhanced tools and commands

Converting to indexed color

The Indexed Color dialog box provides new options for controlling dithering, the color table, and the appearance of transparent areas in the converted image. In addition, you can specify a matte color to help blend the partially transparent edges of the image with a specified background color.

See also:

Palette

Forced

Transparency

Matte

Dither

Dither amount

Preserve Exact Colors


Palette
Converting to indexed color

Palette

Choose from an expanded list of palette options. The Perceptual option creates a custom palette by giving priority to colors for which the human eye has greater sensitivity. The Selective option creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors.

See also:

Forced

Transparency

Matte

Dither

Dither amount

Preserve Exact Colors


Forced
Converting to indexed color

Forced

Choose an option to force the inclusion of certain colors in the color table. The Black and White option adds a pure black and a pure white to the color table; the Primaries option adds red, green, blue, cyan, magenta, yellow, black, and white; the Web option adds the 216 web-safe colors; and the Custom option lets you define custom colors to add.

See also:

Palette

Transparency

Matte

Dither

Dither amount

Preserve Exact Colors


Transparency
Converting to indexed color

Transparency

Select to preserve transparent areas of the image during conversion. Deselecting Transparency fills transparent areas with the matte color, or with white if no matte color is chosen.

See also:

Palette

Forced

Matte

Dither

Dither amount

Preserve Exact Colors


Matte
Converting to indexed color

Matte

Choose an option to fill partially transparent areas with a matte color. If Transparency is selected, the matte is applied to partially transparent edge areas to help blend the edges with the background. If Transparency is deselected, the matte is applied to both partially and fully transparent areas. Choosing None for the matte creates hard-edged transparency if Transparency is selected; otherwise, all partially and fully transparent areas are filled with 100% white.

See also:

Palette

Forced

Transparency

Dither

Dither amount

Preserve Exact Colors


Dither
Converting to indexed color

Dither

Choose from an expanded list of dither options. Choose the new Noise option if you plan to slice the image for placement in an HTML table. The Noise option helps to reduce seam patterns along sliced edges.

See also:

Palette

Forced

Transparency

Matte

Dither amount

Preserve Exact Colors


Dither amount
Converting to indexed color

Dither amount

Enter a value to specify the amount of dithering. A higher value dithers more colors, but may increase file size.

See also:

Palette

Forced

Transparency

Matte

Dither

Preserve Exact Colors


Preserve Exact Colors
Converting to indexed color

Preserve Exact Colors

Protects colors in the color table from being dithered.

See also:

Palette

Forced

Transparency

Matte

Dither

Dither amount


Using the color table
Using enhanced tools and commands

Using the color table

You can now use the color table of an indexed-color image to assign transparency to a single color in the image.

To assign transparency using the color table:

1  Choose Image > Mode > Color Table.

2  Select the eyedropper, and click the desired color in the table. The sampled color is replaced with transparency.

3  Click OK to close the color table.


Saving GIF and PNG images with transparency
Using enhanced tools and commands

Saving GIF and PNG images with transparency

Photoshop provides enhanced transparency support for images saved in GIF and PNG format. The GIF format preserves transparency in indexed-color and RGB images. The PNG format preserves transparency in indexed-color images.


Saving RGB images in GIF format
Using enhanced tools and commands

Saving RGB images in GIF format

You can use the Save a Copy command to save RGB images directly in GIF format. Photoshop automatically displays the Indexed Color dialog box, letting you choose indexed-color conversion settings as the image is saved to GIF.


Opening TIFF files
Using enhanced tools and commands

Opening TIFF files

Two additional TIFF compression methods, Deflate and JPEG, are now recognized by Photoshop. Photoshop can now open TIFF files that have been saved using either of these compression methods.


Saving in JPEG format
Using enhanced tools and commands

Saving in JPEG format

When saving a file in JPEG format, you have additional options for controlling the appearance of transparent areas in the original image, compressing the file size further, and previewing the size and download time of the file.

Matte Choose an option to fill transparent areas with a matte color.

Quality Choose from an increased range of quality and compression levels. The quality level of 12 in the new range corresponds to 10 in the old Photoshop 5.0 range. The levels of 1 and 0 represent new levels of increased compression in the low-quality range.

Size Use to preview the file size and estimated download time of the image. Choose the desired modem speed from the menu. The Size preview is only available when Preview is selected.

Preview Select to preview the current JPEG settings applied to the image.


Saving in PDF format
Using enhanced tools and commands

Saving in PDF format

When saving a CMYK image in Photoshop PDF format, you have the option of embedding ICC profiles in the file. ICC profiles indicate the correct color space for the file, so that the proper color conversions can occur when the file is opened in another ICC-aware application.

For information on ICC profiles, see “Managing ICC profiles in files” in Chapter 5 of the Photoshop 5.0 printed guide or in “Reproducing Color Accurately” of Photoshop 5.0 online Help.


Using Photoshop and ImageReady Together

Adobe Photoshop 5.5 contains a rich set of features for optimizing images for the Web. However, for advanced Web design, there will be times when you need more sophisticated Web capabilities. Adobe ImageReady 2.0 provides all of the image optimization features of Photoshop, along with advanced capabilities, such as animation, slicing, and rollovers. See Optimizing Images for the Web. for more information on optimizing images.

See also:

Using common features

Using ImageReady tools and options

Jumping between applications

Color management features

Selecting Web-safe colors

Using layers

Using type


Using common features
Using Photoshop and ImageReady Together

Using common features

Like most Adobe products, the work area of Photoshop and ImageReady consists of a menu bar at the top of the work area, a floating toolbox on the left, floating palettes on the right and bottom, and one or more document windows, which you open manually.

Together Photoshop and ImageReady provide a consistent and integrated set of tools for producing sophisticated graphics for print and for the Web. ImageReady includes many tools that will already be familiar to users of Photoshop 5.0.

For complete information, see “Looking at the Work Area” in ImageReady online Help. Similar information can be found in Chapter 2 of the Photoshop 5.0 printed guide or in “Looking at the Work Area” in the Photoshop 5.0 online Help.

See also:

Making Color and Tonal Adjustments

Selecting

Editing and Retouching

Painting


Making Color and Tonal Adjustments
Using common features

Making Color and Tonal Adjustments

Photoshop provides an advanced set of color correction tools for adjusting the color and tone of individual images. Many basic color correction tools are also available in ImageReady, including Levels, Auto Levels, Brightness/Contrast, Hue/Saturation, Desaturation, Invert, Variations, and the Unsharp Mask filter.

You can use the Auto Contrast command to adjust the contrast and the overall mixture of colors in an image automatically. (This command does not improve flat-color images.)

You use the Auto Contrast command to automatically adjust contrast or highlights and shadows. Adjusting contrast maps the darkest and lightest pixels in the image to black and white. Remapping causes the highlights to appear lighter and the shadows to appear darker, and can improve the appearance of many photographic or continuous-tone images.

The Auto Contrast command clips the white and black pixels by 0.5%—that is, it ignores the first 0.5% of either extreme when identifying the lightest and darkest pixels in the image. This clipping of color values ensures that white and black values are representative areas of the image’s content, rather than extreme pixel values.

Original image, and image with Auto Contrast applied

To adjust contrast automatically:

Select Image > Adjust > Auto Contrast.

For details, see “Adjusting Color and Tone and Sharpening the Image” in ImageReady online Help. Similar information can be found in Chapter 6 of the Photoshop 5.0 printed guide or “Making Color and Tonal Adjustments” in Photoshop 5.0 online Help.


Selecting
Using common features

Selecting

Photoshop provides advanced selection tools not available in ImageReady, including sophisticated masking techniques and the ability to create complex and precise selections from paths. For more information on masking and selection tools that are new to Photoshop 5.5, see Using the New Photoshop 5.5 Features.

ImageReady includes the basic marquee selection tools, the lasso and polygon lasso tools, and the magic wand tool familiar to users of Photoshop. For added convenience in working with common shapes, ImageReady adds an additional marquee selection tool: the rounded rectangle marquee tool. You can work with selections in ImageReady very much the way you do in Photoshop, softening the edges of selections, extending selections based on color, and saving selections and loading them later for reuse.

For details, see “Selecting, Editing, and Retouching,” in ImageReady online Help. Similar information can be found in Chapter 7 of the Photoshop 5.0 printed guide or in “Selecting” of Photoshop 5.0 online Help.


Editing and Retouching
Using common features

Editing and Retouching

With both ImageReady and Photoshop, you can use rulers and guides to lay out your work (in Photoshop you can also use the measure tool and grids), and you can copy and move selections within an image and between applications. You can also transform objects using specific transformations or using the transform bounding box. (In Photoshop you can transform objects in three dimensions.)

Both Photoshop and ImageReady provide you with several tools for retouching images: the rubber stamp tool, the smudge tool, the blur and sharpen tools, and the dodge, burn, and sponge tools. ImageReady does not include the history brush familiar to users of Photoshop 5.0.

Both applications have History palettes that let you jump to previous states of the image. In Photoshop, the History palette records all changes made to an image. In ImageReady, the History palette records changes made to the original version of an image only (Optimize palette settings are not recorded in the ImageReady History palette).

In both applications, you can select a previous state of the image in the History palette and change the image, eliminating all states that come after the selected one. In Photoshop, you can also choose the Allow Non-Linear History option to make changes to a selected state without deleting the states that come after.

For information about how the History palette saves states of the image when you are using Photoshop and ImageReady together, see Jumping between applications.

For details, see “Selecting, Editing, and Retouching,” in ImageReady online Help. Similar information can be found in Chapter 8 of the Photoshop 5.0 printed guide or “Editing and Retouching” in Photoshop 5.0 online Help.


Painting
Using common features

Painting

Photoshop and ImageReady also share a common set of tools for applying color, including the line, paintbrush, airbrush, and pencil tools. In both applications, the drawing and editing tools use the Brushes palette and its various options, including blending modes. Both applications have a similar workflow for applying and tracking color—a Color palette, a Swatches palette, and the foreground and background color boxes for applying color. For more information on how Photoshop and ImageReady provide feedback about Web-safe colors, see Optimizing Images for the Web.


Using ImageReady tools and options
Using Photoshop and ImageReady Together

Using ImageReady tools and options

ImageReady includes some extra tools and options not included in similar Photoshop features. These features make it easier to prepare and batch–process images for the Web.

See also:

Using the shape tools

Cropping images


Using the shape tools
Using ImageReady tools and options

Using the shape tools

In addition to the drawing and painting tools shared with Photoshop, ImageReady includes additional tools for drawing basic shapes on an image—the rectangle tool( [image]), the rounded rectangle tool ( [image]), and the ellipse tool ( [image]). These are useful for creating buttons. They create bitmap shapes (not vector objects).

To use the shape tools in ImageReady:

1  Specify a foreground color.

 For information on foreground and background colors, see “Choosing the foreground and background colors” in Chapter 9 of the Photoshop 5.0 printed guide or in “Choosing the foreground and background colors” of Photoshop 5.0 online Help. A similar topic can be found in ImageReady online Help.

2  Double-click a shape tool to select it and display its Options palette.

3  Specify the blending mode and opacity.

 For information on blending mode and opacity, see “Using the Options palette for painting and editing tools” in Chapter 9 of the Photoshop 5.0 printed guide or in “Painting” of Photoshop 5.0 online Help. A similar topic also can be found in ImageReady online Help.

4  Select Fixed Size to create a shape of a specified size, and enter Width and Height values for the shape’s dimensions.

5  Select New Layer to create the shape on a new layer in the document.

6  Enter a value for Corner Radius to specify the roundness of the corners (rounded rectangle tool only.) (A larger value creates rounder corners; a smaller value creates sharper corners).

7  Select Anti-aliased to create soft-edged lines (rounded rectangle tool and ellipse tool only).

8  Drag within the image. Hold down Shift as you drag to constrain the rectangle or rounded rectangle to a square, or the ellipse to a circle. Hold down Alt (Windows) or Option (Mac OS) to draw from the center of the object. Hold down the spacebar to move the object without changing its size or shape.


Cropping images
Using ImageReady tools and options

Cropping images

In both Photoshop and ImageReady you can use either the crop tool or the Crop command to crop an image. In ImageReady you can decide whether to delete or discard the area outside of a rectangular selection or whether to hide the area outside of the selection. Use the Hide option when creating animations with elements which move from offscreen into the live image area.

In ImageReady you can also use the Trim command to discard a border area around the edge of the image, based on transparency or edge color.

For information on cropping see, “Cropping an image” in Chapter 3 of the Photoshop 5.0 printed guide or in “Getting Images into Photoshop” in Photoshop online Help. A similar topic also can be found in ImageReady online Help.


Jumping between applications
Using Photoshop and ImageReady Together

Jumping between applications

You can jump between Photoshop and ImageReady to transfer an image between the two applications for editing, without closing or exiting the originating application. In addition, you can jump to other graphics editing applications from Photoshop or ImageReady, and jump to HTML editing applications from ImageReady.

When you jump to another application, the file remains open in Photoshop or ImageReady while you work in the destination application. You can set Photoshop or ImageReady to automatically update an image that is modified in a jumped-to application.

Each time an image in Photoshop or ImageReady is updated with changes made in a jumped-to application, a single history state is added to the Photoshop or ImageReady History palette. You can undo the update in Photoshop or ImageReady as you do other states in the History palette.

 For information on the History palette, see “Reverting to any state of the image” in Chapter 8 of the Photoshop 5.0 printed guide or in “Editing and Retouching” of Photoshop 5.0 online Help. A similar topic also can be found in ImageReady online Help.

See also:

Jumping between Photoshop and ImageReady

Jumping from Photoshop or ImageReady to other applications

Controlling file updating


Jumping between Photoshop and ImageReady
Jumping between applications

Jumping between Photoshop and ImageReady

You can easily jump between Photoshop and ImageReady to use features in both applications when preparing graphics for the Web or other purposes. Jumping between the applications allows you to use the full feature sets of both applications while maintaining a streamlined workflow.

To jump between Photoshop and ImageReady:

In Photoshop or ImageReady, choose a method for jumping to the other application:

•   Click the Jump To button ( [image]) in the toolbox.

•   Choose File > Jump To > ImageReady or Photoshop.


Jumping from Photoshop or ImageReady to other applications
Jumping between applications

Jumping from Photoshop or ImageReady to other applications

You can jump to graphics editing applications from within Photoshop and ImageReady, and HTML editing applications from within ImageReady.

When you install Photoshop and ImageReady, Adobe graphics editing applications currently on your system such as Adobe Illustrator, are added to the Jump To submenu in both programs. In addition, Adobe HTML editing applications such as Adobe GoLive(TM), are added to the Jump To submenu in ImageReady.

You can add additional applications, including non-Adobe applications, to the Jump To submenu. You can also specify which application will be launched when using a keyboard shortcut.

When you jump to a graphics editing application, the original file is opened in the destination application. When you jump to an HTML editing application from ImageReady, the optimized file and the HTML file are opened in the destination application. If the document contains slices, all files for the full document are included.

See also:

To jump to another application from Photoshop or ImageReady

To add an application to the Jump To submenu

To specify an application to be launched by the Jump To keyboard shortcut


To jump to another application from Photoshop or ImageReady
Jumping from Photoshop or ImageReady to other applications

To jump to another application from Photoshop or ImageReady:

1  Choose a method for jumping to the destination application:

•   To launch a graphics application, choose Ctrl+Shift+M (Windows) or Command+Shift+M (Mac OS). Photoshop or ImageReady launches the application you have specified. (See instructions in this section for specifying an application to be launched by the Jump To keyboard shortcut.)

•   Choose File > Jump To > Graphics Editor or File > Jump To > HTML Editor (ImageReady only), and select an application from the submenu.

2  If the file has been modified since the last save, choose an option for saving the file:

•   Click Save and save the file with its current name and location.

•   Click Save As and save the file with a new name, a new location, or both.

See also:

To add an application to the Jump To submenu

To specify an application to be launched by the Jump To keyboard shortcut


To add an application to the Jump To submenu
Jumping from Photoshop or ImageReady to other applications

To add an application to the Jump To submenu:

1  Create a shortcut (Windows), or an alias (Mac OS) for the application you want to add to the menu.

2  Drag the icon for the shortcut or alias into the Jump To Graphics Editor folder or the Jump To HTML Editor folder (for ImageReady only) in the Helpers folder in the Photoshop program folder.

3  Restart Photoshop or ImageReady to view the application in the Jump To submenu.

See also:

To jump to another application from Photoshop or ImageReady

To specify an application to be launched by the Jump To keyboard shortcut


To specify an application to be launched by the Jump To keyboard shortcut
Jumping from Photoshop or ImageReady to other applications

To specify an application to be launched by the Jump To keyboard shortcut:

Place curly brackets ({}) (Photoshop) or straight brackets ([]) (ImageReady) around the name of the application in the Jump To Graphics Editor folder, located in the Helpers folder in the Photoshop folder. The bracketed application is launched when you press Ctrl+Shift+M (Windows) or Command+Shift+M (Mac OS). (The brackets do not appear in the Jump To submenu.) If no application is bracketed, pressing the keyboard shortcut in Photoshop launches ImageReady, and pressing the keyboard shortcut in ImageReady launches Photoshop.

See also:

To jump to another application from Photoshop or ImageReady

To add an application to the Jump To submenu


Controlling file updating
Jumping between applications

Controlling file updating

You can use the Auto-Update option in Photoshop or ImageReady to automatically update a document whenever you save the document in a jumped-to application, so that the originating application always displays the latest version of the document.

If you turn off the Auto-Update option, Photoshop and ImageReady prompt you to manually update the document when you return to either application.

Photoshop and ImageReady alert you if changes made to a document during Jump To operations result in two different versions of a document being present on your system (a backup copy and an active copy with the same filename). The alert messages prompt you to rename files when saving to prevent accidental overwriting.

To turn Auto-Update on or off in Photoshop:

1  Choose File > Preferences > General.

2  Under Options, select Auto-Update Open Documents.

A check mark indicates that the option is turned on (the default option).

To turn Auto-Update on or off in ImageReady:

In the Optimize palette, choose Auto Regenerate from the palette menu. A check mark indicates that the option is turned on.

To manually update documents:

Click Update in the message box when returning to Photoshop or ImageReady after jumping to another application.

Photoshop and ImageReady prompt you to manually update a document file if Auto-Update is turned off or if you return to Photoshop or ImageReady before the file has been saved in the other application.


Color management features
Using Photoshop and ImageReady Together

Color management features

RGB color display on a computer monitor varies with the operating system used by the computer. For example, the same image will appear darker on a Windows system than on a Macintosh system (because the standard RGB color space is darker in Windows than in Mac OS). New color management features in Photoshop and ImageReady enable you to compensate for cross-platform differences in RGB color display during image preview.

RGB color display can also vary between Photoshop and ImageReady. In Photoshop, you can select from several RGB color spaces when editing images. As a result, images created in Photoshop may use an RGB color space that differs from the monitor RGB color space used by ImageReady. New color management features in ImageReady enable you to adjust RGB color display during image preview to compensate for differences between Photoshop and ImageReady. (This ImageReady feature is available only when viewing Photoshop-format images which were created and color-space tagged in Photoshop.)

See also:

To adjust RGB color display for cross-platform variations

To adjust RGB color display in ImageReady to match color display in Photoshop


To adjust RGB color display for cross-platform variations
Color management features

To adjust RGB color display for cross-platform variations:

In Photoshop or ImageReady, choose View > Preview and choose an option for adjusting the color display:

•   Uncompensated Color (the default option) to view the image with no color adjustment.

•   Standard Macintosh Color (Windows) to view the image with color adjusted to simulate Mac OS color display.

•   Standard Windows Color (Mac OS) to view the image with color adjusted to simulate Mac OS color display.

Note: These options adjust color display only. No changes are made to pixels in the image.

See also:

To adjust RGB color display in ImageReady to match color display in Photoshop


To adjust RGB color display in ImageReady to match color display in Photoshop
Color management features

To adjust RGB color display in ImageReady to match color display in Photoshop:

Choose View > Preview > Photoshop Compensation.

Note: In order to use the Photoshop Compensation option in ImageReady, you must save the original image in Photoshop, with the Embed Profiles option turned on (the default setting).

For complete information on RGB color setup, see “Entering RGB setup information” in Chapter 5 in the Photoshop 5.0 printed guide or in “Reproducing Color Accurately” of Photoshop 5.0 online Help.

See also:

To adjust RGB color display for cross-platform variations


Selecting Web-safe colors
Using Photoshop and ImageReady Together

Selecting Web-safe colors

Web-safe colors are the 216 colors common to the Windows and Mac OS 8-bit (256-color mode) color palettes. Selecting Web-safe colors for an optimized image ensures that the colors will not dither in a browser. Browser dither occurs when a Web browser using 8-bit color attempts to simulate colors that appear in an optimized image but not in the browser’s color palette.

Photoshop and ImageReady provide several ways for you to select Web-safe colors for an image. You can select colors that appear in the image and shift the colors to the closest Web palette equivalents. You can select Web-safe colors from the Adobe color picker or from the Color palette. You can also specify a tolerance level to automatically shift colors to the closest Web palette equivalents. For instructions on selecting Web-safe colors, see Minimizing browser dither.


Using layers
Using Photoshop and ImageReady Together

Using layers

When you create, import, or scan an image in Photoshop or ImageReady, the image consists of a single layer. You can add layers to the image, allowing you to organize your work into distinct levels.

You can draw, edit, paste, and reposition elements on one layer without disturbing the others. Until you combine, or merge, the layers in the original image, each layer remains independent of the others. This means you can experiment freely with various graphics, type, opacities, and blending modes. In addition, special features such as layer masks, layer effects, and adjustment layers (Photoshop only) let you experiment with and apply sophisticated effects to the layers in your image. In ImageReady, you also use layers to create rollover states and animations. See Working with rollovers and Animation.

When you transfer a layered image between Photoshop and ImageReady, all layers, layer masks, layer effects, and adjustment layers are preserved. (Adjustment layers can be applied and edited only in Photoshop, but can be viewed in ImageReady.)

In Photoshop, the first layer of an image is called the background layer, analogous to the base layer of a painting. You cannot change the stacking order of a background layer or apply a blending mode or opacity (unless you convert it to a normal layer). In ImageReady, the first layer of an image is a normal layer, with no special properties.

Note: ImageReady does not support background layers used in Adobe Photoshop. If you open a Photoshop document containing a background layer in ImageReady, the background layer is converted to a normal layer.

See also:

Using layer effects

Adding layer effects

Defining styles in ImageReady

Viewing styles in ImageReady

Applying styles to layers in ImageReady

Managing styles in ImageReady


Using layer effects
Using layers

Using layer effects

Photoshop and ImageReady both include layer effects, a number of automated effects that you can apply to layers, including drop shadows, glows, bevelling, and embossing, as well as a new color fill effect. ImageReady also includes pattern and gradient layer effects.

In addition, ImageReady includes styles, or sets of one or more layer effects. ImageReady includes several predefined styles. You can also define new styles by saving the effects you apply to a layer.


Adding layer effects
Using layers

Adding layer effects

You add layer effects in Photoshop by choosing Layer > Effects and selecting an effect from the submenu. You specify options for layer effects using the Effects dialog box.

Effects dialog box in Photoshop

You add layer effects in ImageReady by clicking the Effects button ( [image]) at the bottom of the Layers palette, and choosing an effect from the Effects menu. You specify options for layer effects using the Layer Options/Effects palette. (You can also add effects in ImageReady by using the Layer > Effects menu.)

Effects button on Layers palette in ImageReady

Photoshop and ImageReady have numerous effects that you can apply in any combination to a layer.

•   The Drop Shadow effect adds a shadow that falls behind the contents on the layer.

•   The Inner Shadow effect adds a shadow that falls just inside the edges of the layer contents, giving the layer a recessed appearance.

•   The Outer Glow and Inner Glow effects add glows that emanate from the outside or inside edges of the layer contents.

•   The Bevel and Emboss effects add various combinations of highlights and shadows to a layer.

•   The new Color Fill applies a solid fill to a layer.

•   In ImageReady, the Gradient/Pattern effect applies a pattern or color gradient fill to a layer.

Note: Gradient and Pattern layer effects that you apply in ImageReady are not displayed when you view the file in Photoshop. However, the effects are preserved in the image. An alert icon ( [image]) in Photoshop indicates that the effects are present on the layer. The pattern and gradient effects are not altered in Photoshop, unless you rasterize the layer on which the effects are applied.

For details, see “Using layer effects” in Chapter 11 of the Photoshop 5.0 printed guide or in “Using Layers” of Photoshop 5.0 online Help. A similar topic also can be found in ImageReady online Help.

To apply a Color Fill layer effect in Photoshop or ImageReady:

1  Choose a method for applying the layer effect:

•   In Photoshop or ImageReady, choose Layer > Effects > Color Fill.

•   In ImageReady, in the Layers palette, click the Effects button ( [image]) and choose Color Fill from the Effects menu.

2  In the Effects dialog box (Photoshop) or the Layer Options/Effects palette (ImageReady), select a blending mode and opacity level.

 For information on blending mode and opacity, see “Specifying options for layer effects” in Chapter 11 of the Photoshop 5.0 printed guide or in “Layers” of Photoshop 5.0 online Help. A similar topic also can be found in ImageReady online Help.

3  Select a fill color:

•   In Photoshop, click the color box and use the color picker.

•   In ImageReady, select a color from the Color pop-up menu: Foreground, Background, or Other (to use the color picker) or click a color in the pop-up color palette (colors in the palette are Web-safe).

4  In Photoshop, click OK to close the Effects dialog box.


Defining styles in ImageReady
Using layers

Defining styles in ImageReady

Styles are sets of one or more layer effects that you can apply to any layer in an ImageReady document. You can apply predefined styles included with ImageReady. You can also define new styles by adding the effects you apply to a layer to the Styles palette. You can define a new style using a single effect or a group of effects.

To define a new style:

1  Apply effects to a layer in an ImageReady document.

2  Select a single effect or a group of effects:

•   Click an individual effect name or icon ( [image]) to select it.

•   Click in the gray Effects bar or on the style icon ( [image]) to select all effects on a layer.

3  Create a new style:

•   Drag the selected effect or style into the list in the Styles palette or onto the New Item button ( [image]) in the Styles palette. The effect or style is added as a new style (with a default name) in the Styles palette list.

•   Click the New Item button ( [image]) at the bottom of the Styles palette, and give the style a name.

•   Choose New Style from the Styles palette menu, and give the style a name.

If you create a new style using the New Item button or the New Style menu command, all effects on the current layer are included in the new style.

4  To rename a style you created by dragging, select the new style (highlighted in the Styles palette), choose Style Options from the Styles palette menu, enter a name for the style, and then click OK.


Viewing styles in ImageReady
Using layers

Viewing styles in ImageReady

You can view styles in the Styles palette by name, by small swatch, or by large swatch.

To change the view of styles in the Styles palette:

In the Styles palette, choose a view from the Styles palette menu:

•   Select Name to view the styles as a list with small icons.

•   Select Swatch to view the styles as swatches with no names.

•   Select Large Swatch to view the styles as a list, with a large swatch of the selected style displayed.

Styles are displayed in alphabetical order by name from top to bottom (and from left to right in Swatch view).


Applying styles to layers in ImageReady
Using layers

Applying styles to layers in ImageReady

You can apply styles to layers in any ImageReady document. You can use a style to replace current effects applied to a layer, or add a style and preserve the existing effects.

To apply a style to a layer:

1  Select a method for applying the style:

•   Double-click the style thumbnail to apply it to the currently selected layer in the active document.

•   Drag the style thumbnail onto a layer in the Layers palette. Press Shift while dragging to add the style while preserving effects on the destination layer that are not duplicated by the new style. (Any duplicated effects will be replaced by the new style.)

•   Drag the style thumbnail onto a document. The style is applied to the topmost layer where the style is dropped. Press Shift while dragging to preserve effects on the destination layer that are not duplicated by the new style. (Any duplicated effects will be replaced by the new style.)

If a style is dragged onto a layer without pressing Shift, the style replaces any existing effects on the destination layer.


Managing styles in ImageReady
Using layers

Managing styles in ImageReady

Styles that appear in the Styles palette are located in the Styles folder in the ImageReady application folder. You can remove styles from the Styles palette by deleting them or by dragging them out of the Styles folder to store them in another location.

To delete styles from the Styles palette:

1  Select the style in the Styles palette.

2  Drag the style onto the trash button ( [image]) in the Styles palette. Or click the trash button, and click Delete to confirm the deletion.

To remove styles from the Styles palette and store them in another location:

1  Open the Styles folder inside the ImageReady application folder on your hard drive.

2  Locate the style or styles you wish to remove, and drag them to a new location on your computer.

Styles removed from the Styles folder will be removed from the Styles palette after ImageReady is closed and reopened.


Using type
Using Photoshop and ImageReady Together

Using type

Photoshop and ImageReady let you add horizontal and vertical type to an image. You can specify the font, leading, kerning, tracking, baseline, style, size, and alignment of the type and edit its characters. You can also create type in double-byte fonts, enabling you to create designs that include Chinese, Japanese, and Korean text (if you have the correct system software installed on your computer). In Photoshop, you can also create selection borders in the shape of type.

New type features in both Photoshop and ImageReady allow you to select an anti-aliasing option for type, apply simulated styles to type, and turn off fractional character widths to improve the appearance of small type displayed at low resolution.

See also:

Entering type

Specifying anti-aliasing for type

Applying simulated type styles

Turning fractional character widths on or off


Entering type
Using type

Entering type

To enter type, you begin by selecting a type tool and clicking in the image to set an insertion point. In Photoshop, you use the Type Tool dialog box to enter the text and specify formatting attributes. The type appears in the image on a new type layer when you close the dialog box. (You can also preview type in the image while working in the Type Tool dialog box.)

In ImageReady, you use the type tool to enter the type directly onto a new type layer created when you click the type insertion point. The type appears in the image on the new type layer as you work with the type tool. You use the Type palette in ImageReady to specify type attributes.

Type dialog box in Photoshop for entering type and setting attributes

Type palette in ImageReady for setting type attributes


Specifying anti-aliasing for type
Using type

Specifying anti-aliasing for type

Anti-aliasing lets you produce smooth-edged type by partially filling the edge pixels. As a result, the edges of the type blend into the background. You may want to use anti-aliased type in your images, especially if you are working with small type sizes (anti-aliasing can make small type sizes appear more readable when viewed online).

New anti-aliasing options now enable you to select from three levels of anti-aliasing to modify the appearance of type online. You can select an anti-aliasing level to make type appear crisper, smoother, or heavier.

To select an anti-aliasing level for type:

1  In the Layers palette, select the type layer to which you want to apply anti-aliasing.

2  In the Type Tool dialog box (Photoshop) or the Type palette (ImageReady), select an anti-aliasing option from the pop-up menu:

•   None to apply no anti-aliasing.

•   Crisp to make type appear more sharp.

•   Strong to make type appear heavier.

•   Smooth to make type appear smoother.


Applying simulated type styles
Using type

Applying simulated type styles

Photoshop and ImageReady include simulated type styles for bold, italic, and underline type, allowing you to apply these styles to any type, even type created with font families that do not include these styles.

Note: You cannot apply the simulated underline style to vertical type.

To apply simulated type styles:

1  Select the type to which you want to apply a simulated style:

•   In Photoshop, double-click the type layer in the Layers palette, and then select the characters you want to adjust in the Type Tool dialog box.

•   In ImageReady, select the type layer in the Layers palette, and then select the type tool ( [image]) and select the characters you want to adjust in the type layer.

2  In the Type dialog box (Photoshop) or the Type palette menu (ImageReady), choose Faux Bold, Faux Italic, or Underline to apply a simulated version of the selected style.


Turning fractional character widths on or off
Using type

Turning fractional character widths on or off

By default, Photoshop and ImageReady display type using fractional character widths. This means that the spacing between characters varies, with fractions of whole pixels between some characters. In most situations, fractional character widths provide the best spacing for type appearance and readability. However, for type in small sizes (less than 20 points) displayed online, fractional character widths can cause type to run together, making it difficult to read.

You can turn off fractional character widths to fix type spacing in whole-pixel increments and prevent small type from running together.

To turn fractional character widths on or off:

In the Type Tool dialog box (Photoshop) or the Type palette menu (ImageReady), select Fractional Widths.

A check mark indicates that the option is turned on (the default setting.) Turn the option off for optimal results with small type.


Optimizing Images for the Web

Creating small graphics files is key to distributing images on the World Wide Web. With smaller files, Web servers can store and transmit images more efficiently, and viewers can download images more quickly. Likewise, when preparing images for CD-ROM or other multimedia viewing, it’s important to make the image files as small as possible. This conserves file storage space and decreases the amount of RAM needed for image display.

Adobe Photoshop and Adobe ImageReady give you an effective range of controls for compressing the file size of an image while optimizing its online display quality. You can optimize images in the three major graphic file formats used on the Web: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), and PNG-8 or PNG-24 (Portable Network Graphics, with 8-bit or 24-bit color).

While Photoshop contains a rich set of features for optimizing images for the Web, there may be times when you want more sophisticated Web capabilities. ImageReady 2.0 provides all of the image optimization features of Photoshop 5.5, as well as advanced capabilities such as animation, slicing, and rollovers.

See also:

Optimizing in Photoshop and ImageReady

Optimization and Web design features in ImageReady

Viewing images during optimization

Choosing a file format for optimization

Optimizing files and choosing options

Working with the color table

Using master palettes (ImageReady)

Working with hexadecimal values for color

Making transparent and matted images

Previewing and controlling dithering

Setting Optimization preferences (ImageReady)

Automating Optimize palette settings (ImageReady)

Saving optimized images

Saving and exporting original images (ImageReady)

Creating background images (ImageReady)


Optimizing in Photoshop and ImageReady
Optimizing Images for the Web

Optimizing in Photoshop and ImageReady

For basic image optimization tasks, you can save an image in Photoshop as a GIF, JPEG, or PNG file or export an image as a GIF file.

For complete information on saving and exporting files in Photoshop, see Chapter 14 in the Photoshop 5.0 printed guide or “Saving and Exporting Images” in Photoshop 5.0 online Help.

For more precise optimization, you can use the special optimization features in Photoshop or ImageReady to preview optimized images in different Web graphics file formats and with different file attributes. You can view multiple versions of an image simultaneously and modify optimization settings as you preview the image, to select the best combination of settings for your needs. You can also resize the image to specified pixel dimensions or a specified percentage of the original size.

In both Photoshop and ImageReady, you can use named optimization sets to apply predefined settings. When working with GIF or PNG-8 files, you can view the color table and manipulate colors in an image. You can apply background transparency and matting, where applicable, and select options to control dithering (a technique used by computers to simulate colors not available in the color display system). When you save an optimized file, you can save an HTML file with the image to use in the HTML source code for a Web site. You can also copy colors as hexadecimal values directly from an image to an HTML file.


Optimization and Web design features in ImageReady
Optimizing Images for the Web

Optimization and Web design features in ImageReady

You can automate optimization in ImageReady by saving Optimize palette settings as a droplet, a small application that applies the settings to an image or batch of images when activated. See Automating Optimize palette settings (ImageReady).

You can also use ImageReady to create dynamic Web graphics effects such as animation, slices, rollover effects, and image maps.

You can tile an image to be used as a background on a Web page. You can create a master palette to be used with a group of images. You can also set optimization preferences.


Viewing images during optimization
Optimizing Images for the Web

Viewing images during optimization

View options in Photoshop and ImageReady enable you to switch easily between optimized and original (non-optimized) versions of an image and view up to four versions of an optimized image simultaneously.

In Photoshop, you choose File > Save for Web to view and modify optimized images in the Save for Web dialog box. In ImageReady, you view and modify optimized images in the document window.

In 2-Up and 4-Up view, an annotation area appears by default below each optimized image, showing its optimization settings. In ImageReady, you can hide or show the annotation.

2-Up view and 4-Up view in ImageReady. A black frame indicates the selected view.

See also:

To select a view when optimizing images

To hide or show annotations in 2-Up and 4-Up views (ImageReady)

To repopulate optimized versions of an image in 2-Up or 4-Up view

To restore an optimized version of an image to the original version


To select a view when optimizing images
Viewing images during optimization

To select a view when optimizing images:

1  In Photoshop, choose File > Save for Web.

2  In the Save for Web dialog box (Photoshop) or the document window (ImageReady), click a tab at the top of the image display to select a view:

•   Original to view the image with no optimization.

•   Optimized to view the image with the current optimization settings applied. See Optimizing files and choosing options for more information on applying optimization settings.

•   2-Up to view two versions of the image side by side.

•    4-Up to view four versions of the image side by side.

Note: When you choose 2-Up or 4-Up view, Photoshop or ImageReady determines a layout for the images, depending on the aspect ratio (width/height ratio) of the image, and whether annotations or rules are shown. Images can appear in vertical layout, horizontal layout, or 2 X 2 layout (two rows and two columns). 2 X 2 layout is available for 4-Up view only.

By default, 2-Up view displays the original image and the optimized image with current optimization settings, and 4-Up view displays the original image, the optimized image with current settings, and two smaller, lower-quality versions of the image based on modifications of the current optimization settings.

You can select a version of the image in 2-Up or 4-Up view to apply new optimization settings. You can automatically repopulate 2-Up and 4-Up views— generate new optimized versions of the image based on the selected version.You can also revert an optimized version to the original version of the image.

In ImageReady, you can change the default optimizations in Optimization Preferences. See Setting Optimization preferences (ImageReady).

See also:

To hide or show annotations in 2-Up and 4-Up views (ImageReady)

To repopulate optimized versions of an image in 2-Up or 4-Up view

To restore an optimized version of an image to the original version


To hide or show annotations in 2-Up and 4-Up views (ImageReady)
Viewing images during optimization

To hide or show annotations in 2-Up and 4-Up views (ImageReady):

Choose View > Hide/Show Optimization Info.

See also:

To select a view when optimizing images

To repopulate optimized versions of an image in 2-Up or 4-Up view

To restore an optimized version of an image to the original version


To repopulate optimized versions of an image in 2-Up or 4-Up view
Viewing images during optimization

To repopulate optimized versions of an image in 2-Up or 4-Up view:

1  Select an optimized version of the image in the 2-Up or 4-Up view.

2  In the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select Repopulate Views from the menu.

Photoshop and ImageReady generate smaller optimized versions of the image based on the optimization settings of the selected version. The selected version and the original version, if present, are not altered during repopulation. For this reason, the Repopulate Views option works with 2-Up view only if the original version of the image is not present.

Repopulate Views option in Photoshop and ImageReady

See also:

To select a view when optimizing images

To hide or show annotations in 2-Up and 4-Up views (ImageReady)

To restore an optimized version of an image to the original version


To restore an optimized version of an image to the original version
Viewing images during optimization

To restore an optimized version of an image to the original version:

1  Select an optimized version of the image in the 2-Up or 4-Up view.

2  In the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), choose Original from the Settings pop-up menu.

See also:

To select a view when optimizing images

To hide or show annotations in 2-Up and 4-Up views (ImageReady)

To repopulate optimized versions of an image in 2-Up or 4-Up view


Choosing a file format for optimization
Optimizing Images for the Web

Choosing a file format for optimization

The file format you choose for an optimized image is determined by the color, tonal, and graphic characteristics of the original image. In general, continuous-tone images such as photographs should be compressed as JPEG files. Illustrations with flat color or sharp edges and crisp detail, such as type, should be compressed as GIF or PNG-8 files.

PNG-24 file format is suitable for continuous-tone images. However, PNG-24 files are often much larger than JPEG files of the same image. PNG-24 format is recommended only when working with a continuous-tone image that includes multilevel transparency. (Multilevel transparency is supported by the PNG-24 format but not the JPEG format. See Preserving multilevel transparency inPNG-24 images.)

A photograph suitable for compression as a JPEG or PNG-24 image, and an illustration suitable for compression as a GIF or PNG-8 image.

Depending on the format, you can specify image quality, background transparency or matting, color display, and downloading method.

The appearance of an image on the Web also depends on the computer platform, color display system, operating system, and browser used to display the image. Preview images in different browsers on different platforms and with different color bit depths to see how the images will appear on the Web.

See also:

About JPEG format

About GIF format

About PNG-8 format

About PNG-24 format


About JPEG format
Choosing a file format for optimization

About JPEG format

The JPEG format supports 24-bit color and preserves the broad range and subtle variations in brightness and hue found in photographs and other continuous-toned images. JPEG is supported by most browsers.

JPEG compresses file size by selectively discarding data. Because it discards data, JPEG compression is referred to as lossy. A higher quality setting results in less data being discarded, but the JPEG compression method can degrade sharp detail in an image, particularly in images containing type or vector art.

Note: Artifacts, such as wave-like patterns or blocky areas of banding, are added to a file each time you save the file as a JPEG. You should always save JPEG files from the original image, not from a previously saved JPEG.

Original image; and JPEG with Low quality setting

You can create a progressive JPEG file, in which a low-resolution version of the image appears in a browser while the full image is downloading.

The JPEG format does not support transparency. When you save an image as a JPEG, transparent pixels are filled with the Matte color. See Making transparent and matted images. If you know the background color of the Web page where you will place the image, you can match the Matte color to the Web page background color to simulate the effect of background transparency. If your image contains transparency and you do not know the Web page background color, or if the background will be a pattern, you should use a format that supports transparency (GIF, PNG-8, or PNG-24).


About GIF format
Choosing a file format for optimization

About GIF format

The GIF format uses 8-bit color and efficiently compresses solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type. You also use the GIF format to create animated images. GIF is supported by most browsers.

The GIF format traditionally uses a lossless compression method, in which no data is discarded during compression. You can save a GIF file multiple times without discarding data. However, because GIF files are 8-bit color, optimizing an original 24-bit image as an 8-bit GIF will generally degrade image quality.

In addition, Photoshop and ImageReady allow you to create a lossy version of a GIF file. The lossy GIF format includes small compression artifacts (similar to those in JPEG files) but yields significantly smaller files.

GIF image with Web color palette with 100% dither and with 0% dither

You can reduce the number of colors in a GIF and choose options to control the way colors dither in the application or in a browser. GIF supports background transparency and background matting, in which you blend the edges of the image with a Web page background color.


About PNG-8 format
Choosing a file format for optimization

About PNG-8 format

The PNG-8 format uses 8-bit color. Like the GIF format, PNG-8 efficiently compresses solid areas of color while preserving sharp detail, such as that in line art, logos, or illustrations with type.

Because PNG-8 is not supported by all browsers, it may be advisable to avoid this format for situations in which your image must be accessible to the widest possible Web viewing audience. For more information on browser support for PNG, see your browser’s documentation.

The PNG-8 format uses a lossless compression method, in which no data is discarded during compression. However, because PNG-8 files are 8-bit color, optimizing an original 24-bit image as a PNG-8 can degrade image quality. PNG-8 files use more advanced compression schemes than GIF, and can be 10– 30% smaller than GIF files of the same image, depending on the image’s color patterns.

Note: With certain images, especially those with very few colors and very simple patterns, GIF compression may create a smaller file than PNG-8 compression. View optimized images in GIF and PNG-8 format to compare file size.

As with the GIF format, you can reduce the number of colors in the image and choose options to control the way colors dither in the application or in the browser. The PNG-8 format supports background transparency and background matting, in which you blend the edges of the image with a Web page background color.

PNG-8 with 0% dither; and with 100% dither


About PNG-24 format
Choosing a file format for optimization

About PNG-24 format

The PNG-24 format supports 24-bit color. Like the JPEG format, PNG-24 preserves the broad range and subtle variations in brightness and hue found in photographs. Like the GIF and PNG-8 formats, PNG-24 preserves sharp detail, such as that in line art, logos, or illustrations with type.

The PNG-24 format uses the same lossless compression method as the PNG-8 format, in which no data is discarded. For that reason, PNG-24 files are usually larger than JPEG files of the same image. PNG-24 browser support is similar to that for PNG-8.

Like the PNG-8 format, the PNG-24 format supports background transparency and background matting, in which you blend the edges of the image with a Web page background color. In addition, the PNG-24 format supports multilevel transparency, in which you can preserve up to 256 levels of transparency to blend the edges of an image smoothly with any background color. However, multilevel transparency is not supported by all browsers.


Optimizing files and choosing options
Optimizing Images for the Web

Optimizing files and choosing options

You use the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady) to select the compression file format and other optimization settings for an image. You can also optimize an image to a specified file size, using current optimization settings or automatically generating a GIF or JPEG file.

To view the Save for Web dialog box (Photoshop only):

Choose File > Save for Web.

In ImageReady, you can use the Optimize palette to create droplets, small applications used for batch processing of multiple images. You can also use a droplet to create an action step in the ImageReady Actions palette for optimizing images.

See also:

Controlling optimization (ImageReady)

Using named optimization settings

Applying optimization settings

Resizing the image

Selecting a color table option


Controlling optimization (ImageReady)
Optimizing files and choosing options

Controlling optimization (ImageReady)

By default, Photoshop and ImageReady automatically regenerate the optimized image when you click the Optimized, 2-Up, or 4-Up tab at the top of the document (if you have modified the image since the last optimization), when you change optimization settings with the optimized image displayed, or when you edit the original image.

In ImageReady, you can turn off auto-regeneration so that the last version of the optimized image remains in the image window until you manually reoptimize the image or reactivate auto-regeneration. This feature is useful if you want to edit the image without pausing for reoptimization with each modification. You can also cancel optimization while it’s in progress, and preserve the previous image.

When auto-regeneration is turned off, the Regenerate button ( [image]) appears in the lower-right corner of each optimized image view. A regeneration alert symbol also appears in the Color Table palette if the optimized image is in GIF or PNG-8 format, indicating that the color table is out of date.

To turn Auto Regenerate on or off:

In the Optimize palette, choose Auto Regenerate from the palette menu. A check mark indicates that the option is turned on.

To manually optimize an image:

Choose a method for optimizing:

•   Click the Regenerate button ( [image]) in the lower-right corner of the optimized image (if it appears).

•   Choose Regenerate from the Optimize palette menu.

Note: Manually optimizing an image does not turn auto-regeneration on.

The Regenerate option is available only when the optimized image is out of date (when Auto Regenerate is turned off and the image or its optimization settings are modified, or when optimization has been cancelled).

To cancel optimization:

Click the Stop button next to the progress bar at the bottom of the image window.


Using named optimization settings
Optimizing files and choosing options

Using named optimization settings

You can save optimization settings as a named set and apply the settings when working with other images. Settings that you save appear in the Settings pop-up menu in the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady). Photoshop and ImageReady also include several predefined named settings.

When you adjust optimization settings so that they no longer match a named set, the Settings menu displays the term “Unnamed.” In ImageReady, when you select multiple slices with different optimization settings, the Settings menu option is blank.

See also:

To save optimization settings

To apply named optimization settings to an image

To edit a named set of optimization settings

To delete named optimization settings


To save optimization settings
Using named optimization settings

To save optimization settings:

1  With desired settings selected in the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), choose Save Settings from the Optimize panel or Optimize palette menu.

2  Name the settings and choose a location where they will be saved. By default, named settings are saved in the Optimize folder inside the Settings folder within the Adobe Photoshop application folder.

3  Click OK.

See also:

To apply named optimization settings to an image

To edit a named set of optimization settings

To delete named optimization settings


To apply named optimization settings to an image
Using named optimization settings

To apply named optimization settings to an image:

With an optimized image displayed, select a named set of optimization settings from the Settings pop-up menu.

See also:

To save optimization settings

To edit a named set of optimization settings

To delete named optimization settings


To edit a named set of optimization settings
Using named optimization settings

To edit a named set of optimization settings:

1  Select the named set from the Settings pop-up menu.

2  Adjust settings in the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady).

(The Settings menu displays the term “Unnamed,” since the settings no longer match a named set.)

3  Choose Save Settings from the Optimize panel/palette menu, and save the settings with the name of the original set.

4  Click OK, and then click Replace.

See also:

To save optimization settings

To apply named optimization settings to an image

To delete named optimization settings


To delete named optimization settings
Using named optimization settings

To delete named optimization settings:

1  In the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select a named set of optimization settings from the Settings pop-up menu.

2  Choose Delete Settings from the Optimize panel/palette menu.

See also:

To save optimization settings

To apply named optimization settings to an image

To edit a named set of optimization settings


Applying optimization settings
Optimizing files and choosing options

Applying optimization settings

To optimize a file for the Web, you open the original file and choose a format and options for the format. You can also optimize an image to match a specified file size. This feature enables you to quickly achieve a desired file size without having to test different optimization settings.

See also:

To optimize an image as a JPEG

To optimize an image as a GIF or PNG-8

To optimize an image as a PNG-24

To optimize a file according to a specified file size


To optimize an image as a JPEG
Applying optimization settings

To optimize an image as a JPEG:

1  Open the original file, and then choose JPEG from the file format menu in the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady).

ImageReady Optimize palette with hidden options shown: A. Settings menu B. File format  C. Quality menu D. Progressive checkbox E. ICC Profile checkbox F. Droplet button G. Optimized checkbox H. Quality slider I. Blur slider J. Matte color

2  Choose an option for specifying image quality:

•   Drag the Quality pop-up slider.

•   Enter a value in the Quality box.

•   Choose an option from the Quality menu.

A higher quality setting preserves more color information but results in larger file sizes. View the JPEG at several quality settings to determine the best balance of quality and file size.

3  To create an enhanced JPEG with a slightly smaller file size, select Optimized.

Note: The Optimized JPEG format is recommended for maximum file compression. However, some older browsers do not support this feature.

4  Select Progressive to create an image that displays progressively in a Web browser. The image will display 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. Selecting Progressive automatically selects Optimized.

Progressive JPEGs require more RAM for viewing, and are not supported by some browsers.

Progressive JPEG partially downloaded, and fully downloaded

5  To apply a blur to the image to smooth rough edges, enter a value for Blur or drag the pop-up slider.

This option blurs pattern artifacts created along sharp edges in the image and creates a smaller file size, but may also reduce image detail. A setting of 0.1 to 0.5 is recommended.

The Blur option applies an effect identical to that of the Gaussian Blur filter.

6  To preserve the ICC profile of the image with the file, select ICC Profile.

(In ImageReady, click the Show Options control ( [image]) on the Optimize palette tab or choose Show Options from the Optimize palette menu to view the ICC Profile option.)

ICC profiles are used by some browsers for color correction. The ICC profile option preserves ICC profiles embedded by Photoshop. The option is only available with images created in Photoshop, in Photoshop file format. For information on ICC profiles, see Photoshop online Help.

7  If the original image contains transparency, select a Matte color to simulate the appearance of background transparency. See Making transparent and matted images.

(In ImageReady, click the Show Options control ( [image]) on the Optimize palette tab or choose Show Options from the Optimize palette menu to view the Matte option.)

8  Click OK (Photoshop) or choose File > Save Optimized (ImageReady) and save the file with the .jpg extension.

See also:

To optimize an image as a GIF or PNG-8

To optimize an image as a PNG-24

To optimize a file according to a specified file size


To optimize an image as a GIF or PNG-8
Applying optimization settings

To optimize an image as a GIF or PNG-8:

1  Open the original file, and then choose GIF or PNG-8 from the file format menu in the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady).

ImageReady Optimize palette GIF options, with hidden options shown: A. Settings menu B. File format C. Color Palette menu D. Dither algorithm menu E. Transparency checkbox F. Interlaced checkbox G. Droplet button H. Lossy slider I. Number of colors J. Dither slider K. Matte color L. Web Snap slider

2  For GIF format only: Drag the Lossy slider or enter a value to allow the compression process to remove pixels from the image (and reduce file size).

You can often apply a Lossy value of 5%–10%, and sometimes up to 50%, without degrading the image. File size can often be reduced 5%–40% using the Lossy option. See Previewing and controlling application dither.

Note: You cannot use the Lossy option with the Interlaced option, or with Noise or Pattern Dither algorithms.

3  Select a color palette, as described in Selecting a color table option.

4  To choose a specific number of colors, select a number from the Colors pop-up menu, enter a value in the number field or use the arrows to change the number of colors.

This option specifies the maximum number of colors. If the image contains fewer colors than the number specified, the color palette will contain only the number of colors in the image.

5  Select Interlaced to create an image that displays as low-resolution versions in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and assures viewers that downloading is in progress. However, interlacing also increases file size.

(In ImageReady, click the Show Options control ( [image]) on the Optimize palette tab or choose Show Options from the Optimize palette menu to view the Interlaced option.)

Interlaced GIF partially downloaded; and fully downloaded

6  Select a Dither option and amount. For information on dither, see Previewing and controlling dithering.

7  If the image contains transparency, choose an option for preserving or filling transparent pixels:

•   Select Transparency (the default setting) to preserve fully transparent pixels as transparent. (Partially transparent pixels are filled with the Matte color or converted to fully transparent or fully opaque pixels, depending on the Matte option you choose.)

•   Deselect Transparency to fill fully and partially transparent pixels with the Matte color.

Note: The original image must contain transparent pixels in order for you to create transparency in the optimized image. You can use the magic eraser tool ( [image]) to easily create transparency in a document. In Photoshop, you can also use the background eraser tool ( [image]).

(In ImageReady, click the Show Options control ( [image]) on the Optimize palette tab or choose Show Options from the Optimize palette menu to view the Transparency option.)

For more information on setting transparency and Matte color, see Making transparent and matted images.

8  To automatically shift colors to the closest Web palette equivalents (and prevent the colors from dithering in a browser), drag the Web Snap slider or enter a value to specify a tolerance level for colors to be shifted. A higher value shifts more colors. See Previewing and controlling dithering.

(In ImageReady, click the Show Options control ( [image]) on the Optimize palette tab or choose Show Options from the Optimize palette menu to view the Web Snap option.)

9  Click OK (Photoshop) or choose File > Save Optimized (ImageReady) and save the file with the .gif or .png extension.

See also:

To optimize an image as a JPEG

To optimize an image as a PNG-24

To optimize a file according to a specified file size


To optimize an image as a PNG-24
Applying optimization settings

To optimize an image as a PNG-24:

1  Open the original file, and then choose PNG-24 from the file format menu in the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady).

ImageReady Optimize palette PNG-24 options:A. Settings menu B. File format C. Transparency checkbox D. Droplet button E. Interlaced checkbox F. Matte color

2  Select Interlaced to create an image that displays low-resolution versions in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter, and assures viewers that downloading is in progress.

3  If the image contains transparency, choose an option for preserving or filling transparent pixels:

•   Select Transparency (the default setting) to preserve transparent pixels as transparent.

•   Deselect Transparency to fill transparent pixels with the Matte color.

4  Click OK (Photoshop) or choose File > Save Optimized (ImageReady) and save the file with the .png extension.

See also:

To optimize an image as a JPEG

To optimize an image as a GIF or PNG-8

To optimize a file according to a specified file size


To optimize a file according to a specified file size
Applying optimization settings

To optimize a file according to a specified file size:

1  In the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select Optimize to File Size from the Optimize panel or Optimize palette menu.

2  Specify a Start With option:

•   Current Settings to use current optimization settings.

•   Auto Select GIF/JPEG to automatically generate a GIF or JPEG. (Photoshop or ImageReady selects GIF or JPEG format, depending on an analysis of colors in the image.)

3  Enter a value for file size.

4  Click OK.

See also:

To optimize an image as a JPEG

To optimize an image as a GIF or PNG-8

To optimize an image as a PNG-24


Resizing the image
Optimizing files and choosing options

Resizing the image

You can resize the image to specified pixel dimensions or to a percentage of the original size. In ImageReady, you can select options to resize irregularly sized images during batch processing.

Changing the pixel dimensions (and therefore display size) of an image is referred to as resampling. When you downsample (or decrease the number of pixels), information is deleted from the image. When you resample up (or increase the number of pixels), new pixel information is added based on color values of existing pixels. You specify an interpolation method to determine how pixels are added or deleted. Keep in mind that changing pixel dimensions affects not only the size of an image on-screen, but also its image quality.

To change the pixel dimensions of an image:

1  Choose a method to view Image Size commands:

•   In Photoshop, choose File > Save for Web and click the Image Size tab.

•   In ImageReady, choose Image > Image Size.

Note: In Photoshop, you can also resize an image by choosing Image > Image Size. However, to resize an optimized version of an image only (and not the original version), you must use the commands in the Save for Web dialog box.

2  To maintain the current proportions of pixel width to pixel height, select Constrain Proportions.

3  Constrain the image proportions by selecting:

•   Width to constrain proportions using the new width value.

•   Height to constrain proportions using the new height value.

•   Either (ImageReady) to constrain proportions using either the new width value or the new height value. Use the Either option when resizing a batch of images of different sizes or proportions that need to fit into a standard new image size.

•   Percent to constrain proportions while resizing the image by a percent value.

4  Under New Size, enter values for Width, Height, or Percent.

The New Size text field displays the new file size for the image.

5  Under Quality, select an interpolation method:

•   Jagged (Nearest Neighbor) for the faster, but less precise, method. This method is recommended for use with illustrations containing non-anti-aliased edges, to preserve hard edges and produce a smaller file.

•   Smooth (Bicubic) for the slower, but more precise, method, resulting in smoother tonal gradations.

6  In ImageReady, select Do Not Enlarge to prevent images that are smaller than the new dimensions from being sized up. This option is useful when resizing a batch of irregularly sized images.

7  Click Apply (Photoshop) or OK (ImageReady).


Selecting a color table option
Optimizing files and choosing options

Selecting a color table option

Both the GIF and PNG-8 formats allow you to determine the color table for the image. This color table then appears in the Color Table panel (Photoshop) or the Color Table palette (ImageReady) when that image is selected, and you can make changes to these colors. The color table for an 8-bit image has a maximum of 256 colors.

See also:

Perceptual

Selective

Adaptive

Web

Custom

Mac OS

Windows


Perceptual
Selecting a color table option

Perceptual

Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.

See also:

Selective

Adaptive

Web

Custom

Mac OS

Windows


Selective
Selecting a color table option

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.

See also:

Perceptual

Adaptive

Web

Custom

Mac OS

Windows


Adaptive
Selecting a color table option

Adaptive

Creates a custom color table by sampling colors from the spectrum appearing most commonly 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.

See also:

Perceptual

Selective

Web

Custom

Mac OS

Windows


Web
Selecting a color table option

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. See Previewing and controlling dithering.

See also:

Perceptual

Selective

Adaptive

Custom

Mac OS

Windows


Custom
Selecting a color table option

Custom

Preserves the current perceptual, selective, or adaptive color table as a fixed palette that does not update with changes to the image.

See also:

Perceptual

Selective

Adaptive

Web

Mac OS

Windows


Mac OS
Selecting a color table option

Mac OS

Uses the Mac OS system’s default 8-bit (256-color) color table, which is based on a uniform sampling of RGB colors.

See also:

Perceptual

Selective

Adaptive

Web

Custom

Windows


Windows
Selecting a color table option

Windows

Uses the Windows system’s default 8-bit (256-color) color table, which is based on a uniform sampling of RGB colors.

Other color tables appear in the menu if you have saved them previously. See Loading and saving color tables.

See also:

Perceptual

Selective

Adaptive

Web

Custom

Mac OS


Working with the color table
Optimizing Images for the Web

Working with the color table

The color table displays all colors in a GIF or PNG-8 image. You use the Color Table panel in the Save for Web dialog box (Photoshop) or the Color Table palette (ImageReady) to work with the color table.

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.

The color table also displays colors for original images that use indexed color. In ImageReady, if you select multiple slices that use different color tables, the color table is empty, but displays the message “Mixed.”

Note: If your image has fewer colors than the total number specified in the color palette, unused colors are removed from the color table to reduce file size.

A. Web-safe or Web-shifted Color B. Locked Color C. Selected Color D. Edited color E. Web Shift button F. Lock Color button G. New Color button H. Trash button

See also:

Sorting the color table

Adding new colors

Including black and white in a color table (ImageReady)

Selecting colors

Editing colors

Locking colors

Deleting colors from the color table

Loading and saving color tables


Sorting the color table
Working with the color table

Sorting the color table

You can sort colors in the color table by hue, luminance, or popularity, making it easier to see an image’s color range and locate particular colors.

To sort a color table:

Choose a sorting order in the Color Table panel menu (Photoshop) or Color Table palette menu (ImageReady):

•   Sort by Hue. Neutral colors are assigned a hue of 0, and located with the reds.

•   Sort by Luminance, or by the lightness or brightness of a color.

•   Sort by Popularity, or by the colors’ frequency of occurrence in the image.

•   Unsorted. Restores the original sorting order.


Adding new colors
Working with the color table

Adding new colors

You can add colors that were left out in building the color table. If the color table already contains the maximum number of colors (256, or 255 with transparency), you cannot add a new color.

To add a new color:

1  Select the eyedropper tool ( [image]) in the Save for Web dialog box (Photoshop) or the toolbox (ImageReady).

2  Choose a method for selecting a color:

•   Click in the image.

•    Click in the image, hold the mouse down, and drag anywhere on the desktop (ImageReady). You can use this option to select a color displayed in another application, such as a color in a Web page displayed in a browser.

The color appears in the eyedropper color sample box in the Save for Web dialog box (Photoshop) or the foreground color swatch in the toolbox (ImageReady).

3  Add the new color:

•   Click the New Color button ( [image]) in the Color Table panel in the Save for Web dialog box (Photoshop) or the Color Table palette (ImageReady).

•   Select New Color from the Color Table panel menu (Photoshop) or Color Table palette menu (ImageReady). To view the menu, click the triangle in the upper right corner of the Color Table panel/palette.

The new color appears in the Color Table panel (Photoshop) or Color Table palette (ImageReady). A small white square with a red center appears in the lower right corner, indicating that the color is locked. See Locking colors.

Selecting color in an image; and adding color using New Color button.


Including black and white in a color table (ImageReady)
Working with the color table

Including black and white in a color table (ImageReady)

In ImageReady, you can add black and white to the color table when the image does not include these colors. Including these colors is useful when preparing files for multimedia authoring applications, such as Adobe After Effects(R).

To add black or white to the color table for an image:

1  In the Color palette, select the black or white color sample at the right end of the color ramp. The selected color becomes the foreground color.

2  In the Color Table palette, select the New Color button ( [image]). The selected color is added to the Color Table palette. A small white square with a red center appears in the lower right corner, indicating that the color is locked. See Locking colors.


Selecting colors
Working with the color table

Selecting colors

You select colors directly in the image or in the Color Table panel (Photoshop) or Color Table palette (ImageReady) to make changes to the colors.

See also:

To select a color from the original or optimized image

To select a color directly in the Color Table panel/palette

To select all colors

To select all colors in a selection in the image (ImageReady)

To select all Web-safe colors in the image

To select all non-Web-safe colors in the image

To view selected colors in an image (ImageReady)

To deselect all colors


To select a color from the original or optimized image
Selecting colors

To select a color from the original or optimized image:

1  Select the eyedropper tool ( [image]) in the Save for Web dialog box (Photoshop) or the toolbox (ImageReady).

2  Click a color in the image. A white border appears around that color in the Color Table panel (Photoshop) or Color Table palette (ImageReady). In ImageReady, shift-click to select additional colors.

See also:

To select a color directly in the Color Table panel/palette

To select all colors

To select all colors in a selection in the image (ImageReady)

To select all Web-safe colors in the image

To select all non-Web-safe colors in the image

To view selected colors in an image (ImageReady)

To deselect all colors


To select a color directly in the Color Table panel/palette
Selecting colors

To select a color directly in the Color Table panel/palette:

Click the color in the Color Table panel (Photoshop) or Color Table palette (ImageReady).

To select a contiguous group of colors, press Shift and click another color. All colors in the rows between the first and second selected colors are selected.

To select a discontiguous group of colors, press Ctrl (Windows) or Command (Mac OS) and click each color that you want to select.

See also:

To select a color from the original or optimized image

To select all colors

To select all colors in a selection in the image (ImageReady)

To select all Web-safe colors in the image

To select all non-Web-safe colors in the image

To view selected colors in an image (ImageReady)

To deselect all colors


To select all colors
Selecting colors

To select all colors:

Choose Select All Colors from the Color Table panel menu (Photoshop) or Color Table palette menu (ImageReady).

See also:

To select a color from the original or optimized image

To select a color directly in the Color Table panel/palette

To select all colors in a selection in the image (ImageReady)

To select all Web-safe colors in the image

To select all non-Web-safe colors in the image

To view selected colors in an image (ImageReady)

To deselect all colors


To select all colors in a selection in the image (ImageReady)
Selecting colors

To select all colors in a selection in the image (ImageReady):

1  Make a selection in the image using the selection tools ( [image], [image], [image]) or the Select menu commands.

2  Choose Select All From Selection from the Color Table palette menu.

See also:

To select a color from the original or optimized image

To select a color directly in the Color Table panel/palette

To select all colors

To select all Web-safe colors in the image

To select all non-Web-safe colors in the image

To view selected colors in an image (ImageReady)

To deselect all colors


To select all Web-safe colors in the image
Selecting colors

To select all Web-safe colors in the image:

Choose Select All Web Safe Colors from the Color Table panel menu (Photoshop) or the Color Table palette menu (ImageReady).

Note: The optimized image must contain at least one Web-safe color in order to select Web-safe colors.

See also:

To select a color from the original or optimized image

To select a color directly in the Color Table panel/palette

To select all colors

To select all colors in a selection in the image (ImageReady)

To select all non-Web-safe colors in the image

To view selected colors in an image (ImageReady)

To deselect all colors


To select all non-Web-safe colors in the image
Selecting colors

To select all non-Web-safe colors in the image:

Choose Select All Non-Web Safe Colors from the Color Table panel menu (Photoshop) or the Color Table palette menu (ImageReady).

Note: The optimized image must contain at least one non-Web-safe color in order to select non-Web-safe colors.

See also:

To select a color from the original or optimized image

To select a color directly in the Color Table panel/palette

To select all colors

To select all colors in a selection in the image (ImageReady)

To select all Web-safe colors in the image

To view selected colors in an image (ImageReady)

To deselect all colors


To view selected colors in an image (ImageReady)
Selecting colors

To view selected colors in an image (ImageReady):

In an optimized view, click and hold a selected color in the Color Table palette to temporarily invert the color in the image, enabling you to see which areas of the image contain the color.

To view a contiguous group of colors, press Shift and click and hold another color. All colors in the rows between the first and second selected colors are selected.

To view a discontiguous group of colors, press Ctrl (Windows) or Command (Mac OS) and click each color that you want to select, and hold the mouse button down on the last color in the group.

See also:

To select a color from the original or optimized image

To select a color directly in the Color Table panel/palette

To select all colors

To select all colors in a selection in the image (ImageReady)

To select all Web-safe colors in the image

To select all non-Web-safe colors in the image

To deselect all colors


To deselect all colors
Selecting colors

To deselect all colors:

Choose Deselect All Colors from the Color Table panel menu (Photoshop) or Color Table palette menu (ImageReady).

See also:

To select a color from the original or optimized image

To select a color directly in the Color Table panel/palette

To select all colors

To select all colors in a selection in the image (ImageReady)

To select all Web-safe colors in the image

To select all non-Web-safe colors in the image

To view selected colors in an image (ImageReady)


Editing colors
Working with the color table

Editing colors

You can change a selected color in the Color Table panel (Photoshop) or Color Table palette (ImageReady) to any other RGB color value. When you regenerate the optimized image, the selected color will be changed to the new color wherever it appears in the image.

To edit a color:

1  Double-click the color in the Color Table panel (Photoshop) or Color Table palette (ImageReady) to display the default color picker.

2  Select a color.

A small black diamond appears in the center of each edited color.

Edited color in the Color Table palette


Locking colors
Working with the color table

Locking colors

You can lock selected colors in the Color Table panel (Photoshop) or Color Table palette (ImageReady) to prevent them from being dropped when the number of colors is reduced and to prevent them from dithering in the application. For information on protecting colors from browser dithering, see Previewing browser dither.

Note: Locking colors does not prevent them from dithering in a browser.

See also:

To lock a color

To unlock a color


To lock a color
Locking colors

To lock a color:

1  With a GIF or PNG-8 image displayed, select one or more colors in the Color Table panel (Photoshop) or Color Table palette (ImageReady), as described in Selecting colors.

2  Lock the color:

•   Click the Lock button ( [image]).

•   Choose Lock/Unlock Selected Colors from the Color Table panel menu (Photoshop) or Color Table palette menu (ImageReady).

A white square with a red center appears in the lower right corner of each locked color.

Note: If the selected colors include both locked and unlocked colors, all colors will be locked.

Locked color in the Color Table palette

See also:

To unlock a color


To unlock a color
Locking colors

To unlock a color:

1  Click the locked color to select it.

2  Unlock the color:

•   Click the Lock button ( [image]).

•   Choose Lock/Unlock Selected Colors from the Color Table panel menu (Photoshop) or Color Table palette menu (ImageReady).

The white square disappears from the color swatch.

See also:

To lock a color


Deleting colors from the color table
Working with the color table

Deleting colors from the color table

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 palette type is automatically changed to Custom. This is because the Adaptive, Perceptual, and Selective palettes would 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.)

To delete selected colors:

1  With a GIF or PNG-8 image displayed, select one or more colors from the Color Table panel (Photoshop) or Color Table palette (ImageReady), as described in Selecting colors.

2  Delete the color:

•   Click on the Trash button.

•   Choose Delete Color from the Color Table panel/palette menu.

Deleting a color changes the color palette type to Custom to prevent the color from being added back to the palette if you reoptimize the image. To return to an Adaptive, Perceptual, or Selective palette, select the palette from the color palette menu. See Selecting a color table option.


Loading and saving color tables
Working with the color table

Loading and saving color tables

You can save color tables from optimized images to use with other images and 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.

See also:

To save a color table

To load a color table


To save a color table
Loading and saving color tables

To save a color table:

1  With a GIF or PNG-8 image displayed, select Save Color Table from the Color Table panel menu (Photoshop) or Color Table palette menu (ImageReady).

2  Name 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 Color Tables folder, inside the Settings folder in the Adobe Photoshop folder.

3  Click Save.

See also:

To load a color table


To load a color table
Loading and saving color tables

To load a color table:

1  With a GIF or PNG-8 image displayed, select Load Color Table in the Color Table panel menu (Photoshop) or Color Table palette menu (ImageReady).

2  Navigate to a file containing the color table you want to load–either an Adobe Color Table (.act) file, or a GIF file (to load the file’s embedded color table).

3  Click Open.

See also:

To save a color table


Using master palettes (ImageReady)
Optimizing Images for the Web

Using master palettes (ImageReady)

You can create a master palette to use with a group of GIF or PNG-8 images that will be placed on a CD-ROM or other multimedia storage medium. When you include the master palette with a batch of images, all images display using the same colors.

To build a master palette, you add colors from a set of images and then build and save the master palette. To create a master palette for a batch of images, you add colors to the palette from other optimized images.

To create and apply a master palette:

1  With an image displayed, choose Image > Master Palette > Clear Master Palette (if available). Clearing the master palette ensures that colors from previous images are not included in the new palette.

2  Open an image whose colors you want to include in a master palette.

3  Choose Image > Master Palette > Add To Master Palette. All color information for the current image is added to the master palette.

4  Repeat steps 2 and 3 for all images whose colors you want to include in the master palette.

5  In the Optimize palette, select optimization settings for the master palette.

6  Choose Image > Master Palette > Build Master Palette to create a new color table from the color information of images used in steps 2, 3, and 4.

7  Choose Image > Master Palette > Save Master Palette.

8  Name the master palette and choose a location where it will be saved. By default, the master palette 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 master palette in the Color Tables folder, inside the Settings folder in the Adobe Photoshop folder.

9  Click Save.

10  To apply the master palette to the image or images for which it was created, open the image or images and select the master palette:

•   If the master palette appears in the Color Palette menu in the Optimize palette, select the master palette from this menu. (The Color Palette menu includes all palettes saved in the Palettes folder, inside the Settings folder in the Adobe Photoshop folder.)

•   Load the master palette, as described in Loading and saving color tables.


Working with hexadecimal values for color
Optimizing Images for the Web

Working with hexadecimal values for color

In Photoshop and ImageReady, you can view colors as hexadecimal values in the Info palette. In addition, you can copy colors as hexadecimal values to the clipboard and paste the colors into an HTML document.

See also:

Viewing hexadecimal values for colors in the Info palette

Copying colors as hexadecimal values


Viewing hexadecimal values for colors in the Info palette
Working with hexadecimal values for color

Viewing hexadecimal values for colors in the Info palette

In Photoshop, hexadecimal values for colors are displayed in the Info palette when you select Web Color Mode for one or both color readouts. In ImageReady, hexadecimal values for colors are displayed automatically in the right side of the Info palette, next to RGB color values. The Photoshop and ImageReady Info palettes also display other information, depending on the tool being used.

For more information, see “Using the Info palette” in Chapter 2 of the Photoshop 5.0 printed guide or in “Looking at the Work Area” of Photoshop 5.0 online Help. A similar topic also can be found in ImageReady online Help.

To view hexadecimal color values in the Photoshop Info palette:

1  Choose Window > Show Info or click the Info palette tab to view the palette.

2  Choose Palette Options from the palette menu.

3  Under First Color Readout, Second Color Readout, or both, choose Web Color from the Mode menu.

4  Click OK.

The Info palette displays the hexadecimal equivalents for the RGB values of the color beneath the pointer in the image.

Selecting Web Color mode for Photoshop Info palette, and hexadecimal color values in palette

Hexadecimal color values in ImageReady Info palette


Copying colors as hexadecimal values
Working with hexadecimal values for color

Copying colors as hexadecimal values

You can copy colors as hexadecimal values from files in Photoshop or ImageReady, using the context menu with the eyedropper tool, or using menu commands. In Photoshop, you copy a color as a hexadecimal value while in the main work area (not the Save for Web dialog box).

See also:

To copy a color as a hexadecimal value using the eyedropper tool

To copy a color as a hexadecimal value using menu commands

To copy a color as a hexadecimal value by dragging (ImageReady)


To copy a color as a hexadecimal value using the eyedropper tool
Copying colors as hexadecimal values

To copy a color as a hexadecimal value using the eyedropper tool:

1  Select the eyedropper tool ( [image]) in the toolbox.

2  Select a color to copy:

•   In Photoshop, right-click (Windows) or Control+click (Mac OS) a color in the image to select the color and view the eyedropper tool context menu.

•   In ImageReady, click the color in the image which you want to copy. The color you click becomes the foreground color. With the eyedropper tool still over the image, right-click (Windows) or Control+click (Mac OS) to view the eyedropper tool context menu.

3  Choose Copy Color as HTML (Photoshop) or Copy Foreground Color as HTML (ImageReady) from the eyedropper tool context menu.

The selected color is copied to the clipboard as a hexadecimal value. To paste the color into an HTML file, choose Edit > Paste with the HTML file displayed in the destination application.

See also:

To copy a color as a hexadecimal value using menu commands

To copy a color as a hexadecimal value by dragging (ImageReady)


To copy a color as a hexadecimal value using menu commands
Copying colors as hexadecimal values

To copy a color as a hexadecimal value using menu commands:

1  Select a color to copy.

2  Copy the color:

•   In Photoshop, choose Copy Color As HTML from the Color palette menu.

•   In ImageReady, choose Edit > Copy Foreground Color as HTML.

The foreground color is copied to the clipboard as a hexadecimal value. To paste the color into an HTML file, open a destination application and choose Copy > Paste with the HTML file displayed.

See also:

To copy a color as a hexadecimal value using the eyedropper tool

To copy a color as a hexadecimal value by dragging (ImageReady)


To copy a color as a hexadecimal value by dragging (ImageReady)
Copying colors as hexadecimal values

To copy a color as a hexadecimal value by dragging (ImageReady):

Drag the Foreground Color from the toolbox or a selected color from the Color Table palette or the Swatches palette into the HTML file in the destination application.

See also:

To copy a color as a hexadecimal value using the eyedropper tool

To copy a color as a hexadecimal value using menu commands


Making transparent and matted images
Optimizing Images for the Web

Making transparent and matted images

Transparency makes it possible to place a non-rectangular graphic object against the background of a Web page. Background transparency, supported by GIF and PNG formats, preserves transparent pixels in the image. These pixels blend with the Web page background in a browser.

Background matting, supported by GIF, PNG, and JPEG formats, simulates transparency by filling or blending transparent pixels with a matte color which you choose to match the Web page background on which the image will be placed. Background matting works only if the Web page background will be a solid color, and if you know what that color will be.

The original image must contain transparent pixels in order for you to create background transparency or background matting in the optimized image. You can create transparency when you create a new layer.

Note: You can use the magic eraser tool to easily create transparency in a document. In Photoshop, you can also use the background eraser tool.

To create background transparency in a GIF or PNG image:

In the Optimize panel in the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select Transparency. The option is selected by default.

Fully transparent pixels in the image are preserved as transparent. If the image is anti-aliased, you can matte partially transparent pixels to blend with a Web page background color. You can also create hard-edged transparency to prevent the halo effect that results if an anti-aliased image is matted on a color that differs from the image’s original background color. If the image contains alpha transparency, you can create multilevel transparency to preserve up to 256 levels of transparency (in PNG-24 format only).

See also:

Creating background matting in GIF and PNG images

Creating hard-edged transparency in GIF and PNG-8 images

Creating background matting in JPEG images

Preserving multilevel transparency inPNG-24 images


Creating background matting in GIF and PNG images
Making transparent and matted images

Creating background matting in GIF and PNG images

When you know the Web page background color on which an image will be displayed, you can use the matting feature to fill or blend transparent pixels with a matte color that matches the Web page background. The Web page background must be a solid color, not a pattern.

You can matte GIF and PNG images in two ways. You can choose to preserve fully transparent pixels as transparent, and matte only the partially transparent pixels, such as those at the edge of an anti-aliased image. When the image is placed on a Web page, the Web background shows through the transparent pixels, and the edges of the image blend with the background. This feature prevents the halo effect that results when an anti-aliased image is placed on a background color that differs from the image’s original background. This feature also prevents the jagged edges that result with GIF hard-edged transparency.

You can also deselect Transparency to fill all transparent pixels with the matte color. Fully transparent pixels are filled with the matte color, and partially transparent pixels are blended with the matte color.

GIF with a Matte color Transparency option selected, and with Transparency option deselected.

To create a matted GIF or PNG image:

1  Open or create an image that contains transparency.

2  In the Optimize panel in the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select GIF, PNG-8, or PNG-24 from the format menu.

3  In ImageReady, for GIF or PNG-8 format, select Show Options from the Optimize palette menu.

4  Choose whether to preserve transparency:

•   Select Transparency to preserve fully transparent pixels as transparent.

•   Deselect Transparency to fill fully transparent pixels with the matte color.

5  Select a color from the Matte pop-up menu:

•    In Photoshop, select None, Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other (using the color picker).

•   In ImageReady, select None, Foreground Color, Background Color, or Other (using the color picker), or select a color from the Matte pop-up palette.


Creating hard-edged transparency in GIF and PNG-8 images
Making transparent and matted images

Creating hard-edged transparency in GIF and PNG-8 images

When you apply background matting to images that include anti-aliasing, a halo effect can result when the matte color is different from the original background color of the image. Anti-aliasing creates partially transparent pixels around the edges of the image to blend the image with the original background color.

When working with GIF or PNG-8 files, you can create hard-edged transparency, in which all pixels that are more than 50% transparent in the original image are fully transparent in the optimized image, and all pixels that are more than 50% opaque in the original image are fully opaque in the optimized image. Hard-edged transparency prevents the halo effect. However, hard-edged transparency can cause jagged edges in the image. To prevent jagged edges, apply background matting to the image. See Creating background matting in GIF and PNG images.

GIF with hard-edged transparency, and displayed in browser. (Inset at 300% magnification)

To create hard-edged transparency in a GIF or PNG-8:

1  Open or create an image that contains transparency.

2  In the Optimize panel in the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select GIF or PNG-8 from the file format menu.

3  Select Transparency.

4  Select None from the Matte pop-up menu to make all pixels with greater than 50% transparency into fully transparent pixels, and all pixels with 50% or less transparency into fully opaque pixels.


Creating background matting in JPEG images
Making transparent and matted images

Creating background matting in JPEG images

When creating a JPEG from an original image that contains layer transparency, you must matte the image against a matte color. Since the JPEG format does not support transparency, blending with a matte color is the only way to create the appearance of background transparency in a JPEG. Fully transparent pixels are filled with the matte color, and partially transparent pixels are blended with the matte color. When the JPEG is placed on a Web page with a background that matches the matte color, the image appears to blend with the Web page background.

Original image with layer transparency and optimized JPEG matted on white.

To create a matted JPEG image:

1  Open or create an image that contains transparency.

2  In the Optimize panel in the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select JPEG from the format menu.

3  Select a color from the Matte pop-up menu:

•    In Photoshop, select None, Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other (using the color picker).

•   In ImageReady, select None, Foreground Color, Background Color, or Other (using the color picker), or select a color from the Matte pop-up palette.


Preserving multilevel transparency inPNG-24 images
Making transparent and matted images

Preserving multilevel transparency inPNG-24 images

When you create a PNG-24 image, you can preserve variable transparency, such as that in an anti-aliased image on a transparent layer, using a feature called alpha transparency. Alpha transparency preserves up to 256 levels of transparency in a PNG image. When the PNG is displayed in a browser using a plug-in that supports alpha transparency, the PNG displays multilevel transparency, and the image’s edges will blend with any Web background.

To create variable transparency in a PNG-24 image:

1  Open or create an image that contains transparency.

2  In the Optimize panel in the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady), select PNG-24 from the format menu.

3  Select Transparency.

4  Select None from the Matte menu.


Previewing and controlling dithering
Optimizing Images for the Web

Previewing and controlling dithering

Most images viewed on the Web are created using 24-bit color displays (millions of colors mode), but many Web browsers are used on computers using only 8-bit color displays (256-color mode), so that Web images often contain colors not available to many Web browsers. Computers use a technique called dithering to simulate colors not available in the color display system. Dithering creates adjacent pixels of different colors to give the appearance of a third color. For example, a red color and a yellow color may dither in a mosaic pattern to produce the illusion of an orange color that does not appear in the color palette.

GIF with 100% dither and with 0% dither

When optimizing images, keep in mind that two kinds of dithering can occur:

•   Application dither occurs in GIF and PNG-8 images when Photoshop or ImageReady attempts to simulate colors that appear in the original image but not in the color palette you specify for the optimized image. You can control the application dither that Photoshop or ImageReady applies, to select a dithering pattern and a range of colors to be dithered.

You can choose a dithering pattern to be applied to the image. In addition, you can create customized dither patterns for GIF or PNG-8 images using the DitherBox filter. (Dithering is not recommended for JPEG or PNG-24 images.) For more information, see Creating and applying custom dither patterns.

•   Browser dither occurs when a Web browser using an 8-bit color display (256-color mode) attempts to simulate colors that appear in an optimized image but not in the color palette used by the browser. Browser dither can occur with GIF, PNG, or JPEG images and can occur in addition to application dither in GIF or PNG-8 images. You can control the amount of browser dither by shifting selected colors in the image to Web-safe colors. Options in the color picker, the Color palette in Photoshop or ImageReady, and the Color Table panel (Photoshop) or the Color Table palette (ImageReady) let you specify Web-safe colors when choosing a color.

See also:

Previewing and controlling application dither

Previewing browser dither

Minimizing browser dither

Creating and applying custom dither patterns


Previewing and controlling application dither
Previewing and controlling dithering

Previewing and controlling application dither

You can preview application dither in GIF and PNG-8 images. The Dither Algorithm pop-up menu lets you choose a dithering method for the image. The Dither percentage slider lets you control the range of colors simulated by dithering. 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 application dither that provides the color detail you require.

Images with primarily solid colors may work well with Dither set to none. Images with continuous-tone color (especially color gradients) may require dithering to prevent color banding.

See also:

To choose a dithering method

To specify the amount of application dither applied


To choose a dithering method
Previewing and controlling application dither

To choose a dithering method:

Select an option from the Dithering Algorithm pop-up menu:

•   No Dither applies no application dither to the image.

•   Pattern applies a halftone-like square pattern to simulate any colors not in the color table.

•   Diffusion applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels. In ImageReady, 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.

•    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.

See also:

To specify the amount of application dither applied


To specify the amount of application dither applied
Previewing and controlling application dither

To specify the amount of application dither applied:

1  Choose a dithering method from the Dither algorithm menu. To specify no dithering for the image, select No Dither from the menu.

2  If you selected any option other than No Dither in step 1, drag the Dither slider or enter a value to select a dithering percentage.

Dither algorithm menu and dither pop-up slider

See also:

To choose a dithering method


Previewing browser dither
Previewing and controlling dithering

Previewing browser dither

You can preview browser dither directly in Photoshop or ImageReady, or in a browser that uses an 8-bit color display (256-color mode).

See also:

To preview browser dither

To preview browser dither in a browser


To preview browser dither
Previewing browser dither

To preview browser dither:

With an optimized file displayed, preview dither in the respective application:

•   In Photoshop, choose Browser Dither from the document panel menu in the Save for Web dialog box. (To view the menu, click on the triangle by the upper right corner of the document panel.)

•    In ImageReady, choose View > Preview > Browser Dither. A check mark next to the command indicates that it is turned on. Choose View > Preview > Browser Dither again to turn the command off.

See also:

To preview browser dither in a browser


To preview browser dither in a browser
Previewing browser dither

To preview browser dither in a browser:

1  Set your computer’s color display to 8-bit color (256 colors). See your computer operating system’s documentation for information on changing the color display.

2  Do one of the following:

•   Launch your browser and open an optimized image directly in the browser.

•   In ImageReady, with an optimized image displayed, choose File > Preview In and choose a browser in which to preview the image.

See also:

To preview browser dither


Minimizing browser dither
Previewing and controlling dithering

Minimizing browser dither

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 at least 256 colors.

See also:

To shift a single color to its closest Web palette equivalent

To shift a group of selected colors to the closest Web palette equivalents

To select a Web-safe color using the Adobe color picker

To select a Web-safe color using the Color palette

To revert Web-shifted colors to their original colors

To specify tolerance for shifting colors automatically to the closest Web palette equivalents


To shift a single color to its closest Web palette equivalent
Minimizing browser dither

To shift a single color to its closest Web palette equivalent:

1  With an optimized image displayed, use the eyedropper tool ( [image]) in the Save for Web dialog box (Photoshop) or the toolbox (ImageReady) to select a single color. Alternatively, click a color in the Color Table panel (Photoshop) or Color Table palette (ImageReady).

2  In the Color Table panel/palette, click the Web Shift button ( [image]) to shift the color.

A small white diamond appears in the center of a Web-shifted color and in all Web-safe colors.

Web-safe color with diamond highlight

See also:

To shift a group of selected colors to the closest Web palette equivalents

To select a Web-safe color using the Adobe color picker

To select a Web-safe color using the Color palette

To revert Web-shifted colors to their original colors

To specify tolerance for shifting colors automatically to the closest Web palette equivalents


To shift a group of selected colors to the closest Web palette equivalents
Minimizing browser dither

To shift a group of selected colors to the closest Web palette equivalents:

1  With an optimized image displayed, select colors in the Color Table panel (Photoshop) or Color Table palette (ImageReady), as described in Selecting colors.

2  Click the Web Shift button or choose Web Shift/Unshift Selected Colors from the Color Table panel/palette menu.

A small white diamond appears in the center of selected colors that have been Web-shifted (and in all Web-safe colors). If the selection includes both shifted and unshifted colors, all colors in the selection become shifted colors.

See also:

To shift a single color to its closest Web palette equivalent

To select a Web-safe color using the Adobe color picker

To select a Web-safe color using the Color palette

To revert Web-shifted colors to their original colors

To specify tolerance for shifting colors automatically to the closest Web palette equivalents


To select a Web-safe color using the Adobe color picker
Minimizing browser dither

To select a Web-safe color using the Adobe color picker:

1  Click the foreground color box in the toolbox.

2  Choose a method for selecting a Web-safe color:

•   Click Only Web Colors in the lower left corner of the color picker, and then choose any color in the color picker. Any color you pick with this option selected is Web-safe.

•   Choose a color in the color picker. If you choose a non-Web color, an alert cube appears next to the color rectangle in the color picker. Click the alert cube to select the closest Web color. (If no alert cube appears, the color you chose is Web-safe.)

Non-Web color display in color picker

See also:

To shift a single color to its closest Web palette equivalent

To shift a group of selected colors to the closest Web palette equivalents

To select a Web-safe color using the Color palette

To revert Web-shifted colors to their original colors

To specify tolerance for shifting colors automatically to the closest Web palette equivalents


To select a Web-safe color using the Color palette
Minimizing browser dither

To select a Web-safe color using the Color palette:

1  Click the Color palette tab or choose Window > Show Color to view the Color palette.

2  Choose an option for selecting a Web-safe color:

•   Choose Make Ramp Web Safe from the Color palette menu. With this option selected, any color you choose in the Color palette is Web-safe.

•   Choose Web Color Sliders from the Color palette menu. By default, Web Color Sliders snap to Web-safe colors (indicated by tick marks) when you drag them. (To override Web-safe color selection, Alt-drag (Windows) or Option-drag (Mac OS) the sliders.)

•   Choose Web Color Sliders from the Color palette menu (Photoshop), or choose any Slider option from the Color palette menu (ImageReady). Choose a color in the Color palette. If you choose a non-Web color, an alert cube appears above the color ramp on the left side of the Color palette. Click the alert cube to select the closest Web color. In ImageReady, drag around the alert icon to select other close Web colors. (If no alert cube appears, the color you chose is Web-safe.)

Note: In Photoshop, you must choose Web Color Sliders from the Color palette menu in order to view the Web-safe alert cube. In ImageReady, you can view the alert cube with any color slider option.

See also:

To shift a single color to its closest Web palette equivalent

To shift a group of selected colors to the closest Web palette equivalents

To select a Web-safe color using the Adobe color picker

To revert Web-shifted colors to their original colors

To specify tolerance for shifting colors automatically to the closest Web palette equivalents


To revert Web-shifted colors to their original colors
Minimizing browser dither

To revert Web-shifted colors to their original colors:

Do one of the following:

•   In the Color Table panel (Photoshop) or Color Table palette (ImageReady), select a Web-shifted color and click the Web-shift button or choose Web Shift/Unshift Selected Colors from the palette menu.

•   In the Color Table panel (Photoshop) or Color Table palette (ImageReady), choose Unshift All Colors from the palette menu.

See also:

To shift a single color to its closest Web palette equivalent

To shift a group of selected colors to the closest Web palette equivalents

To select a Web-safe color using the Adobe color picker

To select a Web-safe color using the Color palette

To specify tolerance for shifting colors automatically to the closest Web palette equivalents


To specify tolerance for shifting colors automatically to the closest Web palette equivalents
Minimizing browser dither

To specify tolerance for shifting colors automatically to the closest Web palette equivalents:

In the Optimize panel (Photoshop) or the Optimize palette (ImageReady), enter a value for Web Snap or drag the pop-up slider. A higher value shifts more colors. See Previewing and controlling dithering.

(In ImageReady, click the Show Options control ( [image]) on the Optimize palette tab or choose Show Options from the Optimize palette menu to view the Web Snap option.)

See also:

To shift a single color to its closest Web palette equivalent

To shift a group of selected colors to the closest Web palette equivalents

To select a Web-safe color using the Adobe color picker

To select a Web-safe color using the Color palette

To revert Web-shifted colors to their original colors


Creating and applying custom dither patterns
Previewing and controlling dithering

Creating and applying custom dither patterns

You can use the DitherBox filter to create a custom dither pattern for a selected RGB color. You can then fill a selection or a layer in an image with the dither pattern.

You can save custom dither patterns in groups called collections, and use the dither patterns with other images.

DitherBox uses the current foreground color as the RGB color which will be simulated by the custom dither pattern. When working in the DitherBox filter, you can choose another RGB color on which to base the dither pattern.

A. Collection menu B. Dither pattern grid C. Dither pattern menu D. Color palette menu E. Dither pattern preview F. Arrow button G. RGB color swatch

See also:

To create and apply a custom dither pattern

To apply a previously saved custom dither pattern to an image

To edit dither pattern collections


To create and apply a custom dither pattern
Creating and applying custom dither patterns

To create and apply a custom dither pattern:

1  With an image displayed in the document window (Photoshop) or in Original view (ImageReady), use the eyedropper tool to select a foreground color which you want to simulate with a customized dither pattern. (The foreground color becomes the basis for the custom dither pattern in DitherBox.)

Note: In Photoshop, you create custom dither patterns while in the main Photoshop work area (not in the Save for Web dialog box). Make sure the image is in RGB color mode. See Photoshop online Help for information on color modes.

2  Use the selection tools ( [image], [image], [image]) or the Layers palette to select an area or a layer in the image that you want to fill with the custom dither pattern.

3  Choose Filter > Other > DitherBox.

The RGB swatch in the DitherBox dialog box displays the current foreground color in ImageReady. Double-click on the swatch to open the color picker and select another RGB color on which to base the custom dither pattern.

4  Choose one of the following from the color palette pop-up menu in the DitherBox dialog box:

•   Web Safe Colors to create a dither pattern using colors from the Web palette.

•   Load to load another color palette and create a dither pattern using those colors. Then navigate to the color palette and open it.

Note: If you use non-Web palette colors in a custom dither pattern, the colors will dither in a browser using an 8-bit color display. Using non-Web colors is recommended only for non-Web display.

By default, a new dither pattern you create is saved in the current dither pattern collection.

5  Select a pixel pattern for the custom dither pattern from the pattern list, between 2 and 8 pixels square.

6  Click the arrow button ( [image]) to display the dither pattern that most closely matches the selected RGB color in the Pattern preview box. If no dither patterns are currently saved in a collection in the DitherBox filter, the Pattern preview box displays the dither pattern that matches the RGB color.

7  To edit the custom dither pattern, do one of the following:

•   To add a color to the dither pattern, click a color in the color palette. Then select the pencil tool ( [image]) in the DitherBox dialog box and click in the dither pattern grid to add the color.

•   To delete a color from the dither pattern, select the eraser tool ( [image]) in the DitherBox dialog box and click the color in the dither pattern grid.

The Pattern preview box displays the changes you make to the dither pattern.

8  When you are satisfied with the dither pattern, click Fill to fill the selected area or layer in the current image.

The custom dither pattern is applied to the image, and the DitherBox dialog box closes.

Image with dithered background and background filled with new dither pattern.

See also:

To apply a previously saved custom dither pattern to an image

To edit dither pattern collections


To apply a previously saved custom dither pattern to an image
Creating and applying custom dither patterns

To apply a previously saved custom dither pattern to an image:

1  With an image displayed in Photoshop or ImageReady, select an area or a layer in the image that you want to fill with the custom dither pattern.

2  Choose Filter > Other > DitherBox.

3  Select the collection containing the dither pattern you want to use from the Collection pop-up menu.

4  Select the dither pattern you want to use from the Collection contents list.

5  Click Fill.

The dither pattern is applied to the image, and the DitherBox dialog box closes.

See also:

To create and apply a custom dither pattern

To edit dither pattern collections


To edit dither pattern collections
Creating and applying custom dither patterns

To edit dither pattern collections:

Do one of the following in the DitherBox dialog box:

•   To rename a collection, select the collection from the Collection pop-up menu. Then select Rename from the Collection pop-up menu. Enter a new name for the collection, and click OK.

•   To create a new collection, select New from the Collection pop-up menu. Enter a name for the collection, and click OK.

•   To place a saved custom dither pattern in another collection, select the dither pattern in the Collection contents list. Choose Edit > Copy to place a copy of the pattern in another collection, or Edit > Cut to move the pattern to another collection. Then select the collection where you want to place the dither pattern, and choose Edit > Paste.

•   To delete a collection and all of its contents, select the collection from the Collection pop-up menu, and then select Delete from the Collection pop-up menu.

See also:

To create and apply a custom dither pattern

To apply a previously saved custom dither pattern to an image


Setting Optimization preferences (ImageReady)
Optimizing Images for the Web

Setting Optimization preferences (ImageReady)

You can set preferences in ImageReady to determine the default optimization settings applied in the Optimized, 2-Up and 4-Up views.

See also:

To select the default optimization applied in Optimized view

To select the default optimization applied in 2-Up and 4-Up view


To select the default optimization applied in Optimized view
Setting Optimization preferences (ImageReady)

To select the default optimization applied in Optimized view:

1  Choose File > Preferences > Optimization.

2  Choose an option in the Default Optimization section:

•   Select Use the Previously Used Settings to automatically apply the last used optimization settings.

•   Select Auto Select GIF/JPEG to automatically optimize the image as a GIF or JPEG. ImageReady selects GIF or JPEG based on an analysis of the image.

•   Select Use Named Setting and select an option from the Named Settings pop-up menu to apply that setting.

3  Select other Optimize preferences, or click OK.

See also:

To select the default optimization applied in 2-Up and 4-Up view


To select the default optimization applied in 2-Up and 4-Up view
Setting Optimization preferences (ImageReady)

To select the default optimization applied in 2-Up and 4-Up view:

1  Choose File > Preferences > Optimization.

2  Under 2-Up Settings or 4-Up Settings, specify settings for the 1st, 2nd, 3rd, and 4th panes (3rd and 4th panes apply to 4-Up view only):

•   Select Original to display the original image in the specified pane. (This option is available for the first pane only.)

•   Select Current to display the image with current Optimize palette settings in the specified pane. (This option is available for all panes.)

•   Select Auto to display a smaller optimized version of the image generated automatically by ImageReady, based on the current Optimize palette settings. (This option is available for the second, third, and fourth panes.)

•   Select one of the twelve named settings to display the optimized image with those settings. (This option is available for the second, third, and fourth panes.)

3  Click OK.

See also:

To select the default optimization applied in Optimized view


Automating Optimize palette settings (ImageReady)
Optimizing Images for the Web

Automating Optimize palette settings (ImageReady)

You can save Optimize palette settings for use on individual images or batches of images by creating a droplet, a small application that applies the optimization settings to an image or batch of images that you drag over the droplet icon. You can drag a droplet to the desktop or save it to a location on disk. When you create the droplet you can choose where the images will be saved. When you drag an image over it, the droplet launches ImageReady if the program is not currently running.

Note: You can also drag a droplet onto the ImageReady Actions palette to create an action step, or you can drag a droplet onto a slice to apply the optimization settings to the slice.

See also:

To create a droplet for automating Optimize palette settings

To use a droplet


To create a droplet for automating Optimize palette settings
Automating Optimize palette settings (ImageReady)

To create a droplet for automating Optimize palette settings:

1  With an image displayed in the image window, choose a compression format and desired compression options in the Optimize palette.

2  Create a droplet:

•   Drag the droplet icon ( [image]) from the Optimize palette onto the desktop.

The droplet is named with a brief description of the compression settings, including file format and color palette or quality setting information. You can rename the droplet as you do other desktop icons.

•   Click the droplet icon ( [image]) on the Optimize palette. Name the droplet, choose a location where the droplet will be saved, and click Save.

•   Choose Create Droplet from the Optimize palette menu. Name the droplet, choose a location where the droplet will be saved, and click Save.

You can add a droplet to an action by dragging the droplet onto the Actions palette, to include the optimization settings as part of the action.

See also:

To use a droplet


To use a droplet
Automating Optimize palette settings (ImageReady)

To use a droplet:

1  Drag a single image or a folder of images onto the droplet icon.

As the images are processed, a progress bar appears.

2  Do any of the following to control the processing:

•   To temporarily pause the processing, click Pause. You can then click Resume to continue the processing.

•   To cancel the processing, click Stop.

•   Let the process finish on its own.

See also:

To create a droplet for automating Optimize palette settings


Saving optimized images
Optimizing Images for the Web

Saving optimized images

You can save an optimized image in Photoshop or ImageReady in its current state, and save the HTML file for the image along with the image file. The HTML file includes the image name, the image dimensions, and other code necessary to specify the image for display on a Web site.

You can also specify the current image as an HTML background image, or choose a background to be used with the current image.

You can copy the HTML code for an optimized image to the Clipboard, and paste the HTML code into another HTML document.

In ImageReady, you can choose to save the image file, the HTML file, or files for selected slices only. If the image contains slices or rollovers, the HTML file includes the HTML table and JavaScript code specifying those features.

Note: In ImageReady, when you work in 2-Up or 4-Up view and choose File > Save Optimized to save an optimized image, the selected (highlighted) version of the image is saved.

See also:

To save an optimized file

To specify an HTML background image

To copy HTML code to the Clipboard

Updating HTML code for images (ImageReady)

Setting preferences for saving images and HTML files (ImageReady)

Adding file information


To save an optimized file
Saving optimized images

To save an optimized file:

1  Choose an option for saving the file:

•   Click the OK button in the Save for Web dialog box (Photoshop).

•   Choose File > Save Optimized to save the file in its current state (ImageReady).

•   Choose File > Save Optimized As to save an alternate version of the file with a different filename (ImageReady).

2  Type a filename, and choose a location for the file. The file is saved in the format specified in the Optimize panel of the Save for Web dialog box (Photoshop) or the Optimize palette (ImageReady).

Note: In ImageReady, if you have previously saved the optimized file using the File > Save Optimized command, applying the command again saves the file with the filename and Save options specified in the first save operation. The Save dialog box does not appear.

Also, if the image contains two or more slices, the file is saved with the .htm file extension (even if you do not select Save HTML File in the dialog box).

3  Specify options to save files:

•   In Photoshop, select Save HTML File to save the HTML file with the image file.

•   In ImageReady, select Save Images to save the optimized image file (or files, if the image contains multiple slices); select Save HTML file to save the HTML code file for the image; select Save Selected Slices Only to save image or HTML files for selected slices. With this option, ImageReady creates a document bounded by the outermost bounds of the selected slices, and generates auto-slices as needed to create a complete HTML table.

In ImageReady, you can choose preferences for saving image files or HTML files. See Setting preferences for saving images and HTML files (ImageReady).

Note: In ImageReady, you must choose at least one option in order to save the file.

4  Click Save.

See also:

To specify an HTML background image

To copy HTML code to the Clipboard

Updating HTML code for images (ImageReady)

Setting preferences for saving images and HTML files (ImageReady)

Adding file information


To specify an HTML background image
Saving optimized images

To specify an HTML background image:

1  With an image displayed, choose File > HTML Background.

2  Choose a display option:

•   Image to display the file as an image.

•   Background to display the file as a background image.

3  If you selected Image in step 2, choose whether to display a solid color or a background image behind the image on the Web page:

•   To display a solid color background, select None, Foreground Color, or Background Color from the Color pop-up menu; select a color from the palette in the pop-up menu; or select Other and use the color picker to select a color.

•   To display a background image, enter the path for an image or click Choose and select an image to be displayed as the background.

Note: You can select both a solid color and a background image. In this case, the solid color is displayed until the background image downloads.

4  Click OK.

See also:

To save an optimized file

To copy HTML code to the Clipboard

Updating HTML code for images (ImageReady)

Setting preferences for saving images and HTML files (ImageReady)

Adding file information


To copy HTML code to the Clipboard
Saving optimized images

To copy HTML code to the Clipboard:

1  In ImageReady, choose Edit > Copy HTML Code, and choose an option for copying code:

•   Copy All Slices to copy HTML code for all slices in the document.

•   Copy Selected Slices to copy HTML code for selected slices only.

•   Copy Preloads to copy the JavaScript portion of the HTML code for slices in the document.

2  To paste the ImageReady HTML code into an HTML document, open the HTML document in the destination application and choose Edit > Paste.

See also:

To save an optimized file

To specify an HTML background image

Updating HTML code for images (ImageReady)

Setting preferences for saving images and HTML files (ImageReady)

Adding file information


Updating HTML code for images (ImageReady)
Saving optimized images

Updating HTML code for images (ImageReady)

If you have pasted the HTML code for an image into an HTML file and then updated the image in ImageReady, you can automatically update the HTML code for the image in the HTML file.

To update HTML code for an image:

1  Save the optimized file with the HTML file for the image. See Saving optimized images.

2  Choose File > Update HTML.

3  Select the HTML file that includes the HTML code for the image.

4  Click Save Images to save the image file when you update the HTML code for the image.

5  Click Save.


Setting preferences for saving images and HTML files (ImageReady)
Saving optimized images

Setting preferences for saving images and HTML files (ImageReady)

You can specify preferences for saving image files and HTML files.

The Saving Files Preferences dialog box lets you specify the following features when saving image files:

•   The default file naming pattern.

•   File name compatibility for Windows, Macintosh, or UNIX(R) operating systems.

•    Copyright information.

•   Option for copying background image when saving the file. This option is used when a background image has been specified using the File > HTML Background command.

•   Subfolder in which images will be saved. This option is available only with documents containing multiple slices.

The HTML Preferences dialog box lets you specify the following features when saving HTML files:

•   Formatting options for HTML code, to specify ImageReady’s coding style to match the coding style in your HTML files.

•   Coding options, including width and height data, spacer cell specifications, and image map type, to make table and image map code compatible with HTML editors and Web browsers.

See also:

To set Saving Files preferences

To set HTML preferences


To set Saving Files preferences
Setting preferences for saving images and HTML files (ImageReady)

To set Saving Files preferences:

1  Choose a method for viewing Saving Files preferences:

•   Choose File > Preferences > Saving Files.

•   Choose File > Save Optimized or File > Save Optimized As, select Save Images and click Saving Files Options.

2  For File Naming, select elements from the pop-up menus or enter text into the fields 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 fields 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).

An example of the default name as specified appears above the pop-up menus.

3  For File Name Compatibility, choose one or more of the following:

•   Windows to make filenames compatible with Windows operating systems. (Longer filenames are permitted with this option.)

•   Mac OS to make filenames compatible with Macintosh operating systems.

•   UNIX to make filenames compatible with UNIX operating systems.

4  For Optimized Files, select:

•   Copy Background Image When Saving to preserve a background image that has been specified using the HTML Background command.

•   Put Images In Subfolder and enter a folder name to specify where optimized images are saved (available only with documents containing multiple slices).

5  Select Embed Copyright to include copyright information with the image. You add copyright information for an image in the Image Info dialog box. See Adding file information.

6  Click OK.

See also:

To set HTML preferences


To set HTML preferences
Setting preferences for saving images and HTML files (ImageReady)

To set HTML preferences:

1  Choose a method for viewing HTML preferences:

•   Choose File > Preferences > HTML.

•   Choose File > Save Optimized or File > Save Optimized As, select Save HTML File and click HTML Options.

2  For Tags Case, specify the capitalization to be used for tags: all upper case, initial cap, or all lower case. Setting tags and attributes to all upper case helps the code stand out in the file.

3  For Attributes Case, specify the capitalization to be used for tag attributes: all upper case, initial cap, second initial cap, or all lower case

4  For Indent, specify a method for indenting lines of code: using the authoring application’s tab settings, using a specified number of spaces, or using no indentation.

5  For Line Endings, select a platform for line ending compatibility.

6  Select Always Quote Attributes to place 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. ImageReady places quotation marks when necessary to comply with most browsers, even if this option is deselected.

7  For TD W, H, specify whether to include width and height attributes for table data: Always, Never, or Auto (the recommended setting).

8  For Spacer Cells, specify whether to add one row and one column of empty spacer cells around the generated table: Always, Never, or Auto (the recommended setting).

Adding spacer cells is necessary with table layouts in which slice boundaries do not align, to prevent the table from breaking apart in some browsers.

9  For Empty Cells, specify how to fill empty table data cells.:

•   GIF, IMG W&H to use a one-pixel GIF with width and height values specified on the IMG tag.

•   GIF, TD W&H to use a one-pixel GIF with width and height values specified on the TD tag.

•   NoWrap, TD W&H to place a non-standard NoWrap attribute on the table data and also place width and height values specified on the TD tags.

This setting applies to slices set to No Image. Some browsers collapse cells that contain no data.

10  Select Include Comments to add explanatory comments to the HTML code.

11  For Image Maps, select an image map type from the pop-up menu:

•   Client-Side to include all required code for the image map in the image’s HTML file.

•   NCSA Server-Side to create a separate .map file in addition to the HTML file, using NCSA specifications.

•   CERN Server-Side to create a separate .map file in addition to the HTML file, using CERN specifications.

•   Client & NCSA to create both a client-side and server-side compatible image map, using NCSA specifications.

•   Client & CERN to create both a client-side and server-side compatible image map, using CERN specifications.

Note: Contact your Internet Service Provider to find out whether to use NCSA or CERN specification for server-side image maps.

12  For Code, select a formatting option:

•   GoLive to reformat HTML and JavaScript code so that rollovers will be fully editable in Adobe GoLive. Code is reformatted in the style used by GoLive (and may create a larger HTML file).

•   ImageReady to format HTML code in the style used by ImageReady.

See also:

To set Saving Files preferences


Adding file information
Saving optimized images

Adding file information

In ImageReady, you can add page title and copyright information to an image using the Image Info dialog box.

 In Photoshop, you can add information to some files using the File Info dialog box.

In ImageReady, Image Info data is added to the HTML code if you save the HTML file for an image. Copyright information is not displayed in a browser, but can be used in a case of copyright infringement to verify copyright. You can set ImageReady to embed copyright data in optimized image files, in Saving Files preferences. See Setting preferences for saving images and HTML files (ImageReady).

To enter information about an image:

1  Choose File > Image Info.

2  In the Page Title text field, type a title for the HTML file created for the image.

3  In the Copyright text field, enter copyright information for the image.

4  Click OK.


Saving and exporting original images (ImageReady)
Optimizing Images for the Web

Saving and exporting original images (ImageReady)

ImageReady provides several ways to save and export original images:

•   The Save command saves the original image in its current state in Photoshop file format.

•   The Save As command lets you save an alternate version of the original image with a different name, in Photoshop file format.

•   The Export Original command lets you flatten the layers in a copy of the original image and save the copy in a variety of file formats, including BMP, FlashPix (Windows only), PCX, PICT (Mac OS only), Pixar, QuickTime movie (Mac OS only), Targa, or TIFF. Some information (such as slices and optimization settings) will not be preserved when an original image is saved to file formats other than Photoshop.

See also:

To save an original file in its current state

To save an alternate version of the original file

To export an original image


To save an original file in its current state
Saving and exporting original images (ImageReady)

To save an original file in its current state:

Choose File > Save. The file is saved in Photoshop file format.

See also:

To save an alternate version of the original file

To export an original image


To save an alternate version of the original file
Saving and exporting original images (ImageReady)

To save an alternate version of the original file:

1  Choose File > Save As.

2  Type a filename, and choose a location for the file. The file is saved in Photoshop file format.

To export a file in another file format, choose File > Export Original.

3  Click Save.

See also:

To save an original file in its current state

To export an original image


To export an original image
Saving and exporting original images (ImageReady)

To export an original image:

1  Choose File > Export Original.

2  Type a filename, and choose a location for the file.

3  Select a file format from the format pop-up menu.

4  Click Save.

To copy an image without saving it to your hard drive, use the Image > Duplicate command.

See also:

To save an original file in its current state

To save an alternate version of the original file


Creating background images (ImageReady)
Optimizing Images for the Web

Creating background images (ImageReady)

Many Web pages contain tiled background images created from a single graphic repeated as needed to fill the entire page. In ImageReady, you can create an HTML file that will display the current image as a tiled background in a Web browser. You can also create an HTML file that will display another image or a solid color as a background behind the current image. ImageReady includes the <body background> tag for the background image and the <body bgcolor> tag for the background color in the HTML file.

In addition, you can prepare an image to be used as a tiled background using the Tile Maker filter, which blends the edges of an image to create a seamless background. You can also use the Tile Maker filter to create a kaleidoscopic background, in which an image is flipped horizontally and vertically to create an abstract design.

Original image, and image prepared using Blend Edges displayed as tiled background.

Original image, and image prepared using Kaleidoscope Tile displayed as tiled background.

See also:

To specify the current image as a background image

To specify a background to be used with the current image

To prepare an image for use as a tiled background image


To specify the current image as a background image
Creating background images (ImageReady)

To specify the current image as a background image:

1  Choose File > HTML Background.

2  For View As, select Background.

3  To select a solid color background to be displayed while the background image is downloading, or to be displayed through any transparent areas in the background image, click the Color box and choose a color using the color picker. Alternatively, click the triangle next to the Color box and select None, Foreground Color, Background Color, or Other (using the color picker), or select a color from the pop-up palette.

4  Click OK.

See also:

To specify a background to be used with the current image

To prepare an image for use as a tiled background image


To specify a background to be used with the current image
Creating background images (ImageReady)

To specify a background to be used with the current image:

1  Choose File > HTML Background.

2  For View As, select Image.

3  Select a background:

•   To select a background image, click Choose and select an image to be used as a background behind the current image.

•   To select a solid color background, click the Color box and choose a color using the color picker. Alternatively, click the triangle next to the Color box and select None, Foreground Color, Background Color, or Other (using the color picker), or select a color from the pop-up palette.

If you select a background image and a background color, the background color displays while the background image is downloading. It also displays through any transparent areas in the background image.

See also:

To specify the current image as a background image

To prepare an image for use as a tiled background image


To prepare an image for use as a tiled background image
Creating background images (ImageReady)

To prepare an image for use as a tiled background image:

1  With an image displayed in ImageReady, use the marquee tool ( [image]) to select an area in an image to be used as a tiled background.

2  Choose Filter > Other > Tile Maker.

3  Choose one of the following:

•   Blend Edges to use the selection as a tiled background. Then enter a percent value in the Width text box to specify how much of the edge to blend, usually between 5% and 15%, with a maximum of 20%.

Select Resize Tile to Fill Image to resize the blended tile to fill the original selection. Deselect this option to create a tile that is smaller than the original selection, reduced by the amount specified in Width.

•   Kaleidoscope Tile to flip and duplicate the selection horizontally and vertically and blend the edges, to create an abstract design that will be tiled on a Web page background.

4  Click OK.

5  Select Image > Crop > Delete to crop the image to the selected area. This is not required if you use the entire image to create a tile.

See also:

To specify the current image as a background image

To specify a background to be used with the current image


Animation

Adobe ImageReady provides a powerful, easy way to create an animated GIF—a sequence of images, or frames—from a single image. Each frame varies slightly from the preceding frame, creating the illusion of movement when the frames are viewed in quick succession.

You use the Animation palette and the Layers palette to create a multiple-frame animation. You can edit frames, copy and paste frames, apply layer changes to single or multiple frames, and arrange frames in a new sequence. You can also apply optimization settings to the animation, specify looping and repeat options for playback, and flatten frames into layers. The number of frames you can create is limited only by the amount of memory available to ImageReady on your system.

You can use the powerful Tween feature to quickly create new frames that vary a layer’s opacity, position, or layer effects, and create the illusion of a single element in a frame moving or fading in or out.

You can open multilayer Photoshop files as animations, with each layer becoming a frame.

You can preview an animation in ImageReady or in a browser while you’re working on the animation or after you’ve completed it.

See also:

About layer-based animation

Creating an animation

Using the Animation palette

Working with layers in animation

Viewing an animation

Optimizing and saving an animated GIF

Saving an animation as a Photoshop file

Opening an existing animated GIF

Opening and importing files as animated GIFs

Opening and exporting QuickTime-compatible movie formats


About layer-based animation
Animation

About layer-based animation

ImageReady treats layers as individual elements in an animation. You make changes to layer attributes to create animation effects. Changes you make to an image using Layer palette commands and options (including layer visibility, position, opacity, blending mode, and layer effects) affect selected frames only. These changes can be varied across frames to create animation effects. You can apply changes to a layer’s opacity, position, or effects to a series of new frames using the Tween function. See Tweening frames. You can specify changes made in the Layers palette to be applied to all frames, using the Match Layer Across Frames command. See Making layer changes in frames.

Changes you make to a layer that affect actual pixel values (such as painting and editing, adjusting color and tone, applying transform commands, using type, and other image-editing changes) affect all frames in an animation in which the layer is present. If you want to vary image-editing changes across frames, you can hide or show the layer with the image-editing changes in each frame separately.

Note: Applying a layer mask to a layer affects all frames in which the layer is present. However, you can vary the mask’s position across frames.

Using layer attributes to create animation effects is very simple, and allows you to save an animation file in Photoshop format for later re-editing. When creating an animation in ImageReady, make sure that elements that are to be animated are placed on separate layers. Link layers that you want to animate together as a group.


Creating an animation
Animation

Creating an animation

You use the following procedure to create an animated GIF in ImageReady:

•   Open or create a multi layered image to use as the basis for the animation.

•   Use the Animation palette to create animation frames from the original image.

•   Use the Layers palette to make changes to single frames, multiple frames, or the entire animation.

•   Use the Tween command, if needed, to automatically vary layer opacity, position, or layer effect parameters across new or existing frames.

•   Repeat the process to create and adjust additional new frames as needed.

•   Preview the animation in ImageReady.

•   Optimize the animation using the Optimize palette and Color Table palette.

•   Preview the animation in a browser (for more accurate timing than when previewing in ImageReady).

•   Use the Save Optimized command to save the animation.

•   Save the original image for later re-editing.

You create and edit an animation while in Original view. You can view an animation while in an optimized view. (However, editing options for animations are very limited in optimized views.) Optimized animation files are output as GIF files only. You cannot create a JPEG or PNG animation.


Using the Animation palette
Animation

Using the Animation palette

You use the Animation palette to create an animated GIF, to add new frames, update existing frames, and preview the animation.

If you have an image open in ImageReady, the Animation palette displays the image as the first frame in a new animation.

To view the Animation palette:

Choose Window > Show Animation.

You can also view the Animation palette by clicking in the Frame Number box at the bottom of the Layers palette.

A. Frame number B. Delay menu  C. Looping options D. Rewind button E. Backward button F. Stop button G. Play button H. Forward button I. New Frame button J. Trash button

See also:

Adding frames

Selecting frames and specifying the current frame

Rearranging and deleting frames

Copying and pasting frames

Tweening frames

Changing the view of frames

Specifying looping

Specifying delay for frames


Adding frames
Using the Animation palette

Adding frames

Each frame you add to an animation starts as a duplicate of the frame preceding it. You then apply layer-based changes to the new frame. The changing frames create animation effects when they’re viewed in sequence. (You can also create a series of new frames between two existing frames, or modify a sequence of existing frames. See Tweening frames for more information.)

To add a frame:

With an image displayed and the Animation palette visible, click the New Frame button ( [image]) in the Animation palette or choose New Frame from the Animation palette menu.

You apply changes to a frame using the layers palette. See Working with layers in animation for more information.


Selecting frames and specifying the current frame
Using the Animation palette

Selecting frames and specifying the current frame

The current frame is the frame which is displayed in the document window and which can currently be edited. The current frame is always a single frame. (You cannot have multiple current frames.) You click a frame to specify the current frame.

You can also select multiple frames in an animation, either contiguous or discontiguous, or you can select all frames in an animation. You can edit selected frames as a group.

Selected frames are indicated by a shaded highlight around the frame thumbnails. The current frame is indicated by a narrow border (inside the shaded selection highlight) around the frame thumbnail.

A. Current frame B. Selected frames

See also:

To select frames

To deselect a frame in a multiframe selection


To select frames
Selecting frames and specifying the current frame

To select frames:

With the Animation palette open, do one of the following:

•   To select a single frame, click the frame. The selected frame becomes the current frame.

•   To select contiguous multiple frames, shift-click a second frame. The second frame and all frames between the first and second are added to the selection.

•   To select discontiguous multiple frames, Control-click (Windows) or Command-click (Mac OS) additional frames to add those frames to the selection.

•   To select all frames, choose Select All Frames from the Animation palette menu.

See also:

To deselect a frame in a multiframe selection


To deselect a frame in a multiframe selection
Selecting frames and specifying the current frame

To deselect a frame in a multiframe selection:

Alt-click (Windows) or Command-click (Mac OS) a frame to deselect it.

See also:

To select frames


Rearranging and deleting frames
Using the Animation palette

Rearranging and deleting frames

You can change the position of single or multiple frames in an animation and reverse the order of selected contiguous frames. You can also delete selected frames or the entire animation.

See also:

To change the position of selected frames

To reverse the order of selected contiguous frames

To delete selected frames

To delete an entire animation


To change the position of selected frames
Rearranging and deleting frames

To change the position of selected frames:

1  Select the frame or frames you want to move, as described in Selecting frames and specifying the current frame.

2  Drag the frame or frames to the new position.

Note: If you drag multiple discontiguous frames, the frames are placed contiguously in the new position.

See also:

To reverse the order of selected contiguous frames

To delete selected frames

To delete an entire animation


To reverse the order of selected contiguous frames
Rearranging and deleting frames

To reverse the order of selected contiguous frames:

1  Select the contiguous frames you want to move, as described in Selecting frames and specifying the current frame.

2  Choose Reverse Frames from the Animation palette menu.

See also:

To change the position of selected frames

To delete selected frames

To delete an entire animation


To delete selected frames
Rearranging and deleting frames

To delete selected frames:

1  With a single or multiple frames selected, delete the selection:

•   Select Delete Frame from the Animation palette menu.

•   Click the Trash button in the Animation palette and click Yes to confirm the deletion.

•   Drag the selected frame or frames onto the Trash button.

See also:

To change the position of selected frames

To reverse the order of selected contiguous frames

To delete an entire animation


To delete an entire animation
Rearranging and deleting frames

To delete an entire animation:

Select Delete Animation from the Animation palette menu. All but the first frame are deleted.

See also:

To change the position of selected frames

To reverse the order of selected contiguous frames

To delete selected frames


Copying and pasting frames
Using the Animation palette

Copying and pasting frames

You can copy frames and paste them into another location in the same animation, or into another animation. By default, the currently selected frame in the group of source frames, or copied frames, is pasted into the currently selected frame in the destination animation. Subsequent frames in the group of source frames are pasted into subsequent frames in the destination animation.

If a layer in the source frame is identical to a layer in the destination frame (in both pixel content and layer attributes, such as opacity, blending mode, and so on), the source layer is not added to the destination frame. If the layer in the source frame is different from the layer in the destination frame (in pixel content or layer attributes), the layer is duplicated in the source frame and added to the destination frame.

You can modify the paste operation to paste the currently selected source frame into the first frame following the currently selected destination frame. You can choose to copy and paste all layers from the source frames (even if those layers are identical to destination layers), and to copy and group all layers from the source frames. You can also choose to replace destination frames with source frames.

To copy and paste selected frames:

1  Select the frame or frames you want to copy and paste, as described in Selecting frames and specifying the current frame.

2  Choose Copy Frames from the Animation palette menu.

3  Select a frame or frames in which to paste the copied frame or frames:

•   Select a frame in the animation. (The selected frame becomes the current frame.)

•   Open or display another animation, and select a frame. (The selected frame becomes the current frame.)

4  Choose Copy > Paste from the Animation palette menu.

Press Shift when you choose the command to paste source frames after the currently selected destination frame. Press Alt (Windows) or Option (Mac OS) to force layers in the source frames to be copied to the destination frames (even when source layers are identical to destination layers.) Press Control (Windows) or Command (Mac OS) to force layers to be copied and grouped. Press Shift+Option to replace destination frames with source frames.


Tweening frames
Using the Animation palette

Tweening frames

You use the Tween function to automatically add or modify a series of frames between two existing frames, varying the layer attributes (position, opacity, or effect parameters) evenly between the new frames to create the appearance of movement. The term “tweening” is derived from “in betweening,” the traditional animation term used to describe this process.

Tweening lets you easily create or modify a sequence of frames without having to set layer opacity, position, or effects in each frame individually. Tweening significantly reduces the time required to create animation effects such as fading in or fading out, or moving an element across a frame. You can edit tweened frames individually after you create them, to further modify the animation.

If you select a single frame when tweening, you choose whether to tween the frame with the previous frame or the next frame. If you select two contiguous frames, new frames are added between the frames. If you select more than two frames, existing frames between the first and last selected frames are altered by the tweening operation. If you select the first and last frames in the animation, these frames are treated as contiguous, and tweened frames are added after the last frame. (This tweening method is useful when the animation is set to loop multiple times.)

Note: You cannot select discontiguous frames for tweening.

To tween frames:

1  Select a single frame or multiple contiguous frames.

2  Choose Tween from the Animation palette menu.

3  Specify the layer or layers to be varied in the added frames:

•   Select All Layers to vary all layers in the selected frame or frames.

•   Select Selected Layer to vary only the currently selected layer in the selected frame or frames.

4  Specify layer attributes to be varied:

•   Select Position to vary the position of a selected layer in the new frames evenly between the beginning and ending frames.

•   Select Opacity to vary the opacity of the new frames evenly between the beginning and ending frames.

•   Select Effects to vary the parameter settings of layer effects evenly between the beginning and ending frames.

5  If you selected a single frame in step 1, choose where to add frames from the Tween With menu:

•   Next Frame to add frames between the selected frame and the frame following it. (Choose First Frame if you selected the last frame in step 1.)

•   Previous Frame to add frames between the selected frame and the frame preceding it.

6  Enter a value or use the Up or Down Arrow key to choose the number of frames to add. (This option is not available if you selected more than two frames. In this case, the tweening operation alters the existing frames between the first and last frames in the selection.)

7  Click OK.

Frames tweened with layer opacity varied


Changing the view of frames
Using the Animation palette

Changing the view of frames

You can change the thumbnail view of frames in the Animation palette. Using smaller thumbnails reduces the space required by the palette and displays more frames in a given palette width.

To change the thumbnail view of frames:

1  Select Palette Options from the Animation palette menu.

2  Select a thumbnail size and click OK.


Specifying looping
Using the Animation palette

Specifying looping

You use the Looping function to specify how many times the animation sequence should repeat when being played: once, forever, or a specific number of times.

To specify looping:

1  Click on the inverted triangle at the left end of the Animation palette to view the Looping pop-up menu.

2  Select a looping option from the pop-up menu or the dialog box:

•   Forever to repeat the animation sequence indefinitely.

•   Once to play the animation sequence once only.

•   Other and enter a value in the Set Loop Count dialog box, then click OK.


Specifying delay for frames
Using the Animation palette

Specifying delay for frames

You can specify a delay (the time that a frame is displayed) for single frames or for multiple frames in an animation. Delay time is displayed in seconds. (Fractions of a second are displayed as decimal values. For example, one-quarter second is specified as .25.)

To specify a delay for a single frame or multiple frames:

1  Select a single frame or multiple frames, as described in Selecting frames and specifying the current frame.

2  In the Animation palette, click on the Delay value below the selected frame to view the Delay pop-up menu.

3  Specify the delay:

•   Choose a value from the pop-up menu. (The last value used appears at the bottom of the menu.)

•    Choose Other, enter a value in the Set Frame Delay dialog box, and then click OK.

If you selected multiple frames, specifying a delay value for one of the selected frames applies the value to all selected frames.

Setting delay for a single frame

Note: Delay time may not be accurate when previewing an animation in ImageReady. For an accurate preview of delay time, preview animations in a browser.


Working with layers in animation
Animation

Working with layers in animation

You make adjustments to animation frames by applying changes to the layers in each frame. You can use layers to make adjustments to a single frame, a group of frames, or the entire animation.

When you work with layers in a frame, you can create or copy selections in the layer; adjust color and tone; change the layer’s opacity, blending mode, or position; add layer effects; and perform editing tasks as you would with layers in any image.

For detailed information on working with layers, see Chapter 11 in the Photoshop 5.0 printed guide or “Using Layers” in Photoshop 5.0 online Help. A similar topic also can be found in ImageReady online Help.

See also:

About new layers in frames

Making layer changes in frames

Showing and hiding layers in a frame

Setting the frame disposal method

Flattening frames into layers


About new layers in frames
Working with layers in animation

About new layers in frames

You can add a new layer to any frame in an animation by selecting the frame and adding the new layer in the layers palette.

When you create a new layer in a frame, the layer is added to all frames in the animation, but is visible only in the current frame.

New layer added to frame 2 in Layers palette; and new layer visible in frame 2 and hidden in frames 1 and 3 in Animation palette

To show the new layer in frame 1, select frame 1 in the Animation palette. Then click in the eye icon column for the new layer in the Layers palette.


Making layer changes in frames
Working with layers in animation

Making layer changes in frames

Changes you make to a layer using Layers palette commands and options affect only the current frame in which the changes are made (except for layer masks, which affect all frames in which the layer is present.) Layers palette commands and options include a layer’s opacity, blending mode, visibility, position, stacking order, and layer effects. You can apply changes to a layer’s opacity, position, or effects to a series of new frames using the Tween function. See Tweening frames.

Changes you make to a layer which change the layer’s pixel values, using painting and editing tools, color and tone adjustment commands, filters, type, and other image-editing commands affect every frame in which the layer is included.

You can specify changes made in the Layers palette to be applied to frames in an animation, using the Match Layer Across Frames command. For example, if you add type to an animation, and want to change the opacity and position of the type in all frames, you modify the type in the current frame and then choose Match Layer Across Frames from the Animation palette menu. The changes you made in the current frame are applied to all frames in the animation. (Alternatively, you can select all frames in an animation and then apply changes to layer attributes. Changes will be applied to all frames in the animation.)

To match layer changes across frames:

1  In the Layers palette, select the layer containing the element you want to match across frames.

2  Modify layer attributes (including visibility, position, opacity, blending mode, and layer effects) for the selected layer in the current frame, as needed.

3  In the Animation palette, choose Match Layer Across Frames from the palette menu. The layer attribute modifications you made in step 2 are applied to all frames in the animation.


Showing and hiding layers in a frame
Working with layers in animation

Showing and hiding layers in a frame

When you show or hide a layer in a frame, the visibility of the layer changes for that frame only. For example, suppose you are working with an image containing several layers. If you create four frames with that image, and you hide the top layer in frame 2, that layer will still be visible in frames 1, 3, and 4.

Layer hidden in frame 2 in Layers palette; and layer hidden in frame 2 in Animation palette


Setting the frame disposal method
Working with layers in animation

Setting the frame disposal method

The frame disposal method specifies whether to discard the current frame before displaying the next frame. You select a disposal method when working with animations that include background transparency, to specify whether the current frame will appear through the transparent areas of the next frame.

Choose the Restore to Background option to fully discard the current frame from the display before the next frame is displayed. Only a single frame is displayed at any time (and the current frame will not appear through the transparent areas of the next frame.)

Choose the Do Not Dispose option to preserve the current frame as the next frame is added to the display. The current frame (and preceding frames) may show through transparent areas of the next frame with the Do Not Dispose option.

Choose the Automatic option (the default option) to have ImageReady automatically determine a disposal method for the current frame, discarding the current frame if the next frame contains layer transparency. For most animations, the Automatic option will yield the desired results. However, for special effects, you can control frame disposal manually.

A. Frame with background transparency with Restore to Background option B. Frame with background transparency with Do Not Dispose option

To choose a disposal method for frames:

1  Select a frame or frames for which you want to choose a disposal method, as described in Selecting frames and specifying the current frame.

2  Right-click (Windows) or Control-click (Mac OS) on the frame thumbnail to view the Disposal Method context menu.

3  Choose a disposal method:

Choose Automatic (the default setting) to direct ImageReady to choose the disposal method based on the presence or absence of transparency in the next frame. ImageReady chooses Restore to Background if the frame contains background transparency, and Do Not Dispose if the frame contains a background color. See Optimizing and saving an animated GIF.

Note: Choose the Automatic disposal option when using the Redundant Pixel Removal optimization option, to enable ImageReady to preserve frames that include transparency.

•   Choose Do Not Dispose to preserve the current frame as the next frame is displayed.

•   Choose Restore to Background to discard the current frame as the next frame is displayed.

Note: The Restore to Background option may not be accurately represented when previewing an animation in ImageReady. To accurately preview an animation using the Restore to Background option, preview the file in a browser.

The Disposal Method icon indicates whether the frame is set to Do Not Dispose ( [image]) or Restore to Background ( [image]). (No icon appears when disposal method is set to Automatic.) The disposal method you choose is applied to the current frame only. You must choose the disposal method for each frame separately.

A. Do Not Dispose icon B. Restore to Background icon


Flattening frames into layers
Working with layers in animation

Flattening frames into layers

You can flatten animation frames into layers. A single, composite layer is created for each frame, containing all of the layers in the frame. The original layers in the frame are hidden but preserved. The original layers will be available if they are needed for another rollover state.

Note: If you save the animation as a GIF, the animation frames are flattened. You should save the original file in Photoshop file format to preserve layers for re-editing.

To flatten frames into layers:

In the Animation palette, choose Flatten Frames into Layers from the palette menu.


Viewing an animation
Animation

Viewing an animation

You can use the Animation palette to preview an animation in ImageReady. You can also use the Preview In command to view the animation in a browser.

See also:

To view an animation in ImageReady

To preview an animation in a browser


To view an animation in ImageReady
Viewing an animation

To view an animation in ImageReady:

Click the Play button ( [image]) in the Animation palette. The animation is displayed in the image window. The animation repeats indefinitely unless you specified another repeat value in the Play Options dialog box. See Specifying looping.

To stop the animation, click the Stop button ( [image]).

See also:

To preview an animation in a browser


To preview an animation in a browser
Viewing an animation

To preview an animation in a browser:

1  Select File > Preview In and select a browser from the submenu.

2  Use the browser’s Stop and Reload commands to stop or replay the animation.

See also:

To view an animation in ImageReady


Optimizing and saving an animated GIF
Animation

Optimizing and saving an animated GIF

You use the Optimize palette to specify optimization and color options for an animated GIF, and the File > Save Optimized and File > Save Optimized As commands to save an animation as a GIF file. You can also select additional optimization methods which apply specifically to animation files, using the Optimize Animations command in the Animation palette menu.

In addition to the optimization tasks applied to standard GIF files, several other tasks are performed for animated GIF files. If you optimize the animated GIF using an adaptive, perceptual, or selective palette, a palette is generated for the file based on all frames in the animation. A special dithering technique is applied to ensure that dither patterns are consistent across all frames, to prevent flickering during playback. Also, frames are optimized so that only areas that change from frame to frame are included, greatly reducing the file size of the animated GIF. To complete these tasks, ImageReady requires more time to optimize an animated GIF than to optimize a standard GIF.

To set animation-specific optimization options:

1  Choose Optimize Animation from the Animation palette menu.

2  Choose Optimize by Bounding Box to direct ImageReady to crop each frame to preserve only the area which has changed from the preceding frame. Animation files created using this option are smaller but are incompatible with GIF editors which do not support the option. (This option is selected by default, and is recommended.)

3  Choose Optimize by Redundant Pixel Removal to make all pixels in a frame which are unchanged from the preceding frame transparent. (This option is selected by default, and is recommended.) See Setting the frame disposal method.

Note: Set Disposal Method to Automatic (the default setting) when you use the Redundant Pixel Removal option, to preserve frames in which a solid background is changed to transparency due to redundant pixel removal. With Automatic disposal method, ImageReady preserves the current frame if the next frame has a solid background (even if that background is changed to transparency during optimization.)

4  Click OK.


Saving an animation as a Photoshop file
Animation

Saving an animation as a Photoshop file

You use the File > Save or File > Save As commands to save an animation file as a Photoshop file that preserves all the information about each frame. The frame selected in the animation when it is saved becomes the image displayed in the Photoshop file. You can open and edit the file in Adobe Photoshop, but you cannot edit the animation frames separately or play the animation in Photoshop.

ImageReady saves information about frames as layer states, rather than as pixel data for each frame, which substantially reduces the size of the Photoshop file. Animation information is preserved but ignored in the Photoshop file, allowing you to reopen the file in ImageReady as an animation, with frames intact.

Note: If you add new layers or change the stacking order of layers in the Photoshop file using Adobe Photoshop 4.0 or earlier, the stacking order of layers will be changed when you reopen the file in ImageReady.


Opening an existing animated GIF
Animation

Opening an existing animated GIF

You can open an existing animated GIF in ImageReady using the File > Open command. The file is opened as a stack of layers. Each layer corresponds to one frame. In each frame, the layer for that frame is visible, and the layers for the other frames are hidden.

Opening existing animated GIF files in ImageReady is useful primarily for applying optimization settings to the files. The one-layer-per-frame structure of imported animated GIF files may make it impractical for editing animation frames in other ways.


Opening and importing files as animated GIFs
Animation

Opening and importing files as animated GIFs

You can easily create animated GIFs from existing one-layer-per-frame images in Adobe Photoshop file format or from a group of single-layer images.

You can make each layer in a multilayer Photoshop file a separate frame in the Animation palette. The layers are placed in the Animation palette in their stacking order, with the bottom layer becoming the first frame.

You can import a folder of files and use each file as a frame in ImageReady. Files can be in any format that ImageReady supports. Each file becomes a frame in the Animation palette. The files are placed in the Animation palette in alphabetical order by image filename.

See also:

To open a multilayer Photoshop file as frames

To import a folder of files as frames


To open a multilayer Photoshop file as frames
Opening and importing files as animated GIFs

To open a multilayer Photoshop file as frames:

1  Choose File > Open and select the Photoshop file to open.

2  Select Make Frames From Layers in the Animation palette menu.

Each layer in the image appears as a frame in the Animation palette. The bottom layer in the Photoshop image is frame 1 in the Animation palette.

See also:

To import a folder of files as frames


To import a folder of files as frames
Opening and importing files as animated GIFs

To import a folder of files as frames:

1  Place the files to be used as frames into a folder. Make sure that the folder contains only those images that are to be used as frames.

Note: The resulting animation will display more successfully if all files are the same pixel dimensions. To have frames appear in the correct order in the animation, name the files in alphabetical or numeric order, with the file to be used as frame 1 the first in order. (You can also change the order of the frames in the Animation palette after you import the files.)

2  Choose File > Import > Import Folder As Frames and choose the folder to be imported.

The files appear in the Animation palette as frames and in the Layers palette as layers, with each layer assigned to a separate frame. The image that is first alphabetically or numerically by filename is frame 1 in the Animation palette and the bottom layer in the Layers palette.

See also:

To open a multilayer Photoshop file as frames


Opening and exporting QuickTime-compatible movie formats
Animation

Opening and exporting QuickTime-compatible movie formats

You can open movies in MOV, AVI, Flic, and PICT formats to view and edit in ImageReady. You can also export animation files in QuickTime file format.

See also:

To open QuickTime-compatible movies

To export an animation file in QuickTime Movie format


To open QuickTime-compatible movies
Opening and exporting QuickTime-compatible movie formats

To open QuickTime-compatible movies:

1  Choose File > Open and select the movie to open.

2  Select the range of frames to import:

•   From Beginning to End to open the full file.

•   Selected Range Only to open selected frames. Drag the slider below the movie thumbnail to specify the starting point for the range, then Shift-drag to specify the ending point. (A black bar on the slider indicates the range you select.)

3  Select Limit to Every <number> Frame to specify which frames to include from the selected range. (You can use this option with either Range option.)

4  Click Open.

See also:

To export an animation file in QuickTime Movie format


To export an animation file in QuickTime Movie format
Opening and exporting QuickTime-compatible movie formats

To export an animation file in QuickTime Movie format:

1  With an animation displayed, choose File > Export Original.

2  Select QuickTime Movie from the Format menu.

3  Name the animation and choose a location where it will be saved.

4  Click Save.

QuickTime selects compression settings for the file, based on the currently selected animation frame. You can adjust the compression settings if necessary.

5  Click OK to save the file.

See also:

To open QuickTime-compatible movies


Web Design Features

Today’s Web design requires powerful, creative tools for Web-specific graphics needs. Adobe ImageReady provides you with the tools to create complex, composite graphics from a single document. With the sophisticated slicing capabilities in ImageReady, you can divide a document into separate sections, making it easier to arrange multiple elements and selectively optimize your files. You also use slicing to create rollover effects. In addition, you can use ImageReady to create client-side or server-side image maps.

Web page with slices displayed in browser

When working with slices, rollovers, or image maps, it is important to preview images in a browser to ensure your document will function correctly for Web viewers. Also remember that image appearance will be different on different platforms.

You can generate and save HTML files for slices directly in ImageReady. See Saving optimized images. You can also copy colors as hexadecimal values directly into HTML files. See Copying colors as hexadecimal values.

See also:

Creating and modifying slices

Working with rollovers

Working with image maps


Creating and modifying slices
Web Design Features

Creating and modifying slices

Slicing makes it possible to create complex images for the Web. A slice is a rectangular area of an image which becomes a cell in an HTML table in the HTML file for the image. When you create slices in an image, ImageReady automatically creates additional slices as needed so that all areas of the image are designated as cells in the HTML table.

When you divide an image into slices, you can optimize each slice in the image with different optimization settings. You can also create rollover effects, in which different states of an image are activated when a Web viewer performs a mouse action on the slice.

See also:

About slices

Creating slices

Selecting and modifying slices

Specifying slice content

Specifying options for Image slices

Specifying options for No Image slices

Applying optimization settings to slices

Linking slices

Changing the display of slices


About slices
Creating and modifying slices

About slices

Slices you draw are called user-slices. Slices that ImageReady generates automatically are called auto-slices. By default, each document contains one auto-slice comprising the full document (and one cell in the HTML table that includes the entire image.) When you draw a new slice, ImageReady generates additional auto-slices as needed for the HTML table to contain the full document.

User-slices have a wider array of modification options than auto-slices. You can promote an auto-slice to a user-slice. You can apply different optimization settings to individual slices or link several user-slices and apply the same optimization settings to all slices in the set. (All auto-slices in a document are linked and share the same optimization settings.)

You specify slices to be one of two types: Image or No Image. Image slices display image data, which can include rollover states. No Image slices can contain a solid color or HTML text. Formatting and display options for a slice vary according to the slice type.

Slice lines, numbers, symbols, and color adjustments in the ImageReady window indicate the location, number, user- or auto-slice status, slice type, link status, and linked group color. You can hide and show slices and modify the appearance of slice display graphics.

Slices are numbered from left to right and top to bottom, beginning in the upper left corner of the document. If you change the arrangement or total number of slices, slice numbers are updated to reflect the changes. See Changing the display of slices.

A. User-slice B. Slice number C. Image slice symbol D. Link symbol  E. Auto-slice


Creating slices
Creating and modifying slices

Creating slices

You can draw slices directly in a document. You can also create slices from guides or from a selection.

See also:

To create a slice with the slice tool

To create slices from guides

To create slices from a selection


To create a slice with the slice tool
Creating slices

To create a slice with the slice tool:

1  With a document displayed, select the slice tool ( [image]) in the toolbox.

Note: When you select the slice tool, ImageReady automatically shows slices in the document. If you have not created any slices in the document, ImageReady shows the single default auto-slice. (Slices remain shown until you hide them.) Also, ImageReady applies color adjustments to distinguish between auto- and user-slices.

Drag over the area where you want to create a slice. Press Shift to constrain the slice to a square. Press Alt (Windows) or Option (Mac OS) to draw from the center. To snap to a guide or another slice in the document, turn on the Slices > Snap to Slices option and drag to within 4 pixels of the guide or slice. (For information on turning snapping on or off, see Selecting and modifying slices.) If you drag beyond the document’s boundaries, the slice is clipped at the document’s edge. (However, if you create a slice and then move it outside the document boundaries, the slice is preserved.)

The slice you create, a user-slice, is automatically selected. ImageReady generates auto-slices as necessary to complete the HTML table for the document.

Note: If you draw, resize, or rearrange slices so that user-slices overlap, ImageReady regenerates the underlying slice to make room for the overlapping slice. The underlying slice is divided into subslices consisting of the visible areas of the underlying slice. Subslices indicate the slices that will be generated for the final HTML table when you save the optimized file. (However, the original underlying slice is preserved in ImageReady, and can be selected with the slice selection tool.)

Drawing a slice, and New user-slice with auto-slices

See also:

To create slices from guides

To create slices from a selection


To create slices from guides
Creating slices

To create slices from guides:

1  Open or create a document containing guides.

2  Choose Slices > Create Slices From Guides.

All previously existing slices are deleted when you create slices from guides. All slices created from guides are user-slices. Also, all slices are left unselected after creating slices from guides.

Image with guides and User-slices created from guides

See also:

To create a slice with the slice tool

To create slices from a selection


To create slices from a selection
Creating slices

To create slices from a selection:

1  Make a selection.

2  Choose Slices > Create Slice from Selection.

ImageReady creates a user-slice based on the bounding rectangle of the selection. If the selection is feathered, the slice covers the full selection (including the feathered edges.) If the selection is nonrectangular, the slice covers a rectangular area large enough to cover the full selection.

Note: You can also create a selection from a slice or slices.

See also:

To create a slice with the slice tool

To create slices from guides


Selecting and modifying slices
Creating and modifying slices

Selecting and modifying slices

You select individual slices or multiple slices with the slice selection tool in order to apply modifications. When you select the slice selection tool in the toolbox, slices are shown automatically.

When working with user-slices, you can move, duplicate, combine, divide, resize, delete, arrange in stacking order, and align the slices. You can also specify whether to snap slices to other slices when making changes. When working with auto-slices, you can duplicate and divide the slices. (Duplicating or dividing an auto-slice creates user-slices.)You can also promote auto-slices to user-slices to apply the full range of modifications.

If you change the number or arrangement of slices, ImageReady regenerates the HTML table to reflect the changes, redrawing or eliminating auto-slices as necessary. Promote auto-slices to user-slices to prevent them from being changed when the table is regenerated.

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To select a slice
Selecting and modifying slices

To select a slice:

1  Select the slice selection tool ( [image]) in the toolbox.

2  Choose a method to select a slice or slices:

•   Click on a slice in the document. Shift-click to add slices to the selection.

•   Click in an auto-slice or outside the image area and drag with the slice selection tool to select multiple slices. (Clicking in a user-slice and dragging will move the slice.)

The slice border changes and color adjustments are removed to indicate the slice is selected.

Note: When working with overlapping slices, click on a subslice—a visible section of an underlying slice—to select the full underlying slice. (You cannot select or edit individual subslices.)

A. Selected user-slice B. Unselected auto-slice C. Unselected user-slice D. Selected auto-slice

See also:

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To move a slice
Selecting and modifying slices

To move a slice:

1  Use the slice selection tool ( [image]) to select a user-slice or slices you want to move.

2  Move the pointer inside the slice selection border, and drag the slice to a new position. Press Shift to restrict movement to multiples of 45 degrees. If you have selected multiple user-slices, all move as you drag.

See also:

To select a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To turn snapping to slice edges on or off
Selecting and modifying slices

To turn snapping to slice edges on or off:

Choose Slices > Snap to Slices. (A check mark indicates that the feature is turned on.)

See also:

To select a slice

To move a slice

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To resize slices
Selecting and modifying slices

To resize slices:

1  Use the slice selection tool ( [image]) to select a user-slice or slices you want to resize.

2  Grab a side or a corner handle of the slice and drag to resize the slice.

If you select and resize adjacent slices, common edges shared by the slices are resized together.

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To promote an auto-slice to a user-slice
Selecting and modifying slices

To promote an auto-slice to a user-slice:

1  Use the slice selection tool ( [image]) to select one or more auto-slices which you want to promote.

2  Choose Slices > Promote To User-slice(s).

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To divide slices
Selecting and modifying slices

To divide slices:

1  Use the slice selection tool ( [image]) to select a slice you want to divide.

Note: If you have not created slices in the document, ImageReady divides the document’s single default auto-slice.

2  Choose Slices > Divide Slice.

The Divide Slice dialog box allows you to divide slices horizontally, vertically, or both, by number of slices or number of pixels. You can combine either horizontal option with either vertical option.

Note: Any section of the slice left over after you divide a new slice is made into another slice. For example, if you divide a slice that is 100 pixels wide into three new slices each 30 pixels wide, the remaining 10-pixel wide area is also made into a new slice.

3  Click Preview in the Divide Slice dialog box to preview the changes.

4  To divide slices, select Divide Horizontally Into, Divide Vertically Into, or both, and then select an option for dividing.

5  Click OK.

Selected user-slice, and Slice divided

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To duplicate a slice
Selecting and modifying slices

To duplicate a slice:

1  Use the slice selection tool ( [image]) to select a slice you want to duplicate.

2  Choose Slices > Duplicate Slice.

The duplicate slice appears on top of the original, offset 10 pixels down and to the right.

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To duplicate a user-slice while dragging
Selecting and modifying slices

To duplicate a user-slice while dragging:

1  Use the slice selection tool ( [image]) to select a user-slice or slices you want to move and duplicate.

2  Hold down Alt (Windows) or Option (Mac OS), and drag from inside the slice or slices. (Dragging from the edge will resize the slice or slices.)

The duplicate slice has the same dimensions and optimization settings as the original. If the original slice was a linked user-slice, the duplicate is linked to the same set. Duplicate slices are always user-slices, regardless of whether the original was a user-slice or an auto-slice.

The duplicate slice is selected and can be moved, resized, or otherwise modified.

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To combine slices
Selecting and modifying slices

To combine slices:

1  Shift-click to select two or more user-slices you want to combine. (Slices need not be adjacent.)

2  Choose Slices > Combine Slices.

The resulting slice takes its dimensions and position from the rectangle created by joining the outer edges of the combined slices.

The slice created from combining slices is a user-slice, regardless of whether the original slices are user- or auto-slices or both. If the combined slices are not adjacent, or are of different proportions or alignments, the slices table is regenerated to accommodate the new slice. The newly combined slice may overlap other user-slices.

Optimization settings for the combined slice are those of the first slice selected before the Combine Slices operation.

Slices selected, and Slices combined into a new user-slice

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To arrange slices in stacking order

To align slices

To delete a selected slice

To delete all slices


To arrange slices in stacking order
Selecting and modifying slices

To arrange slices in stacking order:

1  Select one or more user-slices to be arranged.

If you change the stacking order of overlapping slices, ImageReady regenerates the HTML table and changes which slices are subdivided.

Note: By default, the last slice created is the top slice in the stacking order.

2  Choose Slices > Arrange, and choose an option from the submenu:

•   Bring to Front to make the selection the topmost slice.

•   Bring Forward to move the selection one level up in the stacking order.

•   Send Backward to move the selection one level down in the stacking order.

•   Send to Back to make the selection the bottommost slices in the document.

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To align slices

To delete a selected slice

To delete all slices


To align slices
Selecting and modifying slices

To align slices:

1  Shift-click to select two or more user-slices which you want to align.

2  Choose Slices > Align, and choose an option from the submenu:

•   Top to align the top edges of the selected slices to the top edge of the topmost slice selected.

•   Vertical Center to align the vertical centers of the selected slices to the vertical midpoint of the selected slices.

•   Bottom to align the bottom edges of the selected slices to the bottom edge of the bottommost slice selected.

•   Left to align the left edges of the selected slices to the left edge of the leftmost slice selected.

•   Horizontal Center to align the horizontal centers of the selected slices to the horizontal midpoint of the selected slices.

•   Right to align the right edges of the selected slices to the right edge of the rightmost slice selected.

Note: Aligning slices can eliminate unneeded auto-slices and generate a smaller, more efficient HTML table for the image.

Slices selected and Slices aligned along left edge centers

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To delete a selected slice

To delete all slices


To delete a selected slice
Selecting and modifying slices

To delete a selected slice:

1  Select a user-slice or user-slices to be deleted.

2  Choose Slices > Delete Slice(s).

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete all slices


To delete all slices
Selecting and modifying slices

To delete all slices:

Choose Slices > Delete All.

User-slices selected, and selected slice deleted with auto-slices regenerated

See also:

To select a slice

To move a slice

To turn snapping to slice edges on or off

To resize slices

To promote an auto-slice to a user-slice

To divide slices

To duplicate a slice

To duplicate a user-slice while dragging

To combine slices

To arrange slices in stacking order

To align slices

To delete a selected slice


Specifying slice content
Creating and modifying slices

Specifying slice content

When saving your optimized document as an HTML file, ImageReady generates an HTML table and places each slice in its own table cell. By default, each slice contains the underlying image content in the document. Slices containing image content are called Image slices. Alternatively, you can specify a slice as a No Image slice, to contain a solid color and no image content. (Because No Image slices contain no image data, they download more quickly.) You specify options for slice content based on the slice type. More options are available for Image slices than for No Image slices.

All new user-slices are Image slices by default. All auto-slices are Image slices. If you change an auto-slice to No Image, the slice is promoted to a user-slice automatically.

With Image and No Image slices, keep in mind that dithering can affect slice appearance in unexpected ways. See Previewing and controlling dithering.

Note: ImageReady does not display No Image slice content. To view No Image slice content, preview the image in a browser.

To specify slice type:

1  Choose Window > Show Slice, or click the Slice palette tab to view the palette.

2  Use the slice selection tool ( [image]) to select a slice whose type you want to change.

Note: ImageReady can change the type and options for only one slice at a time. If you select multiple slices, the Slice palette is dimmed.

3  In the Slice palette, select a slice type from the Type pop-up menu:

•   Image (the default type) to specify the slice as containing image data.

•   No Image to specify the slice as containing no image data.

Image Type pop-up menu with Image symbol and No Image symbol


Specifying options for Image slices
Creating and modifying slices

Specifying options for Image slices

You can specify a variety of options for Image slices. Before you can choose options, make sure the Slice palette is visible (choose Window> Show Slice or click the Slice palette tab), and select an Image slice. (See Selecting and modifying slices and Specifying slice content.)

When you work with auto-slices, several operations automatically promote the slices to user-slices. If you name an auto-slice, assign a URL, create a message or an Alt tag, unlink the slice, or move or resize the slice using numeric coordinates, the slice is automatically promoted to a user-slice. Also, if you change an auto-slice from Image to No Image, the slice is promoted.

Note: To see hidden options in the Slice palette, click the Show Options control ( [image]) in the palette tab.

Slice palette with options shown:A. Slice thumbnail B. File format C. Slice number D. Precision coordinates and dimensions E. Rollover Indicator F. Link indicator G. Background color

The following options are available for Image slices:

See also:

Name

Background Color

URL

Target

Message

Alt

Precision


Name
Specifying options for Image slices

Name

Lets you change the name that appears by default. You can change the default slice naming pattern by choosing File > Preferences > Slices. Under Default Slice Naming, select elements from the pop-up menus or enter text into the fields to be combined into the default names for all slices. Elements include document name, the word “slice,” numbers or letters designating slices or rollover states, slice creation date, punctuation, or “none.”

See also:

Background Color

URL

Target

Message

Alt

Precision


Background Color
Specifying options for Image slices

Background Color

Lets you choose the background color from the BG pop-up menu for selected slice or slices. For Image slices, the background color fills transparent areas of the image. For No Image slices, the background color fills the slice (in place of image data.) Choose from the following color options: a Web-safe color from the color palette, None (to display the Web page background in the slice’s transparent areas), Matte Color (to use the Matte color specified in the Optimize palette), Foreground Color, Background Color, and Other (to specify a color using the color picker). (For information on Matte color, see Making transparent and matted images.)

Note: Background color appears when the slice is displayed in a browser. (It does not appear in ImageReady.)

Selecting a slice background color

See also:

Name

URL

Target

Message

Alt

Precision


URL
Specifying options for Image slices

URL

Links the selected slice or slices to another file.   You can assign a URL to a user-slice or an auto-slice. If you assign a URL to an auto-slice, the slice is promoted to a user-slice. To specify a URL for the link, enter a URL in the text box or choose a previously created URL from the pop-up menu. For more information, see Creating image maps.

Note: The list of URLs in the Slice palette URL pop-up menu is identical to the list of URLs in the Layer Options dialog box, used for linking hot spots in image maps.

See also:

Name

Background Color

Target

Message

Alt

Precision


Target
Specifying options for Image slices

Target

Indicates the frame in which the selected slice or slices for which you have specified a URL will appear. Frames divide a browser window, so that more than one Web page can be shown at once. A frame can appear as a separate window. The contents of each frame is a separate page (and separate file) with its own URL. (For more information on frames, see the documentation for a Web page authoring application such as Adobe GoLive(TM), or an HTML manual.)

To specify the target frame, enter a frame name in the text box or choose an option from the pop-up menu:

•   A frame name must match a frame previously defined in the HTML file for the document. When a viewer clicks on the slice, the linked file displays in the new frame.

•   _blank displays the linked file in a new window, leaving the original browser window open.

•   _self displays the linked file in the same frame as the original file.

•   _parent displays the linked file in its own original parent frameset. Use this option if the HTML document contains frames and the current frame is a child. The linked file displays in the current parent frame.

•   _top replaces the entire browser window with the linked file, removing all current frames.

See also:

Name

Background Color

URL

Message

Alt

Precision


Message
Specifying options for Image slices

Message

Lets you change the default message in the browser’s status area for a selected slice or slices. By default the slice’s URL is displayed. (Choose Show Options from the Slice palette menu or click the Show Options button on the palette tab ( [image]) to view this option.)

See also:

Name

Background Color

URL

Target

Alt

Precision


Alt
Specifying options for Image slices

Alt

Lets you specify an Alt tag for selected slice or slices. The Alt text appears in place of the slice image in nongraphical browsers. It also appears in place of the image while the image is downloading and as a tool tip in some browsers.(Choose Show Options from the Slice palette menu or click the Show Options button on the palette tab ( [image]) to view this option.)

See also:

Name

Background Color

URL

Target

Message

Precision


Precision
Specifying options for Image slices

Precision

Lets you specify a precise position or dimensions for a slice. To specify the location of the slice’s upper-left corner, enter a value or use the arrows for the X coordinate, the Y coordinate, or both. To specify the width, height, or both for the slice, enter a value or use the arrows for the W field, the H field, or both. Select Constrain Proportions to preserve the current proportions of the slice. (Choose Show Options from the Slice palette menu or click the Show Options button on the palette tab ( [image]) to view this option.)

See also:

Name

Background Color

URL

Target

Message

Alt


Specifying options for No Image slices
Creating and modifying slices

Specifying options for No Image slices

As with Image slices, you can choose a background color and specify a precise position or dimensions for a slice. For more information, see Specifying options for Image slices. In addition, you can create HTML text to be displayed in a No Image slice.

Before you can choose options, make sure the Slice palette is visible (choose Window> Show Slice, or click the Slice palette tab) and select a No Image slice (see Selecting and modifying slices and Specifying slice content.) You enter text in the text field to be displayed in the slice. You can include HTML code to format the text. You also select vertical and horizontal alignment options in the Cell Alignment section, or you can choose to use the browser’s default for horizontal or vertical alignment.

If no text is specified for a No Image cell, the slice will contain a single-pixel spacer cell or a no-wrap character to prevent the slice from being collapsed in browsers that do not display empty slices. You can specify content for empty slices in HTML preferences. See Setting preferences for saving images and HTML files (ImageReady).

Text display should be previewed in browsers. If a viewer changes text size or formatting, the No Image slice size may change, causing gaps or overlaps between slices in the Web page display. Also, text will display in different sizes in Windows and Mac OS.

Note: To see hidden options in the Slice palette, click the Show Options control ( [image]) in the palette tab.

A. Slice thumbnail B. Text field


Applying optimization settings to slices
Creating and modifying slices

Applying optimization settings to slices

You can apply optimization settings to individual Image slices just as you do to full documents, using the Optimize palette. All Image slices in a document use the optimization settings of the full document until you apply new settings.

If you select multiple slices with different optimization settings, only the controls which are relevant to the selected slices are visible. If settings for a control differ among slices, the control is blank. Any settings you choose are applied to all selected slices.

You can also copy optimization settings from one slice to another within a document, or from a slice in one view to a slice in another view in 2-Up or 4-Up view.

Note: Optimization settings applied to No Image slices (slices containing no image data) do not affect the appearance of these slices.

To apply optimization settings to slices:

1  Use the slice selection tool ( [image]) to select a slice or slices. (Slices must contain image data in order for optimization settings to have a visible effect.)

2  Select options in the Optimize palette.

To copy optimization settings between slices:

1  Select the slice that uses the optimization settings you want to copy.

2  Drag the Droplet icon ( [image]) from the Optimize palette onto the slice to which you want to apply the Optimize palette settings.


Linking slices
Creating and modifying slices

Linking slices

You link slices in sets in order to share optimization settings among slices. Linked slices share all settings applied in the Optimize palette. In addition, linked slices in GIF and PNG-8 format share a color palette and dither pattern. (This ensures that visible seams do not appear between adjacent slices.)

When you apply optimization settings to a linked slice, all slices in the set are updated. Auto-slices are linked in one set by default when they are created. When you manually link slices, if you select a user-slice first and then select an auto-slice, the auto-slice is promoted to a user-slice and is unlinked from the auto-slice group. If you select an auto-slice first and then select a user-slice to manually link slices, the user-slice is added to the auto-slice group (and the auto-slice is not promoted.)

In adjacent user-slices in GIF or PNG-8 format which have application dither applied, the dither pattern is applied across the slice boundaries to prevent the appearance of seams between the slices. See Previewing and controlling dithering.

You can unlink individual user-slices, full sets of user-slices, or all user-slice sets in a document.

See also:

To link slices

To unlink slices


To link slices
Linking slices

To link slices:

1  Use the slice selection tool ( [image]) to select one or more slices you want to link.

Note: If the first slice you select is a user-slice, any auto-slices you link to the first slice become user-slices. If the first slice you select is an auto-slice, any user-slices you select are linked to the auto-slice group.

2  Choose Slices > Link Slices.

Each linked set of user-slices is assigned a different color for the slice display graphics in the upper-left corner of the slice. This helps to identify all the slices in one set.

Linked slice set selected and Slice symbol color changed

See also:

To unlink slices


To unlink slices
Linking slices

To unlink slices:

Choose an option for unlinking slices:

•   To unlink a selected user-slice or slices, use the slice selection tool ( [image]) to select one or more linked slices, and then choose Slices > Unlink Slice(s).

•   To unlink all user-slices in a selected set or sets, use the slice selection tool to select one or more linked user-slices, and choose Slices > Unlink Set(s).

•   To unlink all user-slice sets in a document, choose Slices > Unlink All.

See also:

To link slices


Changing the display of slices
Creating and modifying slices

Changing the display of slices

When you select the slice creation or slice selection tool, ImageReady shows slices automatically. You can also show or hide slices using the Show Slices and Hide Slices buttons in the toolbar, and the Show Slices and Hide Slices commands in the Slices menu. Slice preferences control how slices will display.

See also:

To show or hide slices

To change the color of slice lines

To change display symbol appearance

To change slice color adjustments

To display slice lines only


To show or hide slices
Changing the display of slices

To show or hide slices:

•   Select the Show Slices button ( [image]) or the Hide Slices button ( [image]) in the toolbox.

•   Choose Slices > Show Slices or Slices > Hide Slices (command toggles when slices are shown or hidden).

See also:

To change the color of slice lines

To change display symbol appearance

To change slice color adjustments

To display slice lines only


To change the color of slice lines
Changing the display of slices

To change the color of slice lines:

1  Choose File > Preferences > Slices.

2  Under Slice Lines, choose a color from the Line Color pop-up menu.

Changing the color of slices lines also changes the color of selected slice lines to a contrasting color.

See also:

To show or hide slices

To change display symbol appearance

To change slice color adjustments

To display slice lines only


To change display symbol appearance
Changing the display of slices

To change display symbol appearance:

1  Choose File > Preferences > Slices.

2  Under Numbers and Symbols, choose a size for display symbols:

•   Select None to display no numbers or symbols.

•   Select the small icon (the center option, the default setting) to display small numbers and symbols.

•   Select the large icon (the right-hand option) to display large numbers and symbols.

3  For Opacity, enter a value or choose a value to change the opacity of the numbers and symbols display.

See also:

To show or hide slices

To change the color of slice lines

To change slice color adjustments

To display slice lines only


To change slice color adjustments
Changing the display of slices

To change slice color adjustments:

1  Choose File > Preferences > Slices.

2  Enter a value or choose a value from the Color Adjustments pop-up slider for User-slices, Auto-slices, or both.

The value determines the extent of color adjustments that dim the brightness and contrast of unselected slices. These adjustments are for display purposes only and do not affect the final document’s color.   By default, the color adjustment applied to auto-slices is twice the amount of that applied to user-slices.

See also:

To show or hide slices

To change the color of slice lines

To change display symbol appearance

To display slice lines only


To display slice lines only
Changing the display of slices

To display slice lines only:

1  Choose File > Preferences > Slices.

2  Under Slice Lines, select Show Lines Only to display slice lines only and turn off color adjustment and numbers and symbols display.

See also:

To show or hide slices

To change the color of slice lines

To change display symbol appearance

To change slice color adjustments


Working with rollovers
Web Design Features

Working with rollovers

You use the Rollover palette to create rollover effects, in which different states of an image are activated when a viewer performs a mouse action (such as rolling or clicking) over a slice. You can display an animation as a rollover state. You can also create secondary rollovers, in which moving a mouse over one slice causes an image change in another slice. ImageReady adds JavaScript code to a slice’s cell in the HTML table to specify rollover states.

You can delete individual states or all states in a rollover, copy and paste rollover states, and match layers across rollover states.

When you save an optimized document with rollover states, each rollover state is saved as a separate file. By default, rollover states are named using the corresponding slice name plus the mouse action that triggers the rollover state. When you change the name of a slice, rollover states in the slice are renamed. You can change the default naming pattern for slices and rollover states in Slices Preferences. See Specifying options for Image slices.

A. Current state B. Rollover State menu C. Slice selection menu D. New State button E. Trash button

See also:

About layer-based rollovers

Creating, showing, and hiding layers in rollover states

Creating and deleting rollover states

Matching layers across rollover states

Copying and pasting rollover states


About layer-based rollovers
Working with rollovers

About layer-based rollovers

You can use the Layers palette to modify an image for different rollover states. As when working with frames in an animation, you can make layer-based changes to affect a single rollover state or all states in a rollover. You can also make layer-based changes to affect all states in all rollovers associated with an image.

Changes you make to a layer in a rollover state using Layers palette commands and options affect only the current state in which the changes are made (except for layer masks, which affect all rollover states in which the layer is present.) Layers palette commands and options include a layer’s opacity, blending mode, visibility, position, stacking order, and layer effects.

Changes you make to a layer in a rollover state which change the layer’s pixel values, using painting and editing tools, color and tone adjustment commands, filters, type, and other image-editing commands, affect every rollover state in which the layer is included.


Creating, showing, and hiding layers in rollover states
Working with rollovers

Creating, showing, and hiding layers in rollover states

When you create a new layer in a rollover state, the layer is added to all states in the rollover, but is visible only in the current state. For example, if you create a new layer in the second state of a three-state rollover, the new layer is added to all states, but is hidden in the first and third states.

When you show or hide a layer in a rollover state, the visibility of the layer changes for that state only. For example, if you use a multi-layer image to create a three-state rollover, and you hide the top layer in the second state, that layer will still be visible in first and third states.


Creating and deleting rollover states
Working with rollovers

Creating and deleting rollover states

When you create a rollover state, you can select the mouse action which activates the state (except for the first state in a rollover, which is always the Normal state, displayed with no mouse action performed.) You can display an animation as a rollover state. You can delete individual states or all states in a rollover. You can also change the palette display of rollover state thumbnails.

See also:

To create a rollover state

To display an animation in a rollover state

To delete rollover states

To change the thumbnail view of rollover states


To create a rollover state
Creating and deleting rollover states

To create a rollover state:

1  Use the slice selection tool ( [image]) to select a slice.

2  Choose Window > Show Rollover or click the Rollover palette tab to view the palette.

The first rollover state in the Rollover palette is always the Normal state.

3  Choose a method for creating a new rollover state:

•   Click the New State button ( [image]) at the bottom of the palette.

•   Choose New State from the Rollover palette menu.

The new rollover state is identical to the state immediately preceding it, until you make modifications to the image.

4  Use the default rollover state assigned by ImageReady (assigned in the following order: Over, Down, Click, Out, Up, and None) or select a rollover state from the pop-up menu above the rollover thumbnail:

•   Select Over to define the rollover state when the Web viewer rolls over the slice with the mouse with the mouse button up. (Over is automatically selected for the second rollover state.)

•   Select Down to define the rollover state when the Web viewer presses the mouse button on the slice. (This state appears as long as the viewer keeps the mouse button pressed on the slice.)

•   Select Click to define the rollover state when the Web viewer clicks the mouse on the slice. (This state appears after the viewer clicks the mouse, and remains until the viewer activates another rollover state.)

•   Select Out to define the rollover state when the Web viewer rolls the mouse out of the slice. (The Normal state usually serves this purpose.)

•   Select Up to define the rollover state when the Web viewer releases the mouse button over the slice. (The Over state usually serves this purpose.)

•   Select Custom to define a new rollover state. (You must create JavaScript code and add it to the HTML file for the document in order for the Custom rollover option to function. See a JavaScript manual for more information.)

•   Select None to preserve the current state of the image for later use as a rollover state. (A state designated as None will not be displayed on the Web page.)

The Rollover States pop-up menu displays only the rollover states that have not yet been used for the selected slice (with the exception of the None and Custom states, which are always available and can be used repeatedly). You can redefine rollover states as you work (with the exception of the Normal state).

5  Modify the image for the rollover state using the Layers palette and the ImageReady painting and image-editing features in the same way you create animation frames. See Working with layers in animation.

If you modify an area in the image outside the selected slice, ImageReady creates a secondary rollover state, displayed when a viewer triggers the rollover state. Secondary rollover states can greatly increase the interactive nature of a Web page, but will also increase file size and download time.

See also:

To display an animation in a rollover state

To delete rollover states

To change the thumbnail view of rollover states


To display an animation in a rollover state
Creating and deleting rollover states

To display an animation in a rollover state:

1  In the Rollover palette, create a new rollover state or select the thumbnail for a rollover state in which you want to display an animation.

2  In the Animation palette, create frames for the animation.

Use the Preview In command to preview the rollover animation in a browser. (You cannot preview rollover states in ImageReady.)

See also:

To create a rollover state

To delete rollover states

To change the thumbnail view of rollover states


To delete rollover states
Creating and deleting rollover states

To delete rollover states:

•   To delete a single state, select a rollover state and click the Trash button ( [image]) on the Rollover palette or choose Delete State from the Rollover palette menu.

•   To delete all states in a rollover, choose Delete Rollover from the Rollover palette menu.

See also:

To create a rollover state

To display an animation in a rollover state

To change the thumbnail view of rollover states


To change the thumbnail view of rollover states
Creating and deleting rollover states

To change the thumbnail view of rollover states:

1  Select Palette Options from the Rollover palette menu.

2  Select a thumbnail size.

3  Select a Thumbnails Show option:

•   Current Slice to show only the current slice in the thumbnail.

•   Entire Document to show the entire document in the thumbnail.

4  Click OK.

See also:

To create a rollover state

To display an animation in a rollover state

To delete rollover states


Matching layers across rollover states
Working with rollovers

Matching layers across rollover states

You can specify changes made in the Layers palette to be applied to all states in a rollover or all rollover states associated with an image, using the Match Layer Across States and Match Layer Across All Rollovers commands.

To match layer changes across rollover states:

1  In the Layers palette, select the layer containing the element you want to match across frames.

2  Modify layer attributes (including visibility, position, opacity, blending mode, and layer effects) for the selected layer in the current rollover state, as needed.

3  In the Rollover palette, choose an option from the palette menu for matching the layer across rollover states:

•   Choose Match Layer Across States to apply layer attribute modifications you made in step 2 to all states in the current rollover.

•   Choose Match Layer Across All Rollovers to apply layer attribute modifications you made in step 2 to all states in all rollovers associated with the current image.


Copying and pasting rollover states
Working with rollovers

Copying and pasting rollover states

You can copy a rollover state and paste it into another state in the current rollover or into a state in another rollover. Layers in the source state replace layers in the destination state.

You can also copy frames from the Animation palette and paste the frames into the Rollover palette as states, or copy states from the Rollover palette and paste them into the Animation palette as frames.

Note: Copy commands in the Animation palette and the Rollover palette use an internal clipboard available to these commands only. Copying frames or rollover states does not overwrite the primary ImageReady clipboard.

To copy and paste rollover states:

1  Select a rollover state and choose Copy Rollover State from the Rollover palette menu.

2  Select a rollover state in which to paste the copied state:

•   Select a state in the current rollover.

•   Open or display another rollover and select a state.

3  Choose Paste Rollover State from the Rollover palette menu.


Working with image maps
Web Design Features

Working with image maps

Image maps are images on a Web site that contain multiple links to other files. Different areas of an image map, called hot spots, link to different URLs. Image maps can contain links to text files; other images; audio, video, or multimedia files; other pages in the Web site; or other Web sites. The hot spots cannot extend beyond the edges of the image.

Image maps are similar to slices in enabling you to link an area of an image to a URL. However, image maps offer the advantage of enabling you to link circular, polygonal, or rectangular areas in an image, while slices enable you to link only rectangular areas. (If you need to link only rectangular areas, using slices may be preferable to using an image map. Using slices enables you to apply different optimization settings to different areas of an image, and to include rollover states. See Creating and modifying slices.)

See also:

About image maps

Creating image maps


About image maps
Working with image maps

About image maps

You create image maps in ImageReady using layers with layer transparency. You use a different layer for each hot spot in an image map. ImageReady uses the opaque region on the layer to define the hot spot. The image map data is saved in the HTML file for the document. You must save the HTML file with the optimized image in order to create a functioning image map. See Working with image maps.

Image with layer specified as image map, and URL assigned.

You can create a circular, rectangular, or polygonal hot spot. ImageReady places the hot spot to match the layer’s opaque region as closely as possible. If you create a polygonal hot spot, ImageReady closely outlines the opaque region’s outer edge. If you create a circular or rectangular hot spot, ImageReady uses the smallest shape possible to entirely encompass the opaque region, and includes transparent areas on the layer as necessary to create the shape.

Hot spot defined with polygonal shape and with rectangular shape (dotted-line borders for illustration purposes only).

If you overlap hot spots in creating an image map in ImageReady, the topmost layer is the active hot spot in the overlapping areas.

Note: To avoid unexpected results, do not create image maps using slices that contain URL links or rollover states. The image map links may cause slice links and rollover states to be ignored in some browsers.

ImageReady can create client-side and server-side image maps. In client-side image maps, the links are interpreted by the browser itself. In server-side image maps, the links are interpreted by the server. (Note that server-side image maps do not work with sliced images.) Because client-side image maps don’t need to contact the server to function, they are often significantly faster to navigate.


Creating image maps
Working with image maps

Creating image maps

You create image maps using the Layers palette. You can specify image maps to be client-side, server-side, or both, using HTML Preferences. See Setting preferences for saving images and HTML files (ImageReady).

To create an HTML file for an image map:

1  With the Layers palette displayed, choose a layer in the current image with which to create a hot spot. (To use multiple layers in one hot spot, first merge the layers.)

2  Choose a method for selecting layer options:

•   Choose Window > Show Layer Options/Effects or click the Layer Options/Effects palette tab to view the palette. To view layer options in the palette, make sure all layer effects are deselected in the Layers palette. (Otherwise the Layer Options/Effects palette displays options for the layer effect which is selected.)

•   In the Layers palette, double-click the layer or choose Layer Options from the palette menu to display the Layer Options dialog box.

•   Choose Layer > Layer Options.

3  Select Image Map in the Layer Options/Effects palette, or select Use Layer as Image Map in the Layer Options dialog box.

4  Select Polygon, Rectangle, or Circle from the menu to determine the shape of the hot spot.

5  Enter a URL for the link, or choose a previously created URL from the URL pop-up menu. Include the prefix http:// in the URL.

6  If you are using the Layer Options dialog box, click OK.

When you create an HTML file for the image, the HTML code includes the coordinates for the hot spots and links in the image map. See Working with image maps.

You can preview optimized images, including image maps and tiled backgrounds, in your browser using the Preview In command.


The rectangular marquee tool makes rectangular selections.


The move tool moves selections, layers, and guides.


The lasso tool makes freehand selections.


The magic wand tool selects similarly colored areas.


The airbrush tool paints soft-edged strokes.


The paintbrush tool paints brush strokes.


The clone stamp tool paints with a copy of an image.


The history brush tool paints with the selected state or snapshot.


The eraser tool erases pixels and restores parts of an image to a previously saved state.


The pencil tool draws hard-edged strokes


The blur tool blurs hard edges in an image.


The dodge tool lightens areas in an image.


The pen tool lets you draw smooth-edged paths.


The type tool creates type on an image.


The measure tool measures distances, locations, and angles.


The linear gradient tool creates a straight-line blend between colors.


The paint bucket tool fills similarly colored areas with the foreground color.


The eyedropper tool samples colors in an image.


The hand tool moves an image within its window.


The zoom tool magnifies and reduces the view of an image.


The elliptical marquee tool makes elliptical selections.


The single row and single column marquee tools make 1 - pixel wide selections.


The crop tool trims images.


The polygon lasso tool makes freehand and straight-edged selections.


The magnetic lasso tool draws selection borders that cling to the edges of objects.


The line tool draws straight lines.


The pattern stamp tool paints with the selection as a pattern.


The sharpen tool sharpens soft edges.


The smudge tool smudges data in an image.


The burn tool darkens areas in an image.


The sponge tool changes the color saturation of an area.


The magnetic pen tool draws paths that cling to the edges of objects.


The freeform pen tool draws paths directly as you drag.


The add-anchor-point tool adds anchor points to a path.


The delete-anchor-point tool deletes anchor points from a path.


The direct-selection tool selects and moves paths and parts of paths.


The convert-anchor-point tool converts straight line segments to curved segments, and vice versa.


The type mask tool creates selection borders in the shape of type.


The vertical type tool creates vertical type on an image.


The vertical type mask tool creates selection borders in the shape of the vertical type.


The radial gradient tool creates a circular blend between colors.


The angle gradient tool creates an angular blend between colors.


The reflected gradient tool creates symmetric straight-line blends between colors


The diamond gradient tool creates diamond-shaped blends between colors.


The color sampler tool samples up to four locations simultaneously.


The rounded rectangular marquee tool makes rectangular selections with rounded corners.


The background eraser tool erases areas to transparency by dragging.


The magic eraser tool erases solid-colored areas to transparency with a single click.


The art history brush tool paints with stylized strokes that simulate the look of different paint styles.


The Foreground and Background color buttons let you choose a foreground or background color.


The Default colors button returns to the default foreground and background colors (black foreground and white background).


The Switch colors button swaps colors between the foreground and the background.


The Standard mode button lets you turn off Quick Mask mode and return to your original image.


The Quick Mask mode button lets you edit any selection as a mask using an overlay that protects the area outside the selection.


The Standard screen mode button displays artwork in a standard window, with a menu bar at the top and scroll bars on the sides.


The Full screen mode with menu bar button displays artwork in a full-screen window with a menu bar but with no title bar or scroll bars.


The Full screen mode button displays artwork in a full-screen window, but with no title bar, menu bar, or scroll bars.