Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Glossy Menu Bar

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.

image 1

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.

image 2

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!

image 3

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.

image 4

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!

Glossy Menu Bar



Author's URL: Imgry.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Glossy Menu Bar"

Captcha