Adobe ImageReady 3

Foundation Level Course

What is ImageReady?

ImageReady is a graphics program that offers several tools tailored to efficiently prepare your graphics for the Web

Opening and Importing Files

• To open a file in ImageReady:

• From the main menu, choose File > Open OR press the Ctrl + O key combination.

• Importing a file lets you open files that have been saved in formats that use plug-in Import modules.

General Preferences

• The General Preferences panel provides access to the most important environmental preference settings.

ImageReady Workspace

• The workspace displays the Toolbox, Canvas, Tool Options bar, Menu bar, Palettes and Status bar.

Marquee Tools

• There are four options for the Marquee tool.

• Right-click on the Marquee tool to view the pop-up option and select another Marquee tool.

Move Tool

• The Move tool (The same tool as in Photoshop) allows you to click and drag a selection or layer of your image. This is the only way to move an image.

Lasso Tools

• Lasso tools allow you to click and drag to select a free-form portion of pixels within your image.

Magic Wand Tool

• The Magic Wand tool enables you to select the adjacent area of the same-colored pixels.

• To select discontinuous areas, click in one area, then Ctrl + Click in another.

Image Map Tools

• Image Map tools allow you to create a selection of shaped areas around your image.

Slice Tools

• Slice tools are used when creating web graphics.

• With these tools, you can cut images into rectangular sections in order for you to apply web effects, links, rollovers and animations to different areas of the same image.

Eraser Tools

• Eraser tools allow you to paint in the background color or erase areas in a layer to reveal layers below.

Airbrush Tools

• The Airbrush tool enables you to spray diffused strokes of color, with various levels of brush thickness.

• The Airbrush also has a sub-menu that holds two other tools: Paintbrush tool and Pencil tool.

Clone Stamp Tools

• Clone Stamp tool also known as the Rubber Stamp tool the copies one portion of an image onto another.

• The Clone Stamp tool also has a sub-menu that holds six other tools: Blur tool, Sharpen tool, Smudge tool, Dodge tool, Burn tool and Sponge tool.

Rectangle Tools

• The Rectangle tool creates rectangles filled with the foreground color.

• The Rectangle tool also has a sub-menu holds three other tools: Rounded Rectangle tool, Ellipse tool and Line tool.

Paint Bucket Tool

• The Paint Bucket tool allows you to fill a contiguous area of similarly colored pixels in the picture with the foreground color, or a selected pattern.

Type Tool

• The Type tool enables you to add text to an image or just the Canvas.

Crop Tool

• The Crop tool allows you to enclose a portion of the image that you want retained in a rectangular boundary.

Eyedropper Tool

• The Eyedropper tool chooses a color in the image window as the Foreground color.

Hand Tool

• The Hand tool allows you to drag within the image window, and scroll the window to view a different portion of the image.

Zoom Tool

• The Zoom tool allows you to magnify an image to see the individual pixels more clearly.

Foreground and BackgroundColor Chip

• The Foreground and Background Color Chip allows you to change the foreground color of your image and/or image window.

Toggle Image Maps Visibility

• Using the Toggle Image Maps Visibility switches between revealing and hiding image maps.

Toggle Slices Visibility

• Using the Toggle Slice Visibility switches between revealing and hiding sliced images.

Rollover Preview

• Using the Rollover preview reveals rollover effects.

Preview in Default Browser

• Using Preview in Default Browser gives you a preview of your animation in a browser.

Screen Modes

• Using Standard Screen Mode allows different views of your workspace.

Jump to Photoshop

• The Jump to Photoshop button allows you to automatically open the Photoshop application.

Layers Palette

• The Layers Palette allows you to make changes to an image without altering your original image data.

History Palette

• The History Palette records every significant operation (not including preferences and settings) and stores them in a list.

Actions Palette

• The Actions Palette allows you to record, play, edit, and delete individual actions.

Info Palette

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

Color Palette

• The Color Palette is a very useful and easy tool to use for selecting colors.

• There are multiple elements and options contained in the palette to select from.

Swatches Palette

• The Swatches Palette allows you to collect colors for future use.

• The foreground and background colors can also be set with this palette.

Styles Palette

• With the Styles Palette you can save layer effects and blending options by creating layer styles.

Character Palette

• The Character Palette provides options for formatting characters.

Paragraph Palette

• There are multiple options to use within the Paragraph Palette, and all affect text created inside a bounding box.

Optimize Palette

• Using the Optimize Palette allows you to set and view your optimization settings.

Layer Options Palette

• Using the Layer options Palette allows you to rename or name your layers.

Create Slices

• For each slice created, a slice number will appear in the upper-left corner of the slice.

• You can turn the numbers off by deselecting the Show Slice Numbers check box on the Options bar.

Edit Slices

• If overlapping slices were created, access the top one with the Slice Select tool.

• Use the four stacking order buttons near the left end of the Options bar, to change the stacking order.

Slice Options

• After a slice is created, you can give the slice a specific name, create a link to a Web page, etc.

Save Slices

• To save your original image with all slice information intact:

• From the main menu, choose File > Save As and select either the Photoshop or TIFF format.

Image Mapping

• Creating Image Slices will divide a document into multiple independent graphics.

• Each slice can be made into a button that a viewer clicks on to jump to a linked page or frame.

Styles

• Using the Styles Palette allows you develop buttons with a simple mouse click.

JavaScript Rollovers

• When creating JavaScript Rollovers, ImageReady slicing functions make it faster to create and assemble HTML buttons.

• A rollover is a collection of JavaScript functions that will make a button change according to the actions of the mouse cursor.

Navigate Frames

• ImageReady can read all frames in an animated GIF file and automatically separate each one to an independent layer.

Animated Gif’s

• Creating Animated gifs within ImageReady are quite simple. ImageReady has stream lined the process so that the development of Animated gifs are created with ease.

Add and Organize Frames

• The Animation palette in ImageReady works like an expanded version of the Rollover palette.

• Each frame in the palette will show one or more layers and hide all others.

Save and Optimize an Animation

• Saving an Animation is not tricky, but it is a detail-oriented process. ImageReady GIF functions are based on the slicing metaphor, saving an animation becomes a matter of four Optimize features.

Web Settings for Optimization

• From the main menu, choose File > Save Optimized OR press the Ctrl + Alt + S key combination to open the Save Optimized dialog box:

GIF Settings for Optimization

• When GIF is selected from the Format pop-up menu, most of the options are similar to the Indexed Color and GIF Options dialog boxes, but there are a couple of additional options.

JPEG Settings for Optimization

• The JPEG tab allows you to change the image size and resolution, just like working with GIF images.

Optimization Menu

• The Optimize Menu has some new options allowing you to optimize your image to it’s best possible final look.

Saving PNG Images

• The Portable Network Graphics format, or PNG format, was designed to outperform and ultimately replace the GIF format.

Output Settings

• The Output Settings dialog box, can control how ImageReady saves slices as individual graphic files, generates code related to links and HTML text that is added to slices, and other options.