manuals.online logo
Brands
  1. Home
  2. •
  3. Brands
  4. •
  5. Adobe
  6. •
  7. Software
  8. •
  9. Adobe 13100771 - Photoshop w/ ImageReady User manual

Adobe 13100771 - Photoshop w/ ImageReady User manual

This manual suits for next models

1

Other Adobe Software manuals

Adobe 22002484 User manual

Adobe

Adobe 22002484 User manual

Adobe 12001196 - Acrobat - Mac User manual

Adobe

Adobe 12001196 - Acrobat - Mac User manual

Adobe CAPTIVATE 2-USING ADOBE CAPTIVATE Mounting instructions

Adobe

Adobe CAPTIVATE 2-USING ADOBE CAPTIVATE Mounting instructions

Adobe PHOTOSHOP ELEMENTS 2.0 - LESSONS FOR EDUCATORS (ST. PATRICK S DAY... User manual

Adobe

Adobe PHOTOSHOP ELEMENTS 2.0 - LESSONS FOR EDUCATORS (ST. PATRICK S DAY... User manual

Adobe ACROBAT READER 4.0 Operating instructions

Adobe

Adobe ACROBAT READER 4.0 Operating instructions

Adobe ACROBAT SDK V8.0 User manual

Adobe

Adobe ACROBAT SDK V8.0 User manual

Adobe ACROBAT FORMS JAVASCRIPT OBJECT User manual

Adobe

Adobe ACROBAT FORMS JAVASCRIPT OBJECT User manual

Adobe PREMIERE PRO 2.0 User manual

Adobe

Adobe PREMIERE PRO 2.0 User manual

Adobe 22002484 Guide

Adobe

Adobe 22002484 Guide

Adobe AUDITION 3 User manual

Adobe

Adobe AUDITION 3 User manual

Adobe FLASH PLAYER 10 - FOR IMMEDIATE RELEASE User manual

Adobe

Adobe FLASH PLAYER 10 - FOR IMMEDIATE RELEASE User manual

Adobe AUDITION 1.5 User manual

Adobe

Adobe AUDITION 1.5 User manual

Adobe Photoshop CS6 User manual

Adobe

Adobe Photoshop CS6 User manual

Adobe 65007312 - Photoshop Lightroom Manual

Adobe

Adobe 65007312 - Photoshop Lightroom Manual

Adobe 65064073 User manual

Adobe

Adobe 65064073 User manual

Adobe 22001438 - Acrobat - PC User manual

Adobe

Adobe 22001438 - Acrobat - PC User manual

Adobe 65045315 - Photoshop Elements - PC Operating manual

Adobe

Adobe 65045315 - Photoshop Elements - PC Operating manual

Adobe PHOTOSHOP CS2 User manual

Adobe

Adobe PHOTOSHOP CS2 User manual

Adobe 65061456 Manual

Adobe

Adobe 65061456 Manual

Adobe 65030365 - FrameMaker - PC Instruction Manual

Adobe

Adobe 65030365 - FrameMaker - PC Instruction Manual

Adobe 22002420 - Acrobat Standard - PC User manual

Adobe

Adobe 22002420 - Acrobat Standard - PC User manual

Adobe 65009333 - InCopy CS4 - PC User manual

Adobe

Adobe 65009333 - InCopy CS4 - PC User manual

Adobe 65016038 - Contribute CS4 - Mac User manual

Adobe

Adobe 65016038 - Contribute CS4 - Mac User manual

Adobe GOLIVE CS2 User manual

Adobe

Adobe GOLIVE CS2 User manual

Popular Software manuals by other brands

Garmin 010-10844-00 - Mobile XT - GPS Software null

Garmin

Garmin 010-10844-00 - Mobile XT - GPS Software null

COMPRO COMPROFM manual

COMPRO

COMPRO COMPROFM manual

Muratec OFFICEBRIDGE ONLINE user guide

Muratec

Muratec OFFICEBRIDGE ONLINE user guide

Oracle Contact Center Anywhere 8.1 installation guide

Oracle

Oracle Contact Center Anywhere 8.1 installation guide

Avaya NULL One-X for RIM Blackberry user guide

Avaya

Avaya NULL One-X for RIM Blackberry user guide

HP ProLiant BL420c user guide

HP

HP ProLiant BL420c user guide

PS Audio PowerPlay Programming manual

PS Audio

PS Audio PowerPlay Programming manual

Brady LOCKOUT PRO 3.0 Administrator's guide

Brady

Brady LOCKOUT PRO 3.0 Administrator's guide

Avaya Interaction Center user guide

Avaya

Avaya Interaction Center user guide

Texas Instruments TI-83 Plus Silver Edition Guide book

Texas Instruments

Texas Instruments TI-83 Plus Silver Edition Guide book

Novell GROUPWISE 8 - INTERNET AGENT manual

Novell

Novell GROUPWISE 8 - INTERNET AGENT manual

Oracle Application 9i Configuration guide

Oracle

Oracle Application 9i Configuration guide

Acer RDM user guide

Acer

Acer RDM user guide

Canon Vixia HF21 instruction manual

Canon

Canon Vixia HF21 instruction manual

Canon ZR950 instruction manual

Canon

Canon ZR950 instruction manual

Samsung Auto Backup user manual

Samsung

Samsung Auto Backup user manual

Polycom Vortex EF2201 Application note

Polycom

Polycom Vortex EF2201 Application note

Brocade Communications Systems Brocade 8/12c user manual

Brocade Communications Systems

Brocade Communications Systems Brocade 8/12c user manual

manuals.online logo
manuals.online logoBrands
  • About & Mission
  • Contact us
  • Privacy Policy
  • Terms and Conditions

Copyright 2025 Manuals.Online. All Rights Reserved.

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