How to Create Two-State Rollover Buttons for a Web Page (Part 3)


In Part 1 of this tutorial, you learned how to make a basic web button in its normal state. In Part 2, you learned two methods for creating a transformed mouse-over state for your button. In Part 3, you will be creating web-ready versions of your Normal and Mouse-over state images. Then I will show you how to create a basic web page in Adobe Dreamweaver, and how to add your two-state rollover button to the page. Let’s get started!

Using the Slice Tool to Create Web-ready Images

After completing Parts 1 & 2 of this tutorial, we have images for our two-state button. However, we need to create a web-ready version of these images before we can use them on a web page.

  1. Open the Photoshop file for your rollover button.
  2. Click on the Layer Comps panel, and make sure your Normal State layer comp is active.
  3. Click on the Crop tool to open the flyout, and then click on the Slice tool. You can also use the keyboard shortcut by pressing Shift+C to cycle through to the Slice tool.
  4. In the Layers panel, if you have a white or black background, click the eye icon next to the Background layer to turn it off; this will ensure the button is on a transparent background.
  5. Starting at the top left corner, click and drag the Slice tool around your normal state button. Try to get the slice boundaries as close as possible while still including the entire button. If you couldn’t quite get the boundaries right, you can press Ctrl plus the + key to zoom in, and use the small square handles to make fine adjustments. When you are done, your image should look similar to the screenshot below.


  6. In the menu bar, click File > Save for Web and Devices. This opens the Save for Web and Devices dialog. Your original image is displayed, along with several possible choices you can select to optimize the image for web delivery. The default is usually a JPG setting, but we need to maintain the transparent background behind the button (even if only a fraction is showing). In the top right corner of the dialog box, locate the Preset dropdown menu. Click to open the dropdown, and select PNG-24. See the screenshot below if you need help locating settings.


  7. Click Save. This opens a save file dialog. The default save name is the name of your Photoshop file. Keep the default; you’ll see why in the next few steps. Make sure your file is being saved in the same directory as your Photoshop file, then click Save again.
  8. Open the directory or folder where you saved your Photoshop file. You will see a new subfolder named images. This is automatically created when you use Save for Web and Devices to save image slices. Photoshop saves all your slices, which means you have your button image along with all the blank white spaces which were around the button. Unless you select each slice in the Save for Web and Devices dialog and specify settings, all the slices besides your button will be in the default JPG format. For this tutorial, you can just delete all the blank white slices. The screenshot below shows an example of what you will find when you first open your images folder.


  9. Change the name of your Normal State button. In my example, I changed the name of my Normal state image to “RolloverSample1_Normal”.
  10. Go back to your Photoshop file. Switch to the Layer Comps panel, and make the Mouse-over State layer comp active.
  11. Switch back to the Layers panel, and you will see that all the layers for your Mouse-over state will now be visible. You will also see that the slices you made for the Normal state are still there.
  12. In the menu bar, click File > Save for Web and Devices again. In the Save for Web and Devices dialog, select the PNG-24 preset for your Mouse-over state image, as you did for the Normal state image in step 6. Follow steps 7 & 8 for the Mouse-over state image.
  13. Change the name of your Mouse-over state image. In my example, I changed the name of my Mouse-over state image to “RolloverSample1_MouseOver”.
  14. Once you have your two state images in PNG format, you can move them out of the images folder and into the folder where your Photoshop file is stored.

Continued on Page 2…