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:

Let’s begin now, shall we?

First open up a new document size 300×100 and fill it up with white color althrough you can use any color and any size you want.

Now press “D” on your keyboard (which select your colors to black and white) and grab your “Gradient Tool” (). Leave the gradient options normal except the following:

Mode: Difference; Opacity:100%; Reverse: Yes; Dither: Yes; Transparency: Yes.

Now do a bit of gradienting but don’t go to crazy cause it won’t turn out so good. This is what I managed to do:

Now go to Filter > Stylize > Glowing Edges and press OK. After that press Ctrl + I on your keyboard for inverting your signature.

The next step is optional but can make your sig look better. In this step we’re going to make a source of light and dark. For creating light use “Dodge Tool” (), and for dark – “Burn Tool” (). This is what I did to mine:

Now select your “Gradient Tool” () and put all the options to normal. Pick two colors that you want and put them in your color pallete (in my case I’ve used dark and light blue). Create a new layer and make a Gradient on it. This is how it should look like:

Now put the “Gradient” layer to “Color Dodge” and if the colors go crazy, just lower down the opacity. I’ve set mine at “80 %”.

Now duplicate the “Gradient” layer > press on your “Gradient” layer and go to Select > All (Ctrl + A) and than Edit > Copy Merged (Ctrl + Shift + C) and than finally Edit > Paste (Ctrl + V). Now you should be having a new layer on top of these two.

Set that layer to “Overlay” and if the colors go crazy again, just lower down the opacity.

Now let’s go to Image > Adjustments > Hue / Saturation .
You can press the color button and select the color you want, or you can just play with the scrool bars until you get the color you want. I’ve used sprite for mine (light green).

Do that again but with different colors.

Now duplicate the”Gradient”  layer again (press on your “Gradient” layer and go to Select > All (Ctrl + A) and than Edit > Copy Merged (Ctrl + Shift + C) and than finally Edit > Paste (Ctrl + V)).

I’ve set the “Bledning Mode” of that layer to “Soft Light” and played a bit with Hue/Saturation again.

Yet again duplicate the “Gradient” layer and use the “Clone Stamp Tool” to fix all your mistakes. You can see what I did:

Now go to Filter > Brush Strokes > Angled Strokes. Play a bit with the settings until you get what you want.
What you don’t like, just remove with the “Eraser Tool” .

Now finally all you have to do is add some text and we’re done.

Oh yes, I almost forget the border . Let’s do it fast, just create a new layer and go to Select > All (Ctrl + A). Than go to Edit > Stroke and use a 1px black border.

This tutorial was made by Aqua. Translated (from Croatian) and converted by Core GFX. All rights for distributing and editing this tutorial reserved.

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:

I know that you’re dieing to see how they will look in the end, so this is how:

Ok, so let’s get going. First create a new document any size you want (I’ve used 180×80) and fill it up with #212121.

Create a new layer and using your “Rectangular Marque Tool” () make a selection which is going to be your button. Now go to Select>Modify>Smooth, set it to 3 px and press OK.

Now you can fill it up wih any color you want using the “Paint Bucket Tool” (). I’ve used #b00000 and this is what I came up with:

Doesn’t look so good, ehm? So what are you waiting for, let’s add some blending options. Right click on the layer and select “Blending Options”. Add the following than:

You should be having something like this:

Let’s add some text. Select your “Horizontal Type Tool” () and add some text with the color #ffffff. I’ve used the font “Arial Narrow”, Regular, with size of 13 px and Sharp. You can use any size you want, it depends on the size of your button.

Doesn’t look so sharp, right? Let’s add some “Drop Shadow”. Again right click on your layer in the “Layers Panel” and press “Bledning Options”. Add the following:

And this is what we got than:

Well believe it or not, we’re done! You can now create buttons with any color you want just by changing the color of your first layer. Here’s an examples:

If you want to download the source files, you can do it from the link bellow:

I hope you liked the tutorial. Feel free to e-mail me with any questions you might have (my e-mail is btw admin@coregfx.org). You can use these buttons in your designs or anywhere else. Please leave a comment with your thoughts about this tutorial.

This tutorial has been sponsored by:

Let’s cut the talking and get down to business. So once you’re done this is how it’s going to look like:

Nice? Hehe. Let’s begin. Open up a new document size 250×150 and fill the background out with #252a38 .

Now let’s create a shape. Now get any color you want (we are going to change it later anyway) and get your “Rounded Rectangle Tool” ().  On the top of the screen you’ll have some properties and I have made a screenshot on which ones to select:

If you have put those properties you can continue making a shape. Create a new layer and just make a shape on the middle of your screen.

Now we are going to fill it with some gradient. We will need two colors though:

As you can see on the image above the two used colors are #3a4056 and #303548. Now Ctrl+Click on the layer where you made the shape (in your layers panel, CTRL + click on the image next to the layer name and it will be selected). Now the outline of that layer should be marked. Grab your “Gradient Tool” () and while holding “Shift” on your keyboard make a gradient from top to bottom of your shape:

Now let’s add a Drop Shadow to that layer. Right click on the layer and select Blending Options. Now apply these ones to the layer:

Now we’re going to add a Stroke but on one different way. Hold Ctrl and click on the shape layer. You should see a selection on your screen. Now go to Select>Modify>Contract , put it to 1px and press OK. Now create a new layer and fill it with any color you want and put the “Fill” to 0%. Now right click on that layer and go to Blending Options and apply these ones:

If you followed the tutorial carefuly you should be having three layers (Background, Shape and Stroke) and your button would look like this:

Now let’s make our button a bit stylish as I said in the title. For this you are going to need Dodge () and Burn () Tool. For both you are going to use the following properties:

I have used the Soft Brushes which you get in every Photoshop. Now select your Shape layer. I have made an image to show you were to use your Dodge and Burn Tool. Please note that you should press your mouse a few times before you get the amount of brigthness/darkness you wanted.

If everything turned out well, you should be having something like this:

Let’s add some more light to make it look glossy. Ctrl+Click on your shape layer and grab your “Elliptical Marquee Tool” (). Now while holding Alt cut down a bit of the selection. My example:

Grab your “Gradient Tool” () and press your keyboard the letter “D” and than “G”. Now you should be having white (#ffffff) as your first color. Now at your Gradient Properties select “Foreground to Transparent” like shown on the picture below:

Now use your gradient like this (from bottom to top):

After your done you can deselect the layer (Ctrl+D). Now put the layer to “Overlay” and “Opacity” to 40%. It should look like this:

Looks perfect, doesn’t it? I think it’s the time to add some text and icons. First will go with the text. I have chosen the font “Arial”, Regular, 25 pt, Smooth; and the color of the font is #ffffff. Write something down and add these Blending Options to the text:

This is how my text looks like now (I have moved it a bit to the right because the icon will go left):

I have added another small text underneath this one as a description with a size 11pt:

It’s time to addthe icon. You can chose which ever you want but I have decided to use the ones by Free Icons Download (they are Spyware free don’t worry). Grab the icon you need (I have chosen the home button for the obvious reason) and paste into your design. Now go to Image>Adjustements>Hue/Saturation (Ctr+U) and put the “Saturation” to -100:

After that just put your icon to “Overlay” and your done. Note: If your icon is too bright (too hard to see), you can duplicate it and just change the opacity of the duplicated layer. This should be your final image than:

Well believe it or not we’re all done. As I sad in the begining, you can change to colors to which ones you want and add any icons. Here’s an example of just a few variatations:

If you want you can download the source .psd files.

Thank you for reading this tutorial. Please do not redistribute this tutorial without any written permission by me. If you want it, please contact me on admin@coregfx.org .

This tutorial was sponsored by:

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.

Listing Statistics:
No. of Tutorials: 19
Last Updated: 15th June 2008

So here’s the list:
Create a Layered Glowing Text Effect

Created by: PSD Tuts

Author: Kyle Pero

Date Added: 15th June 2008

6 Quick’n'Dirty Photoshop Text Effects

Created by: PSD Tuts

Date Added: 15th June 2008

Author: Collis

3D Typographic Effects in Photoshop

Created by: Digital Arts

Date Added: 15th June 2008

Author: Nik Ainley

Create a Spectacular Grass Text Effect

Created by: PSD Tuts

Date Added: 15th June 2008

Author: Collis

Aqua Text

Created by: Voidix

Date Added: 15th June 2008

Author: N/A

Dramatic Text on Fire Effect in Photoshop

Created by: PSD Tuts

Date Added: 15th June 2008

Author: Collis

Design Soft Stylized 3D Type

Created by: PSD Tuts

Date Added: 15th June 2008

Author: Arik

Slow Shutter Text Effect

Created by: Shotgun Magazine

Date Added: 15th June 2008

Author: N/A

Create a Spectacular Flaming Meteor Effect on Text

Created by: PSD Tuts

Date Added: 15th June 2008

Author: Fabio

Recreate the “Bee Movie Text” Effect

Created by: Photoshop Star

Date Added: 15th June 2008

Author: N/A

A Slick Supernatural Text Effect

Created by: PSD Tuts

Date Added: 15th June 2008

Author: Collis

Wicked Alien-Entity Text Effect

Created by: Photoshop Star

Date Added: 15th June 2008

Author: N/A

Icey Styles in Photoshop

Created by: PSD Tuts

Date Added: 15th June 2008

Author: Collis

Kaboom! Exploding Text

Created by: Homemade Tutorials

Date Added: 15th June 2008

Author: Gabriel

3D Cliff text

Created by: Tutorial Wiz

Date Added: 15th June 2008

Author: N/A

3D Photoshop Text

Created by: Celox Design

Date Added: 15th June 2008

Author: Celox

Bling Bling Simple Gold Text Effect

Created by: Photoshop Star

Date Added: 15th June 2008

Author: N/A

Simple 3D Text

Created by: Core GFX

Date Added: 15th June 2008

Author: Anterr

Cartoonish/Juicy Text

Created by: PS Tut

Date Added: 15th June 2008

Author: Michael

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.

Click on the image for tutorial.

Click on the image for tutorial.