www.CognitiveHorizons.com web address, www.CognitiveHorizons.com
capella linkstutorialsabout us

logo links to home page This is where you are:


Return to Main Tutorial

Creating an image

Optimizing an image

Creating a rollover button

Exporting to Dreamweaver




Creating a button in Photoshop, con't.

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

sample button

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. Now we need to optimize our button (see Optimization tutorial) and export it into Dreamweaver.


© Copyright 2003 | Something Graphic | 20 November, 2003

Contact me:learn@CognitiveHorizons.com