Photoshop Tutorials

Create a new document, big enough to contain your navigation menu.

Start by selecting the 'rounded corner' shape tool. Set it's radius to about 15px.

Now use this to draw a round tube shape.

Now apply all these layer styles to this shape.
(Layer » Layer Style)

Drop Shadow

Inner Shadow

Inner Glow

Color Overlay

Stroke

Now use the shape tool again, and this time, draw a smaller white tube above the button. see image on left...

Now, set that layer's blending mode to "Overlay" and it's opacity to 30%

There, you have your button.

Now select the "slice" tool.

Go to View on the menubar and make sure "snap" is checked. This will help your slices to snap to it's closes border, creating more accurate slices.

Now use the slice tool and slice button by button. each slice should contain 1 button.

Now that we have our slices, we can save it to HTML and ready to be used on our webpages.

Go to File » Save for Web.

For best image quality, use the settings you see on the left.

Then click Save.

In the Save dialog box where you select your location, there is a field call "Save as type", select "HTML and Images (*.html) "

and give your html file a name.

This would have generated a HTML page, an images folder, and inside the images folder are your buttons.

Now just copy the HTML code of the menu to your webpage and use it, DO NOT copy the header/body tags generated by photoshop.

Too lazy to follow the tutorial? DOWNLOAD MY PSD FILE