This tutorial explains how to make a simple rollover button using Photoshop and ImageReady.

1. Make a new image. The size I used for this tutorial is 200px by 75px. Choose white as the background color.

2. Create a new layer. Choose the Rectangular marquee tool from tool bar and select the entire canvas. So it looks something like this:


3. After selecting the image, choose a color you want as the background. For this tutorial I chose to use orange. Fill the selection by pressing alt + backspace. It should look like this now:


4. Next, go to the layer styles window and click Bevel and Emboss(Layer > Layer Styles > Bevel and Emboss), make it with these settings:
Style: Inner Bevel
Technique: Smooth
Depth: 140%
Direction: Up
Size: 4px
Soften: 6px
Angle: 122, 39. Global light is checked
Highlight mode: screen, white. Opacity: 75%
Shadow mode: multiply, black. Opacity 75%

It should now look like this:


5. Duplicate the layer with the beveled effect and rename it to “down”. Double click on the Bevel and Emboss layer style in the layer window. Click the down option.

You shouldn’t be able to see any changes unless you click the eye next to your “up” layer.


6. After you’ve done that click the “Jump to ImageReady” button on the bottom of your toolbar.


7. In ImageReady, go to Window > Rollover if you don’t have the rollover window already open.

8. Click the “Create Rollover State” icon in the bottom of the rollover window. You should now see a new “state” in the rollover window. Click on that state, and then go to your layer window and click off the eye next to the down layer.

9. If you don’t have an “Over” rollover state, then press the “Create a New Rollover State” button again. Click the “Over” state, then click off the eye next to the up layer, and click on the eye next to the down layer.

10. Finally, go to File > Save Optomized As, and save it as Images and HTML. And you’re done.

Here is what it can look like:
http://forum.weborum.com/josh/rollover.html

This post has been edited by Josh: Feb 21 2004, 11:19 PM

Here's a very nice tip from Paul at HTMLforums.com:

When applying a bevel and emboss to a single colored object, select the Highlight color to a color slightly lighter than that of the color of the object. And for shadow mode choose a color slightly darker than that of the color of the object.

i can't find rollover in window>rollover

after having a close look, i see there is no rollover section or anything nowhere in my imageready CS can anyone help me out here???

This post has been edited by Rayko: Jun 13 2004, 01:06 PM

i'm not really familiar with these types of rollovers, i use css, but i ahve just quickly recreated this in photoshop 7 and found window - rollover, i'll have a look in CS when i go over to the office but maybe josh has come across this before.

the attachment shows what i get in window.

as u can see there is no rollover thingy in the window list

EDIT: i just stumbled upon a tutorial for makin a rollover button with imageready CS, instead of rollover under window its web content

sorry for the inconvenience i now learned allot more about animation

This post has been edited by Rayko: Jun 13 2004, 04:34 PM

ok, i just found that in imageready CS the rollover palette has been replaced by the "web content" palette, select that and see what comes up.

is there a CSS or Javascript that will do that to a button or image?

i can make a button exactly the same in fireworks.

just need a way to get that effect

sure

http://forum.weborum.com/index.php?showtopic=264

ahhh

amazing resources of weborum

that one is different from joshes though leo.

joshes kind of depresses into the page while the the one i just looked at was more like a rollover.

its a javascript it looks like, im assuming its generated by image ready here is the code.

first part:

this looks like the second part

i got one more question, when i made it, how do i save it??? i mean ok i do as the tutorial sais n stuff but, i get 2 images, one of the normal state, and one of what happens when ur mouse foes over it what do i do to get it as one image???

hehe dan, you can find quite alot here
josh's differs in that the depressed image is different, that's down to the graphic. Yeah it's javascript that imageready generates, both methods have the same procedure of changing an image when you hover over it.

Rayko, it's two images that you need, one image for when the button is normal and one for when you hoevr over it. Save each image with the same names as what daniel has pasted:
rollover_01-over.gif
rollover_01.gif

and then just use that code, likewise with the css

what do i do with the code??? do i put the code on my webpage???