by This post illustrates how to design simple call-to-action buttons (inspired to Woork Up buttons you can find on the home page) using Photoshop. I prepared a Photoshop file you can download and reuse on your design projects.
Design the background shape
Create a new layer and add a new shape using the shape tool. Set the radius parameter to 10px for rounded corners:
Select the layer with the shape and add the Gradient Overlay effect:
Add the Bevel and Emboss effect:
Add the Stroke effect. Set size to 1px and position to outside.
Here is the result:
Add text
Now add a a text over the shape and apply the Outer Glow effect:
Here is the final result:
Download the source file for Photoshop.
Antonio Lupetti is an italian engineer, pro blogger, Mac user, founder of woorkup.com. He lives in Rome, Italy. Follow Antonio on 
November 15, 2009 at 7:47 pm
Thanks for this tutorial, I don’t use photoshop, but I’ll try it with Gimp. A tutorial on how to make some Badges will be welcome.
November 15, 2009 at 11:28 pm
Wonderful post…Thanks for sharing.
November 16, 2009 at 4:59 am
This is yummy for beginners like myself! Thank you.
November 16, 2009 at 6:05 am
great post! brief and useful.
November 16, 2009 at 6:30 am
Thanks you, was wondering how this was done.
November 16, 2009 at 7:02 am
Great example and easy to use. Thanks for sharing.
@micheltel
November 16, 2009 at 10:19 am
nice tutorial, very simple and clear. thx
November 16, 2009 at 3:49 pm
I’m glad to see other people using vectors instead of raster graphics for simple things like this!
November 16, 2009 at 7:37 pm
Great button simple
November 17, 2009 at 1:37 am
So simple to do, I’ve been years trying to figure out how to make all the details until I was able to get this method.
November 17, 2009 at 12:13 pm
Nice and useful tips and trick….
Thank You..
November 19, 2009 at 5:44 pm
Totally new at this photo shop stuff so I appreciate detailed tutorials with great outcomes. Thanks!
November 26, 2009 at 1:18 pm
Hi Antonio
Lemme ask about 2 things
1) don’t you know about a Photoshop action that can do the same kind of button, but automatically? (maybe just providing the text)
2) Could you put a subscribe checkbox toghether with the submit comment form, so we can subscribe to new comments on each post?
Thanks
November 26, 2009 at 1:53 pm
1) No, I don’t know but I can create it.
2) Of course! I’ll do :)
November 27, 2009 at 11:23 am
[...] I’m sure). Make the unique selling points really visible on the home page, have clear “calls to action” for example the “Sign Up” or “Create Account” button, explain what [...]
November 28, 2009 at 12:07 pm
Hi,
Interesting post – thanks! I run a bespoke website design and development company and will use this to improve our buttons!
Ben
December 2, 2009 at 3:14 am
Nice. This is the same button as the home page of Basecamp.
December 9, 2009 at 5:46 pm
You know; I think that you’d be better using CSS instead of making the button entirely in photoshop.
Create the gradient on a square background at about the same height as your button. Make it in the same was as shown above. No need to worry about its width, but make sure that the background you make is SQUARE! you’ll need it square because not all browsers can yet display curved borders.
Then, use CSS to create a class for your hyperlink that looks a little like this:
a.button {
display:block;
width:150px;
height:45px;
background-color:#33cc33; /*an approximation of the green used above*/
background-image:(”the-background-image-you-made-above.jpg”);
border:1px solid #ffffff; /*replace ffffff with the colour in hex of your page if you like*/
border-radius:7px;
padding:5px;
}
This will give a button-like hyperlink that will degrade gracefully and work nicely even in text-based browsers and screen readers =]
January 3, 2010 at 12:54 pm
That’s cool Antoni.