Free Photoshop Web Buttons

nospam@example.com (Eric) — Fri, 06 Nov 2009 17:08:50 -0400

For this week I thought it would be nice to give a quick Photoshop tutorial with a free downloadable file. I know, we're giving away our secrets and free things....what's wrong with us? What better to give away free than a few quick glossy buttons. Here is the final image.

I'll give you a quick rundown of how to get there or you can cheat and just download the file at the end of this post. First, make a new Photoshop document (file>new). The document I made was 500px X 450px at 72 pixels/inch, color mode of RGB. Click the advanced tab and use the sRGB IEC61966-2.1 color profile (this is the recommended color setting for web images) then click "ok".

The size of your file depends on what you're using it for so you'll have to be the judge but if you're trying to follow along grab the rounded rectangle tool and make your box roughly 370px X 90px because these settings could change if your button is a different size. I also put a 20px corner radius on the button.

Double click the layer in your layers palette (don't double click the box on the left of the layer or the name, try the far right side) and apply the following layer styles:
Drop Shadow:

Gradient Overlay:
For gradient overlay you'll have to click on the gradient bar to adjust the gradient. You can play with the colors but for this tutorial I used a lighter gray at the bottom (left side), then a darker gray at a location of 47%, then the same gray as the first at a location of 51% and then finally a lighter gray at the top (right side).

Inner Glow:
For inner glow I used roughly the same color as the darkest part of the gradient overlay.

Stroke:

This is what you should have after all these layer syles are applied.

Now just add a little text to your button. The font I used is Trade Gothic Bold Condensed 20. Add a light drop shadow like before, just a little smaller and add a gradient overlay with a fade from light gray to white. Voila! You have a fancy, new web button. You can adjust the colors as you want. Below are a few versions that I made quickly.

BIG ideas from Integrated Advertising Network - Design

Free Photoshop Web Buttons