Let’s begin now shall we. First open a new document with any size you want (depends on the size of you navigation – mine is 500x100px) and fill it with some black dark color #020202.

Now let’s go with creating the small top part. Create a new layer and grab your „Rectangular Marquee Tool (M)“ and make a small selection like this:

Fill the selection with #cfcfcf. Right click on the layer name in the Layers Panel and select „Blending Options“. Apply the following:

Now you should be having something like this:

Not bad for a start, eh? Let’s make the main navigation part now. Create a new layer and again grab your „Rectangular Marquee Tool (M)“. Make a selection which is going to be your new nav, but leave a 1px gap between that and the upper part that we already created. Something like this:

Fill the layer with any color you want and add these Blending Options to it:

This is what you should be having now:

Well your navigation is now done and all we have to add is a bit of text. Grab your „Horizontal Type Tool (T)“, font and size depend on your navigation but I have went with „Lucida Sans“; “Regular“; “10pt“; „Strong“ with color #fefefe. Now click somewhere on your navigation to write something down. After you enter the links of your navigation right click your text layer and add the following Blending Options to it:

After you click ok, this is what comes up:

Believe it or not but it’s done. If you have any questions or suggestions about the tutorial you can leave it in the comment or contact us directly on admin@coregfx.org .

Feel free to use this in your designs but leaving credit to us would be much appriciated. Here are the source files if you’re not sure how to create something:

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:

First create a new document any size you want (depends on how big you want your navigation) and put the background color #dfeacf .

Create a new layer and grab you Marquee Selection Tool. Now make a selection which is going to be your navigation and fill it with any color you want (the color doesn’t matter cause we are going to add Blending Options to it).

Now right click on that layer and select Blending Options. Add these options to it:

After you did that you should have something like this:

Now let’s add some seperators. Create a new layer and press “D” on your keyboard. Now grab your “Pencil Tool” and select the square brushes. Put the size (“Master Diameter”) to 1px. Now make 1 black and one white line next to it like this:

After you did that put the layer on “Overlay” and “Opacity” to 70%. Now you can just duplicate that layer and put it on several places (depends on how many buttons you have).

Now lets add a hove effect. Create a new layer and select one of those buttons (squares). Take out your “Gradient tool” and fill the squares with these two colors: #3c95cc and #52aee6 (make sure that the first one is the upper color).

Make sure that you have placed the layer right. It should be one pixel inside the navigation like this:

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

Now you should be having something like this:

As you can see, the hover effect went a little over the edge, so let’s fix it! Create a new layer and grab your “Pencil Too”l. Select the Square Brushes and put the size to 1 px. Just select the colors you need and start painting them like this:

Now everything should be ok like this:

Let’s add some light effect to the button, shall we? Create a new layer and select half of the button. Put your color to white (#ffffff) and grab your “Gradient Tool”. In the left upper corner of your screen click on the image of the gradient and select “Foreground to Transparent”:

Now use that gradient on tha image and you will have something like this:

After you did that you can deselect the layer and put it to “Overlay” and change the opacity to 20%. It looks better now, doesn’t it?

Oh, I forgt to add to add a bit more lighting with “Dodge Tool”. So what are you waiting? Let’s do it. Grab your “Dodge Tool” and select 60 px soft brushes , put the Range to “Highlits” and Exposure to 15%. Now select the blue layer and make a few brush strokes left and right until you get the light you wanted, like I did:

Hehe, now it looks even better. See, I told you:

I think that we’re done with that button, now let’s add some text. Select your “Type Tool” (T) and grab any font you like and put the color black (#000000). I have used “Arial Narrow”, Regular, 12 px size and Smooth. Write your first link and select the Blending Options. We are going to add some “Drop Shadow” to it like this:

Now your text should look like this:

Do the same with all the other links except for the hover one:

Now let’s create the hover one. Use the same font and everything except put the color to white (#ffffff) and add these Blending Options:

Well believe it or not we’re done! If you followed this tutorial carefuly, you should be having something like this:

I hope you liked this tutorial. Feel free to use it in any of your designs but don’t forget to leave a copyright to CoreGFX. You may not redistribute this tutorial without contacting us first. If you have any problems or any questions feel free to contact me on my msn anterrx@hotmail.com

If you want to download the source files, you can do it by clicking the link below.

Click on the image for tutorial.