Tutorial: 5. Changing image-based menu options in Paint Shop Pro
Level: Intermediate. Published on 3 February 2003 in How to change the menu options
If you're using a PageKit with image-based menus, and you have Paint Shop Pro, read this tutorial to learn how to edit them.
This page will show you how to change an image-based PageKit menu by editing the PSD file in Paint Shop Pro. We'll assume that you already know how to slice PSDs - if you don't then check out the How to slice an image topic.
In this example, we'll edit the Footdown PageKit and change the menu option called "guests" to "music":
If you would like to work through this example, unzip the Footdown PageKit files and PSD Zip files to your hard drive somewhere (you can download the PageKit and PSDs here).
1. Open the menu PSD
For Footdown, we've supplied you with a separate PSD containing the menu options for your convenience. Some of the PageKits will have separate menu PSDs like this; others will have the menu in the main PSD. Either way, you'll need to open up the PSD that contains the menu.
Find the folder that you created when you unzipped the footdown_psd.zip file. Open the folder and then open the file called menu.psd in Paint Shop Pro:
If necessary, turn on View Guides and Snap to Guides (see Slicing in Paint Shop Pro if you need help with this).
You've probably noticed that this PageKit contains rollover menus - each menu option changes to a "blurred" version as you move the mouse over it. This means that we need to create two new images for our "music" menu option - one normal, and one blurred.
2. Create the new menu option
Let's create our "music" menu option. As this is an old PageKit, the type layer is a "static" bitmap layer (it doesn't have a letter "A" next to it), so we'll need to create a new type layer for our new menu option.
At the time of writing, the current version of Paint Shop Pro, version 7, doesn't support Photoshop 6's vector type layers. However, later versions might support them. If you see a letter "A" next to the menu layer then you may be able to edit the type layer directly. See Editable type layers in Photoshop to get the general idea, then come back to this page.
The first thing to do is open and read the readme.html page inside the footdown folder. This file usually contains information about the font used to create the menu options. In this case the font appears to be Arial, and the size is 10 pixels.
Now we can create our new menu option. Select the Text Tool in the Tools palette:
Click in the centre of the menu PSD. You will see the Text Entry dialog box appear.
Choose Arial for the font. Select Bold (click on the big B button), and set the Size to 7 (for some reason Paint Shop Pro's font sizes are different from Photoshop's - you may need to experiment to get the right size!).
In the "Enter text here" box, type the word music:
Click the Standard text button to activate just the Fill Style, then click on the Fill box, as shown above, to bring up the colour picker. Enter #FFFFFF in the HTML code box to select a white fill colour, then click OK:
Then click OK in the Text Entry dialog box to place the text in the document:
You should then have your new "music" menu option in its own Type layer in the image:
3. Position the menu option
Now we need to move our new menu option so that it sits on top of the "guests" option. First, turn off Snap To Guides by clicking on View > Snap To Guides, so that the icon next to the menu option is no longer highlighted:
Next, click on the spectacles icon in the "menu copy" layer in the Layer palette to hide the blurred menu layer - this will make it easier for us to position our new option:
Also, you may want to reduce the Opacity of the "menu" layer to about 50% so that you can see what's going on more easily:
Now let's move the "music" menu option. Click on the Move tool in the Tools palette (or press the V key):
Now click on your new "music" menu option layer in the Layer palette to select the layer:
Drag the "music" layer on top of the word "guests". Make sure the bottom of the "music" text sits directly over the bottom of the "guests" text, and that "music" is centered between the two black guide lines (you may want to zoom in a bit so you can position it exactly):
Good stuff! Now let's make the blurred, "rollover" version of the "music" menu option.
4. Create the rollover effect
Hide your new "music" layer for a moment by clicking on the spectacles icon in the Layers palette. Then, hide the original menu layer, and display the "menu copy" layer instead:
Notice how the rollover effect is created by blurring the options horizontally. This is achieved with the Motion Blur effect. Let's apply this same effect to our new "music" option.
Hide the "menu copy" layer again, and display the "music" layer, by clicking on the spectacles icons. Then click on the "music" layer in the Layer palette to select the layer:
Next, we need to duplicate our "music" layer to create our rollover layer. Select Layers > Duplicate:
Select Layers > Convert to Raster Layer to rasterize your new duplicate layer - we need to do this so that we can apply the Motion Blur effect:
Then select Effects > Blur > Motion Blur...:
In the Motion Blur dialog box, set the Direction to 90 and choose an Intensity that matches the original blur effect - a value of 10 pixels is probably about right for this menu. Provided you have Auto Proof selected (click on the down arrow next to the eye in the dialog), you can see the effect in the PSD window:
When you're happy with the result, click OK to create the blur effect.
We have now created our new menu option! The next step is to save the 2 slices that represent the "normal" and "rollover" images for our menu option.
5. Create the slices
Now that we have our new menu option in our PSD, we need to export the GIF images for the "normal" and "rollover" states, so that we can include them in our website. If you're not familiar with the concept of slicing, you may want to browse through the How to slice an image topic, then come back to this section.
As we already have our "rollover" state displayed in the PSD, let's create the rollover slice first. Turn Snap To Guides back on (View > Snap To Guides), then choose the Selection tool:
Make sure the Selection type is Rectangle, and that Feather is 0 and Antialias is not checked:
Duplicate the image (Window > Duplicate).
Working on the duplicate image, drag from the top-left corner of the "music" slice to the bottom-right corner:
Then crop the image (Image > Crop to Selection), and use File > Export > GIF Optimizer to save the GIF image. Call the image music_on.gif and save it in the images folder that's inside the footdown PageKit folder that you unzipped earlier.
Good! Now we need to create the "normal" version of the menu option. To do this, click on the spectacles icon for the duplicate "music" layer to hide the rollover blur effect:
Now save this image (using File > Export > GIF Optimizer) in the images folder as music_off.gif.
Excellent! You have now created your new menu option. The final step is to alter the HTML pages to include this option in the menu on the page.
6. Altering the HTML pages
We now need to edit the Web pages that make up the PageKit to reflect our new menu option images, music_off.gif and music_on.gif. You can also find more information on this topic in the help page How to modify the JavaScript rollovers.
Find the file index.html in the footdown PageKit folder on your hard drive, and open it in your favourite text editor. As we're replacing the menu option that was called "guests" with the one called "music", and the new menu images are the same size as the old ones, all you need to do is find every occurrence of "guests" in this page and replace it with the word "music". In other words, replace the following lines:
guests_on = new Image ( 81, 19 );
guests_on.src = "images/guests_on.gif";
guests_off = new Image ( 81, 19 );
guests_off.src = "images/guests_off.gif";
<td>
<a href="guests.html" onmouseout="button_off('guests');
return true" onmouseover="button_on('guests');
return true"><img src="images/guests_off.gif"
border="0" name="guests"></a></td>
with:
music_on = new Image ( 81, 19 );
music_on.src = "images/music_on.gif";
music_off = new Image ( 81, 19 );
music_off.src = "images/music_off.gif";
<td>
<a href="music.html" onmouseout="button_off('music');
return true" onmouseover="button_on('music');
return true"><img src="images/music_off.gif"
border="0" name="music"></a></td>
Make these changes, then save index.html and open it in a Web browser (you can usually double-click on the index.html icon to do this). You should see your new menu option on the page, complete with rollover effect:
Repeat this search-and-replace process for the other pages in the PageKit (about.html etc) to update the menu in the whole PageKit.
Congratulations! You've created your own menu option! You may also want to have a go at creating a new title image - see about.gif for an example - that you can use on your new "music" page. Take a look at titles.psd in the unzipped Footdown PSD folder. You should be able to work it out.
Sometimes you'll find that you just can't create the exact font or effect used for a menu. The best solution here is to recreate all the new menu options using your own font and style. It means that you'll have to re-export all the menu option image slices, but it guarantees a consistent result.
Practice on a few more PageKits, and try adding new menu options as well as replacing existing options. The techniques for creating the menus will vary from PageKit to PageKit, but the basic principles are the same. Have fun!
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!