Vertical Blue Menu

1. We're going to design a modern web 2.0 looking vertical menu in blue so go ahead and create a new document (170*300) and fill the background with #333333 using the paint bucket tool. In the picture below you can see my guide lines to help me designing the vertical menu!

2. Now use your rectangular marquee tool and select a rectangle shape where you want your first button to be. Then create a new layer (layer - new layer) and fill it with any color you want or like! After that we're going to add a gradient overlay (layer - layer style - gradient overlay) with the following settings. In the settings image you can see the result. For now we have a blue button with a shiny gradient that gives the menu a web 2.0 look… The only thing left is to add an arrow icon and some text!

Click to enlarge

3. Use your horizontal type tool to type out some text and make sure your foreground color is white #ffffff. The text I typed uses the arial black font with a size of 12px, the arrow uses the same settings but the foreground color should be changed to #98b6ca…

5. The last thing you have to do is just select the button layer and the text layer and duplicate them a few times (layer - duplicate layer). You should have a modern web 2.0 vertical menu by now if you followed the tutorial correctly, of course you can still download the .psd file below to play with it… The gradient can be changed using gradients from other tutorial on PhoNuts so go ahead and have fun with it! This can be used for almost everything, a social network website, hosting company, etc…