Categories Site Actions X

Making a cool button in Photoshop

Posted on Wednesday, October 13th, 2010 in Internet, Other by Nick

Today we’re makin’ a neat, little button in Photoshop. This tutorial is brought to you by Cody Sanfilippo, so props to him.

First off, you’re gonna want to make your document. Size doesn’t matter here, my document is 400×200, with a gray background. The button we’re making here is gonna be blue (#00d8ff), but all colors will look fine on a gray background, so don’t be ‘fraid to change the color.

To start this fancy little button off, go ahead and select the Rounded Rectangle Tool (U). You can either draw the button, freeform, or you can set a fixed size. I’m gonna go ahead and do that, by setting it up in the top bar. I did 100 px by 40 px.

So, now that you have our actual button we’re gonna get into the fun part – the layer styles.

Go ahead and right click on the button layer, and hit “Blending Options.” Check off Drop Shadow, Inner Glow, Gradient Overlay and Stroke. Use the following settings, if you’re using the shade of blue I mentioned previously. If not, you’re gonna want to tweak these a bit to see what looks the best.



Should look somethin’ like this now.

Now take out your type tool (T) and slap on the text you want on the button. May I sugget “NEWB,” or “WIRED?” 🙂 Use black for the color, cause we’re gonna apply a pretty cool effect here. (FYI, font is PF Tempesta Five Condensed, size 20pt)

Now, open up the Blending Options for this font layer and let’s get to business. Before checking anything off, set the “Fill Opacity” under Advanced Blending down to about 60% (again, this is gonna be different for you if you’re using a different color button). Now, check off Drop Shadow and use the following settings:

Now it should look like the text is inlaid into the button. Cool, huh? 😀

Now, you can go crazy. Try glows, and more colors, etc. Use your creativity to make something really awesome!

HomeForumsMaking a cool button in Photoshop

This topic contains 0 replies, has 1 voice, and was last updated by  Nick October 13, 2010 at 7:45 PM.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #3265

    Nick
    Keymaster
    • Offline

    Today we’re makin’ a neat, little button in Photoshop. This tutorial is brought to you by Cody Sanfilippo, so props to him. First off, you’re gonna wa
    [See the full post at: Making a cool button in Photoshop]

    Please let me know about any site issues!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

Join the forum to add your own thoughts!