Glossy Menu Bar

Step 1 - Open Your Canvas

Open a new canvas about 500x20 pixels or so. Create a new layer and name it "Bar". Fill this layer with a color. It can be any color you want. This is going to be the base color for your menu bar. I have chosen #B5CA87 which is a nice shade of green.

Step 2 - Start the Gloss

Create another layer (Ctrl+Shift+N). Name it "Top". Select the top 1/3 of the image using the Marquee Tool as shown here. Make sure you are on the "Top" layer. Fill this selection with the same color, only a lighter shade,  I used #C1D98B. This is going to serve as the glossy effect of your menu.

Step 3 - Move Your Gloss

Choose the Move Tool (V) and press the down arrow key about 1 or 2 times to nudge the top part down a little bit. This gives it a nice 3D look, in my opinion, although it's not needed I recommend it!

Step 4 - Add Button Dividers

In order to use this as a website menu, we have to add some buttons to act as the link which I visitors will use to get to the different pages of our site. In order to make the buttons, we have to set them apart with some dividers. Select your pencil tool, and then set the radius to 2px. Now draw some vertical lines where you want your dividers to go. Hold the Shift key to draw perfectly vertical lines.

Step 5 - Add Your Text

The last step in creating your menu will be to add the text you want to be on your buttons. This text should describe whatever the links would be on your website. In mine, I used the same links we have here on Adfect. I used the font Myriad Pro, size 12, in #343434 but you should use whatever font matches your design the best. Enjoy!