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 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 as 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 or 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


Looking at the Work Area

The Adobe ImageReady work area includes the command menus at the top of your screen and a variety of tools and palettes for editing and adding elements such as layers and layer masks. You can also add commands and filters to the menus by installing third-party software known as plug-in modules.

See also:

Using the toolbox

Using the document window

Displaying an image’s file size

Using palettes

Using context menus

Viewing images

Setting preferences

Monitoring operations

Using plug-in modules

Previewing an image in a browser

Jumping between applications

Closing files and quitting ImageReady


Using the toolbox
Looking at the Work Area

Using the toolbox

The tools in the toolbox let you select, paint, edit, and view images. Other controls choose foreground and background colors and change the slice or screen display mode. Some tools have associated Brushes and Options palettes which let you define the tools’ painting and editing effects.

For information on the foreground and background color controls, see Choosing the foreground and background colors.

To move the toolbox:

Drag the toolbox by its title bar.

See also:

Selecting tools

Using the tool pointers


Selecting tools
Using the toolbox

Selecting tools

You select a tool from the toolbox by clicking the tool. An arrow at the bottom right of a tool icon indicates hidden tools.

To select a tool:

Do one of the following:

•   To select a visible tool, click its icon.

•   To select a hidden tool, position the pointer on the visible tool, and then click and drag to highlight the tool you want.

Use the following tool shortcuts:
• To select a tool quickly, press its shortcut key on the keyboard. To display the shortcut key for a tool, place the pointer over the tool in the toolbox.
• To cycle through a set of hidden tools, press Shift and press the visible tool’s shortcut key.


Using the tool pointers
Using the toolbox

Using the tool pointers

When you select most tools, the mouse pointer matches the tool’s icon. The marquee pointer appears by default as cross-hairs, and the text tool pointer as an I-beam.

Each default pointer has a different hot spot, where an effect or action in the image begins. With all tools except the move tool and the type tool, you can switch to precise pointers, which appear as cross-hairs centered around the hot spot.

To set the tool pointer appearance:

1  Choose File > Preferences > Cursors.

2  Choose a tool pointer setting:

•   Click Standard under Painting Cursors, Other Cursors, or both to display pointers as tool icons.

•   Click Precise under Painting Cursors, Other Cursors, or both to display pointers as cross-hairs.

•   Click Brush Size under Painting Cursors to display the painting tool cursors as brush shapes representing the size of the current brush. Brush Size cursors may not display for very large brushes.

3  Click OK.

Standard and Precise tool pointers

The Painting Cursors options control the pointers for the paintbrush, pencil, and eraser tools.

The Other Cursors options control the pointers for the marquee, lasso, magic wand, eyedropper, paint bucket, and slice tools.

To toggle between standard and precise cursors in some tool pointers, press Caps Lock. Press Caps Lock again to return to your original setting.


Using the document window
Looking at the Work Area

Using the document window

The ImageReady document window allows you to switch easily between original and optimized views of an image, and to view the original image and multiple versions of an optimized image simultaneously. (Most tools cannot be used in optimized views.)

You can switch between the original image and the optimized image as you work. You can also select 2-Up display to view two versions of the image side by side in the same window, or 4-Up display to view four versions of the image in the same window.

When you first select 2-Up or 4-Up display, ImageReady automatically generates versions of the image based on the current Optimize palette settings. (2-Up view displays the original image and the optimized image with current Optimize palette settings. 4-Up view displays the original image, the optimized image with current Optimize palette settings, and two additional versions of the optimized image with optimization settings adjusted for comparison.) You can select any version of the image in the multiple display and apply new optimization settings using the Optimize palette. For information on applying optimization settings, see Optimizing Images for the Web.

You can also open multiple windows to display different views of the same file.

Original image and Optimized image display

See also:

To change the view in the document window

To display multiple windows

To arrange multiple windows


To change the view in the document window
Using the document window

To change the view in the document window:

With an image open in ImageReady, do one of the following:

•   To display the original image, click the Original tab at the top of the document window.

•   To display the optimized image, click the Optimized tab at the top of the document window.

•   To display the original and optimized images side by side, click the 2-Up tab at the top of the document window.

•   To display the original and three optimized images side by side, click the 4-Up tab at the top of the document window.

•   Press Ctrl+Y (Windows) or Command+Y (Mac OS) to cycle between the four views.

See also:

To display multiple windows

To arrange multiple windows


To display multiple windows
Using the document window

To display multiple windows:

Choose View > New View, or drag any tab away from the document window.

The new window uses the same display and optimization settings as the original window. You can change the display and optimization settings in a window without affecting other windows.

A list of open windows appears in the Window menu. Available memory may limit the number of windows per image.

You can also create a new window with a duplicate of an original or optimized image, to save a copy of the image to disk. See Duplicating images.

See also:

To change the view in the document window

To arrange multiple windows


To arrange multiple windows
Using the document window

To arrange multiple windows:

Do one of the following:

•   Choose Window > Cascade to display windows stacked and cascading from the top left to the bottom right of the screen.

•   Choose Window > Tile to display windows edge to edge.

•   In Windows, choose Window > Arrange Icons to display image icons at the bottom of the ImageReady work area.

See also:

To change the view in the document window

To display multiple windows


Displaying an image's file size
Looking at the Work Area

Displaying an image’s file size

Information about the file size and other features of the original and optimized images is displayed in the Image Info pop-up menus at the bottom of the document window. If the document window is wide enough, two Image Info pop-up menus appear, enabling you to view two different information options for the image at the same time. For more information about original and optimized images, see Optimizing Images for the Web.

To display image information:

1  Position the pointer over the Image Info pop-up menu and hold down the mouse button.

2  Select a view option:

•   Original/Optimized File Size to view the original and optimized file size images. The first value indicates the original image file size. The second value (present if the original image has been optimized) indicates the optimized image file size and file format based on the current settings in the Optimize palette.

•   Optimized Information to view the file format, file size, number of colors, and dither percentage for the optimized image.

•   Image Dimensions to view the image’s pixel dimensions.

•   Watermark Strength to view the strength of the Digimarc(R) digital watermark in the optimized image, if present. For more information on using digital watermarks, see “Adding digital copyright information with the Digimarc filter” in online Help.

•   Undo/Redo Status to view the number of undos and redos that are available for the image.

•   Size/Download Time (14.4Kbps/28.8Kbps/56.6Kbps) to view the file size for the optimized image and estimated download time using the selected modem speed.

Note: Download times may vary based on Internet traffic and modem compression schemes. The value displayed is an approximation.


Using palettes
Looking at the Work Area

Using palettes

Palettes help you monitor and modify images. You can display or hide them as you work. By default, they appear in stacked groups.

To show or hide a palette:

Choose Window > Show or Window > Hide.

Show displays the selected palette at the front of its group; Hide conceals the entire group.

See also:

Changing the palette display

Docking palettes together

Setting the positions of palettes and dialog boxes

Using the Options palette

Using pop-up sliders

Using the Info palette


Changing the palette display
Using palettes

Changing the palette display

You can reorganize your work space using the following techniques:

•   To hide or display all open palettes and the toolbox, press Tab. To hide or display the palettes only, press Shift+Tab.

•   To make a palette appear at the front of its group, click the palette’s tab.

•   To move an entire palette group, drag its title bar.

•   To rearrange or separate a palette group, drag a palette’s tab. Dragging a palette outside of an existing group creates a new group.

•   To move a palette to another group, drag the palette’s tab to that group.

Click the palette tab, and drag the palette to a new group.

Palettes are grouped.

•   To display a palette menu, position the pointer on the triangle in the upper right corner of the palette, and hold down the mouse button.

Hold the mouse on the triangle in the upper right corner to display the palette menu.

•   To change the height of a palette (except the Color, Info, Layer Options/Effects, Optimize, Options, Slice, or Type palette), drag its lower right corner (Windows) or drag the size box at its lower right corner (Mac OS).

Click to collapse or expand palette. A. Windows B. Mac OS

•   To collapse a group to palette titles only, click the Minimize/Maximize box (Windows) or the Zoom box (Mac OS); double-click a palette’s tab, if the palette is currently at minimum size. You can still access the menu of a collapsed palette.

•   To show or hide options for palettes that include hidden options (the Optimize, Color, Type, Layer Options, and Slice palettes), click the Show Options button ( [image]) on the palette tab to cycle through palette displays, or choose Show Options or Hide Options from the palette menu.


Docking palettes together
Using palettes

Docking palettes together

When palettes are grouped together, you can place them together in the tabbed mode, as shown in Changing the palette display. You can also dock palettes so that more than one palette is visible at the same time, and so that you can move palettes as a group. For example, you can dock the Optimize palette and the Color Table palette together.

Note: You cannot dock palette groups together.

To dock palettes together:

Drag a palette’s tab to the bottom of another palette so that the bottom of the second palette is highlighted.

To move an entire docked group, drag its title bar.

Palettes grouped in docked mode


Setting the positions of palettes and dialog boxes
Using palettes

Setting the positions of palettes and dialog boxes

The positions of all open palettes and moveable dialog boxes are saved when you exit the program. Alternatively, you can always start with default palette positions or restore default positions at any time.

To reset palettes to the default positions:

Do one of the following:

•   Choose Window > Reset Palettes.

•   Choose File > Preferences > General, and click Reset Palette Locations to Default.

To always start with the default palette and dialog box positions:

1  Choose File > Preferences > General.

2  Deselect Save Palette Locations. The change takes effect the next time you start ImageReady.


Using the Options palette
Using palettes

Using the Options palette

Most tools have an Options palette. Depending on the tool selected, the palette’s appearance and available choices change.

Some settings in the Options palette are common to several tools (such as painting modes and opacity), and some are specific to one tool (such as the Auto Erase setting for the pencil tool).

To display the Options palette:

Do one of the following:

•   Choose Window > Show Options.

•   Double-click a tool in the toolbox (except the zoom or hand tool).

Magic Wand Options palette


Using pop-up sliders
Using palettes

Using pop-up sliders

A number of palettes and dialog boxes contain settings that use pop-up sliders (for example, the Opacity option in the Layers palette).

To use a pop-up slider:

Do one of the following:

•   Position the pointer over the triangle next to the setting, hold down the mouse, and drag the slider or angle radius to the desired value.

•   Click the triangle next to the setting to open the pop-up slider box, and drag the slider or angle radius to the desired value. Click outside the slider box or press Enter or Return to close the slider box. To cancel changes, press Esc.

To increase or decrease values in 10% increments when the pop-up slider box is open, hold down Shift and press the Up or Down arrow key.


Using the Info palette
Using palettes

Using the Info palette

The Info palette displays information about the color values beneath the pointer and, depending on the tool in use, other useful measurements.

A. RGB value B. Opacity C. X and Y coordinates of pointer D. Hexadecimal value E. Index color table position F. Width and height of marquee

To display the Info palette:

Choose Window > Show Info.

The Info palette displays the following specific information:

•   The RGB numeric values for the color beneath the pointer.

•   The Opacity value for the pixels beneath the pointer.

•   The hexadecimal value for the color beneath the pointer.

•   The index color table position for the color beneath the pointer.

•   The x and y coordinates of the pointer.

•   The x and y coordinates of your starting position (before you click in the image) and your ending position (as you drag in the image) when you use the marquee tool, the shape tools, the crop tool, and the slice tool.

•   The width (W) and height (H) of the selection as you drag when you use the crop tool, the shape tools, the slice tool, or the zoom tool.

•   The percentage change in width (W) and height (H), the angle of rotation (A), and the angle of horizontal skew (H) or vertical skew (V) when you use a Transform or Free Transform command.


Using context menus
Looking at the Work Area

Using context menus

In addition to the menus at the top of your screen, context-sensitive menus display commands relevant to the active tool, selection, or palette.

To display context menus:

1  Position the pointer over an image or palette item.

2  Click with the right mouse button (Windows) or hold down Control and press the mouse button (Mac OS).


Viewing images
Looking at the Work Area

Viewing images

The window controls let you change the window display, including menu bar, title bar, and scroll bar options. The hand tool, the zoom tools, and the Zoom commands let you view different areas of an image at different magnifications.

See also:

To change the display of document windows

To view another part of an image

Magnifying and reducing the view


To change the display of document windows
Viewing images

To change the display of document windows:

Click one of the following window controls:

A. Standard Screen mode B. Full Screen mode with menu bar C. Full Screen mode

•   The left window control to display the default window with a menu bar at the top and scroll bars on the sides.

•   The center window control to display a full-screen window with a menu bar but no title bar or scroll bars and with a 50% gray background.

•   The right window control to display a full-screen window with no title bar, menu bar, or scroll bars, and with a black background.

See also:

To view another part of an image

Magnifying and reducing the view


To view another part of an image
Viewing images

To view another part of an image:

Do one of the following:

•   Use the window scroll bars.

•   Select the hand tool, and drag to pan over the image.

Drag the hand tool to pan over the image.

To use the hand tool while another tool is selected, hold down the spacebar as you drag in the image.

See also:

To change the display of document windows

Magnifying and reducing the view


Magnifying and reducing the view
Viewing images

Magnifying and reducing the view

You can magnify or reduce your view using various methods. The window’s title bar displays the zoom percentage, unless the window is too small for the display to fit.

Note: The 100% view of an image displays an image as it will appear in a browser (based on the monitor resolution and the image resolution). See About image size and resolution.

See also:

To zoom in

To zoom out

To magnify by dragging

To display an image at 100%

To change the view to fit the screen

To automatically resize the window when magnifying or reducing the view


To zoom in
Magnifying and reducing the view

To zoom in:

Do one of the following:

•   Select the zoom tool, and click the area you want to magnify. Each click magnifies the image to the next preset percentage, centering the display around the point you click. At maximum magnification, the center of the zoom tool appears empty.

•   Choose View > Zoom In to magnify to the next preset percentage.

•   Click on the Zoom Level pop-up menu at the bottom left of the document window, and choose a zoom level.

See also:

To zoom out

To magnify by dragging

To display an image at 100%

To change the view to fit the screen

To automatically resize the window when magnifying or reducing the view


To zoom out
Magnifying and reducing the view

To zoom out:

Do one of the following:

•   Select the zoom tool. Hold down Alt (Windows) or Option (Mac OS) to activate the zoom-out tool, and click the area of the image you want to reduce. Each click reduces the view to the previous preset percentage.

•   Choose View > Zoom Out to reduce to the previous preset percentage.

See also:

To zoom in

To magnify by dragging

To display an image at 100%

To change the view to fit the screen

To automatically resize the window when magnifying or reducing the view


To magnify by dragging
Magnifying and reducing the view

To magnify by dragging:

1  Select the zoom tool.

2  Drag over the part of the image you want to magnify.

Drag the zoom tool to magnify the view.

The area inside the zoom marquee is displayed at the highest possible magnification.

See also:

To zoom in

To zoom out

To display an image at 100%

To change the view to fit the screen

To automatically resize the window when magnifying or reducing the view


To display an image at 100%
Magnifying and reducing the view

To display an image at 100%:

Do one of the following:

•   Double-click the zoom tool.

•   Choose View > Actual Size.

Press Ctrl+Alt+0 (Windows) or Command+Option+0 (Mac OS) to display the image at 100%.

See also:

To zoom in

To zoom out

To magnify by dragging

To change the view to fit the screen

To automatically resize the window when magnifying or reducing the view


To change the view to fit the screen
Magnifying and reducing the view

To change the view to fit the screen:

Do one of the following:

•   Double-click the hand tool.

•   Choose View > Fit on Screen.

These options scale both the view and the window size to fit the available screen space. If the image is smaller than the monitor size, the image is displayed at 100%.

See also:

To zoom in

To zoom out

To magnify by dragging

To display an image at 100%

To automatically resize the window when magnifying or reducing the view


To automatically resize the window when magnifying or reducing the view
Magnifying and reducing the view

To automatically resize the window when magnifying or reducing the view:

In the Zoom Options palette, select Resize Windows to Fit. The window resizes when you magnify or reduce the view of the image.

When Resize Windows to Fit is deselected (the default), ImageReady maintains a constant window size regardless of the image’s magnification. This can be helpful when using smaller monitors or working with tiled views.

 Use the following zoom shortcuts:
• To select the zoom-in tool, press Ctrl+spacebar (Windows) or Command+spacebar (Mac OS).
• To select the zoom-out tool, press Ctrl+Alt+ spacebar/Command+Option+spacebar.
• To zoom in, press Ctrl+[=]/Command+[=].
• To zoom out, press Ctrl+[-]/Command+[-].

See also:

To zoom in

To zoom out

To magnify by dragging

To display an image at 100%

To change the view to fit the screen


Setting preferences
Looking at the Work Area

Setting preferences

Numerous program settings are stored in a preferences file, located in the registry (Windows) or the Preferences folder in your System Folder (Mac OS). The settings stored in this file include general display options, file-saving options, slicing options, HTML options, optimization options, cursor options, transparency options, and options for plug-ins and scratch disks. Most of these options are set in dialog boxes that can be opened through the Preferences submenu in the File menu. Preference settings are saved each time you exit ImageReady.

Unexpected behavior in ImageReady may indicate damaged preferences. You can restore preferences to their default settings to remove damaged preferences. Restoring default preferences deletes any custom preference settings you had applied.

See also:

To open a preferences dialog box

To restore all preferences to their default settings


To open a preferences dialog box
Setting preferences

To open a preferences dialog box:

1  Choose the desired preference set from the File > Preferences submenu.

2  To switch to a different preference set, do one of the following:

•   Choose the preference set from the menu at the top of the dialog box.

•   Click Next to display the next preference set in the menu list; click Prev to display the previous preference set.

For information on a specific preference option, see the Index.

See also:

To restore all preferences to their default settings


To restore all preferences to their default settings
Setting preferences

To restore all preferences to their default settings:

Do one of the following:

•   In Windows, press and hold Alt+Control+Shift immediately after launching ImageReady. Click Yes to restore preferences.

•   In Mac OS, open the Preferences folder in the System Folder, and drag the Adobe ImageReady 2.0 Prefs file to the Trash.

A new Preferences file will be created the next time you start ImageReady.

See also:

To open a preferences dialog box


Monitoring operations
Looking at the Work Area

Monitoring operations

A progress bar in ImageReady indicates that an operation is in process. You can interrupt the process or have the program notify you when it has finished.

To cancel operations:

Hold down Esc until the operation in progress has stopped (Windows) or press Command+period (Mac OS).

To set notification for completion of operations:

1  Choose File > Preferences > General.

2  Select Notify When Done.

3  Choose one of the following (Mac OS only):

•   System Alert to use your system alert for notification.

•   Text to Speech to use a spoken notification.

4  Click OK.


Using plug-in modules
Looking at the Work Area

Using plug-in modules

Plug-in modules are software programs developed by Adobe Systems and by other software developers in conjunction with Adobe Systems to add features to ImageReady. A number of importing, exporting, and special-effects plug-ins come with your program; they are automatically installed in the Photoshop Plug-ins folder or the ImageReady Only Plug-ins folder inside the Photoshop Plug-ins folder.

You can select an additional plug-ins folder to use plug-ins stored with another application, such as Adobe Photoshop, while in ImageReady. You can also create a shortcut (Windows) or an alias (Mac OS) for a plug-in stored in another folder on your system. You can then add the shortcut or alias to the Plug-ins folder to use that plug-in with ImageReady.

Once installed, plug-in modules appear as options in the Import or Export menu; as file formats in the Open, Save As, and Save a Copy dialog boxes; or as filters in the Filter submenus. Plug-ins may also add new items to command menus, new palettes, new toolbars, and other new interface features.

See also:

To install an Adobe Systems plug-in module

To select an additional plug-ins folder


To install an Adobe Systems plug-in module
Using plug-in modules

To install an Adobe Systems plug-in module:

Do one of the following:

•   Use the plug-in installer, if provided.

•   In Windows, copy the module into the Plug-ins folder in the Photoshop folder.

•   In Mac OS, Option-drag a copy of the module to the Plug-ins folder inside the Photoshop folder.

Note: When you copy or drag the plug-in files into the Plug-ins folder, make sure that the files are uncompressed.

Follow any installation instructions that come with third-party plug-ins.

See also:

To select an additional plug-ins folder


To select an additional plug-ins folder
Using plug-in modules

To select an additional plug-ins folder:

1  Choose File > Preferences > Plug-Ins & Scratch Disk.

2  Select Additional Plug-ins Folder.

3  Click Choose, and select a folder or directory from the list. Make sure that you do not select a location inside the Plug-ins folder. To display the contents of a folder, double-click the directory (Windows) or click Open (Mac OS).

4  When you have highlighted the additional plug-ins folder, click OK (Windows) or Select (Mac OS).

5  Restart ImageReady.

See also:

To install an Adobe Systems plug-in module


Previewing an image in a browser
Looking at the Work Area

Previewing an image in a browser

You can open a browser while working in ImageReady and preview an optimized image in the browser. You can preview the image in any browser installed on your system. The browser displays the image with a caption listing the image’s file type, pixel dimensions, file size, and compression specifications in the first paragraph, and filename and other HTML information in the second paragraph.

When you install ImageReady, all browsers currently on your system are added to the Preview In menu. You can add additional browsers to the menu, and specify which browser will be launched when using a keyboard shortcut.

See also:

To preview an optimized image in a browser

To add a browser to the Preview In menu

To specify a browser to be launched by the Preview In keyboard shortcut


To preview an optimized image in a browser
Previewing an image in a browser

To preview an optimized image in a browser:

Launch a browser:

•   Press Ctrl+Alt+P (Windows) or Command+Option+P (Mac OS). ImageReady launches the browser you have specified to be used for previewing or the first browser in the Preview In alphabetical submenu.

•   Select File > Preview In. Then choose a browser from the submenu, and click OK. (Choose Other to select a browser not listed in the submenu.)

See also:

To add a browser to the Preview In menu

To specify a browser to be launched by the Preview In keyboard shortcut


To add a browser to the Preview In menu
Previewing an image in a browser

To add a browser to the Preview In menu:

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

2  Drag the icon for the shortcut or alias into the Preview In folder, located in the Helpers folder in the Photoshop program folder.

3  Restart ImageReady to view the browser in the Preview In menu.

See also:

To preview an optimized image in a browser

To specify a browser to be launched by the Preview In keyboard shortcut


To specify a browser to be launched by the Preview In keyboard shortcut
Previewing an image in a browser

To specify a browser to be launched by the Preview In keyboard shortcut:

Place brackets ([]) around the name of the browser in the Preview In folder, located in the Helpers folder in the Photoshop folder. The bracketed browser is launched when you press Ctrl+Alt+P (Windows) or Command+Option+P (Mac OS). The brackets do not appear in the Preview In submenu. If no browser is bracketed, the keyboard shortcut launches the first browser in the Preview In submenu. The shortcut specification takes effect the next time you launch ImageReady.

See also:

To preview an optimized image in a browser

To add a browser to the Preview In menu


Jumping between applications
Looking at the Work Area

Jumping between applications

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

Jumping to an application saves you from having to close the file in ImageReady and reopen it in the other application.

See also:

Jumping between Photoshop and ImageReady

Jumping from ImageReady to other applications


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 ImageReady and Photoshop:

Choose a method for jumping to Photoshop:

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

•   Choose File > Jump To > Photoshop.

ImageReady saves the original file and loads it into Photoshop.


Jumping from ImageReady to other applications
Jumping between applications

Jumping from ImageReady to other applications

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

When you install ImageReady, Adobe graphics-editing and HTML-editing applications currently on your system are added to the Jump To submenu. You can add more 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 editor, the optimized file and the HTML file are saved and opened in the destination application. If the image contains slices, all files for the full image are included.

See also:

To jump to another application from 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 ImageReady
Jumping from ImageReady to other applications

To jump to another application from ImageReady:

1  Choose a method for jumping to the destination application:

•   To launch a graphics-editing application, choose Ctrl+Shift+M (Windows) or Command+Shift+M (Mac OS). 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, and select an application from the submenu.

2  If the file has been modified since the last save, choose an option in ImageReady 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 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 or the Jump To HTML Editor folder in the Helpers folder in the Photoshop folder.

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

See also:

To jump to another application from 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 ImageReady to other applications

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

Place brackets ([]) around the name of the application in the Jump To 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, the keyboard shortcut launches Photoshop.

See also:

To jump to another application from ImageReady

To add an application to the Jump To submenu


Closing files and quitting ImageReady
Looking at the Work Area

Closing files and quitting ImageReady

To close a file:

1  Choose File > Close.

2  Choose whether to save the file:

•   Click Yes (Windows) or Save (Mac OS) to save the file.

•   Click No (Windows) or Don’t Save (Mac OS) to close the file without saving it.

To exit ImageReady:

1  Choose File > Exit (Windows) or File > Quit (Mac OS).

2  Choose whether to save any open files:

•   Click Yes (Windows) or Save (Mac OS) for each open file to save the file.

•   Click No (Windows) or Don’t Save (Mac OS) for each open file to close the file without saving it.


Getting Images into ImageReady

In Adobe ImageReady you can open images created in an image-editing or illustration application, such as Adobe Photoshop or Adobe Illustrator(R). You can also scan in images, or create images directly in ImageReady. Images in ImageReady display information as bitmaps, that is, as pixels. To create effective artwork, you must understand some basic concepts about how to work with digital images, how to produce high-quality scans, how to adjust the resolution and size of images, and how to work with a variety of file formats.

See also:

About image size and resolution

Changing an image’s pixel dimensions

Color bit depth

Scanning images

Creating new images

Opening and importing images

Cropping an image

Increasing the size of the work canvas


About image size and resolution
Getting Images into ImageReady

About image size and resolution

In order to produce high-quality images using ImageReady, it is important to understand how the pixel data of images is measured and displayed. For information about how pixel data is displayed as color on-screen, see Color bit depth.

See also:

Pixel dimensions

On-screen display size

Image resolution

Monitor resolution

File size


Pixel dimensions
About image size and resolution

Pixel dimensions

The number of pixels along the height and width of a bitmap image constitutes the image’s pixel dimensions. The display size of an image on-screen is determined by the pixel dimensions of the image plus the size and setting of the monitor.

A typical 13-inch monitor displays 640 pixels horizontally and 480 vertically. An image with dimensions of 640 pixels by 480 pixels would fill this small screen. On a larger monitor with a 640-pixels-by-480-pixels setting, the same image (with 640-pixels-by-480-pixels dimensions) would still fill the screen, but each pixel would appear larger. Changing the setting of this larger monitor to 1152 pixels by 870 pixels would display the image at a smaller size, occupying only part of the screen.

When preparing an image for online display (for example, a Web page that will be viewed on a variety of monitors), pixel dimensions become especially important. Because your image may be viewed on a 13-inch monitor, you may want to limit the size of your image to 600 pixels by 400 pixels to allow room for the Web browser window controls.


On-screen display size
About image size and resolution

On-screen display size

How large an image appears on-screen depends on a combination of several factors––the pixel dimensions of the image, the monitor size, and the monitor resolution setting. The examples below show a 620 x 400 pixel image displayed with various monitor sizes and monitor resolutions.


Image resolution
About image size and resolution

Image resolution

The number of pixels displayed per unit of length in an image is called the image resolution, usually measured in pixels per inch (ppi).


Monitor resolution
About image size and resolution

Monitor resolution

The number of pixels or dots displayed per unit of length on the monitor constitutes the monitor resolution, usually measured in dots per inch (dpi). Monitor resolution depends on the size of the monitor plus its resolution setting. Typical monitor resolution is approximately 96 dpi on a PC and 72 dpi on a Macintosh.


File size
About image size and resolution

File size

The file size of a digital image is measured in kilobytes (K) or megabytes (MB) and is roughly proportional to the total number of pixels in the image. Due to varying compression methods used by GIF, JPEG, and PNG file formats, file sizes can vary considerably for the same pixel dimensions. Image optimization thus becomes a compromise between image quality (capturing all the data you need) and file size.


Changing an image's pixel dimensions
Getting Images into ImageReady

Changing an image’s pixel dimensions

Once you have scanned or imported an image into ImageReady, you can adjust its pixel dimensions using the Image Size command.

See also:

About resampling

Choosing an interpolation method

Changing the pixel dimensions of an image


About resampling
Changing an image’s pixel dimensions

About resampling

Resampling refers to changing the pixel dimensions (and therefore display size) of an image. 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. See Choosing an interpolation method.

A. Downsampled B. Original C. Resampled up (Selected pixels displayed for each image.)

Keep in mind that resampling can result in poorer image quality. For example, when you resample an image to smaller pixel dimensions, the image will lose some detail and sharpness. Applying the Unsharp Mask filter to a resampled image can help refocus the image’s details. For more information, see Sharpening the image.

A. Original  B. Downsampled C. Unsharp Mask applied


Choosing an interpolation method
Changing an image’s pixel dimensions

Choosing an interpolation method

When an image is resampled, Adobe ImageReady uses an interpolation method to assign color values to any new pixels it creates, based on the color values of existing pixels in the image. The more sophisticated the method, the more quality and detail from the original image are preserved.

The General Preferences dialog box lets you specify a default interpolation method to use whenever images are resampled with the Image Size or transformation commands. The Image Size command also lets you specify an interpolation method other than the default.

To specify the default interpolation method:

1  Choose File > Preferences > General.

2  For Interpolation, choose one of the following options:

•   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. However, this method can result in jagged effects, which become apparent when distorting or scaling an image or performing multiple manipulations on a selection.

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


Changing the pixel dimensions of an image
Changing an image’s pixel dimensions

Changing the pixel dimensions of an image

When preparing images for online distribution, you must specify image size in terms of the pixel dimensions. Keep in mind that changing pixel dimensions affects not only the size of an image on-screen but also its image quality. See About resampling.

To change the pixel dimensions of an image:

1  Choose Image > Image Size.

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 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. For information on batch processing, see Automating Tasks.

•   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  Select a resampling method from the Quality pop-up menu.

6  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 OK to change the pixel dimensions and resample the image.


Color bit depth
Getting Images into ImageReady

Color bit depth

Color bit depth, also called pixel depth or bit resolution, measures how much color information is available to display pixels in an image. Greater pixel depth (more bits of information per pixel) means more available colors and more accurate color representation in the digital image. For example, a pixel with a pixel depth of 1 has two possible values: black and transparent. A pixel with a pixel depth of 8 has 28 (or 256) possible values. And a pixel with a bit depth of 24 has 224 (or roughly 16 million) possible values. PNG-8 and GIF files support 8-bit color. JPEG and PNG-24 files support 24-bit color.

1-bit (bitmap), 8-bit (grayscale)

8-bit (Web palette)


Scanning images
Getting Images into ImageReady

Scanning images

Before you scan an image, make sure that the software necessary for your scanner has been installed. To ensure a high-quality scan, you should predetermine the scanning resolution and dynamic range you will need for your image. These preparatory steps can also prevent unwanted color casts from being introduced by your scan.

Scanner drivers are provided and supported by the manufacturers of the scanners, not by Adobe Systems. If you have problems with scanning, make sure that you are using the latest version of the appropriate scanner driver.

See also:

Importing scanned images

Importing an image using the TWAIN interface


Importing scanned images
Scanning images

Importing scanned images

You can import scanned images directly from any scanner that has an Adobe ImageReady-compatible plug-in module or that supports the TWAIN interface. To import the scanner using a plug-in module, choose the scanner name from the File > Import submenu. See your scanner documentation for instructions on installing the scanner plug-in; see Monitoring operations for general plug-in information.

If your scanner does not have an Adobe ImageReady-compatible scanner driver, import the scanner using the TWAIN interface. For more information, see Importing an image using the TWAIN interface.

If you can’t import the scan using the TWAIN interface, use the scanner manufacturer’s software to scan your images, and save the images as TIFF, PICT, or BMP files. Then open the files in Adobe ImageReady.


Importing an image using the TWAIN interface
Scanning images

Importing an image using the TWAIN interface

TWAIN is a cross-platform interface for acquiring images captured by certain scanners, digital cameras, and frame grabbers. The manufacturer of the TWAIN device must provide a Source Manager and TWAIN Data source for your device to work with ImageReady.

Adobe ImageReady supports the current TWAIN_32 standard for scanning. Contact your scanner manufacturer for information on the availability of TWAIN_32 source modules.

To import an image using the TWAIN interface:

1  If you’re using the TWAIN device for the first time with Adobe ImageReady, choose File > Import > Select TWAIN_32 Source (Windows) or TWAIN Select (Mac OS). Then select the device you’re using. You do not need to repeat this step for subsequent use of the TWAIN module.

If more than one TWAIN device is installed in your system and you want to switch devices, use the Select Source command.

2  To import the image, choose File > Import > TWAIN _32 (Windows) or TWAIN Acquire (Mac OS).


Creating new images
Getting Images into ImageReady

Creating new images

The New command lets you create a blank, untitled ImageReady image.

To create a new image:

1  Choose File > New.

2  Type a name for the image and set the width and height.

3  For Contents of First Layer, select one of the following:

•   White to fill the background with white, the default background color.

•   Background Color to fill the image with the current background color. See Choosing the foreground and background colors.

•   Transparent to create an image containing a single layer with no color values.

4  Click OK.


Opening and importing images
Getting Images into ImageReady

Opening and importing images

Adobe ImageReady lets you open and import images in the following file formats: Adobe Illustrator, Adobe Photoshop, BMP, EPS, FlashPix, FLIC, FLI, GIF, JPEG, PCX, PDF, anti-aliased PICT (Mac OS only), PICT Resource (Mac OS only), Pixar, PNG, QuickTime Movie, Targa, and TIFF. You can have multiple images open at one time.

When an Illustrator, PDF, or EPS file is opened or placed in ImageReady, it is rasterized—the mathematically defined lines and curves of the vector image are converted into the pixels or bits of a bitmap image.

You can also import a folder of images as an animation, in which each image becomes a frame in the animation. See Opening and importing files as animated GIFs.

To open a file:

1  Choose File > Open.

2  Select the file.

3  Click Open.

To open a recently used file:

Choose File > Recent Files, and select a file from the submenu.

To import a file:

1  Choose File > Import.

2  Choose the import module from the Import submenu. The options for some import modules are discussed later in this section.

See also:

Placing images into ImageReady images

Importing an anti-aliased PICT file (Mac OS)

Importing PICT Resources (Mac OS)


Placing images into ImageReady images
Opening and importing images

Placing images into ImageReady images

You can place images from other applications into ImageReady files and indicate precisely where to place the imported images.

To place an image into an Adobe ImageReady image:

1  Open the Adobe ImageReady image into which you want to place the image.

2  Choose File > Place.

3  Select offset options:

•   From the Horizontal pop-up menu, choose an option for placing the file horizontally with respect to the ImageReady image. In the Pixels text box, enter the number of pixels to offset the placed image horizontally.

•   From the Vertical pop-up menu, choose an option for placing the file vertically with respect to the ImageReady image. In the Pixels text box, enter the number of pixels to offset the placed image vertically.

Note: To enter a negative number (and offset the placed file to the left or below the ImageReady image), type a hyphen (-) before the number.

4  Click Choose, and select the file you want to place. Then click Open.

5  Click OK.

6  If you are placing an Adobe Illustrator file, choose Rasterize options:

•   Enter Width and Height values for Image Size.

•   Click Anti-alias to blend edges.

•   Click Constrain Proportions to preserve image proportions when resizing.

7  Click OK.


Importing an anti-aliased PICT file (Mac OS)
Opening and importing images

Importing an anti-aliased PICT file (Mac OS)

Choose File > Import > Anti-aliased PICT to import object-oriented PICT files (such as those created with MacDraw and Canvas) as smooth-edged, or anti-aliased, images. Because the entire PICT file must be held in memory for this module to operate, you may not be able to use the module with large PICT files.

The Anti-aliased PICT dialog box indicates the current file size and dimensions. To change the image dimensions, enter new values for Width and Height. The file size is then updated. To maintain image proportions, select Constrain Proportions.

You can choose grayscale or RGB color mode for an anti-aliased PICT.


Importing PICT Resources (Mac OS)
Opening and importing images

Importing PICT Resources (Mac OS)

The PICT Resource module lets you read PICT resources from a file—for example, from another application. To open a PICT resource, choose File > Import > PICT Resource.

To preview a resource, click Preview. Click the arrow buttons to step forward and backward through the resources. Note that the number displayed for Resource refers to the resource’s position in ascending order in the resource fork and not to the resource’s identification number.


Cropping an image
Getting Images into ImageReady

Cropping an image

ImageReady provides several ways to crop images:

•   Use the Crop command or the crop tool ( [image]) set to Delete to discard the area outside of a rectangular selection.

•   Use the Crop command or the crop tool ( [image]) set to Hide to hide the area outside of a rectangular selection. Use this feature when creating animations with elements that move from offscreen into the live image area.

•   Use the Trim command to discard a border area around the edge of the image, based on transparency or edge color.

When using the crop tool, you can rotate the selected area before you perform the cropping operation. You can also specify a fixed size, in pixels, for the target image created from the cropped selection. You cannot rotate the cropped selection when you use the Fixed Target Size option.

See also:

To use the crop tool

To specify the size of the cropped area

To crop an image using the Crop command

To crop an image using the Trim command


To use the crop tool
Cropping an image

To use the crop tool:

1  Double-click the crop tool ( [image]) to select the tool and view the Crop Options palette.

2  In the Crop Options select an option to remove the cropped area:

•   Delete to permanently discard the cropped area.

•   Hide to hide the cropped area but preserve the area in the image file.

3  Drag over the part of the image you want to keep.

When you release the mouse button, the crop marquee appears as a bounding box with handles at the corners and sides.

4  Adjust the crop marquee:

•   To move the marquee to another position, position the pointer inside the bounding box and drag.

•   To scale the marquee, drag a handle. To constrain the proportions, hold down Shift as you drag a corner handle.

•   To rotate the marquee, position the pointer outside the bounding box (the pointer turns into a curved arrow), and drag. To adjust the point around which the marquee is rotated, drag the circle at the center of the bounding box.

Drag handle to scale; drag outside bounding box to rotate.

5  To crop the image, press Enter (Windows) or Return (Mac OS). To cancel the cropping operation, press Esc.

Area preserved after cropping

See also:

To specify the size of the cropped area

To crop an image using the Crop command

To crop an image using the Trim command


To specify the size of the cropped area
Cropping an image

To specify the size of the cropped area:

1  Double-click the crop tool ( [image]) to display its Options palette.

2  Select Fixed Target Size.

3  To begin with the size values of the current image, click Front Image.

4  Enter values for the size you want for the cropped area.

5  Drag over the area you want to keep with the crop tool, and then press Enter (Windows) or Return (Mac OS).

See also:

To use the crop tool

To crop an image using the Crop command

To crop an image using the Trim command


To crop an image using the Crop command
Cropping an image

To crop an image using the Crop command:

1  Use the rectangle marquee tool ( [image]) to select the part of the image you want to keep.

2  Choose Image > Crop.

3  Choose an option to hide or delete the cropped area:

•   Select Hidden to hide the cropped areas of the image. The cropped areas are still in the image file and can be made visible by moving the layer with the move tool ( [image]).

•   Select Deleted to delete the cropped areas.

4  Click OK.

An image with the Crop command applied using the Hidden option and repositioned using the move tool

An image with the Crop command applied using the Delete option and repositioned using the move tool

See also:

To use the crop tool

To specify the size of the cropped area

To crop an image using the Trim command


To crop an image using the Trim command
Cropping an image

To crop an image using the Trim command:

1  Choose Image > Trim.

2  Crop the border:

•   Select Transparent Pixels to remove an area of transparent pixels from the image.

•   Select Top Left Pixel Color to remove an area the color of the top left pixel from the image.

•   Select Bottom Right Pixel Color to remove an area the color of the bottom right pixel from the image.

3  Select one or more areas of the image to be trimmed: Top, Bottom, Left, or Right.

4  Click OK.

See also:

To use the crop tool

To specify the size of the cropped area

To crop an image using the Crop command


Increasing the size of the work canvas
Getting Images into ImageReady

Increasing the size of the work canvas

The Canvas Size command lets you add or remove work space around an existing image. You can crop an image by decreasing the canvas area.

To use the Canvas Size command:

1  Choose Image > Canvas Size.

2  Enter the new pixel dimensions in the Width and Height boxes. A new file size appears.

3  For Anchor, click a square to position the existing image on the new canvas.

4  Click OK.

Added canvas is filled with transparency.

Original canvas and canvas added to top of image


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 image 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 views


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 views


To select the default optimization applied in 2-Up and 4-Up views
Setting optimization preferences (ImageReady)

To select the default optimization applied in 2-Up and 4-Up views:

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 uppercase, initial cap, or all lowercase. Setting tags and attributes to all uppercase helps the code stand out in the file.

3  For Attributes Case, specify the capitalization to be used for tag attributes: all uppercase, initial cap, second initial cap, or all lowercase.

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(TM). 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 reediting. 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 multilayered 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 reediting.

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 Ctrl (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 reediting.

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 the 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 slice 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 a 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 hotspots 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, 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 a 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 slice 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 hotspots, 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 hotspots 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 hotspot in an image map. ImageReady uses the opaque region on the layer to define the hotspot. 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 hotspot. ImageReady places the hotspot to match the layer’s opaque region as closely as possible. If you create a polygonal hotspot, ImageReady closely outlines the opaque region’s outer edge. If you create a circular or rectangular hotspot, 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.

Hotspot defined with polygonal shape and with rectangular shape (dotted-line borders for illustration purposes only)

If you overlap hotspots in creating an image map in ImageReady, the topmost layer is the active hotspot 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 hotspot. (To use multiple layers in one hotspot, 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 hotspot.

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


Adjusting Color and Tone and Sharpening the Image

You can adjust the color, contrast, and brightness of individual images and sharpen images by using the Image > Adjust commands and the Unsharp Mask filter.

See also:

Setting the highlight and shadow values

Adjusting contrast and color balance

Adjusting individual color components

Adjusting brightness and contrast

Adjusting color balance, contrast, and saturation visually

Adjusting gamma

Previewing color display variations

Inverting an image

Sharpening the image


Setting the highlight and shadow values
Adjusting Color and Tone and Sharpening the Image

Setting the highlight and shadow values

You begin professional tonal correction by assigning values to the extreme highlight and shadow pixels in the image, setting an overall tonal range that allows for the sharpest detail possible throughout the image. This process is known as setting the highlights and shadows or setting the white and black points. You can do this in several ways.

See also:

Setting the highlights and shadows using the Levels sliders

Setting the highlights and shadows using the eyedroppers

Setting the highlights and shadows automatically


Setting the highlights and shadows using the Levels sliders
Setting the highlight and shadow values

Setting the highlights and shadows using the Levels sliders

You can set the highlights and shadows in an image by selecting the Levels command in the Image > Adjust submenu and moving the Levels input sliders to the first group of pixels on both ends of the histogram. Doing so maps these pixels to black and white, increasing the tonal range of the image.

You can set highlights and shadows for the complete image, or for any of the three color channels individually. (Color information channels are created automatically when you open an image. RGB images have three default color channels—one for each of the red, green, and blue colors—plus a composite channel. For more information on color channels, see the Adobe Photoshop 5.0 User Guide.) When you adjust an individual channel, the corresponding pixels in the other channels are adjusted proportionately to avoid altering the color balance.

Contrast improved by setting highlights and shadows to neutral color values (color cast eliminated), and contrast improved by adjusting Levels sliders (color cast retained)

To set the highlights and shadows using the Levels sliders:

1  Choose Image > Adjust > Levels.

2  Choose the color channel or channels you want to adjust: RGB (the composite of all three channels), Red, Green, or Blue.

3  Drag the Input Levels sliders to the edge of the first group of pixels on either end of the histogram.

For example, suppose you want to increase the contrast in an image with pixels that currently cover a range of only 0–233. If you drag the Input Levels white triangle to 233, pixels with brightness values of 233 and higher (in each channel of the image) are mapped to 255, and pixels with lower brightness values are mapped to corresponding lighter values. This remapping lightens the image, increasing the contrast in highlight areas.

You can also enter values directly into the Input Levels text boxes.

Original

Resulting histogram

Suppose instead you want to decrease the contrast in the image. If you drag the Output Levels white triangle to 220, pixels with brightness values of 255 are remapped to 220, and pixels with lower brightness values are mapped to corresponding darker values. This darkens the image, decreasing the contrast in highlight areas.

You can also enter values directly into the Output Levels text boxes.

4  Click OK.

5  To view the new histogram, reopen the Levels dialog box. The histogram has been stretched out to accommodate the new white and black points, causing gaps in the histogram.

These gaps do not indicate a perceptible problem in the image unless they are large or accompanied by a low pixel count.


Setting the highlights and shadows using the eyedroppers
Setting the highlight and shadow values

Setting the highlights and shadows using the eyedroppers

The three eyedroppers in the lower right corner of the Levels dialog box can be used to adjust levels based on shadows and highlights in an image. Clicking in an image with the black or white eyedroppers sets the image’s blackpoint (or shadows) and whitepoint (or highlights) to the color of the image area that you click. Clicking in an image with the gray eyedropper attempts to set the gamma sliders of each of the color channels so that the color you click on becomes medium gray. This may cause considerable color shifts in an image, especially if the color that you click is highly saturated. For this reason, the black and white eyedroppers are generally more useful than the gray (gamma) eyedropper.

To set the highlights and shadows using the eyedroppers:

1  Choose Image > Adjust > Levels.

2  Choose the color channel or channels you want to adjust: RGB (the composite of all three channels), Red, Green, or Blue.

3  Select the black eyedropper in the Levels dialog box, and click in the darkest part of your image.

This sets the color of the pixel you clicked and all darker colors to black.

4  Select the white eyedropper, and click in the lightest part of your image.

This sets the color of the pixel you clicked and all lighter colors to white.

5  Click OK.


Setting the highlights and shadows automatically
Setting the highlight and shadow values

Setting the highlights and shadows automatically

The Auto Levels command in the Image > Adjust menu (as well as the Auto button in the Levels dialog box) automatically performs the equivalent of the Levels slider adjustment: it defines the lightest and darkest pixels in each channel as white and black and then redistributes the intermediate pixel values proportionately.

By default, the Auto feature 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 based on representative rather than extreme pixel values.

The Auto feature gives good results when an image with an average distribution of pixel values needs a simple contrast adjustment. However, adjusting the Levels controls manually is more precise. See Setting the highlights and shadows using the Levels sliders.

To set the black and white points automatically:

Choose Image > Adjust > Auto Levels.


Adjusting contrast and color balance
Adjusting Color and Tone and Sharpening the Image

Adjusting contrast and color balance

You can adjust the contrast and the overall mixture of colors in an image automatically using the Auto Contrast command. (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.


Adjusting individual color components
Adjusting Color and Tone and Sharpening the Image

Adjusting individual color components

The Hue/Saturation dialog box lets you adjust the hue, saturation, and lightness of individual color components in an image. The Hue/Saturation command is based on the additive color wheel. Adjusting the hue, or color, represents a move around the color wheel. Adjusting the saturation, or purity of the color, represents a move across its diameter.

You can use the Colorize option to create a monotone effect. You can also use the Desaturate command to create a grayscale effect.

A. Saturation B. Hue

See also:

To adjust an image using Hue/Saturation

To create a monotone effect

To create a grayscale effect


To adjust an image using Hue/Saturation
Adjusting individual color components

To adjust an image using Hue/Saturation:

1  Choose Image > Adjust > Hue/Saturation. Select Preview to preview the changes in the image window.

2  For Hue, enter a value or drag the slider until the colors appear as you want.

Original image, and hue adjusted

The values displayed in the text box reflect the number of degrees of rotation around the color wheel from the pixel’s original color. A positive value indicates clockwise rotation, a negative value counterclockwise rotation. Values can range from –180 to +180.

3  For Saturation, enter a value or drag the slider to the right to increase the saturation, or left to decrease it. The color shifts away from or toward the center of the wheel, relative to the beginning color values of the selected pixels. Values can range from –100 to +100.

Original image, and Saturation –40

4  For Lightness, enter a value or drag the slider to the right to increase the lightness, or left to decrease it. Values can range from –100 to +100.

See also:

To create a monotone effect

To create a grayscale effect


To create a monotone effect
Adjusting individual color components

To create a monotone effect:

1  Choose Image > Adjust > Hue/Saturation. Select Preview to preview the changes in the image window.

2  Select Colorize. The image is converted to shades of red (the 0 point on the color wheel) at 50% saturation. The lightness value of each pixel does not change.

3  Use the Hue slider to select the new color.

Original image, and with Colorize applied

4  Use the Saturation and Lightness sliders to adjust the saturation and lightness of the pixels. Then click OK.

See also:

To adjust an image using Hue/Saturation

To create a grayscale effect


To create a grayscale effect
Adjusting individual color components

To create a grayscale effect:

Choose Image > Adjust > Desaturate. The image is converted to shades of gray. The lightness value of each pixel does not change.

This command has the same effect as setting Saturation to –100 in the Hue/Saturation dialog box.

Note: If you are working with a multilayer image, the Desaturate command converts the selected layer only.

See also:

To adjust an image using Hue/Saturation

To create a monotone effect


Adjusting brightness and contrast
Adjusting Color and Tone and Sharpening the Image

Adjusting brightness and contrast

The Brightness/Contrast command makes adjustments to the overall tonal range of the image or selection. The Brightness and Contrast sliders make adjustments to all pixel values in an image at once—highlights, shadows, and midtones. This command should be applied carefully, because too large an adjustment can eliminate detail in highlight or shadow areas of an image.

To adjust brightness and contrast:

1  Choose Image > Adjust > Brightness/Contrast.

2  Drag the sliders or enter values in the Brightness and Contrast text boxes to adjust brightness and contrast.

3  Click OK.


Adjusting color balance, contrast, and saturation visually
Adjusting Color and Tone and Sharpening the Image

Adjusting color balance, contrast, and saturation visually

The Variations command lets you visually adjust the color balance, contrast, and saturation of an image or selection. This command is most useful for average-key images with an equal distribution of highlights, midtones, and shadows, that don’t require precise color adjustments.

To use the Variations command:

1  Choose Image > Adjust > Variations.

Note: If the Variations command does not appear in the Adjust submenu, the Variations plug-in module may not have been installed. See Using plug-in modules. The two thumbnails at the top of the dialog box show the original selection (Original) and the selection with its currently selected adjustments (Current Pick). When you first open the dialog box, these two images are the same. As you make adjustments, the Current Pick image changes to reflect your choices.

2  Select any of these adjustments:

•   Show Clipping to display a neon preview of areas in the image that will be clipped by the adjustment—that is, converted to pure white or pure black. Clipping does not occur when you adjust midtones.

•   Shadows, Midtones, or Highlights to indicate whether you want to adjust the dark, middle, or light areas.

•   Saturation to change the degree of hue in the image. With the Show Clipping option selected, the image may show clipping after an adjustment. This means you have exceeded maximum saturation for the color.

•   The Fine/Coarse slider to determine the amount of each adjustment. Moving the slider one tick mark doubles the adjustment amount.

3  Adjust the color and brightness:

•   To add a color to the image, click the appropriate color thumbnail.

•   To subtract a color, click its opposite on the color wheel. For example, to subtract cyan, click red.

4  Click the thumbnails on the right of the dialog box to adjust the brightness in the image.

Each time you click a thumbnail, all thumbnails change (except the original). The center thumbnail always reflects the current choices. Clicking on the thumbnail of the original image returns Variations settings to those in the original image.


Adjusting gamma
Adjusting Color and Tone and Sharpening the Image

Adjusting gamma

Gamma measures the amount of a monitor’s brightness range that is used for the darker tones in an image. A higher gamma value yields an overall darker image. Windows systems use a higher gamma value than Mac OS systems, with the result that the same image is noticeably darker on a Windows system than on a Mac OS system. Designers, particularly those who use Mac OS systems to create images that will be viewed primarily on Windows systems, must consider the issue of cross-platform gamma.

Image with Windows gamma and Mac OS gamma

You can use the Gamma dialog box to automatically adjust the gamma value of the image so that it will display correctly on the alternative system.

Note: The Gamma dialog box adjusts the pixel values in the image. The Preview options adjust the appearance of the image on your monitor but do not change the image’s pixel values. See Previewing color display variations.

See also:

To automatically adjust gamma for cross-platform viewing

To manually adjust gamma value


To automatically adjust gamma for cross-platform viewing
Adjusting gamma

To automatically adjust gamma for cross-platform viewing:

1  Choose Image > Adjust > Gamma.

2  To adjust the gamma:

•   Select Macintosh to Windows to adjust gamma for display in Windows.

•   Select Windows to Macintosh to adjust gamma for display in Mac OS.

3  Click OK.

Gamma in the file is changed to the appropriate level for the platform you select.

Note: Images created in Photoshop 4.0 or earlier use Mac OS gamma value by default and should be adjusted for display in Windows (unless gamma was adjusted when the image was created). Images created in Photoshop 5.0 or later use Windows gamma value by default and will be at the correct gamma for display in Windows with no adjustment.

See also:

To manually adjust gamma value


To manually adjust gamma value
Adjusting gamma

To manually adjust gamma value:

1  Choose Image > Adjust > Gamma.

2  Move the Gamma slider or enter a value in the text box between 0.1 and 9.99.

The Gamma slider measures the amount of change from the current gamma value. (The slider does not indicate the actual gamma value.)

3  Click OK.

Gamma is adjusted for the active image only.

See also:

To automatically adjust gamma for cross-platform viewing


Previewing color display variations
Adjusting Color and Tone and Sharpening the Image

Previewing color display variations

Monitor color display can vary for several reasons. For example, the same image will appear darker on a Windows system than on a Mac OS system. Also, an image created in Photoshop will appear slightly lighter in ImageReady than in Photoshop.

ImageReady allows you to adjust the brightness and color of image display to preview the effect of these variations. When working in either Windows or Mac OS, you can adjust color display to preview the appearance of the image in the other operating system. You can also adjust color display to preview the appearance of an image in Photoshop. (Adjusting color display during preview does not change pixel values in the image.)

To preview color display variations:

Choose View > Preview, and choose an option for adjusting the color display:

•   Browser Dither to view the image as it would be displayed by a Web browser on a 256-color system. This option is only available if an optimized version of the image is active.

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

•   Photoshop Compensation to view the image with color adjusted to simulate display in Photoshop. This option will be disabled for a given document if there is no ICC profile embedded in the document. (Photoshop automatically adds ICC profiles to its documents as it saves them. ImageReady does not use ICC profiles but does preserve existing ICC profiles in any documents you work with.)


Inverting an image
Adjusting Color and Tone and Sharpening the Image

Inverting an image

The Image > Adjust > Invert command inverts the color in an image. You can use this command to make a positive black-and-white image negative or to make a positive from a scanned black-and-white negative.

Note: Because color film contains an orange color cast in its base, the Invert command cannot make negatives and positives from scanned color film without the use of additional plug-ins.

When you invert an image, the brightness value of each pixel in the channels is converted to the inverse value on the 256-step color values scale. For example, a pixel in a positive image with a value of 255 is changed to 0, and a pixel with a value of 5 to 250.


Sharpening the image
Adjusting Color and Tone and Sharpening the Image

Sharpening the image

Unsharp masking, or USM, is a traditional film compositing technique used to sharpen edges in an image. The Unsharp Mask filter is very effective in restoring sharpness to an image that has been scaled down using the Image > Image Size command.

Numbers represent Unsharp Mask amount, Radius, and Threshold.

The Unsharp Mask filter locates every two adjacent pixels with a difference in brightness values you specify and then increases the pixels’ contrast by an amount you specify. In addition, you specify the number of surrounding pixels to which the sharpening effect is applied.

Note: An unwanted halo effect can result from using the Unsharp Mask filter at too high a setting. It’s best to preview the Unsharp Mask filter at a low setting, and increase the setting as needed.

To sharpen an image using the Unsharp Mask filter:

1  Choose Filter > Sharpen > Unsharp Mask.

2  To control the sharpening:

•   For Amount, drag the slider or enter a value from 1% to 500% to determine how much the contrast of pixels is increased. For online images, an amount between 50 and 120 is recommended.

•   For Radius, drag the slider or enter a value from 0.1 to 250 to determine the number of pixels surrounding the edge pixels that are affected by the sharpening. For online images, a Radius value of 1.0 is recommended.

•   For Threshold, drag the slider or enter a value from 0 to 255 to determine how different the brightness values between two pixels must be before they are considered edge pixels and sharpened by the filter. A Threshold value of 0 is recommended for online images. (Adjusting Threshold helps avoid sharpening the photographic grain in high-resolution scans. This is unlikely to be a problem at on-screen resolution.)

3  Use the + and – buttons below the preview window to adjust the magnification of the preview.

4  Click OK.


Selecting, Editing, and Retouching

About selecting and editing

Making selections

Adjusting selections

Softening the edges of a selection

Saving and loading selections

Correcting mistakes

Reverting to any state of the image

Duplicating images

Using rulers and guides

Moving, copying, and pasting selections

Deleting a selection

Transforming images or parts of images

Using the rubber stamp tool

Using other retouching tools


About selecting and editing
Selecting, Editing, and Retouching

About selecting and editing

To modify part of an image in Adobe ImageReady, you first select the area you want to edit. A selected area is indicated by a dotted selection border, also called a selection marquee. The area outside the selection border is protected while you copy, paint, edit or apply special effects to just the isolated area. You can choose from a variety of specialized tools for creating selection borders.

It’s easy to edit and retouch your images. For example, you can move and copy selections within and between images and also between ImageReady and other image-editing programs such as Adobe Photoshop. You can also use various editing tools for modifying your images and applying special effects.

Keep in mind that pixels beyond the borders of the visible canvas cannot be edited or retouched. However, you can use the move tool or selection arrows to move these pixels back onto the visible canvas, or you can increase the canvas size to incorporate them.


Making selections
Selecting, Editing, and Retouching

Making selections

You make selections by clicking and dragging with the marquee or lasso tool, or by targeting color areas with the magic wand tool. You can also create a selection from a slice. The choices associated with a selection tool appear in its Options palette. Making a new selection replaces the existing one.

Area selected

Note: When making a selection in a file containing layers, make sure that the desired layer is active. See Using the Layers palette.

See also:

To select all pixels on a layer within the canvas boundaries

To deselect selections

Using the marquee tools

Using the lasso and polygon lasso tools

Using the magic wand tool

Creating a selection from a slice or slices


To select all pixels on a layer within the canvas boundaries
Making selections

To select all pixels on a layer within the canvas boundaries:

1  Select the layer in the Layers palette as described in Using the Layers palette.

2  Choose Select > All.

Note: If slices are shown in the image, the option changes to Select All Slices. Choosing this option selects all slices but does not select pixels in the image.

See also:

To deselect selections

Using the marquee tools

Using the lasso and polygon lasso tools

Using the magic wand tool

Creating a selection from a slice or slices


To deselect selections
Making selections

To deselect selections:

Do one of the following:

•   Click anywhere in the image outside the selected area (for all tools except the magic wand, single column marquee, single row marquee, slice, or slice selection tool).

•   Choose Select > Deselect.

See also:

To select all pixels on a layer within the canvas boundaries

Using the marquee tools

Using the lasso and polygon lasso tools

Using the magic wand tool

Creating a selection from a slice or slices


Using the marquee tools
Making selections

Using the marquee tools

The marquee tools let you select rectangular or elliptical areas. By default, the selection border is dragged from its corner.

Rectangular and elliptical selections

To use the marquee tools:

1  Select one of the following marquee tools:

•   Rectangular marquee ( [image]) to make a rectangular selection.

•   Rounded rectangular marquee ( [image]) to make a rounded rectangular selection.

•   Elliptical marquee ( [image]) to make an elliptical selection.

•   Single row ( [image]) or single column marquee ( [image]) to define the marquee as a 1-pixel-wide row or column.

To switch between the marquee tools, press Shift+M.

2  Double-click the marquee tool to view the Marquee Options palette, and select options to modify the marquee tool:

•   Select Feather to soften the edges of the selection.

•   Select Anti-aliased to define a smooth edge.

•   For rectangular, rounded rectangular, or elliptical marquee, select a sizing option from the Style pop-up menu. If you choose Constrained Aspect Ratio or Fixed Size, enter values for Width and Height. For the Fixed Size style, the values you enter determine the size of the selection. For the Constrained Aspect Ratio style, these values determine the ratio of width to height (the default values of 1 and 1 always result in a perfectly square or circular selection).

•   For more on feathering and anti-aliasing, see Softening the edges of a selection.

3  To make a selection, do one of the following:

•   With the rectangular, rounded rectangular, or elliptical marquee, drag over the area you want to select.

 With no existing selection, hold down Shift as you drag to constrain the marquee to a square or circle, or hold down Alt (Windows) or Option (Mac OS) to draw the selection from the center. If a selection already exists, the Shift and Alt/Option keys are used to add or subtract from the existing selection.

•   With the Single Row or Single Column marquee, click near the area you want to select, and then drag the marquee to the exact location. If no marquee is visible, increase the magnification of your image view (see Magnifying and reducing the view).


Using the lasso and polygon lasso tools
Making selections

Using the lasso and polygon lasso tools

The lasso and polygon lasso tools let you draw both straight-edged and freehand selection borders around an area.

See also:

To use the lasso tool

To use the polygon lasso tool


To use the lasso tool
Using the lasso and polygon lasso tools

To use the lasso tool:

1  Double-click the lasso tool ( [image]) to select the tool and view its Options palette.

2  In the Lasso Options palette, select Feather to soften the edges of the selection or Anti-aliased to define a smooth edge. See Softening the edges of a selection.

3  Drag to draw a freehand selection border.

Freehand selection with lasso tool

See also:

To use the polygon lasso tool


To use the polygon lasso tool
Using the lasso and polygon lasso tools

To use the polygon lasso tool:

1  Double-click the polygon lasso tool ( [image]) to select the tool and view its Options palette.

2  In the Lasso Options palette, select Feather to soften the edges of the selection, or Anti-aliased to define a smooth edge. See Softening the edges of a selection.

3  Click in the image to set the starting point.

4  To draw a straight segment, position the pointer where you want the first straight segment to end, and click. Continue clicking to set endpoints for subsequent segments.

Click to add straight segments.

5  To draw a freehand segment, hold down Alt (Windows) or Option (Mac OS), and drag. When finished, release Alt/Option and the mouse button.

6  Continue to click and Alt/Option-drag to finish selecting.

7  To close the selection border, do one of the following:

•   Position the polygon lasso tool pointer over the starting point (a closed circle appears next to the pointer), and click.

•   If the pointer is not over the starting point, double-click the polygon lasso tool pointer, or Ctrl-click (Windows) or Command-click (Mac OS).

See also:

To use the lasso tool


Using the magic wand tool
Making selections

Using the magic wand tool

The magic wand tool ( [image]) lets you select a consistently colored area (for example, a red flower) without having to trace its outline. You specify the color range, or tolerance, for the magic wand tool’s selection.

To use the magic wand tool:

1  Double-click the magic wand tool ( [image]) to select the tool and display its Options palette.

2  For Tolerance, enter a value from 0 to 255. Enter a low value to select colors very similar to the color of the pixel you click; enter a higher value to select a broader range of colors.

High tolerance detected shadow; lower tolerance detected only the key.

3  To define a smooth edge, select Anti-aliased. For more information, see Softening the edges of a selection.

4  To select colors using data from all the visible layers, select Use All Layers. Otherwise, the magic wand tool selects colors from the active layer only.

5  To select only adjoining pixels, select Contiguous Pixels Only. To select nonadjoining pixels, deselect Contiguous Pixels Only.

6  In the image, click the color you want to select.

All adjacent pixels within the tolerance range are selected.


Creating a selection from a slice or slices
Making selections

Creating a selection from a slice or slices

When you create slices in an image, you can create a selection from a slice or slices. See Creating and modifying slices.

To create a selection from a slice or slices:

1  Select a slice or slices.

2  Choose Select > Create Selection From Slice(s).


Adjusting selections
Selecting, Editing, and Retouching

Adjusting selections

You can adjust and refine your selections using the selection tools or commands in the Select menu.

See also:

To move just the selection border

To select the unselected parts of an image

To reselect deselected parts of an image

Adjusting selections manually

Adjusting selections numerically


To move just the selection border
Adjusting selections

To move just the selection border:

1  Using any selection tool, position the pointer inside the selection border.

2  Drag the selection border to enclose a different area of the image. You can drag a selection border beyond the canvas boundaries. When you drag it back, the original border reappears intact.

Original selection border, and selection border moved

Use the following methods to control selection movement:
• To constrain the direction to a multiple of 45, begin dragging, and then hold down Shift as you continue to drag.
• To move the selection in 1-pixel increments, use the keyboard arrow keys.
• To move the selection in 10-pixel increments, hold down Shift, and press an arrow key.

See also:

To select the unselected parts of an image

To reselect deselected parts of an image

Adjusting selections manually

Adjusting selections numerically


To select the unselected parts of an image
Adjusting selections

To select the unselected parts of an image:

Choose Select > Inverse. Choosing Inverse again returns you to the original selection.

You can use this option to select an object placed against a solid-colored background. You would first select the background using the magic wand tool and then invert the selection.

See also:

To move just the selection border

To reselect deselected parts of an image

Adjusting selections manually

Adjusting selections numerically


To reselect deselected parts of an image
Adjusting selections

To reselect deselected parts of an image:

Choose Select > Reselect.

The last deselected selection is reselected.

See also:

To move just the selection border

To select the unselected parts of an image

Adjusting selections manually

Adjusting selections numerically


Adjusting selections manually
Adjusting selections

Adjusting selections manually

You can use the selection tools to add to or subtract from existing selections.

Before manually adding to or subtracting from a selection, set the Anti-aliased option in the Options palette to the same setting used for the original selection.

To add to, subtract from, or intersect a selection border:

1  Make a selection.

2  Using any selection tool, do one of the following:

•   To add to the selection or select an additional area in the image, hold down Shift (a plus sign appears next to the pointer), and select the area or areas you want to add.

•   To subtract an area from a selection, hold down Alt (Windows) or Option (Mac OS) (a minus sign appears next to the pointer), and select the area or areas you want to subtract.

•   To intersect selections, press Alt+Shift (Windows) or Option+Shift (Mac OS) (a cross appears next to the pointer), and select an area that intersects the original selection. ImageReady retains only that portion of the original selection falling within the newly selected area.

Flower and frame selections intersected


Adjusting selections numerically
Adjusting selections

Adjusting selections numerically

You can use the following Select menu commands to increase or decrease the pixels in an existing selection:

•   Modify > Border to frame an existing selection with a second selection border.

•   Modify > Smooth to clean up any stray pixels left inside or outside a color-based selection.

•   Modify > Expand or Modify > Contract to increase or decrease a selection by a specified number of pixels.

•   Similar to expand a selection to include areas similar in color.

See also:

To expand or contract a selection border

To frame an existing selection with a selection

To extend a selection based on color

To smooth a selection


To expand or contract a selection border
Adjusting selections numerically

To expand or contract a selection border:

1  Choose Select > Modify > Expand or Contract.

2  For Expand By or Contract By, enter a pixel value between 1 and 16, and click OK.

The border is increased or decreased by the specified number of pixels. Any portion of the selection border running along the image’s edge is unaffected.

See also:

To frame an existing selection with a selection

To extend a selection based on color

To smooth a selection


To frame an existing selection with a selection
Adjusting selections numerically

To frame an existing selection with a selection:

1  Use a selection tool to make a selection.

2  Choose Select > Modify > Border.

3  Enter a value between 1 and 64 pixels for the width of the border, and click OK.

The new selection frames the border of the original selected area.

Original selection and with Border command: 5 pixels

The Border command always creates an anti-aliased selection (see Softening the edges of a selection). To paint a hard-edged border around a selection, use the Stroke command (see Filling selections and layers).

See also:

To expand or contract a selection border

To extend a selection based on color

To smooth a selection


To extend a selection based on color
Adjusting selections numerically

To extend a selection based on color:

Choose Select > Similar to include pixels throughout the image, not just adjacent ones, falling within the tolerance range.

Original selection and original selection with Similar command applied

To increase the selection in increments, choose either command more than once.

See also:

To expand or contract a selection border

To frame an existing selection with a selection

To smooth a selection


To smooth a selection
Adjusting selections numerically

To smooth a selection:

1  Choose Select > Modify > Smooth.

2  For Sample Radius, enter a pixel value between 1 and 16, and click OK.

Adobe ImageReady checks around each selected pixel to find any unselected pixels falling within the specified range. For example, if you enter 16 for the sample radius, the program uses each pixel as the center of a 33-by-33-pixel area (16 pixels in the horizontal and vertical directions). If most pixels in the range are selected, any unselected pixels are added to the selection. If most pixels are unselected, any selected pixels are excluded from the selection.

See also:

To expand or contract a selection border

To frame an existing selection with a selection

To extend a selection based on color


Softening the edges of a selection
Selecting, Editing, and Retouching

Softening the edges of a selection

ImageReady offers several ways to smooth the hard edges of a selection.

See also:

Feathering

Anti-aliasing


Feathering
Softening the edges of a selection

Feathering

Blurs edges by building a transition boundary between the selection edge and its surrounding pixels. This blurring can cause some loss of detail at the edge of the selection.

You use the Feather command to add feathering to an existing selection. Feathering effects become apparent when you move, cut, or copy and paste the selection.

A. Original selection B. Feather: 0 C. Feather: 10 D. Feather: 30

To define a feathered edge for an existing selection:

1  Choose Select > Feather.

2  Enter a value for the Feather Radius, and click OK.

Note: A small selection made with a large feather radius may be so faint that its edges are invisible. If the message “Warning: No pixels are more than 50% selected. The selection edges will not be visible.” appears, you can decrease the feather radius or increase the selection’s size to make the selection edges visible.


Anti-aliasing
Softening the edges of a selection

Anti-aliasing

Smooths the jagged edges of a selection by partially filling edge pixels, making them semitransparent. Since only the edge pixels change, no detail is lost. Anti-aliasing is useful when cutting, copying, or pasting selections to create composite images.

Anti-aliasing is available for the elliptical marquee, rounded rectangular marquee, lasso, polygon lasso, magic wand, magic eraser, and paint bucket tools. You must specify this option before using these tools. Once a selection is made, you cannot add anti-aliasing.

To use anti-aliasing:

Select Anti-aliased in the Options palette for the selected tool.


Saving and loading selections
Selecting, Editing, and Retouching

Saving and loading selections

You can save, load, and delete selections using Select menu commands.

To save a selection:

Choose Select > Save Selection.

To load a selection:

1  Choose Select > Load Selection.

2  Choose a selection:

•   Choose Layername Transparency (where Layername is the name of the selected layer) to mask transparent pixels on the selected layer.

•   Choose #n, where n is the number of a previously saved selection. (You must have a previously saved selection to use this option.)

To delete selection edges:

Choose Select > Delete Channel, and choose Channel #n from the submenu, where n is the number of a previously saved selection.

The Select > Delete Channel command deletes selection edges but preserves the pixels in the selection.


Correcting mistakes
Selecting, Editing, and Retouching

Correcting mistakes

Most operations you perform on an image can be undone if you make a mistake. You can also redo operations, and toggle between undoing and redoing. In addition, you can restore all or part of an image to its last saved version. You can undo and redo multiple steps, and you can determine the number of undos and redos in General Preferences. (Your ability to use these options may be limited by the amount of memory available to ImageReady.)

For information on how to restore your image to the way it looked during any point in the current work session, see Reverting to any state of the image.

To undo the last performed operation only:

Choose Edit > Undo.

If an operation can’t be undone, the Undo choice is dimmed and reads “Can’t Undo.”

To redo the last undone operation:

Choose Edit > Redo.

If an operation can’t be redone, the Redo choice is dimmed and reads “Can’t Redo.”

To toggle between undoing and redoing an operation:

Choose Edit > Undo or Redo.

To reverse all changes made to the image since it was last saved:

Choose File > Revert, and click Revert.

To set the number of multiple undos and redos:

1  Choose File > Preferences > General.

2  Enter a value for Undo Levels, and click OK.


Reverting to any state of the image
Selecting, Editing, and Retouching

Reverting to any state of the image

The History palette lets you jump to any state of the image created during the current working session. Each time you apply a change to an original image, the new state of that image is added to the palette. The History palette records only changes made to the original image.

For example, if you select part of an image, paint it, and apply GIF compression settings, each of those states is listed separately in the palette. You can then select any of these states, and the image will revert to how it looked when that change was applied. You can modify the image from that state. You can also include History palette states as commands in an action (see Editing actions).

A. History state  B. History state slider

The following guidelines can help you with the History palette:

•   Program-wide changes, such as changes to palettes, actions, and preferences, are not changes to a particular image and so are not added to the History palette.

•   Once you close and reopen the images, those states are no longer available in the palette.

•   Applying the Revert command deletes all the states that existed before the reversion.

•   States are added from the top down. That is, the oldest state is at the top of the list, the most recent one is at the bottom.

•   Each state is listed with the name of the tool or command used to change the image.

•   Selecting a state dims those below it, indicating which changes will be removed if you work from the image at that state.

•   Selecting a state and then changing the image eliminates all states that come after.

To display the History palette:

Choose Window > Show History.

To display a state of the image:

Do any of the following:

•   Click the name of the state.

•   Drag the slider at the left of the state to a different state.

To clear the History palette:

Choose Clear Undo/Redo History from the History palette menu.

Note: You cannot undo this command.


Duplicating images
Selecting, Editing, and Retouching

Duplicating images

You can copy an entire original image (including all layers and layer masks) or optimized image into available memory without saving to disk. Using a duplicate, you can experiment and then compare multiple versions of the optimized image to the original.

To duplicate an image:

With an image displayed in ImageReady, do one of the following:

•   To duplicate an original image, select the Original tab at the top of the image window. Then hold down Alt (Windows) or Option (Mac OS) and drag the Original tab from the image window; or choose Image > Duplicate, name the duplicate, specify whether to flatten the layers, and click OK.

•   To duplicate an optimized image, select the Optimized tab at the top of the image window. Then hold down Alt (Windows) or Option (Mac OS) and drag the Optimized tab from the image window; or choose Image > Duplicate Optimized, name the duplicate, and click OK.

Note: When you duplicate an image in Optimized, 2-Up, or 4-Up view, the duplicate image appears in the Original view in the duplicate image window. If you want a duplicate optimized image to appear in the Optimized, 2-Up, or 4-Up view, duplicate the original image, and then select the Optimized, 2-Up, or 4-Up tab in the duplicate image window.


Using rulers and guides
Selecting, Editing, and Retouching

Using rulers and guides

Rulers and guides help you lay out images or elements precisely across the width or length of an image.

See also:

Using rulers

Using guides


Using rulers
Using rulers and guides

Using rulers

When visible, rulers appear along the top and left side of the active window. Markers in the ruler display the pointer’s position when you move it. Changing the ruler origin (the 0, 0 mark on the top and left ruler) lets you measure from a specific point on the image.

To display or hide rulers:

Choose View > Show Rulers or Hide Rulers.

To change the rulers’ zero origin:

Position the pointer over the intersection of the rulers in the upper left corner of the window, and drag diagonally down onto the image. A set of cross-hairs appears, marking the new origin on the rulers.

Dragging to create new ruler origin, and result

Note: To reset the ruler origin to its default value, double-click the upper left corner of the rulers.


Using guides
Using rulers and guides

Using guides

Guides appear as lines that float over the entire image; they do not appear when you display the image in a browser. You can move, remove, or lock a guide to avoid accidentally moving it. You can create guides automatically using values you preset.

Selections, selection borders, and tools snap to a guide when dragged within 8 screen (not image) pixels when snapping is turned on. Guide spacing, visibility, and snapping are specific to an image.

See also:

To show or hide guides

To place a guide

To move a guide

To lock all guides

To remove guides from the image

To turn snapping to guides on or off

To automatically create guides


To show or hide guides
Using guides

To show or hide guides:

Choose View > Show Guides or Hide Guides.

See also:

To place a guide

To move a guide

To lock all guides

To remove guides from the image

To turn snapping to guides on or off

To automatically create guides


To place a guide
Using guides

To place a guide:

1  If the rulers are not visible, choose View > Show Rulers.

Note: For the most accurate readings, view the image at 100% magnification, or use the Info palette.

2  Create a guide:

•   Drag from the horizontal ruler to create a horizontal guide.

Dragging to create a horizontal guide

•   Drag from the vertical ruler to create a vertical guide.

The pointer changes to a double-headed arrow when you drag a guide.

See also:

To show or hide guides

To move a guide

To lock all guides

To remove guides from the image

To turn snapping to guides on or off

To automatically create guides


To move a guide
Using guides

To move a guide:

1  Select the move tool ( [image]), or hold down Ctrl (Windows) or Command (Mac OS) to activate the move tool.

2  Position the pointer over the guide (the pointer turns into a double-headed arrow).

3  Drag the guide to move it. (By default, guides snap to the edges and the center of the current layer or selection.)

See also:

To show or hide guides

To place a guide

To lock all guides

To remove guides from the image

To turn snapping to guides on or off

To automatically create guides


To lock all guides
Using guides

To lock all guides:

Choose View > Lock Guides.

See also:

To show or hide guides

To place a guide

To move a guide

To remove guides from the image

To turn snapping to guides on or off

To automatically create guides


To remove guides from the image
Using guides

To remove guides from the image:

Do one of the following:

•   To remove a single guide, drag the guide outside the image window.

•   To remove all guides, choose View > Clear Guides.

See also:

To show or hide guides

To place a guide

To move a guide

To lock all guides

To turn snapping to guides on or off

To automatically create guides


To turn snapping to guides on or off
Using guides

To turn snapping to guides on or off:

Choose View > Snap to Guides.

A check mark indicates that the option is turned on.

To toggle Snap to Guides or the default snapping of guides to the edge and center of the current layer or selection, hold down the Ctrl key while creating or moving guides.

See also:

To show or hide guides

To place a guide

To move a guide

To lock all guides

To remove guides from the image

To automatically create guides


To automatically create guides
Using guides

To automatically create guides:

1  Choose View > Create Guides.

2  Select guide type:

•   Select Horizontal to create horizontal guides.

•   Select Vertical to create vertical guides.

3  For the guide type or types selected in step 2, select a spacing option:

•   Select Guides, Evenly Spaced and enter a value to create the specified number of horizontal or vertical guides spaced evenly.

•   Select Pixels Between Guides and enter a value to create horizontal or vertical guides separated by the specified number of pixels.

•   Select Pixels from Top (Single Guide) and enter a number of pixels to create a single horizontal guide the designated distance from the top edge of the image.

•   Select Pixels from Left (Single Guide) and enter a number of pixels to create a single vertical guide the designated distance from the left edge of the image.

4  Click OK.

The guides appear in the image window.

See also:

To show or hide guides

To place a guide

To move a guide

To lock all guides

To remove guides from the image

To turn snapping to guides on or off


Moving, copying, and pasting selections
Selecting, Editing, and Retouching

Moving, copying, and pasting selections

You can move or copy selections within or between ImageReady images—and also between images in ImageReady and other image-editing applications such as Adobe Photoshop.

See also:

Moving selections within an image

Copying selections or layers

Using drag and drop to copy between applications

Using the Clipboard to copy between applications


Moving selections within an image
Moving, copying, and pasting selections

Moving selections within an image

The move tool lets you drag a selection to a new location in the image. With the Info palette open, you can track the exact distance of the move.

To move a selection:

1  Select the move tool ( [image]).

To activate the move tool when another tool is selected, other than the hand tool ( [image]), the slice tool ( [image]), or the slice selection tool ( [image]), hold down Ctrl (Windows) or Command (Mac OS).

2  Move the pointer inside the selection border, and drag the selection to a new position. If you have selected multiple areas, all move as you drag.

Original selection, and selection moved with move tool


Copying selections or layers
Moving, copying, and pasting selections

Copying selections or layers

You can use the move tool to copy selections as you drag them within or between ImageReady images. Or you can copy and move selections using the Copy, Cut, and Paste commands. The Paste command pastes a cut or copied selection into another part of the image or into another image as a new layer. Dragging with the move tool saves memory because the Clipboard is not used as it is with Copy, Cut, and Paste commands.

To copy a selection while dragging:

1  Select the move tool ( [image]) or hold down Ctrl (Windows) or Command (Mac OS) to activate the move tool.

2  Hold down Alt (Windows) or Option (Mac OS), and drag the selection you want to copy and move.

When copying between images, drag the selection from the active image window into the destination image window. If nothing is selected, the entire active layer is copied. When you drag over a destination window that supports the drag-and-drop feature, a temporary border appears on the destination window, indicating that it can receive the selection or layer.

To copy merged layers:

1  Choose Edit > Copy Merged to copy all layers in a selection.

2  Choose Edit > Paste to paste the copied selection.


Using drag and drop to copy between applications
Moving, copying, and pasting selections

Using drag and drop to copy between applications

The drag-and-drop feature lets you copy and move artwork between ImageReady and other applications.

Selection dragged to new image, and result

To duplicate an entire ImageReady image by dragging and dropping, use the move tool to drag the image. Dragging vector artwork from Adobe Illustrator or from other applications that use the Clipboard into ImageReady rasterizes the artwork, converting it to bitmap format.

In Mac OS, the application must support Mac OS Drag Manager, and you must be running System 7.0 or higher. For versions earlier than System 7.5, you must also be running the Drag Manager Extension.


Using the Clipboard to copy between applications
Moving, copying, and pasting selections

Using the Clipboard to copy between applications

You can often use the Edit > Cut or Copy and Edit > Paste commands to copy selections between ImageReady and other applications. The cut or copied selection remains on the Clipboard until you cut or copy another selection.

Note: To copy between Adobe Illustrator and ImageReady using the Clipboard or the drag-and-drop method, the EPS parser plug-in must be in the Plug-ins folder, where it is placed during installation. Make sure that you haven’t moved the EPS parser if you want to copy from Illustrator.

To paste PostScript artwork from another application to ImageReady:

1  In the supporting application, select your artwork, and choose Edit > Copy. Applications that produce PostScript(R) artwork include Adobe Illustrator (version 5.0 and later), Adobe Dimensions(R), and Adobe Streamline(TM).

2  In ImageReady, make the image window active where you’ll paste the contents of the Clipboard.

3  Choose Edit > Paste.


Deleting a selection
Selecting, Editing, and Retouching

Deleting a selection

To delete a selection, choose Edit > Clear or press Backspace (Windows) or Delete (Mac OS). To cut a selection to the Clipboard, choose Edit > Cut. Deleting a selection replaces the original area with the layer transparency.


Transforming images or parts of images
Selecting, Editing, and Retouching

Transforming images or parts of images

You can transform images by rotating and flipping part or all of a layer or an entire image. You can also scale or rotate all or part of a selected layer, using the Free Transform command.

Use the following guidelines when applyingtransformations:

•   You can transform a linked layer. The transformation affects all layers in the linking group.

•   You can apply transformations to a layer mask by selecting the layer mask thumbnail in the Layers palette and unlinking the layer mask and its layer. See Using layer masks and Unlinking layers and layer masks.

•   Pixels are added or deleted during transformations. To calculate the color values of these pixels, ImageReady uses the interpolation method selected in the General Preferences dialog box. This option directly affects the speed and quality of the transformation. Bicubic interpolation, the default, is slowest but yields the best results. See Choosing an interpolation method.

See also:

To specify what to transform

Rotating and flipping an entire image

Applying a specific transformation

Freely transforming and previewing effects

Transforming numerically


To specify what to transform
Transforming images or parts of images

To specify what to transform:

Do one of the following:

•   To transform part of a layer, select the layer and then select part of the image on that layer. See Making selections and Using the Layers palette.

•   To transform an entire layer, make the layer active and make sure that nothing is selected. See Using the Layers palette.

See also:

Rotating and flipping an entire image

Applying a specific transformation

Freely transforming and previewing effects

Transforming numerically


Rotating and flipping an entire image
Transforming images or parts of images

Rotating and flipping an entire image

The Rotate Canvas and Flip Canvas commands let you rotate or flip the entire contents of an image. The commands do not work on individual layers or parts of layers or selection borders.

See also:

To rotate an entire image

To flip an entire image


To rotate an entire image
Rotating and flipping an entire image

To rotate an entire image:

Choose Image > Rotate Canvas, and choose one of the following commands:

•   90º CW to rotate clockwise by a quarter-turn.

•   90º CCW to rotate counterclockwise by a quarter-turn.

•   180º to rotate by a half-turn.

•   Numeric to rotate by a custom degree angle. Enter a value between –180 and 180, select ºCW or ºCCW, or click inside the rotation control and drag the radius to the desired angle. Then click OK.

See also:

To flip an entire image


To flip an entire image
Rotating and flipping an entire image

To flip an entire image:

Choose Image > Flip Canvas, and choose one of the following commands:

•   Flip Horizontal to flip horizontally, along the vertical axis.

•   Flip Vertical to flip vertically, along the horizontal axis.

Original image, and image with canvas rotated

See also:

To rotate an entire image


Applying a specific transformation
Transforming images or parts of images

Applying a specific transformation

The commands under the Transform submenu let you apply specific transformations to a selection or layer. ImageReady previews the effects and surrounds the selected area with a bounding border that lets you manipulate the selection or layer.

Original image, and image with green leaf layer rotated

You can apply several commands in succession before applying the cumulative transformation. For example, you can choose Scale, drag a handle to scale, and then choose Distort, drag a handle to distort, and press Enter (Windows) or Return (Mac OS) to apply both transformations.

See also:

To scale, rotate, skew, distort, or apply perspective

To flip or rotate precisely

To repeat a transformation


To scale, rotate, skew, distort, or apply perspective
Applying a specific transformation

To scale, rotate, skew, distort, or apply perspective:

1  Choose Edit > Transform > Scale, Rotate, Skew, Distort, or Perspective.

2  Drag the handles to achieve the desired effect.

3  To apply additional transformations, repeat steps 1 and 2.

4  Press Enter (Windows) or Return (Mac OS) to apply the cumulative transformation. Press Esc to cancel the transformation.

See also:

To flip or rotate precisely

To repeat a transformation


To flip or rotate precisely
Applying a specific transformation

To flip or rotate precisely:

1  To flip or rotate part or all of a layer, select it.

2  Choose Edit > Transform and, from the submenu, choose one of the following commands:

•   Rotate 180º to rotate by a half-turn.

•   Rotate 90º CW to rotate clockwise by a quarter-turn.

•   Rotate 90º CCW to rotate counterclockwise by a quarter-turn.

•   Flip Horizontal to flip horizontally, along the vertical axis.

•   Flip Vertical to flip vertically, along the horizontal axis.

Original selection, and with selection on green leaf layer flipped

See also:

To scale, rotate, skew, distort, or apply perspective

To repeat a transformation


To repeat a transformation
Applying a specific transformation

To repeat a transformation:

Choose Edit > Transform > Again.

See also:

To scale, rotate, skew, distort, or apply perspective

To flip or rotate precisely


Freely transforming and previewing effects
Transforming images or parts of images

Freely transforming and previewing effects

The Free Transform command lets you scale, rotate, or distort (from the selection centerpoint) all or part of a selected layer. To apply transformations, you drag the handles (or outside the handles) of the transform bounding box.

To freely transform:

1  To transform part or all of the layer, select it. Then choose Edit > Free Transform.

2  Do one or more of the following:

•   To scale, drag a handle. Press Shift as you drag a corner handle to scale proportionately. When positioned over a handle, the pointer turns into a double arrow.

Drag handle to scale, and result

•   To rotate, move the pointer outside of the bounding border (it turns into a curved, two-sided arrow), and then drag. Press Shift to constrain the rotation to 15º increments.

Rotating around the center point and rotating around a point other than the center

•   To rotate around a point other than the center of the selection, drag the center point to a new position in the selection before rotating.

•   To distort relative to the center point of the bounding border, press Alt (Windows) or Option (Mac OS), and drag a handle.

•   To distort relative to a point other than the center of the selection, drag the center point to a new position in the selection before distorting.

Distort symmetrically

3  Press Enter (Windows) or Return (Mac OS) to apply the transformation. To cancel the transformation, press Esc.


Transforming numerically
Transforming images or parts of images

Transforming numerically

The Numeric command lets you position, scale, skew, or rotate part of an image or a layer precisely, by entering specific numeric values for the transformation.

To transform a layer numerically:

1  To transform part or all of an image on a layer, select it. Choose Edit > Transform > Numeric.

2  Do one or more of the following:

•   Select Position. Then enter values for X and Y coordinates. Select Relative to specify the X and Y values relative to the current positions.

•   Select Scale. Then enter values for Width and Height, or for Percent. Select Constrain Proportions to maintain the height/width proportions of the image.

•   Select Skew. Then enter values for Horizontal and Vertical skew angles.

•   Select Rotate. Then enter a value for Angle, or use the dial to specify a rotation angle.

3  Click OK.


Using the rubber stamp tool
Selecting, Editing, and Retouching

Using the rubber stamp tool

The rubber stamp tool takes a sample of the image, which you can then apply over another image or part of the same image. Each stroke of the tool paints on more of the sampled image. Cross hairs mark the original sampling point.

To use the rubber stamp tool:

1  Double-click the rubber stamp tool ( [image]) to display its Options palette.

2  Do any of the following:

•   Specify the blending mode and opacity as described in Using the Options palette for painting tools.

•   Choose a brush size as described in Using the Brushes palette.

3  Select Use All Layers to sample data from all visible layers. If left deselected, the tool samples only from the active layer.

4  Do one of the following:

•   Select Aligned to apply the entire sampled area once, regardless of how many times you stop and resume painting. This option is useful when you want to use different sized brushes to paint an image. You can also use the Aligned option to duplicate two halves of a single image and place them at different locations.

•   Deselect Aligned to apply the sampled area from the initial sampling point each time you stop and resume painting. Because the rubber stamp tool samples the entire image, this option is useful for applying multiple copies of the same part of an image to different images.

5  To set the sampling point, position the pointer on the part of any open image you want to sample, and Alt-click (Windows) or Option-click (Mac OS). This sample point is the location from which the image is duplicated as you paint.

Sampling point, and with cross hairs marking the part of the original being applied

6  Drag to paint with the tool.

Note: The sample image and the target image (the image being painted on) need not be the same image. You can sample from one open window and paint into another, as long as both windows contain ImageReady files.


Using other retouching tools
Selecting, Editing, and Retouching

Using other retouching tools

You can also retouch images using the smudge, focus, and toning tools.

The tools work in the following ways:

•   The smudge tool simulates the actions of dragging a finger through wet paint. The tool picks up color where the stroke begins and pushes it in the direction you drag.

Original image, and smudging an image

•   The focus tools consist of the blur tool and the sharpen tool. The blur tool softens hard edges or areas in an image to reduce detail. The sharpen tool focuses soft edges to increase clarity or focus. For other ways to adjust image sharpness, see Sharpening the image, or Improving performance with filters.

Blurring an image, and sharpening an image

•   The toning tools consist of the dodge tool and the burn tool. Used to lighten or darken areas of the image, the dodge and burn tools are based on a traditional photographer’s technique for regulating exposure on specific areas of a print. Photographers hold back light to lighten an area on the print (dodging) or increase the exposure to darken areas on a print (burning).

Burning an image, and dodging an image

•   The sponge tool subtly changes the color saturation of an area.

Original image, and increasing saturation of an image

See also:

To use the smudge tool

To use the blur or sharpen tool

To use the dodge, burn, or sponge tool


To use the smudge tool
Using other retouching tools

To use the smudge tool:

1  Double-click the smudge tool ( [image]) to display its Options palette.

2  Specify the blending mode and pressure as described in Using the Options palette for painting tools.

3  Select a brush size as described in Using the Brushes palette.

4  Select Finger Painting to smudge using the foreground color at the beginning of each stroke. If you leave this option deselected, the smudge tool uses the color under the pointer at the beginning of each stroke.

5  Select Use All Layers to smudge using color data from all visible layers. If deselected, the smudge tool uses colors only from the active layer.

6  Drag in the image to smudge color.

See also:

To use the blur or sharpen tool

To use the dodge, burn, or sponge tool


To use the blur or sharpen tool
Using other retouching tools

To use the blur or sharpen tool:

1  Double-click the blur tool ( [image]) or sharpen tool ( [image]) to display its Options palette.

2  Specify the blending mode and pressure as described in Using the Options palette for painting tools.

3  Select a brush size as described in Using the Brushes palette.

4  To blur or sharpen using data from all visible layers, select Use All Layers. If deselected, the blur or sharpen tool uses data only from the active layer.

5  Drag over the part of the image you want to blur or sharpen.

See also:

To use the smudge tool

To use the dodge, burn, or sponge tool


To use the dodge, burn, or sponge tool
Using other retouching tools

To use the dodge, burn, or sponge tool:

1  Double-click the dodge tool ( [image]), burn tool ( [image]), or sponge tool ( [image]) to display its Options palette.

2  For the dodge tool or burn tool, select what to change in the image:

•   Midtones to change only the middle range of grays in the image.

•   Shadows to change the dark portions of the image.

•   Highlights to change only the light pixels.

3  For the sponge tool, select how to change the color:

•   Saturate to intensify the color’s saturation.

•   Desaturate to dilute the color’s saturation.

4  Using the options palette, specify the exposure for the dodge tool and burn tool, or the pressure for the sponge tool.

5  Select a brush size as described in Using the Brushes palette.

6  Drag over the part of the image you want to modify.

See also:

To use the smudge tool

To use the blur or sharpen tool


Painting

The painting tools and fill and stroke commands let you change the color of pixels to modify and create colored areas in an image.

See also:

Using the painting tools

Using the line tool

Using the shape tools

Erasing

Using the Brushes palette

Using the paint bucket tool

Using the Options palette for painting tools

Filling selections and layers

Stroking selections

Choosing the foreground and background colors

Using the Adobe Color Picker

Using other color pickers


Using the painting tools
Painting

Using the painting tools

When using the painting tools, consider which of the following effects you want:

•   The paintbrush tool creates soft strokes of color.

•   The airbrush tool applies gradual tones (including sprays of color) to an image, simulating traditional airbrush techniques. The edges of the stroke are more diffused than those created with the paintbrush tool. The pressure setting for the airbrush tool controls how quickly the spray of paint is applied. If you hold down the mouse button without dragging, you can build up color.

•   The pencil tool creates hard-edged freehand lines.

To save time when working with painting tools, make sure that the Options, Brushes, Color, and Swatches palettes are displayed.

To draw a straight line with any painting tool, click a starting point in the image. Then hold down Shift, and click an endpoint.

To use the paintbrush, airbrush, or pencil tool:

1  Specify a foreground color as described in Choosing the foreground and background colors.

2  Double-click the paintbrush tool ( [image]), airbrush tool ( [image]), or pencil tool to display its Options palette.

Specify the blending mode and opacity options as described in Using the Options palette for painting tools.

3  For the pencil tool ( [image]), select Auto Erase to paint background color over areas containing the foreground color. See Using the Auto Erase option.

4  For the airbrush tool, enter a value or use the Pressure slider to specify how heavily paint will be applied.

5  Select a brush size as described in Using the Brushes palette.

6  Drag in the image to paint.

Painting with the brush tool


Using the line tool
Painting

Using the line tool

The line tool ( [image]) draws straight lines on an image.

To use the line tool:

1  Specify a foreground color as described in Choosing the foreground and background colors.

2  Double-click the line tool to select it and display its Options palette.

3  Specify the blending mode and opacity as described in Using the Options palette for painting tools.

4  For Weight, enter the line width.

5  Select Anti-aliased to create soft-edged lines.

6  To include arrowheads, select Start, End, or both to specify where you want arrowheads.

7  To specify the appearance of arrowheads, click Shape and do the following:

•   For the width of the arrowhead, enter a value from 10% to 1000% of the line width.

•   For the length of the arrowhead, enter a value from 10% to 5000% of the line width.

•   For the concavity of the arrowhead, enter a value from –50% to +50%. The concavity value defines the amount of curvature on the widest part of the arrowhead, where the arrowhead meets the line.

Arrowheads created with different values

8  Drag in the image. To constrain the line angle to a multiple of 45°, hold down Shift as you drag.


Using the shape tools
Painting

Using the shape tools

The shape tools—the rectangle tool( [image]), the rounded rectangle tool ( [image]), and the ellipse tool ( [image])— draw basic shapes on an image. These tools create bitmap shapes (not vector objects). Each new shape appears on its own layer, allowing it to be manipulated independently of the underlying image, much like a vector object.

To use a shape tool:

1  Specify a foreground color as described in Choosing the foreground and background colors.

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

3  Specify the blending mode and opacity as described in Using the Options palette for painting tools.

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

5  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.)

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

7  Drag in 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) and drag to draw from the center of the object. Hold down the spacebar to move the object without changing its size or shape.


Erasing
Painting

Erasing

The eraser ( [image]) and magic eraser ( [image]) tools and the Auto Erase option for the pencil tool let you replace colors in an image either with the background color or with transparency.

See also:

Using the eraser tool

Using the magic eraser tool

Using the Auto Erase option


Using the eraser tool
Erasing

Using the eraser tool

The eraser tool makes pixels in the image transparent as you drag through them. If you’re working with Preserve Transparency selected in the Layers palette, the pixels change to the background color.

Erasing pixels from layer with Preserve Transparencydeselected exposes underlying layer

To use the eraser tool:

1  Double-click the eraser tool ( [image]) to select the tool and display its Options palette.

2  Choose the tool type you want to use as an eraser—paintbrush, pencil, or block.

3  Specify the opacity as described in Using the Options palette for painting tools.

4  Select a brush size as described in Using the Brushes palette.

5  Drag through the area you want to erase.


Using the magic eraser tool
Erasing

Using the magic eraser tool

When you click in an image with the magic eraser tool, the tool erases (to transparency) all pixels matching or similar to the pixel you clicked. You can select the color on the current layer or all layers, and you can erase contiguous pixels only or all similar pixels on the current layer. Using the magic eraser tool is similar to using the magic wand tool followed by the Edit > Clear command.

To use the magic eraser tool:

1  Double-click the magic eraser tool ( [image]) to select the tool and display its Options palette.

2  Specify the opacity as described in Using the Options palette for painting tools.

3  Enter a tolerance value.

The tolerance defines how similar a pixel must be in color to be erased. Values can range from 0 to 255. 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.

4  Select Contiguous Pixels Only to erase only pixels contiguous to the one you click, or leave unselected to erase all similar pixels on the layer.

5  Select Use All Layers to select pixels using composited color information, or leave unselected to use color information on the current layer only. In either case, only pixels on the current layer are erased.

6  Select Anti-Alias to smooth the edges of the area you erase.

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

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


Using the Auto Erase option
Erasing

Using the Auto Erase option

The Auto Erase option for the pencil tool lets you paint the background color over areas containing the foreground color.

To use the Auto Erase option:

1  Double-click the pencil tool ( [image]) to select the tool and display its Options palette.

2  Select Auto Erase.

3  Drag over areas of the image containing the foreground color to fill these areas with the background color.

If you begin dragging from an area that doesn’t contain the foreground color, the area is painted with the foreground color.


Using the Brushes palette
Painting

Using the Brushes palette

The brush sizes and shapes available for painting and editing appear in the Brushes palette. The Brushes palette can hold as many brushes as you want. You can also load or append brush sets created in Adobe Photoshop.

Brush settings are retained for each of the painting and retouching tools (paintbrush, airbrush, pencil, eraser, blur, smudge, sharpen, dodge, burn, and sponge).

To display the Brushes palette:

Choose Window > Show Brushes.

To choose a brush setting for a painting or retouching tool:

1  Select the tool you want to use.

2  In the Brushes palette, click the brush you want to use. If a brush is too large to fit in the palette, it appears as a smaller brush with a number indicating the actual diameter in pixels.

To load, append, or replace brush sets:

Choose one of the following commands from the Brushes palette menu:

•   Reset Brushes to return to the default brushes.

•   Load Brushes to add brushes stored in a file to the current palette.

•   Replace Brushes to replace the current brush set with brushes stored in a file.

When you quit ImageReady, the current Brushes palette is saved in the Preferences file.


Using the paint bucket tool
Painting

Using the paint bucket tool

The paint bucket tool fills all pixels of a similar color value on a layer.

To use the paint bucket tool:

1  Select the foreground color that you want to use.

2  Double-click the paint bucket tool ( [image]) to select it and display its Options palette.

3  Specify the opacity and blending mode as described in Using the Options palette for painting tools.

4  Enter the tolerance for the fill.

The tolerance defines how similar a pixel must be in color to be filled. Values can range from 0 to 255. A low tolerance fills pixels within a range of color values very similar to the pixel you click. A high tolerance fills pixels within a broader range.

5  Select Contiguous Pixels Only to replace only pixels contiguous to the one you click, or leave unselected to replace all similar pixels on the layer.

6  To smooth the edges of the filled selection, select Anti-aliased.

7  To base the fill on the composite color information of the pixel you click, select Use All Layers. Deselecting this option uses only the color information on the active layer. In either case, only pixels on the active layer are filled.

8  Click the part of the image you want to fill. All adjacent pixels within the specified tolerance are filled with the foreground color.

If you’re working on a layer and don’t want to fill transparent areas, make sure that Preserve Transparency is selected in the Layers palette. See Preserving a layer’s transparency.


Using the Options palette for painting tools
Painting

Using the Options palette for painting tools

You specify options for a painting tool using the Options palette for that tool.

See also:

Specifying the opacity, pressure, or exposure

Selecting a blending mode

Blending modes


Specifying the opacity, pressure, or exposure
Using the Options palette for painting tools

Specifying the opacity, pressure, or exposure

The Options palette lets you specify the opacity, pressure, or exposure for these painting and editing tools:

•   You can adjust the opacity used by the pencil, paintbrush, and rubber stamp tools.

•   You can adjust the pressure applied by the airbrush, smudge, blur, sharpen, and sponge tools.

•   You can adjust the exposure used by the dodge and burn tools.

To specify opacity, pressure, or exposure:

In the tool’s Options palette, enter a value for Opacity, Pressure, or Exposure, or drag the slider.

Opacity, pressure, or exposure can range from 1% to 100%. For transparent paint or a weak effect, specify a low percentage value; for more opaque paint or a strong effect, specify a high value.

Painting with various opacity settings


Selecting a blending mode
Using the Options palette for painting tools

Selecting a blending mode

The blending mode specified in the Options palette controls how pixels in the image are affected by a painting tool.

Blending modes are available for the pencil, paintbrush, airbrush, rubber stamp, line, smudge, sharpen, blur, and paint bucket tools. It’s helpful to think in terms of the following types of color when visualizing a blending mode’s effect:

•   The base color is the original color in the image.

•   The blend color is the color being applied with the tool.

•   The result color is the color resulting from the blend of the base color and the blend color.

For a description of each blending mode, see Blending modes.

Click these links to see examples of some of ImageReady’s blending modes.

Normal

Dissolve

Multiply

Screen

Soft Light

Hard Light

Color Dodge

Color Burn

Darken

Lighten

Difference

Saturation

Color

Luminosity


Blending modes
Using the Options palette for painting tools

Blending modes

Normal Paints each pixel to make it the result color. This is the default mode.

Dissolve Paints each pixel to make it the result color. However, the result color is a random replacement of the pixels with the base color or the blend color, depending on the opacity at any pixel location. This mode works best with the paintbrush tool and a large brush.

Behind Paints only on the transparent part of a layer. This mode works only in layers containing transparency and is analogous to painting on the back of transparent areas on a sheet of acetate. This mode is not available with the paint bucket tool or if Preserve Transparency is selected in the Layers palette.

Clear Paints each pixel and makes it transparent. This mode is available for the paint bucket tool and the Fill command.

Multiply Looks at the color information in each channel and multiplies the base color by the blend color. The result color is always a darker color. Multiplying any color with black produces black. Multiplying any color with white leaves the color unchanged. When you’re painting with a color other than black or white, successive strokes with a painting tool produce progressively darker colors. The effect is similar to drawing on the image with multiple felt tip markers.

Screen Looks at each channel’s color information and multiplies the inverse of the blend and base colors. The result color is always a lighter color. Screening with black leaves the color unchanged. Screening with white produces white. The effect is similar to painting over an area with bleach.

Overlay Multiplies or screens the colors, depending on the base color. Colors overlay the existing pixels while preserving the highlights and shadows of the base color. The base color is not replaced but is mixed with the blend color to reflect the lightness or darkness of the original color.

Soft light Darkens or lightens the colors, depending on the blend color. The effect is similar to shining a diffused spotlight on the image.

If the blend color (light source) is lighter than 50% gray, the image is lightened. If the blend color is darker than 50% gray, the image is darkened. Painting with pure black or white produces a distinctly darker or lighter area but does not result in pure black or white.

Hard light Multiplies or screens the colors, depending on the blend color. The effect is similar to shining a harsh spotlight on the image.

If the blend color (light source) is lighter than 50% gray, the image is lightened, as if it were screened. This is useful for adding highlights to an image. If the blend color is darker than 50% gray, the image is darkened, as if it were multiplied. This is useful for adding shadows to an image. Painting with pure black or white results in pure black or white.

Color Dodge Looks at the color information in each channel and brightens the base color to reflect the blend color. Blending with black produces no change.

Color Burn Looks at the color information in each channel and darkens the base color to reflect the blend color. Blending with white produces no change.

Darken Looks at the color information in each channel and selects the base or blend color—whichever is darker—as the result color. Pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change.

Lighten Looks at the color information in each channel and selects the base or blend color—whichever is lighter—as the result color. Pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change.

Difference Looks at the color information in each channel and subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value.

Exclusion Creates an effect similar to but softer than the Difference mode. Blending with white inverts the base color values. Blending with black produces no change.

Hue Creates a result color with the luminance and saturation of the base color and the hue of the blend color.

Saturation Creates a result color with the luminance and hue of the base color and the saturation of the blend color. If you paint with this mode in an area with a saturation of zero (gray), there is no change.

Color Creates a result color with the luminance of the base color and the hue and saturation of the blend color. This preserves the gray levels in the image and is useful for coloring monochrome images and for tinting color images.

Luminosity Creates a result color with the hue and saturation of the base color and the luminance of the blend color. This mode creates an inverse effect from that of the Color mode.


Filling selections and layers
Painting

Filling selections and layers

ImageReady provides a variety of ways to fill a selection, a layer, or the work canvas with colors and images.

See also:

To fill a selection or layer using shortcuts

To fill a selection or a layer


To fill a selection or layer using shortcuts
Filling selections and layers

To fill a selection or layer using shortcuts:

1  Select the area or layer you want to fill.

2  Fill the area or layer:

•   To fill with the foreground color, press Alt+Backspace (Windows) or Option+Delete (Mac OS).

•   To apply a foreground color fill only to the areas that contain pixels, press Alt+Shift+Backspace (Windows) or Option+Shift+Delete (Mac OS). This operation preserves the transparency of the layer.

•   To fill with the background color, press Control+Backspace (Windows) or Command+Delete (Mac OS).

•   To apply a background color fill only to the areas that contain pixels, press Control+Shift+Backspace (Windows) or Command+Shift+Delete (Mac OS).

•   To fill a layer with transparency, press Backspace (Windows) or Delete (Mac OS).

See also:

To fill a selection or a layer


To fill a selection or a layer
Filling selections and layers

To fill a selection or a layer:

1  Set the foreground or background color you want to use for the fill.

2  Select the area you want to fill. To fill an entire layer, select the layer in the Layers palette.

3  Choose Edit > Fill to fill the selection or layer.

To display the Fill dialog box, press Shift+Backspace (Windows) or Shift+Delete (Mac OS).

4  For Use, choose Foreground Color, Background Color, Pattern, Black, 50% Gray, or White to fill the selection with the specified color.

5  Specify an opacity and blending mode as described in Using the Options palette for painting tools.

6  To fill only areas containing nontransparent pixels, select Preserve Transparency.

7  Click OK to fill the selection.

See also:

To fill a selection or layer using shortcuts


Stroking selections
Painting

Stroking selections

You can paint a border around a selection using the Stroke command.

See also:

To stroke a selection


To stroke a selection
Stroking selections

To stroke a selection:

1  Specify a foreground color as described in Choosing the foreground and background colors.

2  Select the area you want to stroke.

3  Choose Edit > Stroke.

4  Specify the width of the hard-edged border. Values can range from 1 to 10 pixels.

5  For Location, specify whether to place the border inside, outside, or directly over the selection boundaries.

6  For Use, choose Foreground Color, Background Color, Pattern, Black, 50% Gray, or White to stroke the selection with the specified color.

7  Specify an opacity and a blending mode as described in Using the Options palette for painting tools.

8  If you’re working with a selection containing transparency and want to stroke only areas containing pixels, select the Preserve Transparency option.

9  Click OK to stroke the selection or layer.


Choosing the foreground and background colors
Painting

Choosing the foreground and background colors

ImageReady uses the foreground color to paint and to fill selections and the background color to paint areas with the Auto Erase option of the pencil tool. You can designate a new foreground or background color using the eyedropper tool, the Color palette, the Swatches palette, or the Adobe Color Picker.

The current foreground color appears in the top color selection box in the toolbox, the background color in the lower box. The default foreground color is black, and the default background is white.

A. Foreground color B. Default Colors icon C. Switch Colors icon D. Background color

To reverse the foreground and background colors:

Click the Switch Colors icon in the toolbox.

To return to the default foreground and background colors:

Click the Default Colors icon in the toolbox.

To change the foreground or background color:

1  Do one of the following:

•   To change the foreground color, click the top color selection box in the toolbox.

•   To change the background color, click the lower color selection box in the toolbox.

2  Choose a color using the color picker.

To switch between the foreground and background colors, press X. To switch to the default foreground and background colors, press D.

See also:

Using the eyedropper tool

Selecting a foreground or background color from the Color Table palette

Using the Color palette

Using the Swatches palette


Using the eyedropper tool
Choosing the foreground and background colors

Using the eyedropper tool

With the eyedropper tool, you sample color from an image to designate a new foreground or background color. You can sample from the active image or another image displayed in ImageReady. (When you’re using the eyedropper, you can click in a background window without making it the active window.) You can also use the eyedropper tool to sample any color displayed on your desktop, including colors in images displayed in other open applications.

You can specify the size of the area sampled by the eyedropper tool. For example, you can set the eyedropper to sample the color values of a 3-by-3 screen pixel area under the pointer. Modifying the sample size of the eyedropper affects the color readouts displayed in the Info Palette.

See also:

To select the foreground or background color from an image in ImageReady using the eyedropper

To select the foreground or background color from the desktop using the eyedropper

To change the sample size of the eyedropper


To select the foreground or background color from an image in ImageReady using the eyedropper
Using the eyedropper tool

To select the foreground or background color from an image in ImageReady using the eyedropper:

1  Click the eyedropper tool ( [image]).

2  Select a color:

•   To select a new foreground color from an image displayed in ImageReady, click the color you want.

•   To select a new background color from an image displayed in ImageReady, Alt-click (Windows) or Option-click (Mac OS) the color you want.

If you drag the eyedropper tool, the foreground color selection box changes dynamically as you drag. Alt-drag (Windows) or Option-drag (Mac OS) to activate the background color selection box. Release the mouse button to pick the new color.

See also:

To select the foreground or background color from the desktop using the eyedropper

To change the sample size of the eyedropper


To select the foreground or background color from the desktop using the eyedropper
Using the eyedropper tool

To select the foreground or background color from the desktop using the eyedropper:

1  Click the eyedropper tool ( [image]).

2  Select a color:

•   To select a new foreground color, place the eyedropper tool inside the ImageReady window and drag the eyedropper to the color you want to sample. You must start within the ImageReady window, but you can drag anywhere on-screen to sample a new foreground color.

•   To select a new background color, press Alt (Windows) or Option (Mac OS), then drag from within the ImageReady window to the color you want to sample.

To use the eyedropper tool temporarily while using any painting tool, hold down Alt (Windows) or Option (Mac OS).

See also:

To select the foreground or background color from an image in ImageReady using the eyedropper

To change the sample size of the eyedropper


To change the sample size of the eyedropper
Using the eyedropper tool

To change the sample size of the eyedropper:

1  Double-click the eyedropper tool to display the Eyedropper Options palette.

2  Choose one of the following options from the Sample Size menu:

•   Point Sample to read the precise value of the pixel you click.

•   3 by 3 Average or 5 by 5 Average to read the average value of the specified number of screen pixels within the area you click.

See also:

To select the foreground or background color from an image in ImageReady using the eyedropper

To select the foreground or background color from the desktop using the eyedropper


Selecting a foreground or background color from the Color Table palette
Choosing the foreground and background colors

Selecting a foreground or background color from the Color Table palette

You can select foreground and background colors from the Color Table palette when working with an optimized image in GIF or PNG-8 format.

To select a foreground or background color from the Color Table palette:

1  Make sure the Optimized, 2-Up, or 4-Up tab is selected in the image window and the optimized image is in GIF or PNG-8 format.

2  Do one of the following:

•   To choose a foreground color, click a color in the Color Table palette, or drag the color to the foreground color box.

•   To choose a background color, Alt-click (Windows) or Option-click (Mac OS) a color in the Color Table palette, or drag the color to the background color box.


Using the Color palette
Choosing the foreground and background colors

Using the Color palette

The Color palette displays the color values for the current foreground and background colors. Using the sliders in the Color palette, you can edit the foreground and background colors according to several different color models. You can also choose a background or foreground color from the spectrum of colors displayed in the color ramp, and specify the color ramp to display Web-safe colors only.

A cube icon appears in the Colors palette if the current color is not part of the Web palette. The closest Web color appears next to the cube. Click on the cube to select this color. To see alternative Web colors displayed next to the cube, press on the alert cube and drag away from the cube in any direction. Different directions provide different Web-safe colors to choose from. To select the color displayed, release the mouse button. See Recognizing non-Web colors for more information.

See also:

To display the Color palette

To edit the foreground or background color using the Color palette

To sample colors from the color ramp

To display only Web-safe colors in the color ramp


To display the Color palette
Using the Color palette

To display the Color palette:

Choose Window > Show Color.

See also:

To edit the foreground or background color using the Color palette

To sample colors from the color ramp

To display only Web-safe colors in the color ramp


To edit the foreground or background color using the Color palette
Using the Color palette

To edit the foreground or background color using the Color palette:

1  From the Color palette menu, choose the color model you want to use for color readout values:

•   RGB Sliders lets you enter the red, green, and blue values (from 0 to 255) of the original image.

•   HSB Sliders converts the RGB values to the Hue, Saturation, and Brightness color model.

•   Web Sliders lets you enter the red, green, and blue values of a color in hexadecimal. Each slider is limited to six values (to match the Web palette). To select an intermediate value, press Alt (Windows) or Option (Mac OS) as you move the slider.

2  To edit the foreground or background color, make sure that its color selection box is active (outlined in black). To make the foreground or background color selection box active, click the box.

3  To specify a new color, do one of the following:

•   Drag the color sliders.

•   Enter or choose values next to the color sliders.

•   Click the color selection box, choose a color, and click OK. SeeUsing the Adobe Color Picker for more information.

•   Drag a color from the Swatches palette or the Color Table palette to the foreground or background color box in the Color palette.

See also:

To display the Color palette

To sample colors from the color ramp

To display only Web-safe colors in the color ramp


To sample colors from the color ramp
Using the Color palette

To sample colors from the color ramp:

1  To edit the foreground or background color, make sure that its color selection box is active (outlined in black). To make the foreground or background color selection box active, clickthe box.

2  Position the pointer over the color ramp (the pointer turns into the eyedropper), and click to sample a color.

See also:

To display the Color palette

To edit the foreground or background color using the Color palette

To display only Web-safe colors in the color ramp


To display only Web-safe colors in the color ramp
Using the Color palette

To display only Web-safe colors in the color ramp:

Choose Make Ramp Web Safe from the Color palette menu.

See also:

To display the Color palette

To edit the foreground or background color using the Color palette

To sample colors from the color ramp


Using the Swatches palette
Choosing the foreground and background colors

Using the Swatches palette

You can select a foreground or background color from the Swatches palette, or you can add or delete colors to create a custom swatch set. You can also save a set of swatches and reload them for use in another image. Although you can add colors to the Swatches palette, you should manage its size and organization.

See also:

To display the Swatches palette

To select a color

To add a color to the Swatches palette

To move a color in the Swatches palette

To duplicate a swatch in the Swatches palette

To delete a color from the Swatches palette

To return to the default Swatches palette

To save and use custom swatch sets


To display the Swatches palette
Using the Swatches palette

To display the Swatches palette:

Choose Window > Show Swatches.

See also:

To select a color

To add a color to the Swatches palette

To move a color in the Swatches palette

To duplicate a swatch in the Swatches palette

To delete a color from the Swatches palette

To return to the default Swatches palette

To save and use custom swatch sets


To select a color
Using the Swatches palette

To select a color:

Do one of the following:

•   To select a foreground color, click a color in the Swatches palette.

•   To select a background color, Alt-click (Windows) or Option-click (Mac OS) a color in the Swatches palette.

See also:

To display the Swatches palette

To add a color to the Swatches palette

To move a color in the Swatches palette

To duplicate a swatch in the Swatches palette

To delete a color from the Swatches palette

To return to the default Swatches palette

To save and use custom swatch sets


To add a color to the Swatches palette
Using the Swatches palette

To add a color to the Swatches palette:

1  Use the eyedropper tool, the Color palette, or the color picker to select the color you want to add as the foreground color.

2  Add the color:

•   Click the New Swatch button at the bottom of the Swatches palette to add the color to the end of the palette.

•   Choose New Swatch from the Swatches palette menu to add the color to the end of the palette.

•   Drag a color from the Color Table palette and drop it where you want it in the Swatches palette.

Color selected from image, and added to Swatches palette

See also:

To display the Swatches palette

To select a color

To move a color in the Swatches palette

To duplicate a swatch in the Swatches palette

To delete a color from the Swatches palette

To return to the default Swatches palette

To save and use custom swatch sets


To move a color in the Swatches palette
Using the Swatches palette

To move a color in the Swatches palette:

Drag the color to the new position in the palette.

See also:

To display the Swatches palette

To select a color

To add a color to the Swatches palette

To duplicate a swatch in the Swatches palette

To delete a color from the Swatches palette

To return to the default Swatches palette

To save and use custom swatch sets


To duplicate a swatch in the Swatches palette
Using the Swatches palette

To duplicate a swatch in the Swatches palette:

1  Click the swatch to select it.

2  Choose Duplicate Swatch from the Swatches palette menu.

See also:

To display the Swatches palette

To select a color

To add a color to the Swatches palette

To move a color in the Swatches palette

To delete a color from the Swatches palette

To return to the default Swatches palette

To save and use custom swatch sets


To delete a color from the Swatches palette
Using the Swatches palette

To delete a color from the Swatches palette:

1  Click the swatch to select it.

2  Choose a method for deleting the swatch:

•   Click the Trash button in the Swatches palette.

•   Drag the swatch to the Trash button.

•   Choose Delete Swatch from the Swatches palette menu.

See also:

To display the Swatches palette

To select a color

To add a color to the Swatches palette

To move a color in the Swatches palette

To duplicate a swatch in the Swatches palette

To return to the default Swatches palette

To save and use custom swatch sets


To return to the default Swatches palette
Using the Swatches palette

To return to the default Swatches palette:

Choose Reset Swatches from the Swatches palette menu.

See also:

To display the Swatches palette

To select a color

To add a color to the Swatches palette

To move a color in the Swatches palette

To duplicate a swatch in the Swatches palette

To delete a color from the Swatches palette

To save and use custom swatch sets


To save and use custom swatch sets
Using the Swatches palette

To save and use custom swatch sets:

Choose a command from the Swatches palette menu:

•   Reset Swatches to use the default set of swatches.

•   Load Swatches to open a new floating palette containing the swatch set.

•   Replace Swatches to replace the current swatch set with the swatches stored in a file.

•   Save Swatches to save the current swatches in a file.

Exiting from the program saves the current Swatches palette in the ImageReady preferences file.

See also:

To display the Swatches palette

To select a color

To add a color to the Swatches palette

To move a color in the Swatches palette

To duplicate a swatch in the Swatches palette

To delete a color from the Swatches palette

To return to the default Swatches palette


Using the Adobe Color Picker
Painting

Using the Adobe Color Picker

You can use the Adobe Color Picker to select the foreground or background color by choosing from a color spectrum or by defining colors numerically. You can select colors based on the HSB or RGB color models. By default, the program uses the Adobe Color Picker.

To display the Adobe Color Picker:

Do one of the following:

•   Click the foreground or background color selection box in the toolbox.

•   Click the active color selection box in the Color palette.

•   Double-click on a color in the Color Table palette or the Swatches palette.

See also:

Specifying a color using the color field and color slider

Specifying a color using numeric values

Recognizing non-Web colors


Specifying a color using the color field and color slider
Using the Adobe Color Picker

Specifying a color using the color field and color slider

You can use the color field and the color slider in the Color Picker dialog box to select a color. The color slider displays the range of color levels available for the selected color component (for example, R, G, or B). The color field displays the range for the remaining two components—one on the horizontal axis, one on the vertical.

For example, if the current color is black and you click the red component (R) using the RGB color model, the color slider displays the range of color for red (0 is at the bottom of the slider and 255 is at the top). The color field displays the values for blue along its horizontal axis, for green along its vertical axis.

To choose a color:

1  Click a radio button next to HSB or RGB.

2  Click Only Web Colors in the lower left corner to select from Web colors only.

3  Select a color:

•   Drag the white triangles along the slider.

•   Click inside the color slider.

•   Click inside the color field.

When you click in the color field, a circular marker indicates the color’s position in the field.

As you adjust the color using the color field and color slider, the numerical values change to reflect the new color. The color rectangle to the right of the color slider displays the new color in the top section of the rectangle. The original color appears at the bottom of the rectangle.

4  When you are satisfied with the selected color, click OK.


Specifying a color using numeric values
Using the Adobe Color Picker

Specifying a color using numeric values

In the Adobe Color Picker, you can select a color by specifying numeric values for each color component.

To specify colors using numeric values:

1  Do one of the following:

•   In RGB color mode, specify component values from 0 to 255 (0 is black, and 255 is the pure color).

•   In HSB color mode, specify saturation and brightness as percentages; specify hue as an angle, from 0° to 360°, that corresponds to a location on the color wheel.

•   In hexadecimal color mode, specify a hexadecimal value in the # field.

2  When you are satisfied with the specified color, click OK.


Recognizing non-Web colors
Using the Adobe Color Picker

Recognizing non-Web colors

When you select a color that is not in the 216 Web-safe color palette, an alert cube appears in the Color Picker dialog box and in the Color palette. The closest color is displayed next to the cube.

Non-Web color display in color picker

To select the closest Web color:

Click the alert cube that appears in the Color Picker dialog box or the Color palette.

To see alternative Web colors displayed next to the cube, position the pointer over the alert cube, press the mouse button, and drag around the cube. To select the color displayed, release the mouse button.


Using other color pickers
Painting

Using other color pickers

You can use the built-in color picker on your system or a plug-in color picker to select colors. Any plug-in color pickers you install appear in the Color Picker menu in the General Preferences dialog box. For information on installing and using a plug-in color picker, see the documentation that came with the plug-in.

See also:

To use the Windows Color Picker

To use the Apple Color Picker


To use the Windows Color Picker
Using other color pickers

To use the Windows Color Picker:

1  Choose File > Preferences > General.

2  For Color Picker, choose System, and click OK.

3  Click the foreground or background color selection box in the toolbox.

The Windows Color Picker lets you select colors from an array of basic colors or define up to 16 custom colors based on the HSB or the RGB color model.

4  To choose a color from the Basic Colors palette, click the color you want.

5  To specify a custom color, click Define Custom Colors to display the Custom Color Selector. Specify a color by using the color field and color slider or by entering numerical values for each color component.

The new color is displayed on the left side of the Color/Solid box. The right side of this box displays the solid color closest to the color you have specified. (You can choose the displayed solid color by double-clicking the right side of the box.)

6  When you are satisfied with the color, click Add to Custom Colors to add it to the Custom Colors palette.

7  To choose a custom color from the Windows Color Picker, click the color you want.

8  Click OK.

For more information, see your Windows documentation.

See also:

To use the Apple Color Picker


To use the Apple Color Picker
Using other color pickers

To use the Apple Color Picker:

1  Choose File > Preferences > General.

2  For Color Picker, choose System, and click OK.

3  Click the foreground or background color selection box in the toolbox.

4  Select a color model from the list at the left of the dialog box.

5  Drag the color sliders, click in the color wheel, click a crayon, or enter numeric values to specify a color.

6  Click OK.

For more information, see your Mac OS documentation.

See also:

To use the Windows Color Picker


Using Layers

You work with layers in ImageReady to edit images and to create image maps, rollover states, and animated GIF images. For information on creating image maps or rollover states, see Web Design Features. For information on creating animated GIF images, see Animation.

See also:

About ImageReady layers

Using the Layers palette

Creating a layered image

Moving layer contents

Managing layered images

Editing layers

Specifying layer options

Creating clipping groups

Using layer masks

Selecting opaque areas on a layer

Using layer effects

Using styles


About ImageReady layers
Using Layers

About ImageReady layers

When you create a new image in ImageReady, the image consists of a single layer. When you scan or import an image into ImageReady, the image contents are placed on a layer. You can add more layers to an image 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, blending modes, and layer effects.

Special features such as layer masks and layer effects let you experiment with and apply sophisticated effects to the layers in your image.

When you open a Photoshop image in ImageReady, all existing layers, adjustment layers, and layer effects are preserved. Layer effects (but not adjustment layers) can be edited in ImageReady. When you save the original image in ImageReady and open it in Photoshop, all layers, layer masks, and layer effects are preserved.

You can work with layers in original or optimized views. However, it is usually much faster to work with layers in the original view. When you save an optimized image, layers are merged into a single layer for each image (or for animated GIFs, a single layer for each frame).

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:

Understanding Layers


Understanding Layers
About ImageReady layers

Understanding Layers

Think of layers as sheets of acetate stacked one on top of the other. Where there is no image on a layer, you can see through to the layers below. In the illustration below, each animal and the map are on separate layers. The dark texture is the bottom layer. All layers in a file share the same number of pixels.

Zebra is on topmost layer.

Transparent areas on a layer let you see through to the layers below.


Using the Layers palette
Using Layers

Using the Layers palette

The Layers palette lists all the layers in the image, starting with the topmost layer. A thumbnail of layer contents appears to the left of the layer name. It is updated as you edit. Use the scroll bars or resize the palette to see additional layers.

You use the Layers palette to create, hide, display, copy, merge, and delete layers. (Additional commands appear in the menu.) You can also use the Layers palette to apply layer effects, graphic effects such as drop shadows or glows. (See Using layer effects.)

Changes to an image affect only the highlighted or active layer. You select a layer to make it active, and only one layer can be active at a time. If the image contains an animation sequence, you can use the Layers palette to scroll through the contents of each animation frame.

A. Show/Hide B. Selected layer icon (Selected layer is active layer) C. Link/Unlink D. Previous animation frame E. Next animation frame F. Layer Effects button G. Layer Mask button H. New Layer button I. Trash button J. Thumbnail

See also:

To display the Layers palette

To select a layer

To scroll through animation frames

Viewing layers

Changing the stacking order of layers

Linking layers


To display the Layers palette
Using the Layers palette

To display the Layers palette:

Choose Window > Show Layers.

See also:

To select a layer

To scroll through animation frames

Viewing layers

Changing the stacking order of layers

Linking layers


To select a layer
Using the Layers palette

To select a layer:

In the Layers palette, click a layer to make it active.

See also:

To display the Layers palette

To scroll through animation frames

Viewing layers

Changing the stacking order of layers

Linking layers


To scroll through animation frames
Using the Layers palette

To scroll through animation frames:

Click the forward and backward buttons at the lower left corner of the Layers palette.

The current animation frame number is shown to the right of the forward and backward buttons. You can click this current animation frame area to display the Animation palette if it is not already showing. You can also view animation frames using the Animation palette. See Animation.

See also:

To display the Layers palette

To select a layer

Viewing layers

Changing the stacking order of layers

Linking layers


Viewing layers
Using the Layers palette

Viewing layers

With the Layers palette, you can control whether a layer is visible, whether a preview or thumbnail of its contents is displayed, and also how transparency is displayed. Turning off thumbnails or reducing their size can speed performance and save monitor space.

See also:

To show or hide a layer

To change the display of layer thumbnails

To change the transparency display


To show or hide a layer
Viewing layers

To show or hide a layer:

Do one of the following:

•   In the Layers palette, click the eye icon next to a layer to hide that layer. Click in the column again to redisplay the layer.

•   Drag through the eye column to show or hide multiple layers.

•   Alt-click (Windows) or Option-click (Mac OS) the eye icon for a layer to display just that layer. Alt/Option-click in the eye column again to redisplay all the layers.

Only the layers visible in the original image are visible in the optimized image. Making layers temporarily invisible can speed performance.

Note: You can make the active layer invisible. Keep in mind, however, that changes still affect the hidden, active layer.

Lion and color layer hidden

See also:

To change the display of layer thumbnails

To change the transparency display


To change the display of layer thumbnails
Viewing layers

To change the display of layer thumbnails:

1  Choose Palette Options from the Layers palette menu.

2  Click a size, or click None to turn off the thumbnails, and then click OK.

See also:

To show or hide a layer

To change the transparency display


To change the transparency display
Viewing layers

To change the transparency display:

1  Choose File > Preferences > Transparency. By default, the transparent areas of a document appear as a checkerboard pattern.

2  For Grid Size, select a new size for the pattern. If you choose None, transparent areas in the layer appear white.

3  For Grid Colors, select one of the following options:

•   Light, Medium, or Dark to specify a gray pattern.

•   Any other color from the list to display the checkerboard in that color.

4  Click OK.

See also:

To show or hide a layer

To change the display of layer thumbnails


Changing the stacking order of layers
Using the Layers palette

Changing the stacking order of layers

The stacking order determines whether the contents of a layer appear in front of or behind the contents of other layers.

See also:

To change the order of layers by dragging

To change the stacking order of a layer


To change the order of layers by dragging
Changing the stacking order of layers

To change the order of layers by dragging:

1  In the Layers palette, select the layer that you want to move.

2  Drag the layer up or down in the Layers palette. When the highlighted line appears in the desired position, release the mouse button.

Original image

Zebra layer dragged below lion layer

See also:

To change the stacking order of a layer


To change the stacking order of a layer
Changing the stacking order of layers

To change the stacking order of a layer:

1  In the Layers palette, select the layer that you want to move.

2  Choose Layer > Arrange, and choose one of the following options from the submenu:

•   Bring to Front to make the layer the topmost layer.

•   Bring Forward to move the layer one level up in the stacking order.

•   Send Backward to move the layer one level down in the stacking order.

•   Send to Back to make the layer the bottommost layer in the image.

To move a selected layer one level up in the Layers palette, press Ctrl+] (Windows) or Command+] (Mac OS). To move one level down, press Ctrl+[ or Command+[. To move to the topmost level, press Ctrl+Shift+] or Command+Shift+]. To move to the bottommost level, press Ctrl+Shift+[ or Command+Shift+].

See also:

To change the order of layers by dragging


Linking layers
Using the Layers palette

Linking layers

By linking together two or more layers, you can move or apply commands to them simultaneously.

To link layers:

1  Select a layer in the Layers palette.

2  Click in the column immediately to the left of any layers you want to link to the selected layer. The link icon appears in the column.

To unlink layers:

In the Layers palette, click the link icons to remove them.


Creating a layered image
Using Layers

Creating a layered image

ImageReady lets you create multiple layers in an image, each with its own blending mode and opacity. However, the amount of memory in your system may limit the number of layers possible in a single image.

See also:

Adding layers

Duplicating layers


Adding layers
Creating a layered image

Adding layers

You can add layers to an image in various ways—by creating new layers or turning selections into layers. Newly added layers appear above the selected layer in the Layers palette.

See also:

To create a new layer using default options

To add a new layer and specify options

To turn a selection into a new layer


To create a new layer using default options
Adding layers

To create a new layer using default options:

Click the New Layer button ( [image]) at the bottom of the Layers palette. The layer uses Normal blending mode with 100% opacity and is named according to its order of creation.

See also:

To add a new layer and specify options

To turn a selection into a new layer


To add a new layer and specify options
Adding layers

To add a new layer and specify options:

1  Do one of the following:

•   Choose Layer > New Layer.

•   Choose New Layer from the Layers palette menu.

•   Alt-click (Windows) or Option-click (Mac OS) the New Layer button at the bottom of the Layers palette.

2  Name the layer, and select mode, opacity, and group options as described in Specifying layer options. Then click OK. (You can also specify Image Map options for the layer. See Working with image maps.)

See also:

To create a new layer using default options

To turn a selection into a new layer


To turn a selection into a new layer
Adding layers

To turn a selection into a new layer:

1  Make a selection.

2  Choose Layer > New > Layer via Copy or Layer > New > Layer via Cut.

See also:

To create a new layer using default options

To add a new layer and specify options


Duplicating layers
Creating a layered image

Duplicating layers

You can duplicate any layer within the same image. And you can copy any layer from one image (the source) to another image (the destination).

See also:

To duplicate a layer in an image

To copy a layer between images

To copy multiple layers into another image


To duplicate a layer in an image
Duplicating layers

To duplicate a layer in an image:

1  Select the layer in the Layers palette.

2  Duplicate the layer:

•   Choose Layer > Duplicate Layer, or choose Duplicate Layer from the Layers palette menu.

•   Drag the layer name in the Layers palette to the New Layer button ( [image]) at the bottom of the palette.

See also:

To copy a layer between images

To copy multiple layers into another image


To copy a layer between images
Duplicating layers

To copy a layer between images:

1  Open the two images you want to use.

2  In the Layers palette of the source image, select the name of the layer that you want to copy.

3  Copy the layer:

•   Drag the layer’s name from the Layers palette into the destination image.

•   Choose Select > All to select all of the pixels on the layer that fall inside the canvas boundaries, and choose Edit > Copy. Make the destination image active, and choose Edit > Paste.

•   Use the move tool ( [image]) to drag the layer from the source image to the destination image. The copied layer appears in the destination image where you release the mouse button (and above the active layer in the Layers palette).

If the layer you’re copying is larger than the destination image, only part of the layer will be visible even though its contents remains available. Use the move tool to drag other sections of the layer into view.

Layer dragged and dropped between images

Hold down Shift as you drag a layer to copy it to the center of the destination image.

See also:

To duplicate a layer in an image

To copy multiple layers into another image


To copy multiple layers into another image
Duplicating layers

To copy multiple layers into another image:

1  Make sure that both the source and destination images are open, and select one of the layers you want to copy.

2  In the Layers palette, click in the column immediately to the left of any additional layers you want to move. The link icon appears in the column.

3  Use the move tool ( [image]) to drag the linked layers from the source image to the destination image.

See also:

To duplicate a layer in an image

To copy a layer between images


Moving layer contents
Using Layers

Moving layer contents

You can reposition the contents of individual layers or groups of layers within the image’s boundaries. Moving a layer or a group of layers will affect all selected animation or rollover frames.

See also:

To reposition a layer in an image

To reposition a layer using the Auto Select Layer option

To reposition multiple layers

To position a layer


To reposition a layer in an image
Moving layer contents

To reposition a layer in an image:

1  In the Layers palette, select the layer that you want to move. (Make sure nothing is selected on the layer.)

2  Select the move tool ( [image]). To activate the move tool when any other tool is selected, hold down Ctrl (Windows) or Command (Mac OS).

3  Drag anywhere in the image to move the selected layer into the desired position. To constrain the direction of movement to a multiple of 45°, hold down Shift as you drag.

To reposition the layer in 1-pixel increments when the move tool is selected, press the arrow keys on the keyboard. To move the layer in 10-pixel increments, press Shift and an arrow key.

See also:

To reposition a layer using the Auto Select Layer option

To reposition multiple layers

To position a layer


To reposition a layer using the Auto Select Layer option
Moving layer contents

To reposition a layer using the Auto Select Layer option:

1  Double-click the move tool to display its Options palette.

2  Select Auto Select Layer.

3  Enter a value or use the slider to specify the opacity level a layer must have in order to be selected.

4  Place the pointer over an area of the image and drag. ImageReady automatically selects the topmost layer in which the pixel under the pointer meets the opacity level criteria specified in step 3.

See also:

To reposition a layer in an image

To reposition multiple layers

To position a layer


To reposition multiple layers
Moving layer contents

To reposition multiple layers:

1  In the Layers palette, link the layers you want to move as described in Linking layers.

2  Use the move tool ( [image]) to move the linked layers in the image window. To activate the move tool when any other tool is selected, hold down Ctrl (Windows) or Command (Mac OS).

Lion and zebra layers linked and moved

See also:

To reposition a layer in an image

To reposition a layer using the Auto Select Layer option

To position a layer


To position a layer
Moving layer contents

To position a layer:

1  In the Layers palette, select the layer that you want to position.

2  Choose Layer > Set Layer Position.

3  Select offset options:

•   From the Horizontal pop-up menu, choose an option for placing the layer horizontally with respect to the image. In the Pixels text box, enter the number of pixels to offset the layer horizontally.

•   From the Vertical pop-up menu, choose an option for placing the layer vertically with respect to the image. In the Pixels text box, enter the number of pixels to offset the layer vertically.

(Use hyphens before numbers to enter negative values and offset the layer to the left or upward.)

4  Click OK.

See also:

To reposition a layer in an image

To reposition a layer using the Auto Select Layer option

To reposition multiple layers


Managing layered images
Using Layers

Managing layered images

Adding nontransparent layers to an image increases its file size. To conserve disk space, you can delete layers, merge two or more layers together, or flatten all the layers in an image into one layer.

Note: Adding layers does not affect the file size of an optimized image; layers in an optimized image are flattened.

See also:

To delete a layer

Merging layers

Flattening all layers


To delete a layer
Managing layered images

To delete a layer:

1  Select the layer in the Layers palette.

2  Choose a method to delete the layer:

•   Click the Trash button at the bottom of the Layers palette, and click Yes.

•   Drag the layer onto the Trash button.

•   Choose Layer > Delete Layer.

•   Choose Delete Layer from the Layers palette menu.

To delete a selected layer automatically, Alt-click (Windows) or Option-click (Mac OS) the Trash button at the bottom of the Layers palette.

See also:

Merging layers

Flattening all layers


Merging layers
Managing layered images

Merging layers

Merging layers combines several layers into one and keeps file size manageable. When you’ve finalized the characteristics and positioning of a layer’s contents, you can merge the layer with one or more layers to create partial versions of your composite image. When transparent areas intersect in all the merged layers, the areas remain transparent.

See also:

To merge a layer with the layer below it

To merge all the visible layers in an image


To merge a layer with the layer below it
Merging layers

To merge a layer with the layer below it:

1  Make sure that the two layers you want to merge are visible. Select the upper layer in the Layers palette.

2  Merge the layers:

•   Choose Layer > Merge Down.

•   Choose Merge Down from the Layers palette menu.

See also:

To merge all the visible layers in an image


To merge all the visible layers in an image
Merging layers

To merge all the visible layers in an image:

1  Hide any layers you do not want to merge.

2  Merge the layers:

•   Choose Layer > Merge Visible.

•   Choose Merge Visible from the Layers palette menu.

See also:

To merge a layer with the layer below it


Flattening all layers
Managing layered images

Flattening all layers

In a flattened image, all visible layers are merged into one, greatly reducing file size. Flattening an image discards all hidden layers. In most cases, you won’t want to flatten a file until you have finished editing individual layers.

Layers in original images are flattened automatically in optimized images.

To flatten an image:

1  Make sure that all the layers you want to keep are visible.

2  Flatten the image:

•   Choose Layer > Flatten Image.

•   Choose Flatten Image from the Layers palette menu.

3  Click OK to discard hidden layers, if the image contains them.


Editing layers
Using Layers

Editing layers

A newly created layer is transparent (except when you create a new document and designate the contents as white or the background color.) You can add color values to the layer using the painting and editing tools, and then apply filters or use special effects to modify the layer. All painting and editing occurs on the active layer.

See also:

Preserving a layer’s transparency

Sampling from all layers


Preserving a layer's transparency
Editing layers

Preserving a layer’s transparency

You can confine your painting and editing to only those areas of a layer that are not transparent (that is, to only those pixels in a layer that already contain color). For example, you may want to change the color of a shape without adding pixels to the transparent area outside the shape.

To confine editing to the opaque portions of a layer:

1  Select the layer in the Layers palette.

2  Select Preserve Transparency in the Layers palette.

Painting with Preserve Transparency on in Layers palette


Sampling from all layers
Editing layers

Sampling from all layers

By default, when working with the magic wand, paint bucket, magic eraser, smudge, blur, sharpen, or rubber stamp tool, you are applying color sampled only from pixels on the active layer. This means you can smudge or sample in a single layer even when other layers are visible, and you can sample from one layer and paint in another one.

Alternatively, you can choose to paint using sampled data from all the visible layers. For example, you can use the rubber stamp tool to clone an area containing pixels from all the visible layers.

To sample from all visible layers:

1  Double-click the magic wand tool ( [image]), paint bucket tool ( [image]), magic eraser tool ( [image]),smudge tool ( [image]), blur tool ( [image]), sharpen tool ( [image]), or rubber stamp tool ( [image]) to display its Options palette.

2  Select Use All Layers in the tool’s Options palette.

Cloning with zebra layer, and with merged data from all layers

Note: Unless you are using the rubber stamp tool, painting or editing in a new layer usually produces the best results when Use All Layers is selected.


Specifying layer options
Using Layers

Specifying layer options

The layer options let you change a layer’s name and opacity and control how the pixels in the layer blend with the layers underneath. You can also use layer options to define image maps (see Creating image maps). You can choose layer options from the Layer Options dialog box, or from the Layer Options/Effects palette (when no layer effect is selected in the Layers palette).

It’s important to remember that the opacity and blending modes chosen for a specific layer interact with the opacity and mode settings for the tools you use to paint and edit the pixels on the layer. For example, suppose you are working on a layer that uses the Dissolve mode and an opacity of 50%. If you paint on this layer using the paintbrush tool set to Normal mode with an opacity of 100%, the paint will appear in Dissolve mode with a 50% opacity because this is the maximum the layer can display.

On the other hand, suppose you are working on a layer created using Normal mode and 80% opacity. If you use the eraser tool with an opacity of 50%,  50% of the opacity of the affected pixels is erased. On a layer that is set to 80% opacity, 80% of the visible 50% would be displayed, resulting in an apparent opacity of 40%. For more information on painting blending modes, see Specifying layer blending modes.

See also:

To choose options for a layer

Specifying opacity

Specifying layer blending modes


To choose options for a layer
Specifying layer options

To choose options for a layer:

1  Do one of the following:

•   Double-click the layer’s name in the Layers palette to view the Layer Options dialog box.

•   Select the layer in the Layers palette, and choose Layer > Layer Options or click the Layer Options palette tab to view the palette.

•   Select the layer in the Layers palette, and choose Layer Options from the Layers palette menu.

•   Select the layer (not a layer effect), and click the Layer Options tab in the Layer Options/Effects palette.

2  If desired, type a new name for the layer.

3  Choose layer options as described in the following sections.

4  If you are using the Layer Options dialog box, click OK.

See also:

Specifying opacity

Specifying layer blending modes


Specifying opacity
Specifying layer options

Specifying opacity

You can change the opacity of each layer using the Opacity option in the Layer Options dialog box, the Layer Options palette, or in the Layers palette. A layer with 1% opacity appears completely transparent; one with 100% opacity appears completely opaque.

To specify opacity for a layer:

In the Layers palette or the Layer Options dialog box, enter a value for Opacity or drag the slider.


Specifying layer blending modes
Specifying layer options

Specifying layer blending modes

You use layer blending modes to determine how the pixels in a layer are blended with underlying pixels on other layers. By applying modes to individual layers, you can create a variety of special effects.

To select a blending mode:

Choose an option from the Mode pop-up menu in the Layers palette or the Layer Options dialog box.

For a description of each blending mode, see Blending modes.

Click a link to see an example of the mode.

Normal

Dissolve

Multiply

Screen

Overlay

Soft Light

Hard Light

Color Dodge

Color Burn

Darken

Lighten

Difference

Exclusion

Hue

Saturation

Color

Luminosity


Creating clipping groups
Using Layers

Creating clipping groups

In a clipping group, one layer acts as a mask for layers above it. This layer is known as the base layer. For example, you might have a shape on one layer, a texture on the overlying layer, and some text on the topmost layer. If you define all three layers as a clipping group, the texture and the text appear only through the shape on the base layer.

Note that only successive layers can be included in a clipping group. When you create a clipping group, dotted lines appear between the grouped layers in the Layers palette. The name of the base layer in the group is underlined, and the thumbnails for the overlying layers are indented.

Clipping group with lion and Africa layers

See also:

To create a clipping group

To remove a layer from a clipping group

To ungroup all layers in a clipping group


To create a clipping group
Creating clipping groups

To create a clipping group:

Do one of the following:

•   Hold down Alt (Windows) or Option (Mac OS), position the pointer over the solid line dividing two layers in the Layers palette (the pointer changes to two overlapping circles), and click.

•   Select a layer in the Layers palette, and choose Layer > Group with Previous.

•   Link together the desired layers in the Layers palette, as described in Linking layers, and then choose Layer > Group Linked.

•   In the Layers palette, double-click the name of the layer you want to add to a group. In the Layer Options dialog box, select Group with Previous Layer, and then click OK.

See also:

To remove a layer from a clipping group

To ungroup all layers in a clipping group


To remove a layer from a clipping group
Creating clipping groups

To remove a layer from a clipping group:

Do one of the following:

•   Hold down Alt (Windows) or Option (Mac OS), position the pointer over the dotted line separating two grouped layers in the Layers palette (the pointer changes to two overlapping circles), and click.

•   In the Layers palette, select the topmost layer in the clipping group, and choose Layer > Ungroup.

•   In the Layers palette, double-click the name of the layer that you want to remove from a group. In the Layer Options dialog box, deselect Group with Previous Layer, and then click OK.

See also:

To create a clipping group

To ungroup all layers in a clipping group


To ungroup all layers in a clipping group
Creating clipping groups

To ungroup all layers in a clipping group:

1  In the Layers palette, select the base layer in the clipping group or the layer immediately above the base layer.

2  Choose Layer > Ungroup.

See also:

To create a clipping group

To remove a layer from a clipping group


Using layer masks
Using Layers

Using layer masks

You can create a layer mask to control how different areas within a layer are hidden and revealed. By making changes to the layer mask, you can apply a variety of special effects to the layer without actually affecting the pixels on that layer. You can then apply the mask to make the changes permanent or remove the mask without applying the changes. You can save all layer masks with a layered document in Photoshop file format.

In the Layers palette, a layer mask appears as an additional thumbnail to the right of the layer thumbnail. This thumbnail represents the 8-bit grayscale (alpha) channel created by ImageReady when you add the layer mask. Although you cannot view the grayscale channel directly in the image, you can monitor its contents using the layer mask thumbnail.

A. Layer mask icon B. Mask link icon C. Layer mask selected D. New layer mask

See also:

To add a mask that shows or hides the entire layer

To add a mask that shows or hides a selection

To edit a layer mask

Unlinking layers and layer masks

Temporarily turning off a layer mask

Applying and discarding layer masks


To add a mask that shows or hides the entire layer
Using layer masks

To add a mask that shows or hides the entire layer:

1  If needed, choose Select > Deselect to clear any selection borders in the image.

2  In the Layers palette, select the layer to which you want to add a mask.

3  Do one of the following:

•   To create a mask that reveals the entire layer, click the New Layer Mask ( [image]) button at the bottom of the Layers palette, or choose Layer > Add Layer Mask > Reveal All.

•   To create a mask that hides the entire layer, Alt-click (Windows) or Option-click (Mac OS) the New Layer Mask button, or choose Layer > Add Layer Mask > Hide All.

See also:

To add a mask that shows or hides a selection

To edit a layer mask

Unlinking layers and layer masks

Temporarily turning off a layer mask

Applying and discarding layer masks


To add a mask that shows or hides a selection
Using layer masks

To add a mask that shows or hides a selection:

1  In the Layers palette, select the layer to which you want to add a mask.

2  If the selected layer already contains a layer mask, remove the mask as described in .

3  Select the desired area in the image.

4  Do one of the following:

•   To create a mask that reveals the selected area and hides the remaining portion of the layer, click the New Layer Mask button ( [image]), or choose Layer > Add Layer Mask > Reveal Selection.

•   To create a mask that hides the selected area and reveals the remaining portion of the layer, Alt-click (Windows) or Option-click (Mac OS) the New Layer Mask button, or choose Layer > Add Layer Mask > Hide Selection.

Selection

Layer mask revealing selection

See also:

To add a mask that shows or hides the entire layer

To edit a layer mask

Unlinking layers and layer masks

Temporarily turning off a layer mask

Applying and discarding layer masks


To edit a layer mask
Using layer masks

To edit a layer mask:

1  Click the layer mask thumbnail in the Layers palette to make it active (the mask icon appears to the left of the layer thumbnail).

2  Select any of the editing or painting tools.

The foreground and background colors default to grayscale values when the mask is active because the layer mask is grayscale. As you edit, the mask thumbnail displays the changes.

3  Edit the mask.

•   To hide the layer and add to the mask, paint the mask with black.

•   To reveal the layer and subtract from the mask, paint the mask with white or use the eraser tool to erase portions of the mask.

•   To make the layer partially visible, paint the mask with gray.

Neck painted with gray

To edit the layer instead of the layer mask, make the layer active by clicking its thumbnail in the Layers palette. The paintbrush icon appears to the left of the thumbnail to indicate that you are editing the layer.

See also:

To add a mask that shows or hides the entire layer

To add a mask that shows or hides a selection

Unlinking layers and layer masks

Temporarily turning off a layer mask

Applying and discarding layer masks


Unlinking layers and layer masks
Using layer masks

Unlinking layers and layer masks

By default, a layer is linked to its layer mask, as indicated by the link icon between the thumbnails in the Layers palette. The layer and layer mask move together in the image when you move either one with the move tool.

You can unlink the layer from its layer mask by clicking the link icon. Unlinking a layer from its layer mask lets you move the layer and the layer mask independently. You can click between the layer and layer mask thumbnails to reestablish the link.

When you’re working with animation files, unlinked layers can be animated across frames in the Animation palette. For information on creating animations, see Animation.


Temporarily turning off a layer mask
Using layer masks

Temporarily turning off a layer mask

You can temporarily turn off a layer mask without removing it. When you turn off a layer mask, a red X appears over the layer mask thumbnail in the Layers palette, and the entire underlying layer appears without masking effects.

Layer mask off

To disable or enable a layer mask:

Choose Layer > Disable Layer Mask to turn off a layer mask without removing it.

Choose Layer > Enable Layer Mask to turn on a disabled layer mask.


Applying and discarding layer masks
Using layer masks

Applying and discarding layer masks

When you have finished creating a layer mask, you can apply the mask to make the changes permanent, remove the mask without applying changes, or (in a multilayer file) leave the mask for later use.

To remove a layer mask:

1  Click the layer mask thumbnail in the Layers palette.

2  Choose Layer > Remove Layer Mask.

3  Choose whether to apply any changes:

•   Click Yes to apply the layer mask before removing it.

•   Click No to remove the layer mask without applying the changes.


Selecting opaque areas on a layer
Using Layers

Selecting opaque areas on a layer

By loading a transparency mask, you can quickly select all the opaque areas on a layer. This is useful when you want to exclude transparent areas from a selection.

To load a layer’s transparency mask:

Do one of the following:

•   In the Layers palette, Ctrl-click (Windows) or Command-click (Mac OS) the layer thumbnail.

Layer pixels loaded as selection

•   To add the pixels to an existing selection, press Ctrl+Shift/Command+Shift, and click the layer thumbnail in the Layers palette.

•   To subtract the pixels from an existing selection, press Ctrl+Alt/Command+Option, and click the layer thumbnail in the Layers palette.

•   To load the intersection of the pixels and an existing selection, press Ctrl+Alt+Shift/Command+Option+Shift, and click the layer thumbnail in the Layers palette.

For any layer that contains a layer mask, any of these actions can also be performed with the layer mask instead of the layer’s transparency mask by substituting the layer mask thumbnail for the layer thumbnail. For more information about layer masks, see .

To move all the contents of a layer, you can use the move tool without loading a transparency mask.


Using layer effects
Using Layers

Using layer effects

Adobe ImageReady includes a number of automated effects that you can apply to layers, including drop shadows, glows, bevelling, embossing, fills, and gradients. Layer effects are linked to the layer contents. When you move or edit the contents on the layer, the effects are updated automatically. Layer effects are especially useful for enhancing type layers.

Effects you apply to a layer are listed in the Layers palette below the layer name. Each effect is indicated by a layer effects icon ( [image]). One or more effects applied to a layer make up a style, indicated by a style icon ( [image]). A style is a set of layer effects that you can save and apply to other layers in the same document or to other ImageReady documents. ImageReady also includes predefined styles which you can apply to documents. See Using styles.

Layer effect added

See also:

Hiding and showing layer effects

Adding layer effects

Specifying options for layer effects

Selecting, editing, and removing layer effects

Preserving layer effects in ImageReady 1.0 or Photoshop 5.0 documents


Hiding and showing layer effects
Using layer effects

Hiding and showing layer effects

You can hide or show all layer effects or individual layer effects on a layer.

To hide or show layer effects:

•   In the Layers palette, choose Hide All Effects or Show All Effects from the palette menu.

•   Choose Layer > Effects > Hide All Effects or Layer > Effects > Show All Effects.

•   To hide or show individual effects, in the Layers palette click the eye icon next to an effect name. Click in the column again to redisplay the effect or effects.

Note: Layer effects that are hidden when a file is saved and closed do not appear when the file is reopened. However, you can easily reapply an effect to a layer in a reopened file. ImageReady preserves the last settings used for each effect in the Layer Options/Effects palette.


Adding layer effects
Using layer effects

Adding layer effects

You add effects to a layer by clicking the Effects button ( [image]) at the bottom of the Layers palette and choosing an effect from the Effects menu. You can also add effects by using the Layer > Effects menu. You choose options for layer effects using the Layer Effects/Options palette. Choose Window > Show Layer Options/Effects to view the palette.

ImageReady has 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 Color Fill effect applies a solid fill color to a layer.

•   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 detailed information on all layer effects in Photoshop, see “Using layer effects” in Photoshop online Help.

See also:

To apply a drop shadow or inner shadow

To apply an outer or inner glow

To apply bevelling or embossing

To apply a color fill

To apply a gradient fill

To define an intermediate color for a gradient fill

To apply a pattern fill


To apply a drop shadow or inner shadow
Adding layer effects

To apply a drop shadow or inner shadow:

1  Select the layer you want to use.

2  In the Layers palette, click the Effects button ( [image]), and select Drop Shadow or Inner Shadow from the Effects menu.

3  In the Layer Options/Effects palette, specify blending mode, opacity, color, lighting angle, blur, and intensity options as described in Specifying options for layer effects.

4  For Distance, enter a value to specify the displacement of the shadow from the layer contents.

5  Select Use Global Angle to define a lighting angle that applies to all layer effects in the image.

See also:

To apply an outer or inner glow

To apply bevelling or embossing

To apply a color fill

To apply a gradient fill

To define an intermediate color for a gradient fill

To apply a pattern fill


To apply an outer or inner glow
Adding layer effects

To apply an outer or inner glow:

1  Select the layer you want to use.

2  In the Layers palette, click the Effects button ( [image]), and select Outer Glow or Inner Glow from the Effects menu.

3  In the Layer Options/Effects palette, specify blending mode, opacity, color, blur, and intensity options as described in Specifying options for layer effects.

4  If you are applying an inner glow, select a glow source option:

•   Center to apply a glow that emanates from the center of the layer contents.

•   Edge to apply a glow that emanates from the inside edges of the layer contents.

Inner glow, and outer glow

See also:

To apply a drop shadow or inner shadow

To apply bevelling or embossing

To apply a color fill

To apply a gradient fill

To define an intermediate color for a gradient fill

To apply a pattern fill


To apply bevelling or embossing
Adding layer effects

To apply bevelling or embossing:

1  Select the layer you want to use.

2  In the Layers palette, click the Effects button ( [image]), and select Bevel and Emboss from the Effects menu.

3  For Style, choose one of the following:

•   Outer Bevel to create bevelling along the outside edges of the layer contents.

•   Inner Bevel to create bevelling along the inside edges of the layer contents.

•   Emboss to create the effect of embossing the layer contents against the underlying layers.

•   Pillow Emboss to create the effect of stamping the edges of the layer contents into the underlying layers.

4  In the Layer Options/Effects palette, choose Show Options from the palette menu, and then specify blending mode, opacity, and color options for the highlight and shadow as described in Specifying options for layer effects.

Outer bevel, and pillow emboss

5  Specify lighting angle and blur options as described in Specifying options for layer effects.

6  For Depth, enter a value. A higher value results in a more accentuated bevel.

7  Select Use Global Angle to define a lighting angle that applies to all layer effects in the image.

See also:

To apply a drop shadow or inner shadow

To apply an outer or inner glow

To apply a color fill

To apply a gradient fill

To define an intermediate color for a gradient fill

To apply a pattern fill


To apply a color fill
Adding layer effects

To apply a color fill:

1  Select the layer you want to use.

2  In the Layers palette, click the Effects button ( [image]), and select Color Fill from the Effects menu.

3  In the Layer Options/Effects palette, specify blending mode and opacity as described in Specifying options for layer effects.

4  Click the color box in the Layer Options/Effects palette, and choose a color as described in “Using the Adobe Color Picker” in online Help.

See also:

To apply a drop shadow or inner shadow

To apply an outer or inner glow

To apply bevelling or embossing

To apply a gradient fill

To define an intermediate color for a gradient fill

To apply a pattern fill


To apply a gradient fill
Adding layer effects

To apply a gradient fill:

1  Select the layer you want to use.

2  In the Layers palette, click the Effects button ( [image]), and select Gradient/Pattern from the Effects menu.

3  In the Layer Effects palette, select Gradient.

A. Gradient type menu B. Starting color stop C. Midpoint D. Ending color stop

4   Choose a gradient type from the pop-up menu:

•   Select Linear to create a gradient that changes colors from the starting point to the ending point in a straight line.

•   Select Radial to create a gradient that changes colors from the starting point to the ending point in a circular pattern.

5  If you select Linear, specify an angle for the gradient as described in Specifying options for layer effects.

6  Define the starting color of the gradient:

•   Click the left color stop under the gradient bar and select a color using the Color palette.

•   Double-click the left color stop under the gradient bar and select a color using the color picker.

7  Define the ending color of the gradient:

•   Click the right color stop under the gradient bar and select a color using the Color palette.

•   Double-click the right color stop under the gradient bar and select a color using the color picker.

8  To adjust the location of the starting point or ending point, drag the left or right color stop under the gradient bar.

9  To adjust the location of the midpoint (where the gradient displays an even mix of the starting and ending colors), drag the diamond above the gradient bar to the left or right.

See also:

To apply a drop shadow or inner shadow

To apply an outer or inner glow

To apply bevelling or embossing

To apply a color fill

To define an intermediate color for a gradient fill

To apply a pattern fill


To define an intermediate color for a gradient fill
Adding layer effects

To define an intermediate color for a gradient fill:

1  Click below the gradient bar to define another color stop.

2  Define the color for the intermediate point as you would for a starting or ending point.

3  Drag the intermediate point left or right to define the midpoint of the gradient.

4  To remove the intermediate point, drag the color stop down off the gradient bar.

See also:

To apply a drop shadow or inner shadow

To apply an outer or inner glow

To apply bevelling or embossing

To apply a color fill

To apply a gradient fill

To apply a pattern fill


To apply a pattern fill
Adding layer effects

To apply a pattern fill:

1  Select the layer you want to use.

2  In the Layers palette, click the Effects button ( [image]), and select Gradient/Pattern from the Effects menu.

3  In the Layer Effects palette, select Pattern.

4  Double-click the Sample box to open a pattern image file. Or click on the button to the right of the Sample box, and choose a pattern from the pop-up menu.

5  If you do not want the pattern to move along with the layer, deselect the Linked to Layer checkbox. (By default, any pattern effect applied to a layer will move if the layer is dragged with the move tool.)

See also:

To apply a drop shadow or inner shadow

To apply an outer or inner glow

To apply bevelling or embossing

To apply a color fill

To apply a gradient fill

To define an intermediate color for a gradient fill


Specifying options for layer effects
Using layer effects

Specifying options for layer effects

When applying layer effects, you can specify a number of common options using controls in the Layer Options/Effects palette.

When a layer effect is selected in the current layer, the Layer Options/Effects palette shows options for that effect. When no effect is selected in the current layer, the Layer Options/Effects palette shows the layer name and image map options for the layer. See Working with image maps.

See also:

Blending mode

Opacity

Color

Angle

Blur

Intensity


Blending mode
Specifying options for layer effects

Blending mode

Determines how the layer effect blends with the underlying layers, which may or may not include the active layer. For example, an inner shadow blends with the active layer because the effect is drawn on top of that layer, whereas a drop shadow blends only with the layers beneath the active layer. In most cases, the default mode for each effect produces the best results. For more information on blending modes, see Specifying layer blending modes (Blending modes are not applied with Gradient and Pattern effects.)

See also:

Opacity

Color

Angle

Blur

Intensity


Opacity
Specifying options for layer effects

Opacity

Sets the opacity of the layer effect as you enter a value or drag the slider, as with specifying opacity for the full layer. See Specifying the opacity, pressure, or exposure. (Opacity is not specified with Gradient and Pattern effects.)

See also:

Blending mode

Color

Angle

Blur

Intensity


Color
Specifying options for layer effects

Color

Specifies the color of a shadow, glow, or highlight as you click the color box and choose a color as described in Using the Adobe Color Picker.

See also:

Blending mode

Opacity

Angle

Blur

Intensity


Angle
Specifying options for layer effects

Angle

Determines the lighting angle at which the effect is applied to the layer. You can define a global angle that applies to all layer effects in the image; you can also assign a local angle that applies only to a specific layer effect. Using a global angle gives the appearance of a consistent light source shining on the image. (For linear gradient effects, Angle simply sets the angle of the gradient, not the lighting angle.)

Lighting angle: –45° and 45°

To set a global lighting angle:

In the Layer Options/Effects palette, select Use Global Angle. For Angle, enter a value.

The new lighting angle appears as the default for each layer effect that uses the global lighting angle.

To set a local lighting angle:

In the Layer Options/Effects palette, deselect Use Global Angle. For Angle, enter a value or drag the angle radius.

See also:

Blending mode

Opacity

Color

Blur

Intensity


Blur
Specifying options for layer effects

Blur

Creates a diffuse, softened effect as you enter a value (between 0 and 50) or drag the slider. A higher value increases the strength of the effect.

See also:

Blending mode

Opacity

Color

Angle

Intensity


Intensity
Specifying options for layer effects

Intensity

Adjusts the strength of the effect as you enter a value (between 0 and 600) or drag the slider. A higher value increases the strength of the effect.

See also:

Blending mode

Opacity

Color

Angle

Blur


Selecting, editing, and removing layer effects
Using layer effects

Selecting, editing, and removing layer effects

You can select layer effects and edit the options for the effects you have applied to a layer at any time. You can also copy effects between layers, copy effects between documents, and remove an effect that you have applied to a layer. When you copy effects, any duplicated effects in the destination layers will be replaced by the new effects.

You can merge layer effects with their parent layer to create a painting layer with no effects. You can also convert layer effects to painting layers to allow manipulation of each layer individually.

See also:

To hide or show layer effect names in the Layers palette

To select a layer effect

To edit the layer effects applied to a layer

To copy layer effects or styles using menu commands

To copy layer effects or styles by dragging

To remove layer effects

To remove all layer effects applied to a layer


To hide or show layer effect names in the Layers palette
Selecting, editing, and removing layer effects

To hide or show layer effect names in the Layers palette:

Click the triangle immediately to the left of the style icon ( [image]) below the layer name.

See also:

To select a layer effect

To edit the layer effects applied to a layer

To copy layer effects or styles using menu commands

To copy layer effects or styles by dragging

To remove layer effects

To remove all layer effects applied to a layer


To select a layer effect
Selecting, editing, and removing layer effects

To select a layer effect:

In the Layers palette, click on the effect name or effect icon ( [image]).

See also:

To hide or show layer effect names in the Layers palette

To edit the layer effects applied to a layer

To copy layer effects or styles using menu commands

To copy layer effects or styles by dragging

To remove layer effects

To remove all layer effects applied to a layer


To edit the layer effects applied to a layer
Selecting, editing, and removing layer effects

To edit the layer effects applied to a layer:

1   In the Layers palette, click the layer effects icon ( [image]) for the effect you want to edit. (Double-click the effects icon if the Layer Options/Effects palette is not showing.)

2  In the Layer Options/Effects palette, edit options as described in Adding layer effects.

See also:

To hide or show layer effect names in the Layers palette

To select a layer effect

To copy layer effects or styles using menu commands

To copy layer effects or styles by dragging

To remove layer effects

To remove all layer effects applied to a layer


To copy layer effects or styles using menu commands
Selecting, editing, and removing layer effects

To copy layer effects or styles using menu commands:

1  In the Layers palette, select the effect or style that you want to copy.

2  Choose Layer > Effects > Copy Effects.

3  Do one of the following:

•   To paste into a single layer, select the destination layer in the palette and choose Layer > Effects > Paste Effects.

•   To paste into multiple layers, link the destination layers as described in Linking layers. Then choose Layer > Effects > Paste To Linked.

See also:

To hide or show layer effect names in the Layers palette

To select a layer effect

To edit the layer effects applied to a layer

To copy layer effects or styles by dragging

To remove layer effects

To remove all layer effects applied to a layer


To copy layer effects or styles by dragging
Selecting, editing, and removing layer effects

To copy layer effects or styles by dragging:

1  In the Layers palette, select the effect or style that you want to copy.

2  Choose an option to copy the effect or style:

•   Drag the effect or style onto another layer in the Layers palette or onto another document to copy the effect or style.

•   Drag the effect or style onto another document to copy the effect or style.

Note: Layer effects dragged onto another document are added to the topmost layer where the items are dropped.

See also:

To hide or show layer effect names in the Layers palette

To select a layer effect

To edit the layer effects applied to a layer

To copy layer effects or styles using menu commands

To remove layer effects

To remove all layer effects applied to a layer


To remove layer effects
Selecting, editing, and removing layer effects

To remove layer effects:

1  In the Layers palette, click an individual effect name or icon ( [image]) to select it.

2  Remove the effect:

•   Click the Trash button ( [image]) at the bottom of the Layers palette, and click Yes. Only the selected effect is deleted (not the layer containing the selected effect).

•   Drag the selected effect onto the Trash button ( [image]) at the bottom of the Layers palette.

•   Choose Delete Effect from the Layers palette menu.

See also:

To hide or show layer effect names in the Layers palette

To select a layer effect

To edit the layer effects applied to a layer

To copy layer effects or styles using menu commands

To copy layer effects or styles by dragging

To remove all layer effects applied to a layer


To remove all layer effects applied to a layer
Selecting, editing, and removing layer effects

To remove all layer effects applied to a layer:

1  In the Layers palette, select the layer containing the effects you want to remove.

2  Choose a method to remove the effects:

•   Drag the style icon ( [image]) onto the Trash button( [image]) at the bottom of the Layers palette.

•   Drag each effect name or icon ( [image]) onto the Trash button.

•   Choose Delete All Effects from the Layers palette menu.

•   Choose Layer > Effects > Clear Effects.

See also:

To hide or show layer effect names in the Layers palette

To select a layer effect

To edit the layer effects applied to a layer

To copy layer effects or styles using menu commands

To copy layer effects or styles by dragging

To remove layer effects


Preserving layer effects in ImageReady 1.0 or Photoshop 5.0 documents
Using layer effects

Preserving layer effects in ImageReady 1.0 or Photoshop 5.0 documents

When you display documents created in ImageReady 1.0 or in Photoshop 5.0 or later, you can preserve layer effects by opening the documents in ImageReady 2.0. Layer effects in such documents are displayed in the same way as layer effects created in ImageReady 2.0 and have the same editing options.

If you place documents created in ImageReady 1.0 or Photoshop 5.0 or later into ImageReady 2.0 using the Place Image command, layers in the documents are flattened, creating a single painting layer with no layer effects.


Using styles
Using Layers

Using styles

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.

See also:

Defining styles

Viewing styles

Applying styles to layers

Managing styles


Defining styles
Using styles

Defining styles

You define new styles by applying effects to a layer in an ImageReady document and adding those effects as a new style 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 as described in Using layer effects.

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
Using styles

Viewing styles

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
Using styles

Applying styles to layers

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 from the Styles palette 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 from the Styles palette 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
Using styles

Managing styles

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

Adobe ImageReady lets 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. In addition, ImageReady lets you 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).

See also:

About type

Creating type

Setting type attributes


About type
Using Type

About type

Graphics applications create two different kinds of type:

See also:

Outline type

Bitmap type


Outline type
About type

Outline type

Is used by drawing or page-layout programs such as Adobe Illustrator or Adobe PageMaker(R) when creating type. Outline type consists of mathematically defined shapes and can be scaled to any size without losing its crisp, smooth edges.

When you create type in ImageReady, it is outline type. This lets you treat the type as text characters so you can edit them. It remains outline type until you save the optimized file or until you rasterize the type using the Layer > Type > Render Layer command.


Bitmap type
About type

Bitmap type

Is used by paint and image-editing programs such as Adobe Photoshop to create type composed of pixels. The sharpness of bitmap type depends on the type size and the resolution of the image. Zooming in or scaling up bitmap type will show jagged edges on the type.

When you save an optimized file in ImageReady, the type is saved as bitmap type. When you open a vector image (such as an Adobe Illustrator file) that contains outline type, ImageReady rasterizes the type into pixels or bitmap type (except for an image in Photoshop file format, in which outline type is preserved as outlines).

Bitmap type and outline type; inset zoom 300%


Creating type
Using Type

Creating type

The type ( [image]) and vertical type ( [image]) tools let you create colored type that is stored in a new type layer. You can edit the text at any time using the type layer.

Text created by type tool

See also:

Entering text

Editing type layers


Entering text
Creating type

Entering text

You enter text by selecting a type tool and clicking in the image to set an insertion point. The type tool lets you enter the text directly onto a new type layer created by ImageReady when you click the type insertion point. ImageReady uses the current foreground color for new type. You can change the color of type using the color picker.

To enter text:

1  Select the type ( [image]) or vertical type ( [image]) tool. The pointer changes to an I-beam pointer.

The small line through the I-beam marks the position of the type baseline. For horizontal type, the baseline marks the line on which the type rests; for vertical type, the baseline marks the center axis of the type characters.

2  Click in the image to set an insertion point for the type.

A new type layer appears in the Layers palette, with a type icon next to the layer name.

3  Specify type attributes as described in Setting type attributes.

4  To change the color of the type, choose a method for selecting a new color:

•   Click the foreground color selection box in the toolbox, choose a color from the color picker, and then click OK.

•   Choose a color from the Color palette or the Swatches palette.

5  Enter your text. To create a line break, press Enter (Windows) or Return (Mac OS) while the cursor is in the text area.

The type appears in the image on the new type layer.


Editing type layers
Creating type

Editing type layers

Once you have created type, you can edit the contents, attributes, color, and orientation at any time by using its type layer. When you save an image in Photoshop file format, type layers are saved with the image. You can move, restack, copy, and change the layer options of a type layer as for a regular layer (see Chapter 10 for general layers information). You can also make the following changes to a type layer and still edit the text:

•   Apply transformation commands from the Edit menu, except for Perspective and Distort. To apply the Perspective or Distort commands, or to transform just part of the type layer, you must convert the type layer to a regular layer.

•   Use layer effects.

•   Use fill shortcuts (see Filling selections and layers).

A selected type layer is indicated with a blue underline below the type in the document window.

To apply the full range of ImageReady effects (such as filters) to a type layer, convert the type layer to a regular layer. Converting a type layer makes its contents uneditable as text.

See also:

To select type layers by clicking on the type

To edit a type layer

To change the orientation of a type layer

To convert a type layer to a regular layer


To select type layers by clicking on the type
Editing type layers

To select type layers by clicking on the type:

1  Double-click the type tool to view the Type Options palette.

2  Select Auto Select Type Layer.

With this option selected, you can automatically select a type layer for editing by clicking the type in the image with the type tool. If this option is not selected, you must select the type layer in the Layers palette before you can select type in the image.

Note: The Type Options palette (for selecting type tool options) should not be confused with the Type palette (for setting type attributes).

See also:

To edit a type layer

To change the orientation of a type layer

To convert a type layer to a regular layer


To edit a type layer
Editing type layers

To edit a type layer:

1  Select the type layer in the Layers palette or click on the type with Auto Select Type Layer turned on.

2  Use the type tool ( [image]) or vertical type tool ( [image]) to select characters:

•   Drag over type to select characters.

•   Double-click on a word to select the full word.

•   Triple-click on a line to select the full line.

3  Make the desired changes in the Type palette as described in Setting type attributes.

See also:

To select type layers by clicking on the type

To change the orientation of a type layer

To convert a type layer to a regular layer


To change the orientation of a type layer
Editing type layers

To change the orientation of a type layer:

1  Select the type layer in the Layers palette.

2  Choose Layer > Type > Horizontal or Vertical to change the orientation of the layer contents.

See also:

To select type layers by clicking on the type

To edit a type layer

To convert a type layer to a regular layer


To convert a type layer to a regular layer
Editing type layers

To convert a type layer to a regular layer:

1  Select the type layer in the Layers palette.

2  Choose Layer > Type > Render Layer.

See also:

To select type layers by clicking on the type

To edit a type layer

To change the orientation of a type layer


Setting type attributes
Using Type

Setting type attributes

ImageReady gives you precise control over type attributes, including font, type size, leading, kerning, tracking, baseline shift, alignment, and rotation, and allows you to specify anti-aliasing for the type. To specify most changes to existing type, you must first select the desired characters on the type layer.

You specify type attributes in ImageReady using the Type palette.

To display the Type palette:

Choose Window > Show Type.

See also:

Choosing a font family

Choosing a type size

Changing the color of type

Specifying leading

Specifying kerning and tracking

Specifying baseline shift

Specifying alignment

Specifying anti-aliasing

Rotating character direction

Turning fractional character widths on or off


Choosing a font family
Setting type attributes

Choosing a font family

A font family is a complete set of characters, letters, and symbols of a particular typeface design. In addition to choosing a font, you can choose a type style, for example, Regular, Bold, or Italic. The range of available type styles varies with each font. Individual font families vary in the type styles available. ImageReady also generates faux type styles, simulated versions of Underline, Bold, and Italic styles.

To change the font and type style:

1  On the type layer, select the characters you want to adjust as described in the procedure to select text on Editing type layers.

2  For Font, choose a font family.

3  Choose a type style:

•   Choose any type style from the pop-up menu to the right of the Font menu.

•   Choose Faux Bold, Faux Italic, or Faux Underline from the Type palette menu to apply a simulated version of the selected style.


Choosing a type size
Setting type attributes

Choosing a type size

The type size determines how large the type appears in the image. The default type size is 12 pixels.

To choose a type size:

1  On the type layer, select the characters you want to adjust as described in Editing type layers.

2  In the Type palette, enter or choose a value for Size.


Changing the color of type
Setting type attributes

Changing the color of type

ImageReady provides several ways to change the color of type on a type layer. All type on a layer is the same color; you cannot apply different colors to different selections on a type layer.

To change the color of type on a layer:

Select the type layer, and choose a method for changing the color:

•   Click the foreground color selection box in the tool palette, and choose a color from the color picker.

•   Click a color in the Color palette, the Color Table palette, or the Swatches palette.

•   Drag a color from the tool palette foreground or background color selection box or from the Color palette, the Color Table palette, or the Swatches palette, and drop the color on the type layer.

•   Apply a color fill layer effect to the type layer. See Using layer effects.

•   Press Alt+Delete (Windows) or Option+Delete (Mac OS) to fill the text with the foreground color, or press Control+Delete (Windows) or Command+Delete (Mac OS) to fill the text with the background color.


Specifying leading
Setting type attributes

Specifying leading

Leading specifies the spacing between type baselines.

5-point type with 5-point leading and with 10-point leading

To change the leading:

1  On the type layer, select the line of type you want to adjust as described in Editing type layers.

2  In the Type palette, specify a value for Leading.


Specifying kerning and tracking
Setting type attributes

Specifying kerning and tracking

Kerning controls the spacing between two characters. You can control kerning manually, or you can use auto-kerning to turn on the kerning built into the font by the font designer. Tracking adjusts the spacing between all the characters in the type.

Positive kerning or tracking values move characters apart (adding to the default spacing); negative values move characters closer together (reducing the default spacing). Kerning and tracking values are measured in units that are 1/1000 of an em space. The width of an em space is relative to the current type size. In a 1-point font, 1 em corresponds to 1 point; in a 10-point font, 1 em corresponds to 10 points. Because kerning and tracking units are 1/1000 em, 100 units in a 10-point font are equivalent to 1 point.

Default, and tracking set to 350

To specify manual kerning:

1  On the type layer, click to set an insertion point between two characters.

2  Specify a kerning value.

To specify tracking:

1  On the type layer, select the characters you want to adjust as described in Editing type layers.

2  In the Type palette, specify a tracking value.

To specify characters with autokerning

Choose Auto from the Kerning pop-up menu in the Type palette.

Many fonts have information about the spacing of character pairs. For example, the spacing between an A and a W often is less than the spacing between an A and an F.


Specifying baseline shift
Setting type attributes

Specifying baseline shift

Baseline shift controls the distance that type appears from its baseline, either raising or lowering the selected type to create superscripts or subscripts.

To specify baseline shift:

1  In the Type palette, choose Show Options from the palette menu.

2  On the type layer, select the characters you want to adjust as described in Editing type layers.

3  For Baseline, enter a value.

A positive value moves horizontal type above and vertical type to the right of the baseline; a negative value moves type below or to the left of the baseline. Baseline shift is measured in points.

Default, and baseline shift of –10 points


Specifying alignment
Setting type attributes

Specifying alignment

Alignment controls the relative position of all text in the active layer.

To specify alignment:

In the Type palette, select an alignment option (different options are available with the horizontal and vertical type tools):

•   Select Left ( [image])  or Top ( [image]) (the leftmost alignment button) to begin each line of type at the insertion point.

•   Select Center ( [image], [image]) (the middle alignment button) to center the type around the insertion point.

•   Select Right ( [image]) or Bottom ( [image]) (the rightmost alignment button) to end each line of type at the insertion point.


Specifying anti-aliasing
Setting type attributes

Specifying anti-aliasing

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

Anti-aliased edges greatly increase the number of colors in the original image, which limits how much you can reduce the number of colors with the Optimize palette. This, in turn, limits your ability to reduce the optimized file size and may cause stray colors to appear along the edges of the type. Thus, when limiting the number of colors and file size is most important, leaving type without anti-aliased edges may be preferable, despite the jagged edges.

Anti-aliasing on, and off; inset zoom 200%

When creating text for online use, consider using larger type than you would use for printed works. Larger type can be easier to view online and gives you more freedom in deciding whether to apply anti-aliasing to text.

Note: One problem that can occur with anti-aliasing is that of text being rendered inconsistently at small sizes and low resolution (such as for web graphics). Deselecting the Fractional Width option in the Type palette menu will correct this inconsistency.

To apply anti-aliasing:

Choose an anti-aliasing option from the pop-up menu in the lower-right corner of the Type palette:

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


Rotating character direction
Setting type attributes

Rotating character direction

When you create vertical type, you can select the Rotate option to rotate the character direction by 90°. The Rotate option does not affect double-byte characters.

To rotate characters:

1  On the type layer, select the characters you want to adjust as described in Editing type layers.

2  In the Type palette, choose Show Options from the palette menu.

3  In the Type palette, click Rotate.

Original, and with vertical rotation 90°


Turning fractional character widths on or off
Setting type attributes

Turning fractional character widths on or off

By default, ImageReady displays 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 palette menu, 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.


Using Filters

Filters let you apply special effects to your images. In addition to special-effects filters, Adobe ImageReady includes the Unsharp Mask and Gaussian Blur filters for adjusting sharpness and detail in images, as well as filters for adjusting video images and for creating digital watermarks.

See also:

About plug-in filters

Previewing and applying filters

Using filter shortcuts

Improving performance with filters

Choosing a filter effect

Artistic filters

Blur filters

Distort filters

Pixelate filters

Render filters

Sharpen filters

Stylize filters

Texture filters

Video filters

Other filters

Adding digital copyright information with the Digimarc filter


About plug-in filters
Using Filters

About plug-in filters

Adobe ImageReady also supports plug-in filters developed by non-Adobe software developers. Once installed, plug-in filters appear at the bottom of the Filter menu and work in the same way as built-in filters. (Most third-party filters compatible with Photoshop are also compatible with ImageReady.) See Using plug-in modules.

Note: If you are interested in creating Adobe ImageReady-compatible plug-in modules, please contact Adobe Systems Developer Support.


Previewing and applying filters
Using Filters

Previewing and applying filters

To use a filter, choose the appropriate submenu command from the Filter menu. The following guidelines can help you in choosing filters:

•   The last filter used appears at the top of the menu.

•   Filters can be applied in both Original and Optimized view. However, the filter is always applied to the original image.

Applying filters—especially to large images—can be time-consuming. Previewing effects can save time and prevent unintended results. Some filters have a preview box in the filter dialog box.

To save time when trying various filters, experiment on a small, representative part of your image.

To preview and apply a filter:

1  To apply a filter to an area of a layer, select that area. To apply a filter to the entire layer, leave the image unselected.

2  Choose a filter from the submenus in the Filter menu. If a filter name is followed by ellipses (…), a dialog box appears.

3  If a dialog box appears, enter values or select options.

4  To preview the effect using the filter’s preview box, use the following navigation methods:

•   Drag in the preview box to center the area you want to preview.

•   To see part of the layer that is not visible, move the cursor inside the preview box to activate the hand tool. Drag to move the layer preview.

•   Use the (+) or (–) button under the preview box to zoom in or zoom out on the preview.

A flashing line beneath the preview size indicates that Adobe ImageReady is still rendering the preview.

5  Click OK to apply the filter.

A progress indicator in the status bar (Windows) or progress bar (Mac OS) allows you to gauge the time remaining until the filter is applied.


Using filter shortcuts
Using Filters

Using filter shortcuts

These techniques can help save time when working with filters:

•   To cancel a filter as it is being applied, press Esc (Windows) or Command+period (Mac OS).

•   To undo a filter, press Control+Z (Windows) or Command+Z (Mac OS).

•   To reapply the most recently used filter with its last values, press Control+F (Windows) or Command+F (Mac OS). Alternatively, choose Filter > Reapply Filter Name.

•   To open the dialog box for the most recently used filter, choose Filter > Filter Name.

•   To display the dialog box for the last filter you applied, press Control+Alt+F (Windows) or Command+Option+F (Mac OS).


Improving performance with filters
Using Filters

Improving performance with filters

Some filter effects can be memory intensive, especially when applied to a high-resolution image. You can use these techniques to improve performance:

•   Try out filters and settings on a small portion of an image.

•   Free up memory before running the filter by using the Clear Undo/Redo History command. See Reverting to any state of the image.

•   In Mac OS, allocate more RAM to ImageReady. If necessary, quit other applications to make more memory available to ImageReady.


Choosing a filter effect
Using Filters

Choosing a filter effect

The Adobe ImageReady filters fall into a number of general categories. In addition, third-party filters appear at the bottom of the Filter menu.

 For a complete presentation of all the filters, see Photoshop 5.0 online Help.

Click a link to see an example of the filter effect.

Artistic filters

Blur filters

Distort filters

Pixelate filters

Render filters

Sharpen filters

Stylize filters

Texture filters


Artistic filters
Using Filters

Artistic filters

The Artistic filters apply a painterly or special effect for a fine-arts or commercial project. These filters replicate natural or traditional media effects.

See also:

Colored Pencil

Dry Brush

Film Grain

Fresco

Sponge


Colored Pencil
Artistic filters

Colored Pencil

Draws an image using colored pencils on a solid background. Important edges are retained and given a rough crosshatch appearance; the solid background color shows through the smoother areas.


Dry Brush
Artistic filters

Dry Brush

Paints the edges of the image using a dry brush technique (between oil and watercolor). The filter simplifies an image by reducing its range of colors to areas of common color.


Film Grain
Artistic filters

Film Grain

Applies an even pattern to the shadow tones and midtones of an image. A smoother, more saturated pattern is added to the image’s lighter areas. This filter is useful for eliminating banding in blends and visually unifying elements from various sources.


Fresco
Artistic filters

Fresco

Paints an image in a coarse style using short, rounded, and hastily applied dabs.


Sponge
Artistic filters

Sponge

Creates images with highly textured areas of contrasting color, appearing to have been painted with a sponge.


Blur filters
Using Filters

Blur filters

The Blur filters soften a selection or an image, and are useful for retouching. They smooth transitions by averaging the pixels next to the hard edges of defined lines and shaded areas in an image.

Note: Before applying a Blur filter to the edges of a layer, be sure to turn off the Preserve Transparency option in the Layers palette.

See also:

Gaussian Blur

Motion Blur

Radial Blur

Smart Blur


Gaussian Blur
Blur filters

Gaussian Blur

Quickly blurs a selection by an adjustable amount. Gaussian refers to the bell-shaped curve that is generated when Adobe ImageReady applies a weighted average to the pixels. This filter adds low-frequency detail and can produce a hazy effect.

Note: For best results when using this filter, save your image as a JPEG or PNG 24-bit file. Saving your image in other formats may result in banding.


Motion Blur
Blur filters

Motion Blur

Blurs in a particular direction (from –360° to +360°) and at a specific intensity (from 1 to 999). The filter’s effect is analogous to taking a picture of a moving object with a fixed exposure time.


Radial Blur
Blur filters

Radial Blur

Simulates the blur of a zooming or rotating camera to produce a soft blur. Choose Spin to blur along concentric circular lines, and then specify a degree of rotation; or choose Zoom to blur along radial lines, as if zooming in or out of the image, and specify an amount from 1 to 100. Blur quality ranges from Draft for fast but grainy results; or Good and Best for smoother results, which are indistinguishable except on a large selection. Specify the origin of the blur by dragging the pattern in the Blur Center box.


Smart Blur
Blur filters

Smart Blur

Precisely blurs an image. You can specify a radius, to determine how far the filter searches for dissimilar pixels to blur; a threshold, to determine how different the pixels’ values should be before they are eliminated; and a blur quality. You also can set a mode for the entire selection (Normal), or for the edges of color transitions (Edge Only and Overlay). Where significant contrast occurs, Edge Only applies black-and-white edges, and Overlay Edge applies white.


Distort filters
Using Filters

Distort filters

The Distort filters geometrically distort an image, creating 3-D or other reshaping effects. Note that these filters can be very memory intensive.

See also:

Glass

Pinch

Spherize

Twirl

ZigZag


Glass
Distort filters

Glass

Makes an image appear as if it is being viewed through different types of glass. You can choose a glass effect or create your own glass surface as an ImageReady file and apply it. You can adjust scaling, distortion, and smoothness settings.

To use texture controls with the Glass filter:

1  For Texture, choose a texture type or choose Load Texture to specify a file.

2  Drag the Scaling slider to enlarge or reduce the effect on the image surface.

3  Select Invert to reverse the surface’s light and dark colors.

4  Click OK.


Pinch
Distort filters

Pinch

Squeezes a selection. A positive value up to 100% shifts a selection toward its center; a negative value up to –100% shifts a selection away from its center.


Spherize
Distort filters

Spherize

Gives objects a 3-D effect by wrapping a selection around a spherical shape, distorting the image and stretching it to fit the selected curve.


Twirl
Distort filters

Twirl

Rotates a selection more sharply in the center than at the edges. Specifying an angle produces a twirl pattern.


ZigZag
Distort filters

ZigZag

Distorts a selection radially, depending on the radius of the pixels in your selection. The Ridges option sets the number of direction reversals of the zigzag from the center of the selection to its edge. You also choose how to displace the pixels: Pond Ripples displaces pixels to the upper left or lower right, Out From Center displaces pixels toward or away from the center of the selection, and Around Center rotates pixels around the center.


Pixelate filters
Using Filters

Pixelate filters

The filter in the Pixelate submenu sharply defines a selection by clumping pixels of similar color values in cells.

See also:

Mezzotint


Mezzotint
Pixelate filters

Mezzotint

Converts an image to a random pattern of black-and-white areas or of fully saturated colors in a color image. To use the filter, choose a dot pattern from the Type pop-up menu in the Mezzotint dialog box.


Render filters
Using Filters

Render filters

The Render filters create cloud patterns.

See also:

Clouds

Difference Clouds


Clouds
Render filters

Clouds

Generates a soft cloud pattern using random values that vary between the foreground and the background colors. To generate a more stark cloud pattern, hold down Alt (Windows) or Option (Mac OS) as you choose Filter > Render > Clouds.


Difference Clouds
Render filters

Difference Clouds

Uses randomly generated values that vary between the foreground and back-ground color to produce a cloud pattern. The filter blends the cloud data with the existing pixels in the same way that the Difference mode blends colors. The first time you choose this filter, portions of the image are inverted in a cloud pattern. Applying the filter several times creates rib and vein patterns that resemble a marble texture. To generate a more stark cloud pattern, hold down Alt (Windows) or Option (Mac OS) as you choose Filter > Render > Clouds.


Sharpen filters
Using Filters

Sharpen filters

Unsharp Mask


Unsharp Mask
Sharpen filters

Unsharp Mask

For professional color-correction, use the Unsharp Mask filter to adjust the contrast of edge detail and produce a lighter and darker line on each side of the edge, to emphasize the edge and create the illusion of a sharper image. See Sharpening the image.


Stylize filters
Using Filters

Stylize filters

The Stylize filters produce a painted or impressionistic effect on a selection by displacing pixels and by finding and heightening contrast in an image.

See also:

Extrude

Wind


Extrude
Stylize filters

Extrude

Gives a 3-D texture to a selection or layer.

To use the Extrude filter:

1  Choose Filter > Stylize > Extrude.

2  Choose a 3-D object:

•   Blocks creates objects with a square front face and four side faces. To fill the front face of each block with the average color of the block, select the Solid Front Faces option. To fill the front face with the image, keep the Solid Front Faces option deselected.

•   Pyramids creates objects with four triangular sides that meet at a point.

3  Enter a value in the Size text box to determine the length of any side of the object’s base, from 2 to 255.

4  Enter a value in the Depth text box to indicate how far the tallest object appears to protrude from the screen, from 0 to 255.

5  Choose a depth option:

•   Random to give each block or pyramid an arbitrary depth

•   Level-based to make each object’s depth correspond to its brightness—bright protrudes more than dark.

6  Select Mask Incomplete Blocks to hide any object extending beyond the selection.

7  Click OK.


Wind
Stylize filters

Wind

Creates tiny horizontal lines in the image to simulate a wind effect. Methods include Wind; Blast, for a more dramatic wind effect; and Stagger, to offset the wind lines in the image.


Texture filters
Using Filters

Texture filters

Use the Texture filters to give an image the appearance of depth or substance, or to add an organic look.

See also:

Texturizer


Texturizer
Texture filters

Texturizer

Applies a texture you select or create to an image.

To use texture controls:

1  For Texture, choose a texture type or choose Load Texture to specify a file.

2  Drag the Scaling slider to enlarge or reduce the effect on the image surface.

3  Drag the Relief slider to adjust the depth of the texture’s surface.

4  Select Invert to reverse the surface’s light and dark colors.

5  For Light Direction, indicate the direction of the light source on the image.

6  Click OK.


Video filters
Using Filters

Video filters

The Video submenu contains the De-Interlace and NTSC Colors filters.

See also:

De-Interlace

NTSC Colors


De-Interlace
Video filters

De-Interlace

Smooths moving images captured on video by removing either the odd or even interlaced lines in a video image. You can choose to replace the discarded lines by duplication or interpolation.


NTSC Colors
Video filters

NTSC Colors

Restricts the gamut of colors to those acceptable for television reproduction to prevent oversaturated colors from bleeding across television scan lines. This is important for Web graphics that may be displayed on television-based Internet systems such as Web TV.


Other filters
Using Filters

Other filters

The Other submenu contains the DitherBox, Offset, and Tile Maker filters.

For information on the DitherBox filter, see Creating and applying custom dither patterns. For information on the Tile Maker filter, see Creating background images (ImageReady).

The Offset filter moves a selection a specified horizontal or vertical amount and fills the remaining space with that amount of the image from the opposite edge of the selection.


Adding digital copyright information with the Digimarc filter
Using Filters

Adding digital copyright information with the Digimarc filter

You can add copyright information to ImageReady images and notify users that an image is copyright-protected via a digital watermark that uses Digimarc PictureMarc technology. The watermark—a digital code added as noise to the image—is generally imperceptible to the human eye. The watermark is durable in both digital and printed forms, surviving typical image edits and file format conversions—and may still be detectable when the image is printed and then scanned back into a computer.

Embedding a digital watermark in an image lets viewers obtain complete contact information about the creator of the image. This feature is particularly valuable to image creators who license their work to others. Copying an image with an embedded watermark also copies the watermark and any information associated with it.

For more information on embedding Digimarc watermarks, visit the Digimarc Web site in the U.S. at www.digimarc.com.

See also:

Color variation in images to be watermarked

Pixel dimensions in images to be watermarked

File compression in images to be watermarked

Watermarking workflow

Embedding digital watermarks

Using the Watermark Durability setting

Using the signal strength meter


Color variation in images to be watermarked
Adding digital copyright information with the Digimarc filter

Color variation in images to be watermarked

The image must contain some degree of variation or randomness in color to embed the watermark effectively and imperceptibly. The image cannot consist mostly or entirely of a single flat color.


Pixel dimensions in images to be watermarked
Adding digital copyright information with the Digimarc filter

Pixel dimensions in images to be watermarked

The Digimarc technology requires a minimum number of pixels with which to work. Digimarc recommends the following minimum pixel dimensions for the image to be watermarked:

•   100 x 100 pixels if you don’t expect the image to be modified or compressed prior to its actual use.

•   256 x 256 pixels if you expect that the image might be cropped, rotated, compressed, or otherwise modified after watermarking.

•   750 x 750 pixels, or 2.5 x 2.5 inches, if you expect the image to appear ultimately in printed form at 300 dpi or greater.

There is no upper limit on pixel dimensions for watermarking.


File compression in images to be watermarked
Adding digital copyright information with the Digimarc filter

File compression in images to be watermarked

In general, a Digimarc watermark will survive lossy compression methods such as JPEG, though it is advisable to favor image quality over file size (a JPEG compression setting of 40 or higher works best). In addition, the higher the Watermark Durability setting you choose when embedding the watermark, the better the chances that the watermark will survive compression. See Using the Watermark Durability setting.


Watermarking workflow
Adding digital copyright information with the Digimarc filter

Watermarking workflow

Watermarking should be one of the very last tasks you perform before optimizing an image. Use the following recommended workflow:

•   Make all necessary modifications to your image until it has the desired final appearance, including resizing, color correction, and so on.

•   Embed the watermark.

•   Optimize the image in GIF, JPEG or PNG format.

•   Read the watermark and use the signal strength meter to verify that the optimized image contains a watermark of sufficient strength for your purposes.

•   Publish the watermarked image.


Embedding digital watermarks
Adding digital copyright information with the Digimarc filter

Embedding digital watermarks

To embed a watermark, you must first register with Digimarc Corporation—which maintains a database of artists, designers, and photographers and their contact information—to get a unique creator ID. You can then embed the creator ID in your images, along with information such as the copyright year or a restricted-use identifier.

To embed a watermark:

1  Open the image that you want to watermark. You can embed only one watermark per image. The Embed Watermark filter won’t work on an image that has been previously marked.

2  Choose Filter > Digimarc > Embed Watermark.

3  If you are using the filter for the first time, click the Personalize button. Get a Creator ID by clicking Register to launch your Web browser and visit the Digimarc Web site at www.digimarc.com, or by contacting Digimarc at the telephone number listed in the dialog box. Enter your PIN and ID number in the Creator ID text box, and click OK.

Once you have entered a Creator ID, the Personalize button becomes a Change button, allowing you to enter a new Creator ID.

4  Enter a copyright year for the image.

5  Select any of the following image attributes:

•   Restricted Use to limit the use of the image.

•   Adult Content to label the image contents as suitable for adults only. (Within ImageReady, this option does not limit access to adult-only images, but future versions of other applications may limit their display.)

6  For Target Output, specify whether the image is intended for monitor or print display.

7  For Watermark Durability, drag the slider or enter a value as described in the next section.

8  Select Verify to automatically assess the watermark’s durability after it is embedded. This tests the durability on the original image, not the optimized image. See Using the signal strength meter.

9  Click OK.


Using the Watermark Durability setting
Adding digital copyright information with the Digimarc filter

Using the Watermark Durability setting

The default Watermark Durability setting is designed to strike a balance between watermark durability and visibility in most images. However, you can adjust the Watermark Durability setting yourself to suit the needs of your images. Low values are less visible in an image, but less durable, and they may be damaged by applying filters or by performing some image-editing, printing, and scanning operations. High values are more durable but may display some visible noise in the image.

The setting you specify should depend on the intended use of the image and on the goals you’ve set for your watermarks. For example, it may be quite acceptable to use a higher Watermark Durability setting with JPEG images posted on a Web site. The higher durability helps to assure the persistence of the watermark, and the increased visibility often will not be noticeable with medium-resolution JPEG images. Digimarc recommends that you experiment with various settings as part of your testing process to determine which setting works best for the majority of your images.


Using the signal strength meter
Adding digital copyright information with the Digimarc filter

Using the signal strength meter

The signal strength meter helps you determine whether or not a watermark has sufficient durability to survive the intended use of the image. The signal strength meter is available only for images containing watermarks that you yourself have embedded.

Digimarc recommends that you check the signal strength meter prior to publishing your images. For example, if you often compress watermarked images for inclusion in a Web site, check the meter before posting the images. You can also use the signal strength meter to gauge the effectiveness of different Watermark Durability settings that you are experimenting with.

To check the signal strength meter:

Do one of the following:

•   Choose Filter > Digimarc > Read Watermark. The signal strength meter appears at the bottom of the dialog box. This displays the strength on the original image, not the optimized image.

•   Choose Watermark Strength from one of the Image Info pop-up menus at the bottom of the image window. The watermark strength for the current image view (either original or optimized) is displayed.

Note: The Watermark Strength info option uses a different technique than the Read Watermark command and yields a slightly different result. The Watermark Strength info option may slow redraw performance. To prevent a slowdown in application performance, deselect the Watermark Strength info option after checking watermark strength.

You can also display the meter automatically by selecting Verify while embedding the watermark. See Embedding digital watermarks.


Automating Tasks

Adobe ImageReady lets you automate tasks by grouping a series of commands into a single action. For example, you can create an action that applies an Image Size command to change an image to a specific size in pixels, followed by an Unsharp Mask filter that resharpens the detail, and a Save Optimized command that saves the file in a compressed format.

You can also create droplets—small applications that automatically process a file or group of files. You can set ImageReady to operate in the background during droplet execution, so that you can work in other applications while ImageReady processes images.

See also:

Using the Actions palette

Creating and recording actions

Playing actions

Editing actions

Updating the Actions palette

Batch processing with droplets

Automating Optimize palette settings

External automation


Using the Actions palette
Automating Tasks

Using the Actions palette

The following guidelines apply to actions:

•   You use the Actions palette to record, play, edit, and delete individual actions. This palette also lets you save and load action files.

•   To use actions created on a different computer, add them to the Actions folder before starting the application. Actions created in Adobe Photoshop are not compatible with ImageReady.

•   You can use the Actions palette to create a droplet—a small application that will automatically process all files dragged onto its icon. You can also create droplets with the Optimize palette, so that you can apply Optimize palette settings to single images or batches of images. (See Automating Optimize palette settings.)

To display the Actions palette:

Choose Window > Show Actions.

A. Toggles command on or off B. Toggles dialog box display on or off C. Action name D. Command E. Stop Playing/Recording F. Record button G. Play button H. New Action button I. Trash button


Creating and recording actions
Automating Tasks

Creating and recording actions

When you create an action, ImageReady records the commands (including any specified values) and tools you use, in the order you use them. The following guidelines can help you in designing actions:

•   Most, but not all, commands can be recorded.

•   Commands can be recorded, as well as the marquee, lasso, move, magic wand, paint bucket, and type tools, the Numeric transformation command, and the Layers and Animation palettes.

•   When recording an action, keep in mind that playback results depend on file and program setting variables, such as the active layer or the foreground color.

•   By default, all actions you create are saved with the extension .isa, and are located by default in the ImageReady Actions folder in the Settings folder inside the Adobe Photoshop folder. ImageReady can only access actions that reside in the Actions folder inside the ImageReady folder.

See also:

Recording an action

To create and record an action

Inserting stops

Specifying an output folder

Recording optimization settings for selected slices

Excluding commands


Recording an action
Creating and recording actions

Recording an action

Original when recording started

Tile Maker filter recorded

Twirl filter recorded


To create and record an action
Creating and recording actions

To create and record an action:

1  Open a file.

2  In the Actions palette, click the New Action button ( [image]) or choose New Action from the Actions palette menu.

3  Name the action, and optionally assign it to any combination of the Ctrl key (Windows) or Command key (Mac OS), the Shift key, and the function keys (for example, Ctrl+Shift+F3).

4  Click Record. The Record button in the Actions palette turns red.

5  Select or add commands to record, as follows:

•   Choose commands as you want them recorded.

If the command you choose opens a dialog box, click OK to record the command, click Cancel to cancel recording.

•   Drag a command from the History palette to the action list in which you want the command recorded in the Actions palette. You cannot drag italicized commands from the History palette to the Actions palette. (Italics indicate the commands are nonactionable.)

6  To stop recording, click the Stop button or choose Stop Recording from the Actions palette menu.

7  To resume recording in the same action, choose Start Recording from the Actions palette menu.

8  If you resumed recording in step 7, click the Stop button or choose Stop Recording from the Actions palette menu to stop recording.

If your Actions palette contains too many actions, create a new folder (for example, ActionsDisabled) inside the ImageReady Actions folder and move less used actions from the ImageReady Actions folder to this new folder. The relocated actions are removed from the palette until you return them to the ImageReady Actions folder.

See also:

Recording an action

Inserting stops

Specifying an output folder

Recording optimization settings for selected slices

Excluding commands


Inserting stops
Creating and recording actions

Inserting stops

You may want to include a stop in your action so that you can perform a task that cannot be recorded (for example, using a painting tool). Once you’ve made the selection, you can then continue by clicking the Play button in the Actions palette.

You can also display a short message when the action reaches the stop. For example, you can remind yourself what you need to do before continuing with the action. A Continue button can be included in the message box. This way you can check for a certain condition in the file (for example, a selection) and continue if nothing needs to be done. You can insert a stop when recording an action or after it has been recorded.

To insert a stop:

1  Choose where to insert the stop:

•   Select an action’s name to insert the stop at the end of the action.

•   Select a command to insert the stop after the command.

2  Choose Insert Stop from the Actions palette menu.

3  Type the message you want to appear.

4  If you want the option to continue the action without stopping, select Allow Continue.

5  Click OK.


Specifying an output folder
Creating and recording actions

Specifying an output folder

You can specify the folder in which images are placed after actions are performed.

To specify an output folder:

1  Choose Insert Set Output Folder from the Actions palette menu.

2  Select a folder, and click Select folder name.


Recording optimization settings for selected slices
Creating and recording actions

Recording optimization settings for selected slices

When you record a Save Optimized action step, ImageReady includes optimization settings for the entire image. You can record optimization settings for individual slices using the Insert Set Optimization Settings command.

To record optimization settings for a selected slice:

With a slice or slices selected in the current document, choose Insert Set Optimization Settings to current file format from the Actions palette menu. (The command indicates the optimization file format currently applied to the selected slice.)


Excluding commands
Creating and recording actions

Excluding commands

You can exclude commands that you don’t want to be part of a recorded action or that you don’t want to play.

To exclude or include a command:

1  To expand the listing of commands in an action, click the triangle to the left of the action you want to work with.

2  Click the check mark to the left of the specific command you wish to exclude. (The checkmark will disappear to indicate that this command will be skipped when the action is played. In addition, the checkmark of the parent action will turn red to indicate that some of the commands within the action are turned off.) Click again to include the command.

3  To exclude or include all commands in an action, click the check mark to the left of the action name. No checkmark indicates that the entire action is turned off.


Playing actions
Automating Tasks

Playing actions

When you play an action, ImageReady executes the series of commands on the current image as you recorded them. But you can begin with any command, exclude commands, or play a single command in an action. If you have inserted a modal control in your action, you can specify values in a dialog box or reapply a modal tool (any tool that requires you to press Enter or Return to apply it) when the action pauses. (See Excluding commands.)

See also:

To play an action on a single file

Applying an action

To play a single command in an action


To play an action on a single file
Playing actions

To play an action on a single file:

1  Open the file.

2  Do one of the following:

•   To play an entire action, select the action name.

•   To play part of an action, select the command from which you want to start playing.

•   If you have assigned a key combination to the action, press that combination to play the action automatically.

3  To exclude or include a command within an action from play, click the check box to the left of the action name.

4  Click the Play button in the Actions palette or choose Play action name from the Actions palette menu.

See also:

Applying an action

To play a single command in an action


Applying an action
Playing actions

Applying an action

Original

Action applied


To play a single command in an action
Playing actions

To play a single command in an action:

1  Select the command you want to play.

2  Play the action:

•   Ctrl-click (Windows) or Command-click (Mac OS) the Play button in the Actions palette.

•   Hold down Ctrl or Command, and double-click the command.

•   Choose Play command name from the Actions palette menu.

See also:

To play an action on a single file

Applying an action


Editing actions
Automating Tasks

Editing actions

You can edit actions in the following ways:

•   Rearrange actions, or rearrange commands within an action and their order of execution.

•   Add commands to an action.

•   Add new values for actions with dialog boxes.

•   Change action options, such as the action name and shortcut key.

•   Duplicate actions and commands. This helps you experiment with changing an action without losing the original version and with creating an action based on an existing one.

•   Delete actions and commands.

See also:

To rearrange actions

To rearrange commands

To record additional commands

To record an action again

To record a single command again

To change action options

To duplicate an action or command

To delete an action or command


To rearrange actions
Editing actions

To rearrange actions:

In the Actions palette, drag the action to its new location before or after another action. When the highlighted line appears in the desired position, release the mouse button.

See also:

To rearrange commands

To record additional commands

To record an action again

To record a single command again

To change action options

To duplicate an action or command

To delete an action or command


To rearrange commands
Editing actions

To rearrange commands:

In the Actions palette, drag the command to its new location within the same or another action. When the highlighted line appears in the desired position, release the mouse button.

See also:

To rearrange actions

To record additional commands

To record an action again

To record a single command again

To change action options

To duplicate an action or command

To delete an action or command


To record additional commands
Editing actions

To record additional commands:

1  Do one of the following:

•   Select the action name to insert the new command at the end of the action.

•   Select a command in the action to insert the command after it.

2  Click the Record button on the Actions palette.

3  Record the additional commands.

4  Click the Stop button to stop recording.

You can drag a command from the History palette to the area in which you want the command recorded in the Actions palette, without using the Record button.

See also:

To rearrange actions

To rearrange commands

To record an action again

To record a single command again

To change action options

To duplicate an action or command

To delete an action or command


To record an action again
Editing actions

To record an action again:

1  Select an action, and choose Record Again from the Actions palette menu.

2  If a modal tool appears, do one of the following:

•   Use the tool differently, and Press Enter (Windows) or Return (Mac OS) to change the tool’s effect.

•   Press Enter (Windows) or Return (Mac OS) to retain the same settings.

3  If a dialog box appears, do one of the following:

•   Change the values, and click OK to record them.

•   Click Cancel to retain the same values.

See also:

To rearrange actions

To rearrange commands

To record additional commands

To record a single command again

To change action options

To duplicate an action or command

To delete an action or command


To record a single command again
Editing actions

To record a single command again:

1  In the Actions palette, double-click the command.

2  Enter the new values, and click OK.

See also:

To rearrange actions

To rearrange commands

To record additional commands

To record an action again

To change action options

To duplicate an action or command

To delete an action or command


To change action options
Editing actions

To change action options:

1  Do one of the following:

•   Double-click the action name.

•   Select the action, and choose Action Options from the Actions palette menu.

2  If desired, type a new name for the action or assign a function key or Shift+function key shortcut to the action.

3  Click OK.

See also:

To rearrange actions

To rearrange commands

To record additional commands

To record an action again

To record a single command again

To duplicate an action or command

To delete an action or command


To duplicate an action or command
Editing actions

To duplicate an action or command:

Do one of the following:

•   Alt-drag (Windows) or Option-drag (Mac OS) the action or command to a new location in the Actions palette. When the highlighted line appears in the desired location, release the mouse button.

•   Select an action or command. Then choose Duplicate action name or command name from the Actions palette menu. The copied action or command appears after the original.

•   Drag an action or command to the New Action button at the bottom of the Actions palette. The copied action or command appears after the original.

See also:

To rearrange actions

To rearrange commands

To record additional commands

To record an action again

To record a single command again

To change action options

To delete an action or command


To delete an action or command
Editing actions

To delete an action or command:

1  In the Actions palette, select the action or command you want to delete.

2  Delete the action or command:

•   Click the Trash button on the Actions palette. Click OK to delete the action or command.

•   Alt-click (Windows) or Option-click (Mac OS) the Trash button to delete the selected action or command without displaying a confirmation dialog box.

•   Drag the action or command to the Trash button on the Actions palette to delete the selected action or command without displaying a confirmation dialog box.

•   Choose Delete action name or command name from the Actions palette menu.

See also:

To rearrange actions

To rearrange commands

To record additional commands

To record an action again

To record a single command again

To change action options

To duplicate an action or command


Updating the Actions palette
Automating Tasks

Updating the Actions palette

You can add actions to ImageReady by dragging actions created on another computer into the ImageReady Actions folder on your computer.

Note: Because ImageReady does not include a Load Actions command, you must add files to the ImageReady Actions file manually.

You can remove actions from ImageReady by dragging the actions out of the ImageReady Actions folder or by using the Delete Action command in the Actions palette menu. Actions you remove by dragging can be saved in another folder. Actions you remove by deleting are permanently removed.

If you add or remove files from the ImageReady Actions palette, you can direct ImageReady to scan the Actions folder for changes and update the Actions palette. (ImageReady also scans the Actions folder and updates the Actions palette when you launch the application.)

To update the Actions folder:

1  Drag an action file into or out of the ImageReady Actions folder, located in the Settings folder inside the Adobe Photoshop folder on your hard drive.

2  Choose Rescan Actions Folder from the Actions palette menu.


Batch processing with droplets
Automating Tasks

Batch processing with droplets

You can play an action on a group of files by creating a droplet, a small application that applies the action to an image or batch of images that you drag to 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 to it, the droplet launches ImageReady if the program is not currently running.

You can set ImageReady to run in the background while executing a droplet, so that you can work in other applications while ImageReady processes images.

See also:

To create a droplet from an action

To use a droplet to process files

To edit a droplet

To adjust droplet batch options


To create a droplet from an action
Batch processing with droplets

To create a droplet from an action:

1  For best results, make sure that the action has at least one Save Optimized command in it. This command is usually placed at the end of the action.

To add a Save Optimized command, adjust the settings in the Optimize palette, and then drag the droplet icon ( [image]) from the Optimize palette onto the part of the Action palette where you want to add that command.

Note: If you do not add a Save Optimized command to the droplet, ImageReady will batch-process files using the optimization settings in place at the time the droplet was created.

2  Create the droplet:

•   Drag the name of the action from the Actions palette onto the desktop. The droplet has the same name as the action it was created from. You can rename the droplet as you do other desktop icons.

•   Select an Action, and choose Create Droplet from the Actions palette menu. Name the droplet, choose a location where the droplet will be saved, and click Save.

Note: You can also create droplets solely to automate image optimization. See Automating Optimize palette settings.

See also:

To use a droplet to process files

To edit a droplet

To adjust droplet batch options


To use a droplet to process files
Batch processing with droplets

To use a droplet to process files:

1  Drag a single image or a folder of images onto the droplet icon.

As the ImageReady-compatible images are processed, a progress bar appears.

2  To control the processing do any of the following:

•   To temporarily pause the processing, click Pause. You can then click Resume to continue the processing.

•   To cancel the processing, click Stop.

Note: In Windows, the maximum number of characters for all filenames is 256. To process large numbers of files, place the files in a folder and drop the folder on the droplet.

See also:

To create a droplet from an action

To edit a droplet

To adjust droplet batch options


To edit a droplet
Batch processing with droplets

To edit a droplet:

1  Double-click the droplet to open the droplet in ImageReady. The droplet looks like a simplified version of the Actions palette.

2  Edit the droplet:

•   Change the order of commands by dragging them in the droplet list.

•   Delete steps by dragging them to the Trash button ( [image]).

•   Add a command by dragging a state from the History palette to the area in which you want the command recorded in the Actions palette.

For more information on editing the droplet, see Editing actions.

See also:

To create a droplet from an action

To use a droplet to process files

To adjust droplet batch options


To adjust droplet batch options
Batch processing with droplets

To adjust droplet batch options:

1  Double-click the droplet to open it in ImageReady.

2  Double-click Batch Options at the top of the droplet list that appears.

3  Select Original (same name and folder) to save the original file with the same name and in the same folder.

4  Select Optimized to save an optimized version of the file. Then do any of the following:

•   For In, choose the location in which you want to save the optimized file.

•   For If Duplicate File Name, choose how and whether to append numbers or letters to indicate the optimized file in cases of duplicate filenames.

•   For Modify File Name For, choose whether ImageReady appends or rewrites the filename in keeping with Windows, Mac OS, or UNIX filenaming conventions.

5  Select playback options:

•   Run In Background to hide ImageReady during droplet execution, so that you can work in other applications while processing takes place. When you select Run In Background, other playback options requiring user input during processing are turned off.

Note: ImageReady is not available for creating and modifying current images while background processing is taking place.

•   Display Image to show the images as they are being processed.

•   Pause Before Save to stop the processing of each image before saving it.

6  Choose Error options from the Errors menu:

•   Stop to suspend the process until you confirm the error message.

•   Continue to continue processing without stopping for errors.

Note: You can also adjust batch options before creating the droplet by choosing Batch Options from the Actions palette menu.

See also:

To create a droplet from an action

To use a droplet to process files

To edit a droplet


Automating Optimize palette settings
Automating Tasks

Automating Optimize palette settings

You can save Optimize palette settings for use on individual images or batches of images by creating a droplet for the settings. The droplet lets you apply the compression settings to an image or batch of images that you drag onto the droplet icon.

For more information on droplets, see Batch processing with droplets.

See also:

To create a droplet for automating Optimize palette settings


To create a droplet for automating Optimize palette settings
Automating Optimize palette settings

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 as described in Optimizing Images for the Web.

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; this includes the optimization settings as part of the action.


External automation
Automating Tasks

External automation

ImageReady supports some external automation using DDE Automation under Windows or AppleScript under Mac OS. Using either of these methods lets you start Adobe ImageReady and execute actions externally.

Using external automation lets you perform tasks such as having another scriptable application generate a series of files, and having ImageReady batch-process them by launching a droplet with the list of files.

For information on using DDE Automation, see your Windows documentation. For information on using AppleScript, see your Mac OS documentation.


The  marquee tool makes rectangular selections.


The rounded rectangles marquee tool makes rectanglar selections with rounded corners.


The elliptical marquee tool makes elliptical selections.


The single row and single column marquee tools make 1 - pixel wide selections.


The move tool moves selections, layers, and guides.


The lasso tool makes freehand selections.


The polygon lasso tool makes freehand and straight-edged selections.


The magic wand tool selects similarly colored areas.


The slice tool creates alices.


The slice selection tool selects slices.


The airbrush tool paints soft-edged strokes.


The paintbrush tool paints brush strokes.


The rubber stamp tool paints with a copy of an image.


The rectangle tool draws squares and rectangles.


The rounded rectangle tool draws squares and rectangles with rounded coeners.


The ellipse tool draws circles and ovals.


The eraser tool erases pixels.


The magic eraser tool fills similarly colored areas with transparency.


The pencil tool draws hard-edged strokes


The line tool draws straight lines


The smudge tool smudges data in an image.


The blur tool blurs hard edges in an image.


The sharpen tool shapens soft edges.


The dodge tool lightens areas in an image.


The burn tool darkens areas in an image.


The sponge tool changes the color saturation of an area.


The type tool creates type on an image.


The vertical type tool creates vertical type on an image.


The crop tool trims images.


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.


Blending Modes

Original	Normal


Blending Modes

Original	Normal, 50% opacity


Blending Modes

Original	Dissolve


Blending Modes

Original	Multiply


Blending Modes

Original	Screen


Blending Modes

Original	Soft light


Blending Modes

Original	Hard light


Blending Modes

Original	Color Dodge


Blending Modes

Original	Color Burn


Blending Modes

Original	Darken


Blending Modes

Original	Lighten


Blending Modes

Original	Difference


Blending Modes

Original	Saturation


Blending Modes

Original	Color


Blending Modes

Original	Luminosity


Layer Blending Modes

Original	Normal


Layer Blending Modes

Original	Normal, 70% opacity


Layer Blending Modes

Original	Dissolve


Layer Blending Modes

Original	Multiply


Layer Blending Modes

Original	Screen


Layer Blending Modes

Original	Overlay


Layer Blending Modes

Original	Overlay 50%


Layer Blending Modes

Original	Soft Light


Layer Blending Modes

Original	Hard Light


Layer Blending Modes

Original	Color Dodge


Layer Blending Modes

Original	Color Burn


Layer Blending Modes

Original	Darken


Layer Blending Modes

Original	Lighten


Layer Blending Modes

Original	Difference


Layer Blending Modes

Original	Exclusion


Layer Blending Modes

Original	Hue


Layer Blending Modes

Original	Saturation


Layer Blending Modes

Original	Color


Layer Blending Modes

Original	Luminosity


Artistic

Original	Colored Pencil


Artistic

Original	Dry Brush


Artistic

Original	Film Grain


Artistic

Original	Fresco


Artistic

Original	Sponge


Blur

Original	Gaussian Blur, radius 4


Blur

Original	Radial Blur, spin


Blur

Original	Smart Blur


Distort

Original	Glass, blocks texture


Distort

Original	Pinch


Distort

Original	Spherize


Distort

Original	Twirl


Distort

Original	ZigZag, pond ripples


Pixelate

Original	Mezzotint


Render

Original	Clouds


Sharpen

Original	Unsharp Mask


Stylize

Original	Wind


Texture

Original	Texturizer, burlap texture