|
|
 |
 |
|
| | / | | |
| |
|
|
 |
Labeling Rollover Buttons with Photoshop
Rollover buttons (aka "highlighted buttons", as well as thousands of other names) are probably one of the most common applications of Javascript for web pages. In this tutorial, you'll learn how to label these types of buttons.
To begin with, let me explain some basics about rollovers so you can understand what we're doing here. A rollover button is a button that appears to "light up" when you hover your mouse cursor over it. To accomplish this effect, each rollover button has two images that show what the button looks like in each of its two "states": over and off. With the mouse cursor away from the button, you see the image for when the button is off. When you hover your mouse cursor over the button, the image is switched with the over image.
That's basically all there is to rollover buttons. Now that you understand why we have two images for each rollover button, we can go on to labeling them...
- Locate the two rollover images
First, locate the two images for the rollover button you wish to label. If you are using one of our templates, you can usually find these in a subfolder named "i" or "images" once the template is unzipped. In this example, the images are convieniently named b1.jpg (the off state) and b1-over.jpg (the over state).
- Open both of the images in Adobe Photoshop
Drag and drop the two images into Adobe Photoshop to open them.
After the images are opened, I suggest lining up their windows in the same manner as I have done here. This will help you get an idea of what the button should look like when turned on and off.
- Choose your text attributes
Go to Window / Show Character to bring up the Character Palette. Pick whatever font attributes suit you. For this particular example we'll stick with something conventional.
- Enter your label on BOTH images
Select the Text Tool (press T or select the button circled on the toolbar). Click somewhere on the off image and enter your label. After you've done this, enter the same label on the over image. Aligning the labels doesn't matter at this point, so just look out for typos.
You can also apply any layer effects you want here (such as bevel and drop shadow) by double-clicking the text layer in the Layer palette. Also, unless you know what you are doing, make sure you apply the effects to the text layers on both images.
- Position the label for the off image
This is the tricky part. While there are times when you don't need to exactly align the labels (perhaps for a certain effect you are trying to achieve), most of the time you do. Select the off image window, select the Move Tool (press V or select the button circled on the toolbar) and view the Info palette (if this is not visible, go to Window / Show Info). Move the text layer to where you would like the label to be and, once you've found where you'd like to place it, take note of the X and Y values before letting go of the mouse button.
- Position the label for the over image
Select the over image window. Using the Move Tool, move the text layer around until the X and Y values are the same as the ones from the off image. This will ensure that the labels for both images are at the same location on the button.
- Save both images
Go to File / Save (or press CTRL+S) on each image to save your changes (you may want to go to Layer / Flatten Image before saving).
- Check out the template
The first rollover button should now be correctly labeled and operational.
And there you have it. You should have one labeled rollover button. Repeat these steps with the other buttons and you're all set.
|
|
|
|
|
 |
|
