Simple Glossy Navigation Bar Design in Photoshop
Posted on December 20th, 2008 under Web Graphics, it has 15 Comments and 35,015 Views so far.
In this tutorial, I will show you how to design a Modern Glossy Navigation Bar in Photoshop. This is a beginner tutorial with a just few simple steps, aiming to help beginner web designer for making their first-ever web page.
Skills involved in this tutorials are selection tools, layer blending options, and some simple gradiant filling techniques. Have a go!
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 :)
Like this post? Share it around!
More Awesome Posts from PSD Vault
15 Comments
-
-
-
James Says:Hi goutham~
You can download some free leafy brushes from qbrushes.com and load it into Photoshop, and then simply paint over the background layer.
Hope this helps :) -
-
Scrap Gold Says:I did not expect this on a Thursday. Array. Found your post “Simple Glossy Navigation Bar Design in Photoshop” when I was searching for “scrap gold”. Array. Array.
-
-
Business Card Printing Says:Simple and classy but still with your artistic touch. Very, very nice. Thanks for sharing this tutorial! Keep up the good work!
-
carlos Says:wow. Your site is having issues. The top is cool but then cuts off a 1/4 of the way down to black. And the navigation is hard to read. It has light green text on a white background. You all need to fix this a bit. I love the site but man it is hard to find you navigation and a bit glaring with the stark contrast from white to a sudden black. Check it out.
-
-
-
its really great tut and sample too i apply it and i like it i will design one like it to my blog thank you so much
i wish u keep publish nice tut like that