Web Design - El Centro College
 
HTML More HTML JavaScript Design Dreamweaver Fireworks Flash Photoshop More Info Home
 

Photoshop & Image Ready

Photoshop comes with a companion web graphics program - ImageReady.

Both share many of the same features but not all. ImageReady can only work in RGB and .jpg work must be done in Photoshop.

Photoshop is best at creating and enhancing your image while ImageReady is best at creating slices, animations, image maps and rollovers.

You can toggle back and forth between the two programs via the bottom segment of each toolbox. As you toggle back and forth, the image you are currently working on with "move" with you.

An image can be open in both programs at the same time. As you make updates and corrections in one program, the image is automatically updated in the other.

 

ImageReady looks very much like Photoshop, with a few variations. The toolbox is very similar - with fewer tools, a few tools combined, and a few new options.

Notice how the selection tools are arranged differently and with the addition of a rounded rectangular shape.

You can create layers in ImageReady, however, you can only create and edit adjustment layers in Photoshop. You will notice that in ImageReady, the Layers Styles dialog box has been replaced by smaller palettes - one for each style.

 

Save Optimized for the Web

Notice that the screen is slightly different from Photoshop. The Settings are located in a separate palette. The optimization options are located on the status bar.

 

Creating Slices

Slices divide an image into smaller pieces. Each slice is an independent file, with its own optimization settings, color, rollover effects… The make the page seem to load faster because each slice becomes visible as soon as it is loaded.

Slices are created by dragging the Slice Tool, which looks like a carpet knife.

Create Slices:

  • Slice menu > Promote to User-slice, then Slice > Divide Slice
    or
    Slice tool> (a yellow outline appears)
  • Drag your cursor to select the area of the first slice

    Slices are similar to selection boxes: if you cut an image in half horizontally, you have actually created three sliced areas: one above, one below and the section you selected. Slices can be made vertically or horizontally.

  • User-slices - slices you manually create
    Auto-slices - slices that ImageReady creates, complimenting your slices
  • Each slice is numbered from left to right, upper left to lower right.
  • Select a slice by clicking on the slice tool. Now click on the slice of your choice. The slice is active when the yellow box surrounds it.

    TIP: SHIFT + click on another slice to select more than one at a time
    Select > All Slice to select all the slices
    Slice > Link Slices if you wish to optimize all slices together

  • Window > Show Slice > palette options for image map naming, ALT tags…
  • File > Save Optimized As > .htm (saves the image in a table you can cut & paste into your webpage)

    TIP: if you continue making changes to the image in ImageReady, update via File > Save Optimized As, then File > Update HTML, locate the HTML page and the image will be updated. HOWEVER, this feature also erases anything else contained on the page (including other images or text)!

Creating Image Maps

  • Open the image in ImageReady.
  • Window > Show Image Map
  • Image Map Tool > select desired shape (rectangle, circle, polygon) > drag the area to be "hot" >
  • Fill in the nickname for the hotspot, alt tag, and the URL for the link
  • Preview in the browser
  • File > Save as Optimized

Creating Rollovers

  • Normal - image that loads with the page
  • New state - creates the rollover effect
    • Over - hover
    • Down - user presses down on the mouse
    • Click - user clicks the mouse
    • Out - user leaves the image (generally returns to normal)
    • Up - seldom used, the same as over
    • Custom - define a new rollover state
    • None - preserves the current "normal" but allows you to add rollover capability later

To Create:

  • Create the basic button in Photoshop.
  • Jump to ImageReady.
  • Window > Show Rollover
  • The button show appear in the "normal" state
  • Window > Show Layers
  • Layer > Duplicate Layer OR New/Layer via Copy > paint with another color > turn it off (the eye should disappear)
  • Rollover > New State Icon (bottom of rollover palette) > by default, this will be called OVER
  • Click on OVER to activate it
  • Turn the duplicate layer back on and turn off the original layer
  • The duplicate layer should become the 2nd button
  • Repeat for additional "states"
  • File > Preview In > browser