Select other psp 5 tutorials from the menu below
Creating Menus/Navigation Bars
The following tutorial is to show you the basics of creating menus (navigation toolbars) for navigating your site.
It is always a good idea to have a consistent overall design and a toolbar can spiff things up a bit.
I will provide direction on how to create two unique toolbars
In the future, I will be adding a page on how to create mouseover toolbars.
The first toolbar is a "remote control" type toolbar. Try to create toolbars no wider then
100 pixels and no taller than 350. This way it should give you enough room for info in the main area and also you want to avoid having visitors scroll down to view all the links.
- Create a new image 110 x 340/ white bg/ 16 million colors
- Add new layer
- Select the text tool and create a circle with the Webding font/letter n/ size=72
- Select edit copy/edit paste as new layer ( you should now have 2 circles in separate layers)
- Add new layer
- Select the shapes tool/rectangle/filled/outline width=1 and create a rectangle as wide as the middle of the circle and as tall as possible
- Move all the shapes to create a remote control shape (the example to the lower right was made much smaller so as not to take up too much space)
- Select layers/merge all
- Select the magic wand tool and click on the background area
- Select selections/invert
- Select a background color that coordinates well with your image
- Select images/effects/cutout/change the shadow color box to background color/opacity 100/blur=47/vertical=-7/horizontal=-7
- Select images/effects/cutout/change vertical to7 and horizontal to 7
- Select images/effects/drop shadow - add a drop shadow you like
- Now you can start adding bars and decorations
- Add new layer
- Select text tool and add a dingbat or your logo for the top. I used Carr Dingbats 2 letter E for my flower.
- Add New layer
- Select the line tool and create a line across the toolbar/select images/effects/dropshadow/opacity=50/ blur=1/vertical=-1/horizontal=-1
- Select edit/copy edit paste and paste as many lines as needed
- Add the text and you are all set!
- Go to the Image Map page to create your links to the graphic
Next Toolbar Example >>
|