 Simple Navigation Buttons
One of the new web features in PSP 7 is the Image Slicer. This tool gives you the ability to create rollover images for web pages. For this tutorial we will be using this new feature to create a simple navigation menu. The tutorial is actually broken down into two parts—the creation of the navigation buttons, and how to use these buttons with the image slicer to create a mouseover effect. If you want to, you can skip directly to the Mouseover Tutorial—images are provided.
Create Buttons
The button Preset Shape that we will be using was part of the Paint Shop Pro CD installation. If you bought the downloadable version, you may need to download this shape, and other extras, from the Jasc site.
These particular buttons, due to their semi-transparent design, also work much better if you are creating them for use on a light background.
Open a new 135 x 35 image with a white background. I often use a white background so that I can clearly see what I'm working on, but if you would like to create the button on a different color you can flood fill the "Background" with the chosen color, or, if your page uses a background image, you can flood fill with a pattern that matches.
| Figure 1 |
|---|
 |
Activate the Preset Shapes  tool and choose the "Button 005" shape. Make sure that "Retain style" and "Create as vector" are checked in the Tool Options palette. Draw the button (leave a small amount of space at the top and bottom) and then choose Objects > Align > Center On Canvas.
Once the button is centered, right-click and duplicate this layer. Expand the duplicate layer by clicking the plus sign, locate the "Drop shadow" object, and click on the glasses icon to hide it.
| Figure 2 |
|---|
 |
Zoom  in on the image to see everything clearly. Activate the Object Selector  , Ctrl + D to cancel any active vector selections, and then click on the image so that the top button is selected. Once the button is selected, hold the Shift key and use the arrow keys on the keyboard to move the duplicate button slightly downward and to the right. The edge of this button should align with the edge of the drop shadow on the underlying button. I know this seems strange, but this offset will make the button look like it is pressed when the mouseover effect is applied.
| Figure 3 |
|---|
 |
Hide the "Background" and the bottom vector layer. Change the fill style to pattern, and choose the button image as your pattern fill. Make sure the size is set to 100% and the angle is set to 0.
Create a new 135 x 175 image. Create a new raster layer for this image, activate the Flood Fill  tool, and fill. Voila! Five perfectly aligned, perfectly spaced, buttons! See Figure 3.
Just remember that these buttons will be slightly offset from center.
Right-click on this layer and choose "Rename" from the context menu. Rename the layer "Mouseover".
| Figure 4 |
|---|
 |
Go back to the one-button image. Hide the top vector layer, and make the bottom vector layer visible. Change the button pattern fill to reflect these changes.
Create another new layer for the five-button image, then flood fill. The image will look slightly awkward with the buttons overlapping and offset, but this is normal. See illustration on the left.
Right-click and rename the layer "Default".
If you want to have it available for future use, save the one-button image in PSP format, and then close the image. This isn't really necessary because the button has been saved as a Preset Shape, but you may want to keep the two layers and the layout used for the buttons in this tutorial should you wish to quickly recreate them.
Colorize
Use Colors > Colorize to change the color of the buttons on each layer. Use any colors that you prefer. The colors should either be different hues or shades to distinguish the mouseover buttons from the default buttons.
Text
Hide the "Default" layer, then activate the "Mouseover" layer by clicking on the layer button in the layer palette. Activate the Text  tool, place your cursor over the top button, and click on the image. When the text dialog box appears, choose a font and font (fill) color that will work well with your buttons. Make sure that the "create as vector" option is checked. Type "Home" or some other label for the top button and click "OK". Repeat this process to add text to the other buttons. This will result in a new vector layer that contains the text.
| Figure 5 |
|---|
 |
Activate the Object Selector . Right-click on the image and choose "Select All" from the context menu. Once selected, right-click on the image again and choose Align Object > Horizontal Center. With all still selected, use Shift + Arrow key combinations to center the text horizontally on the buttons (this is necessary because the align function will center the text relative to the canvas, rather than to the width of the buttons). Right-click on the image again and choose "Select None" from the context menu, then click carefully on each individual word and use Shift + Arrow key combinations to align each word vertically.
Duplicate this layer and drag the duplicate above the "Default" layer. Hide the original text layer and the "Mouseover" layer and make the "Default" layer visible. Activate the Object Selector , and then drag a selection around all of the visible text. Once selected, click on the "Properties" button in the Tool Options palette and change the text color to match, then, while the text is still selected, use the Shift + Arrow key combination to align this text with the default buttons. Remember that the default and mouseover buttons are not exactly aligned, so this step is necessary to center the text on the buttons properly.
Now, in one file, we have both versions of the buttons that will be needed for the mouseover. You may want to save this image in PSP format at this point.
 
| 
