Webmaster Forum

bsmith

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:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

TigerBot · Tiger Member Joined: 19 Jun 2007

_________________
TigerBot