In this tutorial we'll create a clean website navigation bar.
The process won't involve only photoshop but there will be also some HTML and CSS.
The same effect could be achieved with Photoshop only but our result will be lighter and more correct from a webdesign point of view.
Let's start opening a new blank document in Photoshop: make it about 20px wider than what you want the navigation bar to be. The extra space will be used for the bar shadow.
I'm using a 520 x 60 documento, with white background.
Create a new layer and fill it with a dark color (this is used just to be able to distinguish the white shape we're going to draw).

Now create a new layer, select white as foreground color, pick the Rounded Rectangle Tool, set a radius of 10px and draw a rectable like mine.

Hide the grey layer, double click on the rounded rectangle layer and apply these settings:

This is what you should have now:

Now create a new layer, pick the Rounded Rectangle Tool again and set the radius to 6px, choose a dark color (mine is #9C1515) and dran another rectangle inside the previous one.

Now we'll slice the navigation bar. We'll have 2 images that we'll use for the left and right borders and a 1px wide image that will be used as background.
Pick the Slice Tool and create 3 slices like in the following image:

Now hit File > Save for Web: a new window will pop up and you'll have to click on all the 3 slices and make sure to have these settings in the right panel:

Now click Save, type "image" in the File Name field and choose "Images Only" and click Save.
A new images folder will be created and the images will be saved into it as image_01.gif, image_02.gif and image_03.gif.
Open image_02.gif in photoshop and pick the Single Column Marquee Tool.
Click on the image and you'll have a 1px wide selection. Now hit Edit > Copy, File > New, press OK and hit Edit Paste.
Hit File > Save for Web and press Save: navigate to the just created images folder, name this image bg.gif.
Now we'll see how to code the menu.
This is the CSS:

<style type="text/css">
#menu
{
  width: 520px; 
  height: 60px; 
  background-image: url(images/bg.gif)
}
#menu .leftc
{
  width: 21px; 
  height: 60px; 
  float: left;
}
#menu .rightc
{
  width: 23px; 
  height: 60px; 
  float: left;
}
#menu .center
{
  width: 476px;
  float: left; 
  padding-top: 22px; 
  font-family: Verdana, Tahoma, Sans-Serif; 
  font-size: 11px;
}
#menu .center a:active, #menu .center a:link, #menu .center a:visited 
{
  color: #FFFFFF; 
  text-decoration: none; 
}
#menu .center a:hover 
{
  color: #FFFFFF; 
  text-decoration: underline; 
}
#menu .center span
{
margin-right: 20px;
}
</style>

And here's the HTML code:

<div id="menu">
<div class="leftc"><img src="images/image_01.gif" border="0" alt="left menu border" /></div>
<div class="center"><span><a href="#">Home</a></span><span><a href="#">Contact</a></span>
<span><a href="#">Support</a></span></div>
<div class="rightc"><img src="images/image_03.gif" border="0" alt="right menu border" /></div>
</div>

Each link is wrapped into a span in order to apply the margin-right property that allows us to create space without filling the document with white spaces ( ) And here's the final result.