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!