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:

So let’s begin. First create a new document size 350×150 (but you can use any size you want) and write some text on it. I have used the font “Impact”, 80 px, smooth.

Now we would like to rasterize this layer so go to Layer>Rasterize>Type.
After that’s over go to Edit>Transform>Perspective and move the upper left box up like this:

After you are done with that press Enter. Now duplicate your text layer and put it unde the original one. After you did that, select the layer you just created (located under the original one) and while holding Ctrl+Alt press the left arrow a few times until you get what you want. This is how it looks like now:

It looks terrible, doesn’t it? But don’t worry, we are going to fix it. Now merge all the layers you just created except the original one and go to Image>Adjustments>Brightness/Contrast . Put the “Brightness” to -50 and press OK. It looks much better now:

And that’s it. But you can do a lot of stuff with this now. You can put different Blending Options to those layers. I have played a bit with mine and this is what I came up with:

If you want to know how I got this style you can download the .zip package including my .psd files.

I hope you liked the tutorial. Please don’t forget to say thanks and to rate our tutorial.