Search Query

Photo Web Buttons

A common misconception about Adobe Photoshop is that it is only useful for retouching and working with photographs, but Photoshop is chock full of great tools with a variety of uses. This month I will discuss the art of making web site buttons using Photoshop and its companion program Image Ready. Image Ready 2.0 is included on the Photoshop 5.5 CD and the two programs are tightly linked together. Both have a button at the bottom of the Tools palette to open the current image in the other program.
My goal is to make a button for the "Family Photos" section of my web site that "pushes down" when the mouse moves over it. To make the button, first determine the size that you will want it in your web site, in this example my button is 50 x 50 pixels. Then, take a scanned photo from this section of the web site, and crop it down to the proper size. Use the cropping tool and in the Options palette, set it to a fixed target size (figure 1).
Fig. 1
Now, make this into a layer by double-clicking the "Background" layer in the Layers palette. In my example, I’ve named this layer "Button Down." Next, I want to give the button a beveled effect. Select Effects: Bevel and Emboss from the Layer menu and experiment with the settings, but be sure to click the down button (figure 2). Duplicate this layer (renaming it "Button Up"), and edit the effect (by double-clicking the effect icon in the layer palette) and click the up button.

Fig. 2

Next, I want to add some text to the button. With the text tool, add the word "PHOTOS" in gray to the button. Duplicate this layer, edit the text making it white (figure 3). This will make the text appear to light up when the mouse passes over. Now that I have all of the parts together, I have to take the file into Image Ready. Do this by hitting the button on the bottom of the Tools palette (figure 4).

Fig. 3

Fig. 4

Bring up the Rollover window (from the Window menu choose Show Rollover). For the ‘Normal State’ of the button, turn off the "Button Down" and white text layers in the Layers palette. (figure 5). From the Rollover palette dropdown menu, select New State and then turn off the "Button Up" and gray text layers and turn on the others (figure 6).
Fig. 5
Fig. 6
The final step is to save off the button files for the web. Select Save Optimized As from the File menu. Image Ready will not only export the two individual button files, but will also generate HTML code for the button as well.

Final Button

Paul Vaughn is the Director of Digital Services at River City Silver, the premiere photographic and digital imaging laboratory in San Antonio and South Texas. Mr. Vaughn is a graphic artist with a couple of buttons on his web site at, he can be contacted at

|| Home || Graphics Guy || Mac Guy || Gallery || Payment || ||

This site and all images and text contained in it are ©2006 Paul Vaughn.
(Unless otherwise noted)
Questions? Problems?