 |
 |
Menus with Beauty and Brains
4: Photoshop and ImageReady Rollovers
|
|
|
|
We're back to menus. As I promised at the start of this series, I am
going to keep coming back to this topic. There is no subject that is
more important to our success as designers, and nothing that can cost
us more time.
In the first few installments, starting with Menus
with Beauty and Brains, we have concentrated on menu structure and
main menu construction. We are now moving on to creating rollover graphics.
In this issue, we will look at creating graphics to be used for rollovers
in Photoshop.
|
| |
|
|
|
Creating automated rollover graphics in ImageReady.
|
|
I have stated many times that I do not use the automatic HTML generation
features that graphics programs provide, but I do use automation to
create the graphics for my rollovers. I find that placing the prepared
graphics into tables that I create is a much more reliable method, and
in the end, faster. If your slicing is off by even a pixel, the automated
HTML for rollovers can add many extra rows, columns and spacer images
to create the table that the program thinks you want.
But first, let's take a quick look at rollover image basics. There
is no limit to the creativity you can use when creating rollover images,
but there are a few things that are important no matter what effect
you are creating.
|
| |
|
|
|
|
|
Rollover Basics
It seems that every page on the Web now features rollover images in
menus. I can imagine, in the beginning, that HTML purists probably thought
that rollovers were nothing but a passing trend. However, it is obvious
that rollovers are here to stay ... and rightly so. Rollover images
provide visitors with a vital key to navigation. When the image changes
on mouseover, we all know that means there is a link here – a much
better indicator than the little hand.
|
| |
|
|
 |
|
Most of you will already know how to make
a rollover work. A simple JavaScript code tells the browser to display
a different image when a mouse is passed over the original image. You
are using images, so any GIF or JPG file can be used as the original and
rollover image. There is no limit to the size or content of the images
used for a rollover. In fact, you can use an animated GIF file as the
rollover image as shown in the sample at the left. Used with a light hand,
this is a technique that can add a little fun and action to your page,
without the annoyance factor. Visitors rarely hold the mouse over an image
for long, and they are in control if the motion is annoying. The instant
the mouse is removed, the motion disappears. |
| |
|
|
|
|
|
Finally, you can have more than one image
change as the mouse passes over an image. In the sample at the left, passing
the mouse over the "magic" image changes the color of the word,
and, at the same time, changes the splat to a descriptive graphic text
passage. This effect adds a sophisticated look to a page, and can also
be used to help visitors select the most appropriate link. Again, any
GIF or JPG image, including animated GIF files can be used for any of
the images. The combinations are endless. |
| |
|
|
| |
|
This is a graphic column, so I will leave the JavaScript discussions
on rollovers to the experts in that field. Our own Doc
JavaScript is a terrific resource if you are looking for extensive
information on JavaScript. However, there are pitfalls to avoid when
creating rollover graphics, and a few tips that can save you time and
frustration. Let's look at the methods and danger spots for Photoshop.
In future articles, we will cover rollovers in Fireworks and Paint Shop
Pro.
|
| |
|
|
|
 Wendy
Peck is a working Web designer and writer living in NW Ontario, Canada.
http://wpeck.com
|
|
Next page
Menus with Beauty and Brains 4: Tutorial Index
Photoshop and ImageReady Rollovers
Creating Rollover Images in Photoshop
Saving Single Rollover Images
Slicing Images with ImageReady
Saving Rollover Images
 
|
|
|
|
|
