I came up with this technique when I was creating Photoshop templates at work which called for all sorts of different colored buttons. Typically before this, I created buttons the usual way, combining transparencies with gradients and other elements, and that worked out fine for a few different buttons, but what if you had to do a whole series of different colors and shapes? As it turns out, it’s pretty easy when you utilize Photoshop Styles.

Here’s what I did. Create a new file in Photoshop (File/New) with these dimensions and hit enter or click OK:

Next, using the Type Tool, click somewhere in the white space and type anything. The font I’m using is Cooper Std, 72pt, color #1b69eb. Position it somewhere near the center.

To the bottom right, you should see a list of layers. Click on the layer with the type on it, then click the “fx” icon on the very bottom. On the drop-down list, click “Gradient Overlay…”

This brings up the styles palette. By default it will fill your text with a simple black to white gradient. This is actually what we want to work with. Click on the gradient bar to bring up the Gradient editor.

Next, to emulate that shine effect, click and drag the black box or “stop” at the bottom left to the center, or type in 50% click the spot where you dragged the black box to create another stop at 0%. After that just click once around the middle to create another stop. Set it’s location to 55%.

Click on the stop at 55% and change its color to #999999 by clicking the color box. Click on the stop at 0% and change its color to #7f7f7f. Then click on the diamond shape between the two stops and drag it to 75%. For a sharper shine, I changed the location of both middle stops to 50%. Click OK.

This is where the magic happens! Click the Blend Mode drop down menu and change it to “Overlay”. Take a look at the image. While the gradient is grayscale, the text stays blue. You can lower the intensity of this effect by changing the opacity.

As a final touch, click on “Inner Glow” and copy the settings I have here:

Click on “New Style…” and save it as whatever you’d like. Now you can apply the style to just about anything by clicking the icon under the “Styles” tab. I find it useful when I’m laying out sites. It doesn’t really alter the color scheme, and makes it very easy to create consistant on and off states for buttons. One downside, however is that it does not work when you use a really saturated color, especially full red.

You don’t have to stop here. Try playing around with different things such as a subtle bevel and emboss, or outer glow. I’ve even had some good results using a subtle inner stroke. Just make sure to save the style.

Got any suggestions or comments about this tutorial? Leave a comment below or send me a message!