Creating Rollover Buttons

Requirements: Adobe Photoshop 6.0, Any html/text editor such as NoteTab Pro or Notepad.

Before we get started, a quick note on Layer Styles v/s Filters. Most Photoshop people love playing with filters. I personally love Alien Skin software. However I strongly recommend using filters both sparingly & wisely. Overuse of filters can make one's work look like it was done by some bozo who just got a new toy. Filters, once applied & saved, cannot be undone. That image or layer is forever embossed, textured, beveled... whatever you did to it, you're stuck with it unless you want to recreate it from scratch. Layer Styles leave the image in it's original state and simply apply an effect to that image. If you don't like what you did 6 months ago it can always be edited. Even more importantly, Layer Styles have many parameters that ImageReady can change incrementally at your specification to create animations, (we'll get into this in another tut). 'Nuff said.

On with the tut. In Photoshop, hit Ctrl+N and create a new file 30px high by 60px wide and name it mybutton. Resize the window nice & big and hit Z to select the Zoom tool and zoom that puppy. Double click the text on the first layer and rename it Bkgd. Hit D to reset your foreground & background colors to black & white. Fill this layer with white by hitting Ctrl+Backspace.

Hit Shift+Ctrl+N to create a new layer and name it Button. Click & hold over the Marquee tool and select the Elliptical marquee. Starting at the top left corner, click & drag to the lower right so that your selection stops 2 px away from the bottom & right edges. Nudge your selection with the arrow keys down and right 1 px so that it is centered, 1px away from all 4 borders. Go to Select/Modify/Contract and enter 3 px. Set your foreground color to #BE0000 and fill the hit Alt+Backspace to fill your selection with the dark red.

With the selection still active, nudge it down and right 1 px. This is for a more subtle rollover. For a more pronounced rollover effect nudge down and right 1 more pixel. Hit Shift+Ctrl+N for a new layer and name it Over. Set your background color to full red (#FF0000) and hit Ctrl+Backspace to fill the selection with the background color. Now hit Ctrl+D to deselect.

Turn off the Over layer, double click the Button layer to open the Layer Style palette and choose Drop Shadow and set as shown here.

Next, choose Bevel and Emboss with these settings.

Now right click the Button layer and choose Copy Layer Style, right click the Over layer and choose Paste Layer Style. Open the Drop Shadow palette on the Over layer and change the settings as shown here.

Click and drag the Over layer to the Creates new layer button at the bottom of the Layers palette, rename the new layer Depress, and drag it below the Over layer. Set the fill to zero% and drag the Bevel and Emboss style to the trashcan leaving only the Drop Shadow style for this layer. Open the Drop Shadow palette. Very important! Uncheck the Use global light box for this layer style and then apply these settings.

Now let’s add a little text. With the Button layer selected, hit T to select the Type tool . Hit D to reset your Foreground & Background colors to black & white and click in the middle of the image. Use the below text settings and don’t worry about placement yet. For this tut let’s just use something short. Type “Out”. Click your new text layer and hit V to select the Move tool . Use the arrow keys to nudge your text into the center of the Button image. Your text should be on the layer above the Button layer. Name this layer Text out. Click and drag Out layer down to the Creates new layer button to duplicate it. Rename the new layer Text Over, click and drag it up to the top above the Over layer. Hit V and nudge this layer down and right 1px, (or 2 if you nudged the Over layer 2px down & right of the Out layer). Hit T to choose the Type tool, highlight the text on Text over layer and change the color to white and type “Over”.

Your Layers Palette should look like this now.

Create a master folder & name it anything. Within this folder, create another folder and name it images. Hit Ctrl+S and save your mybutton.psd file in the first folder. Now with the Text over, Over & Depress layers turned off and all others on, hit Shift+Ctrl+Alt+S and save this file as mybuttonout.gif in the images folder.

Turn the Text out and Button layers off and turn on the Text over, Over & Depress layers. Again, hit Shift+Ctrl+Alt+S and save this file as mybuttonover.gif also in the images folder.

Your finished mybuttonover.gif & mybuttonout.gif images should look like these:

Out       Over

Bringing it to Life

Open Notepad or any HTML editor, (I swear by NoteTab Pro), insert the following source and save as an html file or download my htm file HERE. Right click, choose "Save Target As" and save in your Master folder. If you want to look at my mybutton.psd, you can download it HERE.

Key text highlighted: Red= filepath/name.gif, Yellow= Rollover "name"

<html>
<head>
<title>My First Rollover</title>
<meta name="keywords" content="">

<script language=javascript type="text/javascript">
<!-- Hide from older browsers
// Preload all button images

button_over=new Image;
button_over.src="img/mybuttonover.gif";
button_out=new Image;
button_out.src="img/mybuttonout.gif";

// swap function
function swapimage(simage, snewimage)
{document.images[simage].src=eval(snewimage+'.src');}
// End hiding from older browsers -->
</script>

</head>

<body>

<!----- My First Rollover ----->
<table border=0 cellpadding=0>

<tr>
<td>My First Rollover button!</td>

<td>
<a href="INSERT YOUR ANCHOR REFERENCE HERE" title="HOVER TEXT HERE"
onmouseover="swapimage('button','button_over')"
onmouseout ="swapimage('button','button_out')">
<img src="img/mybuttonout.gif" border=0 name="button"></a></td>
<td><b>I ROCK !</td>

</tr>
</table>
<!-- END My First Rollover -->
</body>
</html>

Your finished rollover should work like this:

* NOTES: I like to minimize use of upper case text in my source. This is strictly a matter of preference. In the above script there are two occurences of the word "Image" that are capitalized. If they're not, the script won't work.

Any questions or comments, please email me.