Step 14:

Move the new set (reflection set) down 1px below the old set.  Set its opacity to 17%.   You'll get something like this:

Step 15:

Now select the bottom of the image to the bottom 3/4 of the reflection set. (Example)
Go to Select > Feather and set the feathering to 10px.  Now, with refelection set selected, go to Layer > Add Layer Mask > Hide Selection.
The result will look like this:

Step 16:

Now it's time to add some words to the navigation bar.  I'm going to use simple 11px Arial because we'll be coding the navigation bar in a future tutorial.
However, you can use whichever font you'd like.  The color I've chosen to use for the text is #DDDAD7.  Space the words out evenly (you can do this easily by just pressing the spacebar a set number of times between words) and place it in the center of the navigation bar.

Step 17:

It's looking good, but it would likely look better if there was some sort of separation between the navigation options.
If you like the way it looks now you can keep it that way, but I'm going to add some indentation lines to it.

Pull out the marquee selection tool and zoom in close on the navigation bar.
Make a selection similar to this one:

Step 18:

Make a new layer (name it line) and fill the selection with the color #5E5E5E.  Then, move the selection one pixel to the right and fill it with the color #B5B5B5.
Then select the top of the layer and go to Select > Feather and set the feathering to 5px.  Next, go to Layer > Add Layer Mask > Hide Selection.

Step 19:

You can duplicate this layer as many times as you need to.  Put one in between each navigation item.  Here's what mine looks like after adding the lines:

Step 20:

The last thing we need to do is make a rollover state for the navigation bar for future coding use.
I accomplished this by putting a simple black gradient (set to Soft Light and lowered opacity) at the bottom of the navigation bar and lightening the text color to white.

Here's my finished product:

• « Previous
• 1
• 2
• 3