Tutorials: Photoshop, creating a rollover (2)

Photoshop/ImageReady

Now that we've created our button in Photoshop, we need to put the rollover programming on the button. For that, we need ImageReady.

In ImageReady, select the layer the button is on. From the menu select Layer>New Layer Based Slice.

ImageReady will automatically create a slice that matches the buttons size exactly. In a minute, you will see how helpful it is having ImageReady create.
From the Rollover palette at the bottom, click on the "Slice" tab. Rename the layer something that makes sense to you. I would call our sample button "about_us". Notice ALL lowercase and NO spaces. This is what the button will be called in your images folder.
Click back on the Rollover tab. If the slice isn't active, select it from the lower left menu. The thumbnail of the image says Normal.
Select the "Create New Rollover State" from the Rollover palette (it looks like a piece of paper). A second duplicate image appears next to Normal. It is called Over.
Now we need to optimize our button (see Optimization tutorial) and export it into Dreamweaver.