Help with Photoshop

Creating a rollover banner

[kiwanji]

I just got a copy of Photoshop 7.0 with the hope of learning how to create a rollover image like Stavs talked about in his recent post (http://www.webmasterworld.com/forum36/514.htm). I went on the Adobe web site and found a "tutorial" for this very thing, but either I am too slow or it is written for people who already know what they are doing. See Adobe's web site.(http://www.adobe.com/web/tips/phs7rollover/main.html)

Can anyone help out with a more down-to-earth layman's speek kind of tutorial for this?

Much appreciated.

ps - I couldn't get these silly links to work. I am new at this site. I even looked at how to and it still didnt work. *sheepish grin*

[martinibuster]

Ugh. I can do this, and have done it many times, but I always forget how I did it.

I apologize if this sounds like a cop-out, but I always have to whip out a book or two from the martinibuster library to remember how to do this in imageready (or fireworks).

I heartily recommend the Michael Baumgardt penned Adobe Photoshop Web Design books (get the 6.0 edition at a used bookstore/ebay if you're on the cheap).

Also, the Hands on Training book by Lynda Weinman is a good one to have.

And of course, the Down and Dirty Photoshop is awesome.

A good working knowledge of all the Photoshop tools is an important foundation and prelude for moving on to the second level, which is learning about the different masking and layer tricks.

[idiotgirl]

Sorry, I don't use Image Ready to code rollovers. However, it isn't really hard to create the different effects for rollovers in Photoshop if you can create new layers and/or duplicate layers and know how to toggle layer visibility.

If you had your base image, like the banner-type image they show in Adobe's tutorial (which looks like pooh in Opera, by the way, and I can't see everything) and designate an area to be used as your rollovers by creating a new layer for the "on effect" and another layer for "off effect".

To make sure they are the same dimensions just create your first blank "off" layer, then duplicate/copy that layer and call the copy of that layer "on" in your layers dialog box. Do this for each group of on-off buttons.

In the layers dialog box you can select to hide or show layers aka "toggling", depending on which one you want to work on. For the slow people (me) be sure you assign a name to each layer so you'll know which one you are working on. You can vary your layer opacity, add gradients, or any number of effects if you want a special look for your rollover state.

When saving each image for rollovers, view all of your "on" layers at once to slice and save, then view all of your "off" layers at once to slice and save.

The actual script functions are up to you. As I said, I hand code any rollover effects once my images are saved and do not use Image Ready. There's a boatload of javascripts for doing this. I keep one or two handy in my scripts folder using Macromedia's editor, Home Site (formerly Allaire's Home Site).

[mivox]

Much like idiotgirl's suggestion, I just create two separate images for each button (one for 'on' and one for 'off'), and then hand edit a rollover script I downloaded years ago to create the actual rollover effect.

Most automatically generated javascript I've seen for rollovers (or any other function) is bloated garbage compared to the scripts you can download for free... :) sites like hotscripts.com or javascripts.com have tons of free downloads available.