Make A Big, Beautiful Call-To-Action Button In Photoshop

Yesterday, I published a post with some guidelines on creating call to action buttons. Today, we’re going to make one in Photoshop. I’m using some fairly bright colors here, but of course you can change the button to suit your own site’s style and color. Let’s get started.

1. Create a new document in Photoshop, 400 x 400 pixels.

2. Select the Rounded Rectangle shape tool (Hit Shift U on the keyboard to cycle through the shape tools) and in the tool options bar, choose “shape layers,” set the radius to 20px and choose whichever color you’d like.

Tool Options Bar

3. Draw out a rectangle. In the Layers palette you’ll see a new layer with your rectangle on it, with a vector mask thumbnail beside it.

rectangle

4. We’ll add a few styles to our rectangle to make it look a little more interesting. Make sure the rectangle shape layer is selected, then click on the Fx icon at the bottom of the layers palette. Choose Drop Shadow from the drop down menu.

dropshadoweffect

5. I chose the following settings. Blend mode = multiply, color = mid grey #666666, distance = 2, spread = 2, size = 2. Click Ok to apply.

DropShadowDialog

6. Again click on the layer styles icon on the layers palette and choose Gradient Overlay from the drop down menu. Photoshop comes with tons of pre-made gradients, but we’re going to make our own for this button. Click directly on the gradient drop down box (not on the triangle) to edit the gradient.

EditGradient

In this case I picked a dark orange for the first color stop on the left, a yellow for the middle and white for the third color stop. (To add a color stop just click under the gradient.)

GradientEditor

At this point, the button looks like this. The gradient and drop shadows are subtle but already look much better than the plain rectangle we started with.

buttonaftergradient

7. The next style to add is also a subtle one. We need a little bit of Inner Shadow, so select that from the layer effects dialog box. I used the following setting: Blend Mode = multiply, color = #666666, Distance = 0, Size = 10px and Opacity set to about 35%.

InnerShadow

The button now looks like this.

buttonafterinnershadow

So I’m going to leave it there with the styles. You could add a stroke or a color overlay, just play around until you find the look you like.

Important Stuff: If you’ve gone to the trouble of creating a button, or any other layer with a number of styles, it’s a good idea to save the styles so that you can use them again without having to go through all of the above. So before you click OK on the Layer Styles dialog box, click New Style and give your style a name and save it.

SaveStyles

When you want to use it again, open the Layer Styles dialog box, click on the word Styles in the top left corner (yes that is a button!) and you will see all the premade and your own styles in there.

StylesPreview

8. OK, now to add some text. Choose the Type tool and then pick a font you like. I’ve used Avenir Heavy, size 38 for “Sign Up Now” and Avenir Medium, size 18 with Tracking 50 for the tagline. Make sure your text and the button are all nicely aligned. I added a drop shadow to “Sign Up” with a Distance = 1 and Size = 5, so the text now looks like this:

ButtonWithText

I think that looks reasonably smart and eye-catching. You could make the button more elaborate by adding an image or an icon. Keep it simple though.

I love the Firefox and Thunderbird download buttons and the icons they use, but I’m not going to attempt to draw them. I’ll add a Photoshop shape instead.

Thunderbird

Firefox

9. Choose the Custom Shape tool, and from the tool options bar choose the shape you want from the drop down box. I chose a heart because I love ALL of my website visitors.

custom-shape

10. Drag out the shape and drop it on the left side of the button. I set the shape color to light blue as a complimentary and contrasting color with the orange button. I added a drop shadow and subtle gradient overlay as before. Now that the shape is taken up some of the button area, you need to move the text a little to the right to give it some breathing space. My final button looks like this.

finalbutton

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • AK

    Thanks Jennifer,

    I’m not a designer but by reading articles like this one, I’m not helpless if the designer takes a day off. Also, who is your target audience when you write these articles?

    Waiting for the next post.

  • http://www.laughingliondesign.net Jennifer Farley

    Hi AK. Thanks. My target audience is anyone who’ll read it ;-) Really the audience I’m writing for is new designers and people interested in design in general, not necessarily just web design.

  • http://www.pageaffairs.com/ ralph.m

    Hey Jennifer, where do I sign up? ;-)

    Nice, clear, simple post. Thanks very much.

  • http://www.myburg.com cajebo

    Well disciplined post Jennifer. I came this way from a twitter post & glad I did. Great to find a new encouraging voice. (now to go read your previous posts)

    michael

  • http://www.openedgewebdesign.com Timbothecat

    Hi Jennifer.

    Great tutorial. Very simple and concise. Well done.

    I also love the Firefox and Thunderbird type logo’s and would love it if you could post something on how to develop these kinds of icons/images. I’ve tried doing a search for tutorials on how to do them, but I must be using the wrong search terms or something because it has been a struggle.

    Anyway, please keep up the fine work.

    All the best,

    Tim.

  • Jasconius

    It’s clear. It’s useful. The title doesn’t completely conceal the actual content of the article with a false inflammatory statement!

    Is this Sitepoint I’m reading?

  • vijay

    Hmm well I guess these are already into practice but may be for new bees! could make some sense…


    http://dabberdesing.com

  • http://www.magain.com/ Matthew Magain

    @Jasconius You know, you could have just said “thank you” to Jennifer instead of laying on the sarcasm… just a thought.

  • Jasconius

    They should be sophisticated enough to accept criticism, dearest Matthew.

    I laud them for not insulting the intelligence of their readers this one time. Let’s see if the trend continues!

    Signed, a spectator.

  • Keeton

    Thanks Jennifer! You can see the one I made at http://linktrack.info/

  • http://www.josephlancaster.com jplancaster

    Nice article Jennifer. I too like the browser buttons. They inform even at the last second prior to clicking.

  • Anonymous

    This is absolutely informative tutorial. Thanks.

    Regards,
    photoshop masking
    http://www.sblgraphics.com/photo-masking_service.aspx

  • http://www.mosio.com/ffm Noel Chandler

    Jennifer, this is great, thank you!

    I have been looking to update ours, going to use this technique and get new ones up ASAP.

    Thanks again,

    Noel

  • http://iwanttodrawacatforyou.com Steve

    Thanks so much for this, Jennifer. I’ve been looking for a tutorial like this for a long time… and now just used it to update my BUY NOW button on http://iwanttodrawacatforyou.com.

    Thanks thanks thanks!!!