Call to Action! Creating Cool Gradient Style Buttons.
“Contact Us”, “Learn More”, “Click Here”, “Free Money!”. OK that last one I made up, but we have all seen these calls that ask us to do something.
Calls to action in interactive media are usually buttons or links that begin a process. Making these important calls stand out requires some designing further than, and in addition to, the underlined hyper link.
The text and words used in calls to action are topics of another discussion. For this tutorial I am focusing on the design elements of a graphical button and specifically simple gradients with a 1 to 2 pixel gap from the border created in Photoshop. This tutorial is similar to the previous one on creating cool graphical text, but changing a few things and applying it to buttons.
Step 1.
Create your call to action text on its own layer. I like to use a bold typeface. Sometimes the text will look better if it is in ALL CAPS other times all lower or Initial Caps. This is a matter of design taste and should mesh with the other elements to some degree.
Step 2.
Now that the text size is set we will create a shape on a new layer below the text. The shape I am using is the Rounded Rectangle tool. Make the shape go passed the edges of the text but not so much that the text is lost inside the shape.
Step 3.
Now that the shape is centered underneath the text we need to make a selection of the shape and create a new layer for the gradient.
Go to the shapes layer in the Palette window and click on it, then create a new layer just above it. Now Control or Open Apple click on the shape layer thumbnail in the layer palette window to make a selection of the outline of the shape. Now go to the top menu for Select then Modify/Contract and enter a value of 1 or 2.
Step 4.
With the selection still showing and the new layer selected click on the gradient tool. Select a gradient that is a color in full opacity, white or black, that goes to transparent. Now click on the top and go vertically to the bottom just above and below the selection outline of the shape. That is our gradient layer. I also like to cut the gradient, using the rectangle selection tool, through the middle horizontally.
Step 5.
Making the image, button, obvious that it is something to be clicked is the main goal. Contrast in color plays an important role in this by establishing precedence. If I create a light tan background and then a button on top that is white with gray text, it will most likely be lost into the background. High contrast lights on darks or vice versa are best.
Size is another factor. Making a tiny button with your call to action on it may work for most users that are savvy and looking for it, but don’t eliminate users. Making the calls large enough not to be swallowed by the other elements will ensure it is not missed.
Arrows are design elements that guide a users eye in a particular direction. Using arrows before or after calls to action can help with calls that are not contained within an image.
Additional imagery can help push the idea of the call to action. Imagery can also help with branding and theme of a design. The main purpose would be to keep the button simple and obvious, but including an extra element such as a product can work and make the graphic more appealing.
Don’t forget to subscribe to the 10e20 RSS Feed!
Nice moves, dude. That button is wicked hot.
I tried clicking it numerous times but nothing happened. Still…it was strangely satisfying.
Thanks Mike! I new it would be clicked on, I even clicked it a few times…the power of the button ;)
Hi,
Nice tutorial for Photoshop :) You was explaned not only all steps for making the button but the basic design look for the beginners. Its cool.
For other that was trying push the button :) Friend this is only tutorial – lesson to teach you how to make button like this but after finishing button you have to give him HTML links or tags to work as a button, if not this is only image. Thanks! Dont try push it :) just make it :)
Am I right?
Hi Yuliya- Glad that you enjoyed the tutorial, thanks! And yes, you are correct- just a tutorial ;)
oh,very good
I can study the photoshop and I can make a cool icon for my website http://www.sina-ut.cn
Thanks!
Awesome! Finally a simple, quick, easy-to-understand guide on how to make these beasts! 5-stars guys.
I usually work with Fireworks for graphics but they never turn out anywhere as good as that – perhaps its also my poor design skills but now I want photoshop to try my luck at making some cool buttons as well.
Very eye catching and color specific designs. Blue is one of the great call to action buttons which has a great ROI.
The last button is so simple and yet glowing. Thoughtful and proper color combination. I use Fireworks to design my images, but they're not as catchy as I would want them to be. I really have to try and get Photoshop.
Can you tell me what the bold font is at the top you used, really like it but can't find it, thanks.
Hi Patrick,
Yesterday I read ur article about gradient colour and I tried it ..It helped me to design some crazy things… Today u said about this buttons design i will surely try it in adobe photoshop today… thanks for this
Hello Patrick,
It's not all about how cool the design of the button really is, but more about how efficient it is. Gradients and lights will help creating the "button" feeling.
Although not directly related to the design, I wrote a post about a technique called dynamic text on call to action buttons . Some of your blog readers may find it useful. Cheers.
Calls to action button is a amazing way to increase conversion rates when set in correct places!
Nice post!
Thanks.
Ok, so this was totally awesome. I have recently started blogging, and I have seen similar buttons around the web. Now I know how to make them!! Thank you, thank you, thank you. Excellent tutorial. :)
If I only can learn how to make buttons and images like you! I have Photoshop, but it lies idle most of the time.
As a CMS developer and not a graphic designer, I never believed I could be able to create this kind of button until I read this article.
It's funny, but I use ordinary text to do it. Have never got myself to entice visitors a link with buttons, probably because I didn't know how to design buttons.
Nice tutorial, This post will help me while designing my call to action buttons. I am a newbie to photoshop. U made my work simple. Thanks
Hi,
This Tutorial is really cool. thanks for sharing.