Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Drawing Techniques Rounded Navigation Bar
rss

Rounded Navigation Bar

Author: Pulse GFX More by this author


Step 1: Creating the Workspace:

Start by creating a 500 x 100 px Document and filling in the document background as a Neutral Black #000000

Step 2: Create the Base layer

Grab your Rectangular Marquee tool and change the feather setting to 5px and make a selection like so:

image 1

Fill it in with any color, and then right click on the layer and select Blending Options and apply these settings:

Gradient Overlay:

image 2

Pattern Overlay:

(Before you apply this setting you will need a certain pattern file.

Once you've downloaded the pattern go to Pattern Overlay and Load in the pattern into your photoshop application once you've done that. Apply this setting:

image 3

Our Navigation bar should look like this now:

image 4

Step 3: Add some gloss

Now let's add a bit of gloss to it. Make a new layer and grab your Rectangular Marquee Tool with the Feather set a 5px still a make a selection along the top of the navigation bar. The feather setting being at 5px will adjust the shape to be like this:

image 5

Fill this in with a neutral white (#FFFFFF) and the lower the opacity of the layer to about 34% and you should get this effect:

image 6

Step 4: Add some text

That's the navigation bar itself sorted. Next it's time to created some navy links and separators. We will start by adding in some text. And someone called Brad will be pleased because I will be using a new font today as he said my previous fonts were a bit bland. So Brad this font for you!

Use these settings for your Nav bar font:

image 7

And start by adding in your first link like so:

image 8

Now my text has a stroke setting on it. You may/not want to have a stroke on your text but if you do My stroke setting is at 1px Solid #FFFFFF.

Step 5: Create the first separator

Now adding in a separator. For this we will need the Line tool. Set your line tool to this setting:

image 9

Then make a line so:

image 10

Then lower the opacity of the line layer to 24% you should then get this effect:

image 11

Step 6: Duplicate the Separators and Links and edit them

Create some more links and separators (By duplicating the first line layer is the best way) Play around with it. I got this end result:

The Final Result

Rounded Navigation Bar Tutorial: Final Result



Author's URL: pulsegfx.net

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Rounded Navigation Bar"