PhoNuts

We’re going to design a great looking glossy menu bar in blue this time!

1. Create a new document (700*100) and fill the background with #ffffff using the paint bucket tool.

2. Now use your rectangular marquee tool and select another and select a shape like this shown in the following screenshot. Fill the selection with a color you like, we’re going to add a gradient overlay so it doesn’t really matters. Make sure you do all this an a new layer (layer – new layer).

3. Now it’s time to adjust the blending options, we’re going to ad a gradient overlay in this step so go to (layer – layer style – gradient overlay) and use the settings from the image below this third step.

4. In this step we’re going to add the shiny detail on top of the menu… Grab your elliptical marquee tool and select a shape like shown in this screenshot! It has to be a little bit rounded and it should also be centered so take your time to complete this step!

5. Use your gradient tool to add the glossy effect and create a new layer. Use the settings from the picture below to create the gradient overlay. After that you should change the blending mode of the newly created layer to overlay and the opacity of that layer to about 70%. The outcome can be seen in the second picture below.

6. Now that we have finished the menu bar itself we’re just going to add some nice and modern strokes to place between the menu text. In the following screenshot I zoomed in on the particular extra that I’ve created, you should be able to draw it yourself using the pencil or brush tool on a new layer (layer – new layer) and then duplicate that layer a few times!

7. Now type out some text and make sure your foreground color is white #ffffff. I used the tahoma font in bold with a size of 11px. In this last step we’re just going to add a drop shadow to the text we’ve just typed so go to your blending options and use these settings to create a drop shadow effect.

8. And there you go! You have designed a nice blue glossy gradient menu for a website or header! This can certainly be used for a web 2.0 design in my opinion…

Please Login or Register to read the rest of this content.