Glossy Web 2.0 Navigation Bar

Today we are going to create a Glossy Web 2.0 Navigation Bar in Adobe Photoshop. The final result can be seen below:

Glossy Web 2.0 Navigation Bar

First make a canvas, I used the size 780 x 50 pixels:



Go to Edit > Fill:

Select Color on the drop down menu:

Select the color: #0075c0 and click ok:

Now make a new layer ( CTRL+Shift+N ) and use the Rectangular Marquee Tool to make a shape like this and right click and select Fill:

Fill with White on the drop down:

Right click the selection and click Deselect:

Go to Filter > blur > Gaussian Blur:

Enter 25 pixels radius:

Now go to the layer palette and change the layer to Overlay:

Now make a new layer and make a selection like this with the Rectangular Marquee Tool and right click Fill:

Fill it with White on the drop down:

Now set the Layer Opacity to somewhere between 10-30%, I used 10%:

And your done! Here’s your result!:

Glossy Web 2.0 Navigation Bar

Here is the final Result PSD, in case you were confused or just wanted to take an extra look at how everything was done:

Navigation Bar PSD

Leave a comment