How to make a glossy menu bar or button and use it on the web

Open Photoshop, create an image of whatever size you desire(I use 200x30 for my example, so I can get an idea of what it will look like.)


Next Fill In with whatever color you like, this will be our base color.



Once the image is filled in, we need to add some layer style to it, so right click the layer and select blending options and use these parameters:




Now we need to create a new layer, and use the rectangular selection tool to select half of our image:


Now, use the color dropper and we are going to click on the pixel above the very bottom one for our color:



Select the gradient tool, and make sure that the gradient is set to Foreground to Transparent at the top. Drag from the top of the bar to about 2/3's down(make sure you have just the second layer selected)


Now we have our bar! Continue on if you would like to figure out how to use this with any bar/button on your webpage:



Select an area with the width 1 pixel and height of however tall your image is and save it(I have found .png to be the best for size).

Now in your HTML create a table and in the tr tag(or your css file) simply add:

style="background-image:url(your/image/url);
background-repeat:repeat-x;"

Heres what it might look like:

Welcome!!

Here you can type stuff...yaaaaaay!!

OR make it a button!!

Button

voila we are done!!