and
use the Paint Bucket tool right on the canvas.
The Art of Making a Graphic Navigation Bar
Concept to HTML (going through Photoshop and Dreamweaver)
1. Decide what you want your navigation to look like...
(If you are using text only links only this tutorial will not be very useful)
2. Decide whether you are going to include roll-over effects (this is what happens when you put your mouse over graphics links and they change in some way).
3. Decide the size that your navigation should be in pixels. Consider that the lowest common denominator width for a browser is 800 pixels, and only if the user opens the browser to its maximum screen size. Once you have the size, go to Photoshop and open a new document with the appropriate size. In this case I will make it 700 X 90 pixels, 72 ppi Resolution. This will creat a long thing document that will accomodate a horizontal top navigation.
4. The first thing you would usually do is fill the background with the color
of your website. To do that you need to choose a color from the picker and
use the Paint Bucket tool right on the canvas.
5. Now you need to start drawing your buttons... but first you need to make a new layer from the layers floating palette. Make sure you rename the layer to reflect its content, in this case name it Button 1 by double clicking right where it says Layer 1. If you can't see your Layers Palette, go to Window and choose Layers from the Menu.
6. Make a rectangular or circular selection on that layer by using your Rectangular
or Eliptical Marquee tool exacly the shape and size that you want your button.
Use your Paintbucket tool again to fill the selection with the desired color (probably you want to change the original one you picked from the picker so it doesn't turn out to be the same as the background. It should look sort of like the one below.
7. De-select the button (make the marching ants go away) by hitting ctrl-D (Apple-D for Mac) or going to your Select>Deselect top menu.
8. Make the button 3Dimensional if you so choose. This is done by going to
the Layers top menu and choosing Layer Style and choose Bevel and Emboss. The
Deafault settings should give you something pretty good, but feel free to tweak
with the settings to get something different. 
9. Duplicate the button by clicking and dragging it into the "New layer/Duplicate layer" icon at the bottom of the Layers palette.
Rename this layer to Button 2 following the renaming instructions above. It's very important that you name all your layers accordingly so you don't get them confused later when you have many more.
10. Move the button to its new position. At the moment you can't see it because
it's right below the other one. You can move it two different ways... first
choose the Move Tool from the toolbar.
then click on the new button on the canvas and drag it to its new position.
To get a much more precise result use your keyboard arrow keys to change the
position of the button instead of dragging it with the mouse. Repeat this step
with as many buttons as you need. It should look like the one below.
