Photoshop Tutorial – Cool Navigation Bar

Hello friends

Soon this marathon will end, and we will start another one. I will not disclose how many tutorial i will make in the Next Marathon. I assure you that you will have a big surprise.

Today i will show you hot to create a nice button

Open a new document in Photoshop
Size 500X500 pixels
Color of the background: #333333

Then Select Rectangle Tool and make a small rectangle

Then Add the following layer style for this simple shape

This is the result

Then Select one more time Rectangle tool, and make another shape, a little smaller than the last one

Now grab Rounded Rectangle Tool, Set the radius to 4 pixels and make another shape
I will make the rounded shape with another color . In this way you can see better what i am doing. This rounded shape we will hide later or we will delete the layer

Rasterize this red shape ( go to Layer > rasterize > Shape )
Then go to Select > Load selection

You will see that your red shape will be selected.

Now delete the red shape layer. You can delete this layer by dragging the layer to the recycle bin icon

After you will delete this layer you will have this result

Press CTRL+SHIFT+I ( this will inverse your selection )

Now select the Shape 2 layer ( the white rectangle ) and rasterize this layer too
To rasterize the layer be sure you have the layer selected, then go to Layer > rasterize > Shape

Then Hit Delete on your keyboard
After that press CTRL+D to deselect

Now add the following layer style

This is the result

Select Line tool, Set the Line weight to 1 pixel, and make a simple line with a color you like most

Now Make another line, with the same tool , but this time set the line weight to 2 pixels

Then for this 2 pixel line add the following layer styles

This is the result

Then add some simple text

Now with the Rounded rectangle tool make some shapes

Select all the layers ( the blue shapes ), And press CTRL+E ( this will merge all the small blue shape layers into a single layer

Then make a selection like in the following image

Then hit Delete key

This is the result

Then duplicate this button a few times and you will have a nice navigation bar. You can see that i have changed also the color of the buttons . I am sure you can do this alone

Source: talk-mania.com

you may also like:

• Photoshop Tutorial – Classic navigation menu
  Step 1. Start off with a new document sized 500×80. Fill it with a cream colour. Create a new layer and using the rectangular tool with the colour code below create a shape: Step 2. Add...
• Photoshop Tutorial – Clean White Navigation Bar
  Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop. Preview of Final Results   Step 1 To start off with, create a...
• Photoshop Tutorial – Design Studio Header
  This will be your final result 1. First thing we need to do is create a new document. I started with a size of 1000×216. 2. What we want to do next is to add a gradient to our ba...
• Photoshop Tutorial – Sleek Dark Header Design
  1. First things first. We want to create a new document with the size 1024×205. 2. The next thing we would like to do is to add a gradient to our background layer. To do so, lets go a...
• Photoshop Tutorial – Create professional patterns for navigation bar
  Hello As i have told you i will try to add a tutorial each day. Today i will show you how to create a nice pattern for navigation bar. Open a new document in Photoshop This document should b...

No Responses to “Photoshop Tutorial – Cool Navigation Bar”

1. [Photoshop Tutorial] Video Sharing Header | ink9 blog | Web Design Tutorials says:

   October 12, 2010 at 17:23

   [...] Place some text on it and your done! I added a little extra to my navigation bar to show someone being logged in and this is your final [...]
2. Create professional patterns for navigation bar | ink9 blog | Web Design Tutorials says:

   October 12, 2010 at 17:31

   [...] Today i will show you how to create a nice pattern for navigation bar. [...]