Back to Tutorials Gallery
Tutorial - Navigation Bar

This is the finished product. It works in both black and white as shown, the image is the SAME just with a background color change. So no matter what color your website background is it will work.


Step 1: New Document
Start a new document with the desired background color, I'd suggest starting with black and you can change it later. The document should be large enough for your bar and plenty more so if you're looking for a 800x40 make your image 900x100. this just helps give you an idea of what it will look like on your background color and get the right style.

Step 2: Selection
Make a selection the size of the navigation bar you want. mine was 700x23, * I cut off the left side to fit it on this page.

Step 3: Color Set
Set your Foreground to #444444 & Background to #222222

Step 4: Gradient
Select the gradient tool and drag the cursor from top to bottom to make a gradient that should look strikingly similar to the image below.


Step 5: New Layer
Make a new layer and name it "Glass Top" or something to let you know what it is.

Step 6: Half Selection
Cut your selection in half or as close as you can get it removing the bottom half of it so only the top half of the navigation bar has a marquee around it.

Step 7: Adding glass
Make sure the new layer is selected and fill it with white.

Step 8: Opacity
Set the layer opacity to 10%. You should have an image that looks like:


Step 9: Blending Options
Select the navigation bar layer (not the glass or background) and apply the settings shown.


The stroke is color: #444444 - The Gradient is white to white opacity 0 on one end.
The inner glow is black.

You're image should look like so. 4


Step 10: Add the text
The best idea here is to put in each section such as Home and Forums seperate so you can evenly space them. I set mine 20px apart so each gets space of 10px on each side for the slice later on. A nice bright color would be good too orange compliments the grey well. I also gave each text a style of Stroke Size: 1 and color black. You'll get something like the image shown below.


Step 11: Merging
You're going to want to create a new empty layer below each text layer and the navigation bar layer. Then click on Layer > Merge Down, or press Ctrl+E when you have the text layers and navbar layer select. You should go from Image 1 to Image 2 shown here.


Then you'll want to merge all those layers including the glass top *do not merge with the background though.

You should have 2 layers.

Step 12: Duplication
Duplicate the one layer that is left it should appear directly ontop of the original so it wont look like there have been any changes.

Step 13: Select
Ctrl+Left Click on the copied layer that should make a rectangular selection marquee around the navigation bar.

Step 14: Flip'er
Go to Edit > Transform > Flip Verticle. It should appear the the navigation bar has flipped upside down, don't worry thats just because the original layer isnt visible.

Step 15: Move on down
Deselect everything and move the upside down layer to where the top of it is aligned with the bottom of the original navigation bar as shown.


Step 16: QUICK! MASK!
Select the Edit in Quick Mask mode button or press Q.

Step 17: Gradient Selection
Zoom in close so you can see what your doing. Drag the cursor from the bottom of the upside down layer to the top of the upside down layer. Hold shift so the line is straight and your gradient is made even. Then exit quick mask mode by pressing Q again or clicking the Edit in Standard Mode button.

Step 18: Inverse Selection
Choose the Select > Inverse option to invert your selection area.

Step 19: Delete
press Delete three(3) times to remove a nice amount of the upside down layer.

Step 20: Block
Make a small selection the same length or longer than your navigation bar, about 5px tall and fill it in with black. Center your block over the line between the upside down layer and the right side up layer.

Step 21: Final Touch
Select the long black box layer and use the Blur More filter twice. Group it with upside down layer by pressing ctrl+g or selecting Layer > Group With Previous.

You should have an image that looks like so.


if you feel like doing anything else to improve it, you can move the black block up and down to achieve a nice shadowed box but theres no real NEED to.

if you're slicing it and want to make it a type of button that changes color when you go over it you can press ctrl+u and change the color, as long as you dont make it lighter you can do this even if you've flattened the image. This will get you this image.


If you have any questions email them to me at Canadian87@gmail.com THANKS!


Design Portfolio Logo

Home - Websites - Logos - Banners - Tutorials
Files - Forums - Biography - Contact

thanks for visiting, please do not steal any of my images.