How to Create a Rollover Button
Rollover buttons are used for menus, images and image maps on web pages. When you place your mouse over a rollover button, it changes. Depending on its purpose, it might change color, text, size or image. In this exercise, we will explore how to create rollover buttons using Adobe Image Ready 7.
Other People Are Reading
Instructions
-
-
1
Open Adobe Image Ready and select "File/New" from the menu. In the "New Document" dialog box, type in a width and height (in pixels), and hit OK. Select the foreground color from the toolbox, and choose a color from the "Color Picker" dialog box for your button. Hit OK.
-
2
Select the Rectangle tool from the toolbox and draw out your button onto the image screen. The rectangle you created will appear on its own layer in the Layers palette. Check that the rectangle layer is selected, and click on the "Add a Layer style" button on the bottom of the Layers palette. Select "Bevel and Emboss" to make your rectangle look more like a button.
-
-
3
Select the Text tool (T) from the toolbox. Pick a font, size and color from the Text options bar for your text, and add some text to your button. Select the Move tool (V) from the toolbox to align your text on the button. The text you created will appear on its own layer. Make sure it's above the rectangle layer in the Layers palette.
-
4
Create a second button by selecting the rectangle layer from the Layers palette and dragging it to the "Create a New Layer" button. A duplicate of your first layer will appear in the Layers palette. Select the layer for the second button, and click on the thumbnail. Change its color in the "Color Picker" dialog box, and hit OK.
-
5
Select the newly duplicated layer from the Layers palette, and double-click on layer thumbnail for the duplicated rectangle. Choose a different color for your rollover button from the "Color Picker" dialog box, and hit OK.
-
6
Trim any extra space from your image by selecting "Image > Trim." In the "Trim" dialog box, select "Transparent Pixels" for "Based" and place a check mark beside top, bottom, left and right. Hit OK. Any extra space surrounding your rectangle should now be trimmed. If it isn't, hide the background layer in the Layers palette and try again.
-
7
Select "Windows > Rollover" from the menu to open the Rollovers palette. Click on the layer you want to add a rollover effect to from the Layers palette, and click on the "Create Layer Based Rollover" button from the Rollovers palette.
-
8
Select the "Over State" layer from the Rollovers palette, and make sure the rollover button layer is visible in the Layers palette. The thumbnail of the "Over State" button in the Rollovers palette will change to the rollover image you selected from the Layers palette.
-
9
Preview your work by selecting "Preview Document" (V) from the Tool box. Save your Image Ready file (File > Save) as a .psd in case you need to edit it later. Also, save your file as a web page by selecting "File/Save Optimized As" from the menu. Within the "Save Optimized As" dialog box, choose "HTML and Images (*.html)" under "Save As Type." Adobe Image Ready will generate your JavaScript code for the rollover button.
You've just created a rollover button.
-
1
