Tuesday, December 30, 2008

Simple Glossy Navigation Bar Design in Photoshop

Here is a preview of the final result of this tutorial:

OK let’s get started!

Step 1

Firstly let’s create some background to work with.

Create a new document sized 1000*600px, use the Gradient Tool (with Foreground colour #333333 and Black ground colour #000000) to fill the background layer.

Step 2

Create a new layer and grab a big round brush (I used a 700px brush) with white color, set its opacity and flow to 50%, do several left-clicks (see image below for details):

Step 3

Create a new layer named “Navi Bar”. Use the Rectangular Marquee Tool to make a selection and fill the selection with Black Colour.

Apply Drop Shadow layer blending option to this layer:

Here is the effect so far:

Step 4

Hold down the Ctrl key and left click on the “Navi Bar” layer to load the selection.

After the selection is loaded, hold down the Alt key and use the Rectangular Marquee tool to make another selection over the existing selection. This will subtract our existing selection.

Step 5

Maintain the selection from the previous step, create a new layer called “glossy” and fill it with White colour. Set the layer opacity and fill opacity to around 30%.

Type some page texts onto the “glossy” layer:

Step 6

Now we can add some mouseover effect! To do this, create a new layer in between the text layer and the “glossy” layer and name it “mouseover”.

Then use the Rectangular Marquee tool to make a selection outside a page text, fill it with White colour and set the layer opacity and fill opacity to around 30% (in layer blending options).

Apply a colour overlay of your choice. I used the following settings:

That’s it for this tutorial! You can add some final touches using preset brushes and apply some texture effects in the background.

Here is my final result of this tutorial:

Hope you enjoy this tutorial and find is useful when you design your own website! If you would like to find how to translater the design into working web pages, study some XHMTL and CSS~ There are plenty of tutorials available on the net about this topic.

If you have any question, just drop me a line below. Thanks and have a nice day :)


=== For more tutorials keep visiting ;) ===
= http://photoshop-manic.blogspot.com =


Anonymous said...

awesome lee

Jamieblaze said...

This is James again from psdvault.com. Now this is the second time I found you're publishing my tutorial without any link back to my original post on psdvault.com. Leaving a statement "NOTE : ALL CREDITS FOR THE ORIGINAL TUTORIAL MAKER :)" is not good enough.

And also you're hot-linking my image, which is wasting my server resource which I paid for.

Now I'm going to have to warn you if you persist not showing links back to my original post on psdvault.com, or still hot-linking my images, I'm going to issue you an invoice with a fix amount payable to psdvault.com and, I will email my ISP to ban you IP from visiting psdvault.com and email blogger.com and inform them your activity.

Kailash said...

Oh James from this moment i wont publish any tuts from your website.

I dont intend to waste your server resource , I will remove all the tuts from your site here after i see your rep in this topic

Anonymous said...

Hey! Do уou use Τωitter? I'd like to follow you if that would be okay. I'm defіnitely
enjοying your blog anԁ loοk
forward tо new posts.

Also visit my blog post; gooԁ bаcklink checker tool :: footystatcenter.com ::