Navigation Bar s are a collection of buttons grouped together in a column or row, or a slight variation of a column or a row, hence the term bar.  There are two dominant methods of creating a Navigation Bar, either as one image with an Image Map attached, or as multiple images assembled in a Table.  Regardless of the method you choose to use, you assemble the Navigation Bar as one image in ImageReady.

First, we have to decide what our Navigation Bar  will look like.  We’ve already created one button, “contact.”  We’ll create the Type, both white and black, for two other buttons, “trips” and “links”, and stack three buttons in a vertical layout.

Open the Photoshop  version of “buttons” you saved earlier. Delete the Over Rollover State from the Rollover Palette.

Add a “trips” Type Layer , color white, and center it using Layer/Set Layer Position.  Duplicate  the Layer and change the color of the Type to black.

Add a “links” Type Layer , color white, and align it to the right it using Layer/Set Layer Position.  Duplicate  the Layer and change the color of the Type to white.

You might want to toggle visibility on or off for the other Type Layers  to make your work easier.

Create a new Image (250 x 300) to assemble our Navigation Bar .  We’re creating a bigger space so that we can assemble each of our elements and crop the image when we’re satisfied with the layout.

To make duplicates of the button and the Type make the “buttons” Image Window  active and select the “shape” Layer  in the Layers  Palette .  Make both “contact” Type Layers visible and link them to the “shape” Layer.  Using the Move Tool , {Click} and drag the button shape to the Navigation Bar  Image Window and {Release} the mouse button.  The “shape” and Type Layers are copied to the Navigation Bar Image Window.  Make both “contact” Type Layers invisible and unlink them.  Make both “about” Type Layers visible and link them.  Drag them over to the Navigation Bar Image Window.  Now you have two buttons, “contact” and “trips.”  Again, make the “trips” Type Layers invisible, unlink them, and make the “links” Type Layers visible, and link them.  Drag them to the Navigation Bar Image Window.  Now you have three buttons with which to assemble a Navigation Bar.

You may notice that you have three Layers  titled “Layer  1.”  To make yourself more productive you might want to toggle the visibility off in turn for each “Layer 1” Layer to see which one is attached to which Type.  For instance, if you toggle the visibility off for a “shape” Layer and the button behind the “contact” Type disappears you know that that particular “shape” Layer has the “contact” Type Layers attached to it.  Rename the “Layer 1” Layer to “contact shape” and drag both “contact” Type Layers over top of it in the stacking order to group the Layers together in the stack.  Do the same for the “trips” and “links” Layers.

Rearranging and renaming Layers
for an organized environment.

We’ve decided on a vertical layout for our buttons.  If you haven’t already, drag the “trips” button close to the top and of the Image Window .  Place the “links” button beneath it and place the “contact button beneath the “links” button.  This will be our Navigation Bar .  Now we need to create the Slices , which will determine the shape of our HTML Table and then create the Rollovers. Save the image in Photoshop  format as “navbar.”