In this tutorial, we will create a sleek blue glossy button in Photoshop. Though I will be using Photoshop CS3, any version will work. Let’s get started!

Finished Product

Here is what we will be making today:

Final

Step 1

Let’s begin by creating a new document of the size 500×350 pixels. Set your foreground color to #026d8d, and your background color to #01c1e2, and then grab the Gradient tool and drag a foreground-to-background gradient from the top to the bottom of the image.

Hint: To make sure that the gradient is perfectly vertical, hold down the Shift key while you drag the gradient.

You should now have:

Step 2

Now let’s create the button.  Get the Rounded Rectangle tool, set its corner radius to 10px, and draw out a shape like this:

Step 3

Now we’re ready for some layer styles!  This is always my favorite part of designing, because it really turns something flat into something 3D.

Make sure that your shape layer is selected, and then apply these styles to it:

General Options

Inner Shadow

Outer Glow

Inner Glow

Gradient Overlay

Gradient

Stroke

After you have applied all of these styles, you should have this:

Step 4

It looks pretty good already, but we can still improve it a lot.  First, let’s bring up the contrast a bit.  To do so, Ctrl+Click on the Shape layer’s thumbnail to load it as a selection, create a new layer, and fill the selection with a medium-gray (#808080).  Set this layer’s Blending Mode to Soft Light, and then give it a gradient overlay:

As you can see, this made the button have a bit more contrast:

Step 5

To make the button look a bit more shiny, let’s add a shine to the top of it.  Make a new layer above all of the other layers, and then get the Elliptical Marquee tool out.  Drag out a pretty big selection like this:

Now we’ll narrow down the selection so it’s just in the button.  Do this by Ctrl+Alt+Shift+Clicking on the Shape’s layer thumbnail.  Fill this selection with any color (I used white).  You should have this:

Step 6

Let’s add some styles to this layer too.  With the new layer selected, apply these styles to it:

General Options

Gradient Overlay

Gradient

Now you have a nice shine on your button:

Step 7

To make the button look like it’s floating above the ground, we will add a drop shadow to it.  Duplicate the button’s shape layer, and drag the new layer just above the background layer.  Clear all of the new layer’s layer styles by going to Layer>Layer Style>Clear Layer Style, and then - with the Move tool - drag this layer down a bit.  Finally, transform this layer to about half of its height. Look at this image for a reference:

Set this layer’s color to black, rasterize it (Layer>Rasterize>Layer), and then go to Filter>Blur>Gaussian Blur with a radius of 20 pixels.  After lowering this layer’s opacity to around 70%, you should have this:

Step 8

The final step in this tutorial is to add text to the button.  Head over to the website http://www.dafont.com/space-age.font, and download the Space Age font there.  Create a new layer right under your Shine layer, and using your newly downloaded font, type the text Submit into the middle of the button.  Set the font size to 72 pt, and the color to anything you want.

Hint: To make sure that the font is in the exact center of the button, do this: First, make a selection of the button’s layer by Ctrl+Clicking on its thumbnail, and then select the text layer that you want to center. Click on the Move tool, and then click on the Align Vertical Centers and Align Horizontal Centers buttons in the Move tool’s toolbar.  This should make your text perfectly centered to the button.

Now let’s give the text some style.  Use these settings:

General Options

Inner Shadow

Outer Glow

Gradient Overlay

Gradient

Finish

That’s it!  You have now created a beautiful sleek submit button that you could slice and put on your website to show off.

In this tutorial, you learned some of the principles of Web 2.0 design - reflections, layer styles, and good drop shadows.  I hope you enjoyed this tutorial, and that you will subscribe to my RSS Feed so that you don’t miss any more tutorials that I write.

Until next time, Happy Designing!