Adobe ImageReady 3 Foundation Level Slides

Download Report

Transcript Adobe ImageReady 3 Foundation Level Slides

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 Background Color 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.