Photoshop Tutorial – Menu bar

A Photoshop tutorial to create a menu bar

Step 1. Start off by making a new Photoshop document. Choose the rounded rectangle tool, set the radius to 12 pixels, and create a wide rounded recntalge, as shown below, It doesn’t matter what colour it is because we’ll be creating a gradient with the shape next. Step 2. Choose dark maroon (6f1300) for the foreground color and a lighter shade for the background color (c82e00). Make a selection (select > load selection) using the rectangle a) b) Step 3. Choose the linear gradient, cirlcled in green (a). Open the gradient editor, by clicking on the sample gradient, and choose “foreground to background” (b) a) b) Step 4. To create the gradient, drag form the top to the bottom of the selection, which should produce something like in the iamge below.

Step 5.

This is the 2nd part of this Photoshop tutorial, to create a menu bar. Next create a thinner rounded rectangle, and make a selection using it (select > load selection)

Step 6.

Set the foreground color to a peach shade (ff7a4f) and the background color to f33a01. Create a linear gradient on the thinner rectangle (b)

a) b)

Step 7.

For the text i’ve used the settings shown below

Step 8.

And you should have something as shown below!

And that brings us to the end of this Photoshop tutorial

Source: flash-game-design.com

you may also like:

• Photoshop Tutorial – Clean Two-Level Navigation
  Step 1 First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide). T...
• Photoshop Tutorial – Navigation Bar with Rollover Buttons
  Learn how to create a sleek rollover Navigation Bar. In this tutorial you will learn how to create buttons in Photoshop, export the buttons and add rollover effects in Dreamweaver. Rollover the but...
• Photoshop Tutorial – High Detailed Plastic Navigation Bar
  Final Result Preview Step 1 Let’s start with creating the background for the navigation bar. The background is going to be bluish; the color will be alike with the color of your oncoming menu. Cre...
• Photoshop Tutorial – Apple Navigation menu
  Learn how to create the newest Apple navigation bar that is being used at their site. 1. Start by opening a new 500px * 50px file. 2. Using the Rectangular Marquee Tool, set a Fixed Size of 480px ...
• Photoshop Tutorial – Dark Navigation Bar
  Create an amazing Dark Navigation Bar in this full tutorial that explains the 3 states of the nav bar, on hold, on click and hover.     1. Start by opening a new 580 * 100px file. S...