Dec 14, 2011

Photoshop CS5 Menu for Websites

This tutorial helps you to make or design a horizontal navigation bar with your desired color combinations. In this tutorial I have used the color combination Blue background with Gray buttons as it provides a decent and good gradient effect to observe.

 Our Tutorials Begins From Here:

This is a preview of the result that we are going to get after completing the tutorial.

Result Preview

Step 1: At first we are going to create a new document and fill some colors in it.

  • Open Photoshop go to ‘File’ click ‘New’ add your desired name and size like I choose a size of 600 by 250 pixels.

  • After creating the document fill the background color with your desired color (which I have choose blue).

  • To fill the desired color, go to Edit > Fill > Use (or just press Shift+F5). Select a color from the use tab as I choose “Blue” and click it in the background area.

You would get result like this,

Result of Step 1 Result

Step 2: Now we are going to make the background for the navigation bar inside which the buttons or tabs are placed.

  • To create a new layer, go to Layer > New > Layer (or press Ctrl+ Shift+ N).

  • Select the layer and select the Rounded Rectangle Tool (or press U twice).

  • Adjust the size of the rectangle by selecting the “Fixed Size” from the Geometric Options’ button in the Rectangle Panel appeared under Menu Panel.

  • Select the size you desire, like I choose 500 by 60 pixels.

  • You can adjust the radius of the corners too in the same panel.

  • After setting the sizes click at the desired area you want to draw the navigation bar.

You would get result like this,

  • Result of Step 2Select the navigation layer from the layers list and click on the button at the bottom which has a circle in a rectangular box showing “Add Mask Layer”.

This will divide the layer into mask objects so that you can fill a particular color into the navigation bar only without tempering the background layer.

  • Fill the navigation bar with a single color or add a gradient effect using linear effect with multiple colors.

  • Rasterizing the layer of the navigation layer you would get the single form layer to add other layer options to it.

After completing the above step you would get a result like this,

Result of Step 2 (Part 2)

Step 3: Now we are going to add some layer styles to the navigation bar on its background.

  • To open layer styles go to Layer > Layer Style (or select the layer, right click on it and select “Blending Options” in it) and select Outer Glow from it.

  • Make glowing changes accordingly to your desired design (or just follow the given below picture details).

  • To add some more layers select any options and add your desired changes to the navigation bar.

Result of Step 3

Result of Step 3 (Part 2)

Step 4: Now we are going to make buttons in the navigation bar.

  • Create a new layer by following Step 2.

  • Select the rounded rectangle tool and set your desired size like 150 by 50 pixels and draw maximum no. of buttons which can be drawn.

  • Use the ‘Add Mask Layer’ and select the first layer add you’re desired layer option from the list in blending options.

  • You can add changes in color and change gradient effects by clicking the gradient tab in the “Gradient Overlay” tool and get the below result.

Result of Step 4You will get the result as,

Result of Step 4 (Part 2)

Step 5: Now we are going to add text to the buttons.

  • To add text to the buttons create a new document for every new button, it helps in adjusting the position of the text in the button later.

  • Select the desired font, size and style from the text bar under the Menu bar.

  • Select the color from the color window on the right side of the desktop.

  • Write your text in the button like “Home” and then adjust the position of the text using ‘Move’ tool.

Your result should look similar to this,

Result of Step 5

Step 6: Now in the last we are going to highlight the button to shown it is in selection or the mouse is on it.

  • Select any button to highlight it, so that we a mouse comes on it or when it is in selection then the color of the button change to shown it is distinguished from other.

  • Select the color from the color window for the button and fill the color in the button with the Fill (or Paint Bucket) tool.

  • Add some outer glow from the Blending option form Step 3 and center the glow on the highlighted button. You can use the following setting in the picture,

Result of Step 6After applying the above changes your final result should look like this,

This is the final result you would get after completing this tutorial.


  1. mr. nice guy1/2/12 7:13 PM

    ugly result. please dont teach awkwarded users such things.

  2. [...] Tham gia: Apr 2012 Bài gởi: 372 Vinh Dự: 1 CustodioMeurig Senior Member   #1 (permalink)   hôm nay, 12:33 AM nsy4292 Free Online Reading Go check out this incredible link... News [...]