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:
Fill it in with any color, and then right click on the layer and select Blending Options and apply these settings:
Gradient Overlay:
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:
Our Navigation bar should look like this now:
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:
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:
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:
And start by adding in your first link like so:
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:
Then make a line so:
Then lower the opacity of the line layer to 24% you should then get this effect:
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


More Tutorials:



