Professional menu for your website
I noticed that many persons are interested in creating a complete website using Adobe Photoshop. Reading the Photoshop Tutorials on AssistProgramming you will be able to have a general vision about what you can create with the presented tools. In this tutorial I will “teach” you how to create a menu bar for a website.
Step 1 Open a new document having the dimensions 600×200 pixels. Set the foreground color. With the Rounded Rectangle Tool (U) draw a shape on the work area (you may change the radius - see the top menu). Try to use your imagination! You will learn tricks if you try more than I write in this article.
Step 2 Because I want a professional aspect, I will add some effects. First of all I will add a shadow using: Layer > Layer Style > Drop Shadow, then go to Layer > Layer Style > Inner Shadow. You are free to try your own settings. Look what I’ve done until here:
Step 4 Duplicate the layer. Right click on Layer1 and choose Duplicate layer… and change this layer Blending Mode to “Color Burn” (see the layer tab).
Step 5 Now we have to write the menu components. This is my result:
Step 6 Now we need some separators for our menu components. Draw a 1 pixel width line using Line Tool, duplicate this layer and move every line using Move Tool (V).
Step 7 Create a new layer (Ctrl+Shift+N) and draw a rounded rectangular having a white background like in the image below:
Step 8 Select this layer opacity until you obtain the wanted effect. I set the opacity to 40% and I moved this layer few pixels down.
This is my final result. You can use different colors or other effects from Blending Options. If you have comments post them on our forum.
Here is also the .psd file. You can try to modify it! Enjoy 
Post a comment
RSS/XML