Rollovers/Image slicing with Adobe ImageReady

Creating rollovers with Adobe ImageReady

What's a rollover?

Consider an image like this one, ... maple-leaf-normal

Using javascript, a browser can sense when your mouse has 'rolled over' on top of this image, and then swap the first or "normal" image for another one, called the "over" image or the "mouseover" image... mouseover image

Finally, you can surround this thing with <a href='...'>...</a> tags so that clicking on the image takes you to another page. The whole thing packaged together looks like this...

Why use rollovers?

They can be visually attractive, but they have at least two good information-communication characteristics:

Graphics do not by default have the "blue and underlined" characteristic that text links have that tell someone immediately "I'm a link". But there *is* almost a convention on the web that when something "changes state" when the mouse is nearby that it's clickable. (And the change in state also tells you if you're "close enough" to click).
As with the text above, you can create context sensitive pages, where supplementary information is only revealed if someone shows some interest in it (by moving the mouse over top). This can result in layouts which feel much less cluttered than if every piece of information was always on display. (But there is often *some* information that you want everyone to see whether someone moves their mouse close or not, and this should *not* be hidden from view in a rollover).

Creating a rollover in Adobe ImageReady

For a rollover effect, you need to prepare (at least) two separate images.

Typically the two images are not completely different from each other, but rather only part of an image is changing. Like claymation, you might imagine that we'll have a starting image, take a snapshot of it, change a little something, then take a second snapshot.

Using Photoshop's layers, it's straightforward to accomplish the "change a little something" step by showing/hiding one layer, so we'll start by preparing a photoshop file in such a way that we can see the two different "states" of the image by just hiding or showing some layers.

Remember that you can turn off the display of individual layers by clicking and unclicking the little eye beside them in the layer menu...

We'll pull the image into ImageReady, and then use it to package the whole thing up as a rollover:

Select File | Open to open your Photoshop (.psd) file.
Now, open up the 'Webcontent' window if it's not already open using Window | Webcontent.
In the webcontent window, select the right arrow at the top right and choose "New Rollover State". This will copy your whole Photoshop file (layers and all) into a second "state". The webcontent window will look something like this:
Now, you can click back and forth between the "Normal" and "Over" states of the image, and make those look different...by turning off and on layers.
Set appropriate optimization settings (gif and jpeg export options) in the Optimize palette
You can preview by clicking the preview button, or the preview in browser buttons at the bottom of the toolbar palette.
To add a URL to jump to when the image is clicked, look for the "slice" tab and fill in a URL:
Finally, choose File | Save Optimized As... and make sure you're saving HTML and Images. to create the images that you'll need, as well as a web page with javascript that puts it all together. Browse to your web page and try it out!

The resulting html file should have a working image rollover. If you'd like to use it in a page of your own you need to copy three things from the web page that IR created:

Some javascript functions that go in the <head> section of your web page,
a link with a bunch of images and javascript between the <a..> and </a> that you could copy into a page of your own at the point you wish to display the rollover.
Notice also the javascript function that's been added to the <body> tag.

Slicing images

A single rollover is kind of a neat effect, but you can see perhaps that to create a page with rollovers on several of the links, you're going to have to put a bunch of images together in a table, and this is rapidly going to get complicated. But it turns out that ImageReady can do a lot of this sort of work for you.

You can "sketch" rather complicated layouts in Photoshop, and then use Adobe ImageReady to turn a Photoshop sketch into a working web page "relatively" simply. Then, using yoiur impeccable knowledge of HTML, you can tweak the page that IR generates and get really quite bandwidth friendly pages.

There's a .psd file of that we'll experiment with at w:\deptpages\communication\comm326\imageready\leafpoem\leafpoem.psd. Open it in Photoshop. We'll edit it first in Photoshop, and then bring it in to ImageReady

Schematically, what we'll do...

Draw a rectangular "slice" around each part of the image that we wish to be a rollover with the slice tool. These are underneath each other on the IR tool palette (at right).:
Also draw slices where we want one rectangular table cell (to contain HTML rather than a graphic) in our final page.
Use the slice selection tool to adjust the sizes of slices.
Add "over" states to rollover slices and modify the look of the over and normal states
Attach URLs to the rollover slices
Set optimization settings appropriate to each slice.
Indicate which slices we wish to be html rather than graphics (including all flat-color rectangles...because we can do a background color with a table-cell background attribute, instead of the graphic that IR is going to fill with.

After running the IR table to the borders, setting a background body color, replacing some of the slices with transparent gifs, setting the text color to that certain blue, etc, etc, this is what we're heading for....leafpoem-glow-roll. Overall "weight" is 30Kb (about 15Kb is in the lower-left image. The HTML itself is 3Kb). Note that all of this would be cached by the time someone comes to a second page on such a sitelet.