Adobe ImageReady 3

1
Adobe ImageReady 3

• Foundation Level Course

2
What is ImageReady?

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

3
Opening and Importing Files

• To open a file in ImageReady
• From the main menu, choose File gt 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.

4
General Preferences

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

5
ImageReady Workspace

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

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

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

8
Lasso Tools

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

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

10
Image Map Tools

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

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

12
Eraser Tools

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

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

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

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

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

17
Type Tool

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

18
Crop Tool

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

19
Eyedropper Tool

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

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

21
Zoom Tool

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

22
Foreground and BackgroundColor Chip

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

23
Toggle Image Maps Visibility

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

24
Toggle Slices Visibility

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

25
Rollover Preview

• Using the Rollover preview reveals rollover
  effects.

26
Preview in Default Browser

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

27
Screen Modes

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

28
Jump to Photoshop

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

29
Layers Palette

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

30
History Palette

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

31
Actions Palette

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

32
Info Palette

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

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

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

35
Styles Palette

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

36
Character Palette

• The Character Palette provides options for
  formatting characters.

37
Paragraph Palette

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

38
Optimize Palette

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

39
Layer Options Palette

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

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

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

42
Slice Options

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

43
Save Slices

• To save your original image with all slice
  information intact
• From the main menu, choose File gt Save As and
  select either the Photoshop or TIFF format.

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

45
Styles

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

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

47
Navigate Frames

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

48
Animated Gifs

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

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

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

51
Web Settings for Optimization

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

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

53
JPEG Settings for Optimization

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

54
Optimization Menu

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

55
Saving PNG Images

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

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