Tutorial: 3. Changing image-based menu options in Photoshop
Level: Intermediate. Published on 20 January 2003 in How to change the menu options
If you're using a PageKit with image-based menus, and you have Photoshop, 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 Photoshop. 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 Photoshop:
If necessary, turn on View Guides and Snap to Guides (see Slicing in Photoshop 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 "T" next to it), so we'll need to create a new type layer for our new menu option. (If you're working with a newer PageKit that does have editable type layers, then read Editable Type Layers in Photoshop 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. In this case, our menu text is white, so choose white as the Foreground Color:
A quick way of doing this is to press D on the keyboard (for "Default Colors") and then X on the keyboard, to swap round the defaults so that white is the foreground and black is the background.
Next, select the Type tool in the Tools palette:
Choose Arial for the font. Select Bold instead of Regular, and set the Size to 10 pixels:
Then click in the centre of the menu PSD and type the word "music":
Click on the tick button to place the type on the PSD, or press Control+Enter (PC) or Command+Enter (Mac):
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 (or View > Snap To Guides) so that the check mark is no longer visible:
Next, click on the eye icon in the "menu copy" layer in the Layers 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 the "music" layer in the Layers 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 blue 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 eye 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 filter. 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 eye icons. Then click on the "music" layer in the Layers palette to select the layer:
Next, we need to duplicate our "music" layer to create our rollover layer. Select Layer > Duplicate Layer...:
In the Duplicate Layer dialog box just click OK:
Then select Filter > Blur > Motion Blur...:
Photoshop will ask you if you want to rasterize or render the type layer - in other words, turn it into a bitmap layer. You need to do this in order to create the blur effect, so click on OK:
In the Motion Blur dialog box, set the Angle to 0 and choose a Distance that matches the original blur effect - a value of 10 pixels is probably about right for this menu. Provided you have Preview selected, 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 or View > Snap To Guides), then choose the Rectangular Marquee tool:
Duplicate the image (Image > 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), and use File > Save for Web 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 eye icon for the "music copy" layer to hide the rollover blur effect:
Now save this image (using File > Save for Web) 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!