Simple White Glossy Navigation Tutorial

I know that I haven’t posted anything for a long time so I’ll try and make up for that by creating a few tutorials. This is the first one in a line.

In this tutorial I am going to teach you how to create a simple white glossy navigation for your website. There will be a lot of images do describe every step that I made so nobody should get confused. This is what it will come up at the end:

(Click the image for full preview)

Let’s get to the chase right away. First create a new document any size you want (depends on how large navigation you want), I’ve went with 750×70 pixels, and fill it up whit white (#ffffff).

Now grab your “Rounded Rectangle Tool” () and set the following settings to it:

Using it create your navigation an about this size:

Now right click on that layer and add the following “Blending Options” to it:

Than you should be having something like this:

The main part is done. Now let’s work on the buttons.
First we’re going to make seperators for the buttons. Grab your “Pencil Tool” () and put your primary color to #d4d4d4 and secondary to #ffffff. For the brushes, take 1px Square ones.

Create a new layer on which we’re going to make two lines. First one with #d4d4d4 and second one with #ffffff. Don’t forget to leave a 1px gap between the line and the border. This is how you should do it:

Now you can duplicate that layer a few times (Right Click on the Layer > Duplicate Layer…) and place it where your buttons will be.

It’s time to add some text. Take out your “Hoorizontal Type Tool” () and write some text. Put the color to #616161 and use the font “Arial”; “Regular”; Size: 11px and “Strong”. After you’ve created the text, add the following blending options to it:

This is how it should look like:

I’ve putted all my letters capital, you can do what ever you like. Now create your whole navigation text on the same way.

As you can see the “FORUM” text looks a bit different. That’s because we’re going to make a Rollover effect on it. Change the text “Blending Options” of layer “FORUM” to this:

After you’ve done that create a new layer and with your “Rectangular Marque Tool” () select the part where you want your rollover effect to be (behind your “Forum” text layer). Fill that layer to any color you want and put the following “Blending Options” to it:

Now you should be having something like this:

Ok, so we’re done with the buttons. Now let’s create the search bar.
Press “D” on your keyboard and than “X” which will set white (#ffffff) as your primary color. Grab your “Rounded Rectangle Tool” () and with the same options make a box on the right where the search criteria will be put in. Add the following “Blending Options” to it:

This is how mine turned out:

Now let’s add the search button on the right side of the navigation. Again grab your “Rounded Rectangle Tool” () and make a selection where your search button will be (the color doesn’t matter) and add the following “Blending Options” to that layer:

If everything went well this is what you should have:

The only thing that’s left is to add the Search text to the button. Set your color to white (#ffffff) and grab your “Hoorizontal Type Tool” (). Use the same options as you did for the navigation text. After you’ve written “Search”, add the following “Blending Options” to that layer:

And that’s it, we’re done. If you followed this tutorial carefuly, this is what you should have:

(Click image for full preview)

I hope you enjoyed this tutorial and managed do finish it. You may use this navigation on your designs but it would be nice if you could leave some credit to me. If you have any questions feel free to post them in the comments or drop me an e-mail.

You may download the source file by clicking on the following link: