Adobe 13100771 - Photoshop w/ ImageReady User manual

Streamlined image
processing for the
Web professional
We’re introducing Adobe ImageReady software to provide Web professionals with a comprehensive environ-
ment in which to refine and prepare Web graphics.This program delivers a number of innovative features
that you’ll want to know about,so we’ve prepared this inside tour of Adobe ImageReady to show you how
things work.The examples we’ve selected are brief and to the point because we know your time is limited.
You can follow the examples through in order,or focus only on the features that matter most to you (this is
not a tutorial that locks you into an entire sequence of lessons).You can even skip the steps and just focus on
the accompanying illustrations and screenshots.You’ll quickly see how approachable Adobe ImageReady is.
This guide is divided into eight sections:A Look at Web Graphics Production (pg.2),FamiliarAdobe Inter-
face (pg.3),Realtime Image Compression (pg.4),Superior Colour Control (pg.8),Animation and OtherWeb
Features (pg.10),Superior Image Editing (pg.13),Automation and Batch Processing (pg.16),and Seamless
File Support (pg.17).All of the features described apply to both the Windows and Macintosh versions,so feel
free to work on your platform of choice.You can use the files that we provide for this tour (locate them in
Adobe ImageReady 1.0\Images\Images on the reviewer’s CD) or substitute your own Adobe Photoshop®and
Adobe Illustrator®files.
Quick Reference List:TopTwelve Features in Adobe ImageReady 1.0
Familiar Adobe interface—Retains the award-winning look and feel of Adobe Photoshop and Adobe
Illustrator,letting you get to work more quickly.For details,see page 3.
LiveView window—Helps you balance image quality and file size by displaying the original version and the
compressed version of the file in a dual-document window.For details,see pages 4–5.
Optimize palette—Presents interactive control over all the compression options for GIF,JPEG,PNG-8,and
PNG-24 files.For details,see pages 4–8
Colour palette management tools—Lets you view,edit,and manage image colours in 8-bit GIF and PNG files
for optimal on-screen display.For details,see pages 8–10.
Previewing capabilities—Provides two commands (View Browser Dither and Preview in Browser),which let
you simulate browser dither or preview an image in your choice of browsers.For details,see pages 10 and 13.
The Animation palette—Provides an integrated tool that makes it simple for you to create and edit animated
GIF files using layers.For details,see pages 10–12.
Client-side image maps—Lets you easily assign URLs to layers to create image maps.For details,see page 12.
Core set of image-editing tools—Delivers a subset of Photoshop image-editing capabilities,including key
tools,resizing commands,image adjustment commands,and filters.For details,see page 14.
Editable type feature—Lets you enter,format,move,and edit text easily.For details,see pages 14–15.
Multiple undo—Provides a History palette for quickly undoing or redoing steps.For details,see page 15.
Batch-processing Droplets—Provides an innovative,easy-to-use approach to batch-processing images for
the Web.For details,see page 16.
Actions palette—Lets you record a sequence of editing steps using simpleVCR-like controls and then apply
that sequence to another image.For details,see page 17.
Windows®95/Windows NT®4.0/Power Macintosh
Reviewer’s Guide
1.0Adobe®ImageReady™
version
®

2
A Look atWeb Graphics Production
Few would contest the fact that the demand for eye-catching Web graphics is continuing to grow.To create
these Web graphics,most designers turn to products such as Photoshop and Illustrator.These tools present
one challenge,however:They are more focused on the creative process than on the production tasks in-
volved in refining and preparing graphics for the Web.These production tasks range from balancing image
size against quality for faster download times to ensuring that graphics display well in different browsers.To
accomplish these tasks,most designers cobble together a process using a variety of different software pro-
grams.Many of these programs don’t work well together,and most designers would tell you how painful it
is to move graphics files back and forth from one program to another to optimise them for the Web.
Let’s look at an example of this problematic workflow.To create an animated GIF file today,you might
create elements in Adobe Illustrator.You could then switch to Photoshop to convert the elements to pixels,
build frames using layers,and save each frame as a file.You might then use a different program to optimize
the frames (color reduce them to indexed mode for Web display); switch to another program to build the
animated GIF;and then finally view the results in a Web browser or move the file to another platform to
check for any problems there.If you see any problems,you would typically back up many steps and work
your way through several different programs again.You’d repeat this multistep process until you’d taken
care of all the issues that pop up.Clearly,streamlining the number of programs involved would be a major
timesaver for manyWeb designers.
We’re designingAdobe ImageReady 1.0 to eliminate this problem and provide designers with one inte-
grated environment in which to prepare and refine Web graphics.This tool complements and supports
Photoshop and Illustrator,which provide the creative power designers need for Web design work.
AdobeIllustrator
AdobePhotoshop
AdobeImageReady HTMLEditor
WebBrowser
An Adobe ImageReady-based workflow
Creative tasks
—Acquire graphics (scanners,digital cameras,and
soon).
—Create typographically rich graphics.
—Enhancegraphics(crop,resize,performimage
adjustments,apply filters,create masks,and so on).
—Add special effects and other creative touches.
—ProduceWeb-specificgraphics fornavigation,
banner ads,and more.
Creative tasks Web production tasks
Web production tasks
—Assess and balance tradeoffs between image
qualityandsize.
—Create specialisedWeb graphics,such as anima-
tions,image maps,and transparent graphics.
—Ensure that graphics look their best in different
browsers and on different computer systems.
—Mass produce graphics to meet the content
demandsofmanyWeb sites.
AdobePhotoshop
AdobeIllustrator
ImageMapMaker
HTMLEditor WebBrowser
Animator
FileOptimizer
Edittocorrectproblems
An overview of the currentWeb graphics production process

3
We believe that ImageReady will appeal to two types of users:
•Graphics Creators—This group encompasses illustrators,photographers,graphic designers,and Web
developers who create original artwork or repurpose printed artwork for the Web.Many of these cus-
tomers work with Photoshop and Illustrator for a significant portion of their day,so the strong integra-
tion between ImageReady and these creative tools will be a boon.
•Graphics Refiners—This group includes a growing number of people who’s job it is to crank out final
graphics files for posting on Web sites.The members of this group may or may not have a graphic arts
background.Often,they are HTML experts who end up owning the whole final production process.
These users will welcome tools that streamline that process.
With the efficient tools that ImageReady provides,these graphics professionals can better meet the increas-
ing content demands of theirWeb sites.
Familiar Adobe Interface
Now that you’ve seen where Adobe ImageReady software fits in the Web production process,let’s take a look
at how the program operates.After you start the program,the first thing you’ll notice is that it looks like
Photoshop and our other professional graphics programs.The ImageReady menu structure matches that in
Photoshop wherever appropriate.
In addition,ImageReady features our popular tabbed palettes,which place key functionality right at your
fingertips.You can drag a palette tab to pull that palette out of a group,or drag it into a different group.You
can also attach—or dock—palettes together,so that they act as a single unit.And,of course,you can move,
minimize,and maximise palettes as necessary.
The toolbox in ImageReady closely resembles the toolbox in Photoshop,presenting a subset of the same
image-editing tools.You can identify these tools easily by pointing at each of them and pausing to see
theAdobe standard tool tips appear.For more details on these tools,see“Superior Image Editing”later in
this document
Reviewer’s Guide Files
Remember that you can locate files
for this reviewer’s guide in Adobe
ImageReady1.0\Images\Imageson
the reviewer’s CD.Or use files of
your own to try out the features in
thisexcitingnewproduct.
Drag one tabbed palette on another palette’s
container to combine them,or drag a palette
away to display it on its own.
Work with a core set of
familiar image-editing
tools from Photoshop.
Dock palettes together,so they behave as a
unit—you can minimise,maximise,or move
them to suit your task or to reduce on-
screen clutter.

4
Realtime Image Compression
Image compression is one of the most important Web production tasks that designers perform.Adobe
ImageReady provides innovative support for this task with its LiveView window.This window lets you look
at the original image and the final compressed image at any time in the production process,and preview
how the compression settings affect the display quality.For example,you could display an original 24-bit
RGB image and a JPEG-compressed version of it,and then switch between these views to see how different
compression options affect the on-screen display.This process would normally involve saving and then
reopening the file to see any JPEG artifacts.
The Optimize palette offers a comprehensive set of compression options.You have a choice of four standard
Web file formats: GIF,JPEG,PNG-8,or PNG-24.You also gain fine control over the options associated with
these file formats.For example,with GIF and PNG-8 files,you can specify the type of colour palette used,the
number of colours saved with the image,the transparency of the image,and more.The following sections
discuss these options in more detail.
Touring the LiveViewWindow
In addition to helping you make aesthetic tradeoffs,the LiveView window presents practical information
about current and compressed file sizes,and estimated download times at different modem speeds.You can
also change your zoom view of the image from 12.5% to 400%.
Try it:
1. Choose File > Open > Hammer.psd.
2. Note that GIF is selected in the Optimize palette (if necessary,choose Window > Show Optimize).
3. Click the Optimized tab in the LiveView window to preview what the compressed graphic looks like
(a progress bar appears as ImageReady generates the compressed version).Alternatively,use the key-
board shortcut Ctrl+Y/Command+Y to switch views (you may not see a lot of difference on-screen yet
because the current settings suit the image well).
4. Switch back to the Original view of the image.Note that the original and optimised file sizes
appear at the bottom of the palette.
5. Choose Size/Download Time (28.8Kbps) from the pop-up menu to view the estimated size of
the optimised image and approximate amount of time it will take to download.
6. In the Optimize palette,click the Colours pop-up menu and change the setting from 32 to 16.
7. Switch to the Optimized image view to see how this new setting affects the image.Note how
grainy the colours now appear.That’s because we’ve reduced the colours too far.Also note that this
choice reduced the estimated final file size by several K.
AClick the Original and Optimised tabs to toggle between views
of the original and compressed image.
BCompare the original and compressed images in this LiveView
window.
CDragtoresize the window and displayallthe pop-up menus.
DDisplay different information options,such as file size and
estimated download time at a particular modem speed.
EDisplayandviewtheimagedimensions.
FZoom in or out of the image by choosing zoom levels from the
pop-upmenu.
A
DF
An overview of the LiveView window
B
EC

5
8. Check the graininess more closely by zooming in to a 200% view of the top of the hammer.Just resize
the LiveView window to see the zoom pop-up menu,and then choose 200% (or use the Photoshop
keyboard shortcut Ctrl - or +/Command - or +).Switch back and forth between the Optimized and
Original views to compare them.
9. Close the image without saving it.
If you’re planning to look at the steps in the next section right away,don’t close this image.Just switch
to the Original tab and then you’re ready for the next section.
Compressing a Photographic Image
Choosing a file format for an image depends in large part on what type of image it is.As a rule,full-color
photographs look best with JPEG settings because this file format was designed for compressing photo-
graphs.Adobe ImageReady software can import photographic images in a variety of formats,including
native Photoshop format,TIFF,Photo CD™
,and more.You can see a full list of these formats in“Seamless
File Support”later in this document.
Try it:
1. Choose File > Open > Hammer.psd.
2. Choose JPEG from the file format pop-up menu in the Optimize palette (if necessary,choose
Window > Show Optimize).You can see that the JPEG file format offers:
•a Quality slider control and pop-up menu to set the image quality level.
•the Optimized option,which generates slightly smaller JPEG files based on the newer version of the
JPEG standard.
•the Progressive option,which is equivalent to interlaced GIF files (a low-resolution image downloads
first,and then progressively more detail appears in several passes).
Choosing lower quality settings will compress the file more,but sometimes causes small visible distor-
tions,called artifacts,to appear.
3. Click the Optimized tab in the LiveView window so ImageReady generates the optimised version.Note
that the optimised file size is much smaller than it was with GIF settings applied.
4. Experiment with the different JPEG settings.Choose Maximum from the Quality pop-up menu.Note
that the file size jumps up a lot.Now try a much lower setting.For example,drag the Quality slider to 1
or 2.Note that the on-screen image quality doesn’t change much,but the file size becomes consider-
ably smaller.In a Web production environment,you would choose the lowest possible setting that
doesn’t degrade the image.
5. Close the image without saving it.
About Saving
In this reviewer’s guide,you
won’tbesavingfiles.However,as
you work more closely with the
software,you should know the
following:
Choosing File > Save saves the
non-optimized file as a PSD file
that you can edit later.
Choosing File > Save Optimized
saves the compressed version.
Choosing File > Export > Export
Optimizedlets you save the file
indifferentformats,such asPICT,
BMP,orTIFF.

6
Preparing an Illustration for theWeb
Compressing photographic images is important.However,when you think about it,Web sites use more
illustrations than photographic images for page design elements,such as banners and navigation buttons.
That’s why Adobe ImageReady works so smoothly withAdobe Illustrator software and other illustration
programs that produce EPS files.
With illustration files—or any files that have areas of solid colour—GIF and PNG file formats provide the
best compression options.You can specify these settings for GIF and PNG-8 files:
•What colour palette an image includes (you have a choice of Adaptive,Perceptual,Web,and Custom colour
palettes,all of which are described in more detail in the next section,“Superior Colour Control”).
•The number of colours an image uses (2–256 with presets at 2,4,8,16,32,64,128,and 256).
•Whether or not an image uses layer transparency to define transparency on aWeb page.
•How much a dither diffusion algorithm is applied to an image to soften the banding that may appear
when gradations of colour are converted to fixed palettes.
•Whether the file is set to download using an interlaced pattern in which a low-resolution version ap-
pears first,followed by successive passes of higher resolution data.
•What matte colour to use to blend partially transparent colours within GIF images.GIF allows fully trans-
parent pixels,but not partial transparency.Unless pixels along the edges of a graphic blend with a colour
similar to the expected Web page background,you may see a noticeable halo around the image.Setting
the matte colour to the anticipatedWeb page colour eliminates the halo problem.
Remember—the goal at all times is to minimise the file size,while maintaining the on-screen display quality
of the graphics.For example,limiting the number of colours in certain illustration files can dramatically
reduce the file size and download time without adversely affecting the final illustration quality.
The following set of steps walks you through compressing an illustration file and introduces some other
handy features that are discussed again later in this document.
Important: To preview your image results in aWeb browser (Step 12),you must set up a link for
ImageReady to find yourWeb browser.Just make an alias or shortcut to your browser,and store it in
the ImageReady\Helpers\Preview In folder.You must close and restart ImageReady for this shortcut to
take effect.
Try it:
1. Choose File > Open > banner.ai.ImageReady rasterizes theAdobe Illustrator EPS file on import,so this
step may take a minute.
2. Crop the image to remove the edge transparency:Select the marquee tool,and drag a selection marquee
around the image.Choose Image > Crop.Then click OK.
3. Now crop the image more tightly:Choose Image > Trim.Select the Upper-Left Pixel Colour option,and
then click OK.
4. Click the Optimized tab to check the original and compressed file sizes.

7
5. Reduce the colors in the image to see how that affects the illustration’s quality and file size (if necessary,
chooseWindow > Show Optimize).Choose 32 from the Colours pop-up menu in the Optimize palette.
Note that the optimised file size drops significantly.
6. ChooseWeb from the colour palette pop-up menu andAuto from the Colurs pop-up menu in the Opti-
mize palette.These settings results in a grainier image,and the file size has increased again.
7. Click the Optimized Colours tab to see the number of colours in the Web palette (if necessary,choose
Window > Show Optimized Colours).Note that it lists 141 colours (ImageReady automatically eliminates
unnecessary colours from the 216 colours in theWeb palette).
8. ChooseAdaptive from the colour palette pop-up menu and 32 from the Colours pop-up menu in the
Optimize palette.Again,the quality of the image on-screen isn’t as good as when you used the Percep-
tual palette in Step 5.
9. Change the colour palette back to a Perceptual palette with 32 colours.
10.Now check out potential for undesirable dither on an 8-bit display.Choose View > Browser Dither.Note
that a pattern appears in the background area around the image.
Note:You need to be working on a 16-bit or 24-bit display to preview browser dither.
11.Double-click the last colour (white) in the Optimized Colours palette.The value is 97%,not 100%,which
is causing the problem pattern.Close out of the colour picker.Then click the colour cube button at the
bottom of the Optimized Colours palette to shift the selected white to the closestWeb-safe palette colour.
ImageReady makes it simple for you to combine a custom palette with Web-safe palette colours to get the
advantages of both.
12.Note that the pattern disappears.Then chooseView > Browser Dither to uncheck it.
13.Now preview your illustration in aWeb browser.First,choose Image > HTML Background to uncheck
it.Then choose File > Preview In > [your browser name] to view the illustration in place.
Note:Your browser name appears here only if you’ve set up a shortcut/alias to it.See the note that im-
mediately precedes this set of steps for instructions.If necessary,create this shortcut/alias,restart
ImageReady,and then come back to this step.
14.Note that ImageReady displays key image information in the browser,such as its height and width.You
can switch back to ImageReady and choose Edit > Copy HTML Code or File > Export > Save HTML to
save this code for use in an HTML editor.
Try out different compression settings to see
howthey effect anillustration file.

8
15.Close theWeb browser and return to ImageReady.Then close the illustration without saving it.
Superior Colour Control
Adobe ImageReady lets you exercise exact control over the colour palette for each 8-bit (indexed) image,so
that you can make fine tradeoffs between image size and image quality.As you’ve now seen in the previous
section,you can choose among four types of colour palettes for these images:
•AdaptiveImageReady produces a custom palette for your image just as Photoshop does—by looking for
the most commonly used colours in the image.For example,if the original image is dominantly green
and blue,the Adaptive palette is as well.
•PerceptualA Perceptual palette is similar to an Adaptive palette in that it’s based on sampling colours
from the dominant image colours.However,in generating the Perceptual palette,certain colours are
weighted differently than others for sensitivity to the human eye,often producing superior colour results.
•Web safeMost Web browsers,including Microsoft®Internet Explorer and Netscape®Navigator®
,use a
standard,216-colour Web palette to display images when a monitor is set to 8-bit colour mode.ThisWeb
palette is based on the 216 colours common to both the Mac OS andWindows system.Many designers
work with this palette from the start as it gives them predictable control over their image dithering.
•Custom This option lets you specify your own custom palette or use a Mac OS or Windows system
palette instead.
AClick a colour to select it.
BDelete selected colours from the palette.
CAdd the current foreground color to the palette and mark
it as locked.
DLock selected colours to prevent them from being dropped
ordithered.
EConvert selected colours to theirWeb-safe equivalents to
mix the benefits of custom andWeb-safe palettes.
FView the number of colours in the palette.
ImageReady presents helpful details in the browser window when you preview your optimised graphics.
You can simply make a note of the IMG SRC tag,or you can copy and paste this information into an HTML
editorto use increating yourWeb pages.
A
BCDEF

9
Editing a Colour Palette
When you open an 8-bit original image,the palette for that image displays in the Optimized Colours palette
in ImageReady.You can then choose a palette type in the Optimize palette and switch to the optimised view
of the image to check the effects of this palette.If you select theWeb palette,ImageReady automatically
reduces the palette to only the number of colours in use (120 out of 256,for example).With other palettes,
you can reduce them yourself,convert colours to Web-safe equivalents,lock colours so that they won’t be lost
in the reduction process,or even add different colours.As you work,you can check the effect of your choices
on your final image in the LiveView window.
Try it:
1. Choose File > Open > banner.ai.
2. Click the Optimized tab to view a 256-colour Perceptual palette for this illustration (if necessary,choose
Window > Show Colour Table and position the Optimized Colors palette near the Optimize palette).
3. Switch back and forth between the Optimized and Original views to note how well the Perceptual palette
maintains the colours in the illustration.Note that the estimated file size is high for aWeb graphic.
4. Make sure you’re looking at the Optimized image.Then select the eyedropper tool from the toolbox.
5. Click dominant colours in the image.For example,click the rust colour in the tree at the left end of the
banner.Note that the corresponding colour is highlighted in the Optimized Colours palette.
6. Click the lock symbol at the bottom of the Optimized Colours palette to lock the rust colour.Then con-
tinue selecting and locking the colours that you want to preserve in the palette.
7. When you’ve finished locking the key colours,choose 128 from the Colours pop-up menu in the Optimize
palette.Note that the overall colour quality stays level,while the file size drops by several K .
8. Check for any dithering problems on an 8-bit display by choosingView > Browser Dither.Note that the
blue-green in one of the skyscrapers shows a lot of dither.
9. ChooseView > Browser Dither again to turn off the effect.Then use the eyedropper tool to
sample the blue-green colour.The Optimized Colors palette highlights the colour.
10.Click the cube button at the bottom of the palette to shift this colour to its nearestWeb-safe
equivalent and prevent on-screen dither.A dot now appears in the centre of the colour swatch
to indicate that it’s aWeb-safe colour.
You can double-click the colour to view it in the Colour Picker and compare the previous colour
with theWeb-safe equivalent.
The lower-right corner of the
swatch changes to indicate that
you’velocked thecolour.
The dot in the center of the swatch
indicatesthatyou’ve“Web-shifted”
a color.

10
11.ChooseView > Browser Dither again to check that the dither problem is gone.Then choose theView
Browser Dither command again to turn this feature off,and close the illustration file without saving it.
Simulating Browser Dither
If you’ve been performing the steps in this guide,you’ve now tested theView Browser Dither feature a few
times and have a feel for its usefulness.Now here’s a little more background information about why this
feature matters.Most designers work with 24-bit video display cards,so they tend to have a slightly skewed
view of how colours appear on-screen.Many of the people visiting Web sites,for example,still work with 8-
bit displays.Designers have worked around this problem by sticking to the Web-safe colour palette,but many
chafe at this restriction and want to start working with the richer colour set available fromAdaptive or Per-
ceptual palettes.In the past,this meant having to switch to 8-bit display mode to check out every image.
Adobe ImageReady solves the problem by providing a Preview Browser Dither feature,so you can instantly
simulate browser dither in the LiveView window and make appropriate colour adjustments.
Animation and OtherWeb Features
While Adobe ImageReady is primarily focused on enhancing theWeb production process,it includes a
number of features that nicely round out aWeb designer’s toolkit.In particular,it offers elegant tools for
quickly creating animated GIF files and for generating client-side image maps.You can also preview your
graphics in your choice of Web browsers with complete ease,and you can check out how your image looks
as a tiled background.
Creating an Animated GIF File
Most programs that generate animated GIF files force you to compress individual images and then animate
them as frames.If you want to edit the animation,you have to go back to each affected frame,edit it,and
then rebuild the file.
ImageReady is different.It treats each image layer as a cel in the animation.As you construct an animation
in theAnimation palette,it saves a snapshot of the settings for that layer rather than a block of pixels.Any
nondestructive changes you can make to a layer,such as moving it or setting its opacity,visibility,mode,and
stacking order,you can also make to each frame.On the other hand,permanent changes,such as painting
on a layer or applying filters,apply to all the frames that use that layer.
This approach to creating animated GIFs offers several benefits:
•You can edit animation frames easily.For example,you can click a frame in theAnimation palette and
reposition any element (layer) in it because positioning is one of the nondestructive changes stored with
each frame.
•You can create compact files because you’re mainly storing layer settings,not pixel data.
•You can store your animation files as Photoshop files that you can save,open,and edit easily.
•You can automatically generate frames in between two specified frames,a process called tweening.
Changes in position or opacity between the two frames are automatically varied in the new frames.
•You can make changes to a layer—such as swapping out a different element or changing its colour—and
automatically update any frame that uses this layer.
•You can review and tweak the compression settings for animated GIF files in the LiveView window with
the same ease as you would preview still images.
When you’re ready to output the animated GIF,ImageReady produces optimal image sizes by analysing
frame differences and only including changed areas.It also prevents flickering—a common animated GIF
problem—by enforcing consistency between frames.
The innovative Animation palette in ImageReady

11
Try it:
1. Open 3Circles.psd.
2. ChooseWindow > ShowAnimation.
3. Choose New Frame from theAnimation palette pop-up menu (or click the New Item button on the
palette).
This step copies the layer positions and settings of the original image.However,you can now change
these settings.
4. Select the move tool.
5. Click the Options palette tab to make it visible (if necessary,choose Window > Show Options).Make
sure that theAuto Select Layer option is checked.
6. Use the move tool to position the yellow ball in the upper-left corner,the blue ball in the lower-right
corner,and the red ball somewhere along the bottom edge of the frame.Be careful not to move the
cursor outside the frame.
You’ve now created a simple two-frame movie.
Tip
The move tool in ImageReady
includes an Auto Select Layer
feature that makes it a snap to
selectthetoplayeratany
location in an animation.Just
selectthemovetool,and then
make sure Auto Select Layer is
selected in the Options palette
tousethisfeature.
7. Click the Play button in the Animation palette to run your simple movie.Then click Stop when you’ve
seen it enough times.
This two-frame movie is choppy,but it gives you a good start.
8. Make sure that the second frame is still selected in the Animation palette.Then choose Tween from the
Animation palette pop-up menu.
9. Enter 3 for Frames toAdd,and select Previous Frame for Tween With.
ImageReady analyses the differences in position and opacity between the two frames and generates
appropriate intermediate steps.
10.Press Play again.Then press Stop.
11.Now edit your animation to make the balls move out and then back to the middle again: Click the last
frame in the Animation palette.Choose Tween from the Animation palette pop-up menu.Choose First
Frame for Tween With.

12
12.Choose Other for Play in the Animation palette.Then enter 4 for Time in the Animation Settings dialogue
box,and click OK.
13.Press Play to view your new animation,or press Ctrl+Alt+P/Command+Option+P to preview the ani-
mation in your browser.
14.Close the file without saving it.
Creating Image Maps
Adobe ImageReady software makes it simple for you to produce client-side image maps—navigational
graphics with URLs embedded in them for linking to those sites (or to pages on those sites).You can assign
a different URL to each layer in an image.
Try it:
1. Choose File > Open > 3Circles.psd.
2. If necessary,chooseWindow > Show Layers.
3.Click Layer 3 in the Layers palette,and choose Layer Options from the Layers palette pop-up menu (or
double-click Layer 3).
4. Check Use Layer As Image Map.
5. Choose Circle for Shape.
6. Enter http://www.adobe.com/blue for the URL,and click OK.
Note that the URL associated with the layer now appears in the Layers palette.
7. Repeat Steps 3–6 for the red and yellow circles,but modify the URL to say /red and /yellow respectively.
8. Choose File > Preview in Browser > [name of your browser] to view the image map.
When you move your cursor over the different circles,the cursor changes to a hand to indicate a link.
The URL appears along the lower-left edge of the browser window.
9. Close the browser,and then close the file in ImageReady without saving it.

13
Previewing an image as an HTML Background
Adobe ImageReady lets you preview how an image will look as a tiled background in a Web browser.
Try it:
1. Choose File > Open > 3Circles.psd.
2. Choose Image > HTML Background to check this command.
3. Choose File > Preview In > [name of your browser].
The browser opens with the three circles tiled in the background.
4. Close the browser,and then close the file without saving it.
Previewing an Edited Image in Different Browsers
One of the last steps in most Web production processes is to view each image in differentWeb browsers to
ensure its final quality.Adobe ImageReady simplifies this process with its Preview in Browser command.
You’ve now seen this feature in action a few times,so we’ll simply provide some background information
about it here.
When you choose the Preview in Browser command from the File menu,ImageReady writes a temporary
snippet of HTML code, saves the image and HTML snippet to your hard disk,launches your choice of
browsers,and displays the image.When the image opens in the browser,it displays key information,such as
the image size and compression settings.When you return to ImageReady,you can export the HTML snip-
pet or copy it to the Clipboard to use in an HTML editor.
You can set up as many different browsers as you want for this preview.Just make an alias or shortcut for
each browser, store them in the ImageReady\Helpers\Preview In folder, and then restart ImageReady. The
browsers are then listed on the Preview in Browser submenu.
Superior Image Editing
While Adobe ImageReady is not the primary creative tool in the Web graphics process, you may need to edit
images or make subtle adjustments to them. That’s why ImageReady includes a subset of Photoshop tools,
commands,palettes, and plug-ins.With these core image-editing capabilities,you have a complete and
productiveWeb graphics production solution.
Using the Image-editingTools
Adobe ImageReady builds in a core set of image-editing capabilities, including:
• Tools,such as the marquee,lasso,eraser,pencil,paintbrush,and eyedropper tools. (Note that the
Options palette displays tool-specific settings for you to select.)
• Resizing commands,such as Image Size and Canvas Size.
• Image adjustment commands, such asAuto Levels,Gamma/Contrast, and Hue/Saturation.
• Filters,such as Unsharp Mask and Gaussian Blur. (ImageReady also works with any Photoshop-
compatible plug-in.)

14
In addition,ImageReady features a handy new tool,called the magic eraser tool,which lets you create trans-
parencies instantly in GIF and PNG files.You simply select the tool and click a pixel.Any pixels of similar
color become transparent automatically.
Try it:
1. Choose File > Open > banner.ai.
2. Select the magic eraser tool.
3. Click on the background white.
All of the white background instantly becomes transparent,creating a checkerboard pattern in your on-
screen image.This checkerboard doesn’t display in the browser,but rather allows background colours and
patterns to show through.
4.Close the file without saving it.
EditingText
In Adobe ImageReady software,you can create and edit text easily—just select the type tool,click an inser-
tion point,and enter text in the Type Tool dialogue box.You can preview the text from this dialogue box,or close
it to see your text in place.To edit this text,just double-click the type layer in the Layers palette (indicated
by the capital T),and make your changes.Format your text using the Type palette.You can specify the font,
font size,kerning,leading,and tracking.
Try it:
1. Choose File > Open > Hammer.psd.
2. Choose the type tool.
3. Click an insertion point in the center along the bottom edge of the image.
4. If necessary,check Preview in the Type Tool dialogue box,and move this dialogue box so you have an unob-
structed view of the image. 5. Enter Tools That Work,specify 18-point
black type in your choice of fonts,and click
OK.
6. Select the move tool and adjust the position
of the type.
7. Click the Type palette tab to make it visible
(or chooseWindow > Show Type).
8. Make sure that the type layer is still selected
in the Layers palette,and then change the
font size to 22 points and press Enter or
Return.
9. Leave this file open,so that you can check out
multiple undo in the next section.

15
Undoing Multiple Steps
You can undo multiple steps easily by pressing Ctrl+Z or Command+Z multiple times.You can also use the
convenient History palette to view previous production states and go back to them as necessary.The His-
tory palette tracks the edits you make in a list.You simply click on any step in the list or drag the slider back
to return to that point in your process.If you go back a few steps and then start making changes,the image
reverts to the state you selected and then lets you keep working.
Note:To do this hands-on section,you need to have completed the text-editing steps in the previous
section.Alternatively,open any file and make any combination of changes you want,and then follow the
stepsbelow.
Try it:
1. Make sure that Hammer.psd is still open,or open another file and make a series of edits to it.
2. Click the History tab to make it visible (or chooseWindow > Show History,if necessary).
3. Drag the slider back to any state listed in the palette to see the image at that point.Try dragging to sev-
eral different points in your edit list.
4. Choose the state you want to revert to,and then start making new changes.The History palette throws
out all the subsequent states and starts adding new ones to the list.
5. Close the file without saving it.
Automation and Batch Processing
Web graphics production is both repetitious and labor-intensive,so Web developers look for any tools that
can help them automate and streamline their processes.One of the finest innovations in Adobe
ImageReady is the new Droplets technology,which lets you instantly create automation scripts without
doing a lick of programming.For example,you can create Droplets with different compression settings and
then batch compress images.In addition,ImageReady provides anActions palette that’s similar to the one
introduced in Photoshop 4.0.
Creating Droplets to Automate Steps
In creating our new Droplets technology,we focused on two goals: offering inexperienced users a powerful
automation tool that’s utterly simple to use,while giving more advanced users a fine level of control over
high-speed production processes.For example,users in high-production environments can specify certain
key settings that make a difference in batch-compressing images,such as:
•whether ImageReady saves the original,optimised,or both versions of an image.
•where ImageReady saves the optimised images.
•what happens if ImageReady encounters duplicate file names (you can choose to add 1,2,or 3 digits,an
upper- or lowercase letter,or overwrite with or without confirmation).
•whether ImageReady should modify names to meet operating system requirements (for example,each
operating system has a set of illegal characters).
It’s even possible to specify how visible the optimisation process is as ImageReady runs through the batch
process.

16
Try it:
1. Choose File > Open > Hammer.psd.
2. Specify any compression options you want in the Optimize palette.
3. Drag the Droplets script icon to your Desktop,or click it to open a save dialogue box and save it to your
choice of locations.
4. Close Adobe ImageReady.
5. Locate and double-click the Droplet you created.In the window that opens,double-click Batch Options
(the top line) to open the dialog box where you can finetune production-intensive settings.
6. Specify the options you want to use,and close the dialogue box and window.Click Yes to save the changes
you made.
7. Collect any images you want to use to test this feature into a folder,and then drag the folder on top of
the Droplet.The Droplet automatically launchesAdobe ImageReady and starts compressing the images.
Using the Actions Palette to Automate Steps
TheActions palette is a simple,but powerful tool for automating repetitive,multistep processes.This palette
works just like the Actions palette in Photoshop.It allows you to automate high-volume image-editing tasks,
such as resizing images and applying the same color palette to them.You can save any actions you record as
droplets and store them on your Desktop for easy access.
Try it:
1. StartAdobe ImageReady again,if necessary,and open any image file.
2. ChooseWindow > ShowActions to open the palette,or click theActions tab to bring it to the front of its
container.
3. Choose New Action from the Actions palette pop-up menu.
4. Enter Medium JPEG Compression for Name,and click Record.(The newAction appears in the list,and
the Record button is now red to indicate that it’s active.)

17
5. Choose Batch Options from theActions palette pop-up menu.
6. Specify a folder in which to save the optimized images.Then choose Add Lower-Case Letter (a) from the
If Duplicate File Name pop-up menu.
7. Check Windows 95/NT and Macintosh for Modify File Name For,and then click OK.
8. Set the JPEG compression options you want,and then click the Stop button to stop recording.
9. Choose Create Droplet from theActions palette pop-up menu,and specify where to save the Droplet.
If you like,you can then close ImageReady and drag another practice folder of images onto this Droplet
to compress them.
Seamless File Support
Adobe ImageReady opens and saves a wide variety of file formats.In particular,it opens PSD,GIF,JPG,
PNG,BMP,PCX,PXR,TGA,TIF,PICT,Photo CD,AI,EPS,and PDF files.It saves PSD,GIF,JPG,PNG,
BMP,PCX,PXR,TGA,TIF,and PICT files (PICT support on Macintosh only).
You’ll also enjoy the smooth interaction between Adobe ImageReady,Photoshop,and Illustrator software,as
each program plays its part in creating,refining,and producing Web graphics.
Importing Adobe Illustrator Files
To import Adobe Illustrator files (AI or EPS),simply choose File > Open,and select a file.ImageReady
rasterizes the file,converting it to a PSD (Photoshop) file.
Working Closely with Adobe Photoshop
You can move Photoshop files back and forth between ImageReady and Photoshop as necessary to get the
job done.You may,for example,work on a PSD file in ImageReady,realize that you need to make some
complex image edits,and switch back to Photoshop with ease.Just choose File > Jump to Photoshop,and
ImageReady saves the file and opens it automatically in Photoshop.Then,when you’re ready,move the file
back into ImageReady for final processing,while preserving any layer attributes.
Note:To use the Jump to Photoshop feature,you must first create a shortcut or alias for Photoshop and
store it in the ImageReady\Helpers\Jump To folder.Then restart ImageReady.
This document was created with Adobe PageMaker®software and font software from the AdobeType Library.
Adobe,the Adobe logo,Illustrator,ImageReady,PageMaker,and Photoshop are trademarks of Adobe Systems Incorporated.Apple,Macintosh,and Power Macintosh are registered
trademarks of Apple Computer,Inc.registered in the United States and other countries.Photo CD is a trademark of Eastman Kodak Company.PowerPC is a registered trademark of
International Business Machines Corporation.Microsoft,Windows,andWindows NT are either registered trademarks or trademarks of Microsoft Corporation.All other trademarks are
the property of their respective owners.
© 1998 Adobe Systems Incorporated.All rights reserved.Printed in the USA.3/98
Adobe Systems Incorporated
345 Park Avenue
San Jose,CA 95110-2704 USA
Adobe Systems Europe Limited
AdobeHouse,Mid New Cultins
Edinburgh EH114DU
Scotland,UnitedKingdom
Adobe Systems Co.,Ltd.
Yebisu Garden PlaceTower
4-20-3 Ebisu,Shibuya-ku
Tokyo 150 Japan
WorldWide Web
http://www.adobe.com
Windows System Requirements:
—Intel Pentium® processor
—MicrosoftWindows 95,Windows
NT 4.0,or later operating system
—16 MB of RAM (Windows 95);32
MB of RAM (Windows NT)
—CD-ROM drive
Macintosh System Requirements:
—PowerPC® processor
—MacOS Software 7.5.5 or greater
—8 MB of application RAM
—CD-ROM drive