Page 2

I use lots of screen shots in my tutorials,
so please be patient and give these pages time to load.

Save your image as Menu.psp in the folder you created.   Saving as a psp file will preserve the layers and allow you to add/remove text later.

Now we’re ready to add the navigation to your menu.

Create a new layer and name it text.  We will use this layer to put names on our buttons.

Click on the text tool and line up the crosshairs in the center of your button and at the bottom of the button you are typing the name for (PSP7 places the text above the crosshairs when you type a single line) and use the following settings:

Name: Arial
Size: 16
Kerning: 17
Leading: 0
Check the center text box
Click on the “Standard text” button and change the Fill color to black
(or the color of your choice)
Check Floating and Antialias

Type the word you would like on your first button and choose OK

Adjust your text if needed (use the shift key with the arrows to make minor adjustments), then select none (Ctrl+D)

You can add a drop shadow at this point if you’d like.

NOW WOULD BE A GOOD TIME TO SAVE YOUR FILE!

Click File/Export/Image Slicer and the Image Slicer box will open.  As you can see, the top button is not visible, because our image is too high for the window.

Click on the little hand (pan tool) and click on the image, while holding down the left mouse button, drag the image down until you can see the top button.

Click on the grid button (it looks like the tic-tac-toe board) then click on your image.  The Grid Size box will open.   Enter Rows: 16 (or one row for each button you made if your size differs from mine) and Columns: 1.  Click OK and you will see the top button outlined in green – this is the active “slice’ of your image.

In the URL box enter the web address for the page you want to link to.  In the Alt. Text box you can type whatever you’d like to show on the screen when the mouse hovers over this button on your web page.  

The target box allows you to choose the target frame or window in which your new page will open.  You have four choices:

•  _blank loads the image in a new browser window.

•  _parent loads the image in the parent window or frameset of the link. If the link does not point to a nested frame, the image loads in the full browser window.

•  _self loads the image in the same window or frame specified by the link.

•  _top loads the image in the full browser window and removes all frames.
  

Click on each button and fill out the information for each link.

Choose JPEG for your format and click on Optimize Cell.  Under the Quality tab you can set the compression value from 1 to 99. The higher the number the faster your graphic will load; however, you really sacrifice quality.  I leave mine at 1 because I prefer better quality.  Under the Format tab I have mine set to standard.  The Download Times tab will show you how long it will take your image to load at different speeds.

You can click on the “eye” to preview your menu in your browser.  While in your browser, click on View/Source File to see the htm code created for your image map.  You can copy this code now and paste it into your web page design program.

Click on Save Settings to save your image slicing info.  Save it in your "Menu" folder and you can simply reload it if you choose to make changes to your original PSP image later.  Now click the Save button and save as "Menu.htm" in your Menu folder.  PSP will save the htm file and all the images needed for your menu.

Click here to see my working menu.

All Art Work & Graphic Designed by Cathy
Copyright © 1999 - 2003 by Cathy. All rights reserved.
Revised: April 06, 2008.