This Photoshop tutorial will show you how to simply define the edge of buttons on a beveled navigation bar.

Step 1.
New image



Step 2.
Define the nav bar.
For this example I am doing a small one in the selection seen below.



Step 3.
Finish the bar itself.
Here I used the gradient tool and used two blues to make a slight bevel.



Step 4.
Add some text (or define space for real web based text)



Up to this point, I have been basicly setting up the tutorial. This next step is pretty much the entire tutorial in one step.

Step 5.
Define the edges of the "buttons".

Using the same two colors that defined the gradient background of the bar, I will use the pencil tool and draw two lines right next to each other, vertically. One line in each color.



Repeat as needed...

Here are the final results: