Part 2 of the tutorial how to make graphic rollover buttons for side navigation menus

Bookmark This Page | Click here for more PSP Tutorials

Part 2 Rollover graphic navigation tutorial. Click here for part 1

We are now ready to apply your graphic image to the "button template" you have created.

Open your image in Paint Shop Pro (open/browse/locate file)

Copy your image to the clipboard. (Edit/copy)

Click on the "button template" previously made to select.

Paste the image on the clipboard as a new layer to your button template.
(Edit/Paste/as new layer.)

Select the toggle layer palette and adjust "layer 1" until the graphic begins to fade to grey and the lines become visible. Play around with this until you achieve your desired effect. (You can also use the Layers/blend mode for this step.)



Merge all layers. (Layers/Merge/Flatten all)

If you want a nice straight, flat line to place your rollover nav bar against the left side of screen. Click the selection tool and draw a rectangle selection on your image.

Copy the selection to your clipboard (ctr+c or Edit/Copy) then paste your
selection as new image.

Apply your text to each button portion where you want.

You now have to slice the image into separate pieces to apply the rollover effect.

If you have not got a picture slicer, I recommend using
shoestrings picture dicer which you can download for free.


Adding Rollover Effect to Buttons.

Once you have cut out the buttons,

Open each button in PSP and make them 16 million colors.
(Colors/Increase color depth 16 million)

You then apply a cutout filter to each button that you want to make into a rollover, (Image/Effects/Cutout)

Use the following Cutout Settings:

Fill Interior Color = Not checked
Shadow Color = Black
Opacity = 80
Blur = 10
Vertical / Horizontal Offset = 5

Save each button as "B" and you are finished.
(For example my originals are roll001.gif and I save the rollover as roll001b.gif)

Apply the image names to the Graphic Rollover Navigation Javascript (Place in links. Change graphic names to reflect your images) or use your html editor to apply the rollover effect.