Learn to create a simple yet visually attractive navigation bar for your website! (posted January 20, 2008)
Construct a Simple, Attractive Navigation Bar
Step 7:
Create a new layer. Name it corners.Hold down Ctrl and click on your shape layer. This should select around it. Now, go to Select > Modify > Contract and contract the selection by 1px.
Make sure that black (#000000) is your foreground color and that the corners layer is selected. Then select the gradient tool (press G). Make sure the gradient selected is "Foreground to Transparent" and that you have these settings.
Hold down shift and drag the gradient tool in the top left corner at a 45 degree angle (down and to the right). Drag the tool about halfway down the shape (vertically).
Do the same thing, except at the top right. Press Ctrl+D to deselect. When finished, it should look like this:

Step 8:
Set the blend mode for corners to Soft Light and the opacity to 70%.Step 9:
Create a new layer and name it highlight1. The new layer should be under the corners layer. Now hold Ctrl and click on your shape layer once again.Make white (#FFFFFF) your foreground layer and bring out the gradient tool once again.
Place your cursor a little above the start of the selection, hold shift, then drag is straight down to about 3/4 of the way down the selected area. Press Ctrl+D to deselect.
It will look like this once you've done all that:

Step 10:
Set the blend mode of highlight1 to Soft Light and the opacity to 25%.Step 11:
We're going to be doing the same basic gradient process in this step as well. Make a new layer named highlight2. Place it under the highlight1 layer.Hold Ctrl and click on the shape layer to select. Go to Select > Modify > Contract and contract the selection by 3px. Now, set black (#000000) as your foreground color.
Get out the gradient tool and do the same thing as last step, except from the bottom this time. Also, only drag the tool about half way up the selection. After deselecting, you'll be left with something like this:

Step 12:
Set the blend mode of highlight2 to Soft Light and the opacity to 25%.Here's what it should look like:

Step 13:
These next three steps are completely optional, but they make a really nice effect, especially against dark backgrounds.Create a new layer set and name it original set. Put all 4 of the layers you made into it. Make sure they are placed into the new set in the proper order.
Now right click on the set and press Duplicate Layer Set.
Rename the new set to reflection set. Go to Edit > Transform > Flip Vertical.
Quick Categories
Photoshop
XHTML/CSS
TutorialSurge.com Search
