How to Create a Rollover Button in CS2
Adobe Photoshop CS2 and its ImageReady companion program are powerful tools for users who want to take a visual approach to Web design. Users can create JavaScript rollovers without ever having to enter any code by combining the graphic design capabilities of Photoshop and the behavior setting capabilities of ImageReady. The key to successful rollovers lies in understanding layers in Photoshop.
Other People Are Reading
Instructions
-
Creating your Button
-
1
Open Photoshop and create a new document by selecting "File > New" from the application menu. Set the size of your document and click "OK."
-
2
Select the "Type Tool" from the Tools Panel to the left of your canvas and click anywhere on the canvas to create some point text for your button ("about" or "portfolio," for example). Set your desired font settings in the Tool Options Panel above your canvas and type out your button text. You can move this text around by moving your cursor away from the text itself and then clicking and dragging in the direction you want to move it.
-
-
3
Duplicate your text layer by clicking and dragging it to the "Create New Layer" icon in the "Layers" palette to the right of your canvas. The icon looks like a square, dog-eared page.
-
4
Select the "copy" layer you just created and right-click (Ctrl + click on a Mac) on the layer title in the "Layers" palette. Select "Blending Options" from the resulting flyout menu. This will open a "Layer Style" dialogue box.
-
5
Click on the word "Drop Shadow" in the "Styles" column at the left of the dialogue box. Click the "Preview" checkbox at the right of the dialogue box and adjust the settings of the drop shadow as desired.
Setting Rollovers in ImageReady
-
6
Select the ImageReady Icon at the bottom of the Tools Panel. This launches a separate program from Photoshop that comes with it to optimize Photoshop images for the Web.
-
7
Select the "Slice Tool" from the Tools Panel at the left of your screen and click and drag a slice around your button from the top-left to the bottom-right.
-
8
Select the "Web Content" palette at the right of your screen and click on your button.
-
9
Mouse down to the "Layers" palette, where the different layers of your button are displayed. Click on the eye icon next to the top layer, which contains the drop shadow of your button. This will disable the visibility of that layer so that only the non-drop shadow version of your button is displayed on your Web page when the mouse is not hovering over it.
-
10
Return to the "Web Content" palette and click the dog-eared page icon at the bottom to create a new rollover state. The word "over" will appear next to the new state, which means that the appearance you select for it will be displayed when the mouse is hovering over it on your Web page.
-
11
Return to the "Layers" palette and turn off the visibility of the non-drop shadow layer by clicking on the eye icon to the left. Turn on the visibility of the drop shadow layer.
Linking Your Rollover
-
12
Select "Window > Slice" to display the "Slice" palette at the right of your screen. Select this palette.
-
13
Enter a name for your button in the "Name" field and enter a URL address for your rollover to link to when people click on it.
-
14
Select "File > Save Optimized As" from the application menu and create a name for your rollover. Select "HTML and Images" from the "Format" dropdown and click "Save".
-
1
Tips & Warnings
This is a very basic rollover, to show you how one is created in Photoshop without getting too bogged down in different aesthetic qualities. You are of course free to make any types of rollover buttons you'd like. Try to experiment with some of the different layer styles and blend modes, and perhaps use some of the shape tools such as the "Rounded Rectangle" from the Tools Panel to create button backgrounds. These steps can also be repeated and applied to each layered image or button on a Web layout.
