Free Photoshop Guides

In this tutorial, you’ll learn how to create a slick and clean button similar to the ones found on many “web 2.0″ sites.

To start off with, create a new document and a new layer inside that document. Then grab your rounded rectangle tool. Set the corner radius to 5 and set your fill color to #05d400 (you can always change colors later, but using my colors now will let you see how the two different hues interact later on to create a highlight effect). My button is 160×30px, though you can make yours smaller or larger as you like.

Next, we need to apply the following layer styles (click the thumbnails for larger images)

After applying the layer styles, your button should now look like this:

Now create a new layer and Alt+Click between the two layers in the Layers palette to group them. Using your rectangular marquee tool, select slightly more than the top half of the rectangle we just created and fill the selection with yellow (#ffff00). Lower the layer’s opacity to 30%.

Now let’s add our button text. Pick a nice sans-serif font that’s reasonably bold. I’m using Tahoma. Set your anti-aliasing to either sharp or crisp (depending on which looks best for the font you’ve chosen). Set the size to around 14pt, scaling accordingly depending on the amount of text and dize of your button. Enter your text and center it within the button like so.

Finally, finish off your button by applying the following layer style to the text layer (click the thumbnail for a larger image).

There you have it, a stylish, simple and clean button for use in your website or interface.

Social Bookmarking: BlinkList del.icio.us Digg it Furl ma.gnolia Netvouz RawSugar Shadows Simpy Spurl Yahoo MyWeb

Added Tuesday, May 30th, 2006 at 5:22 am under Interface Elements.