|
|
|
|
The first step is to make the basic template for the shape of the
nav bar. I did this using the ButtonButton AOE font set to size 110. Use the font twice
and line it up so it looks to be one total image. Deselect it. |
|
Create a new layer, and with your line tool, make a horizontal
line across the image where you want to line up you circle buttons.
To get nice circles, open up and image 50X50 pixels. Using the selection tool, set to
circle, create a circle on the new canvas. Flood fill the selection with white. Copy the
selection and paste it to your template image. Place your circle buttons on the background
layer using the line you just created as a template to keep them lined up neatly. Continue
pasting circles until you have as many as you want, then delete the layer you created with
the line on it. |
| Now, using the ButtonButton AOE font, set to size 72, place the
font centered above your circles. |
| Using your selection tool, select your templage and apply
whatever texture you would like to it. I then used Ulead Web.Plugins 2 to buttonize it.
Once that is done, use the selection tool to select all the circles and apply textures and
buttonize them. The next step is to use SPG Web Tools
Essentials, (which has a web cutter tool) and cut the image. The nice thing about the web
cutter is, that after you have your cuts, it generates the table code for you
automatically. The drawback is, that if you have cuts that do not cross the whole image,
you will have to open that part of the original cut image, cut it the way you want it,
generate another table code, and combine the two. It's inconvenient, but not hard.
Once all the cutting and reassembling is done, you can open your
cut images to alter them for the mouseover effects. The nav bar at the top of the page is
compounded by changing two images at once.
All that is left is to code the JavaScript for the mouseovers. I
use a preload script so there is no wait when mousing over. Optimally, you would use a
splash screen and redirect that preloads the images for your nav bar so it they are
already loaded when the viewer gets to the page with the nav bar on it.
When using nav bars for your site, you want to use just one
through the whole site. You can use it on all the pages, but don't get crazy and make a
different nav bar for each page. Nav bars are image heavy and slow load time. If you use
just one, everything is preloaded and ready for each page, unless of course your nav bar
images have really large file sizes. The trick is to create a nav bar that you can keep
the file sizes small. The above nav bar is about 200K.
|
|
|
|
