Photoshop Tutorial – Create Clean and Fresh Button

Step 1

Create a new document size 750px * 400px (size doesn’t really matter here) and fill this background layer with White. Create a new layer on top of the background layer called “gradient”, grab the Gradient Tool from the toolbox and fill it as shown below:

I decide to use this light gradient because it’s easier to demonstrate several important points in the next few steps. You can of course try out darker ones.

Step 2

Let’s type some text on the canvas. I used this font because I personally feel it’s a very clean and bold font, which you can use for a wide range of headings, or descriptive text.

So type some sample text on the canvas as shown below: (use a slightly darker colour for font colour)

Appy the following layer blending option to the text layer:

Inner Shadow

Stroke

And you will have the following effect to the text layer:

See, that’s our embossing text effect done. Very simple, yet effective.

Step 3

Ok let’s get on with creating the call-to-action button. Use the Rounded Rectangular Tool with a 7px radius, draw a button on the canvas as shown below: (Make shape you select “shape layers” on top option bar)

Apply the following layer blending effect to this button:

Bevel and Emboss

Gradient Overlay

With the Gradient Colour, apply the following settings:

Location 0% – Color: #0083be

Location 99% – Color: #31c8fa

Location 100% – Color: #FFFFFF

Stroke

And you will have the following effect:

Step 4

Now we have a button background, let’s add some symbol onto it so it provides some kinds of graphical meaning. In this case, I decided to make this button a download button. So naturally I thought of a down arrow would mean something to the user.

So grab the Custom shape tool from the toolbox:

and choose the bold arrow from the library as shown below:

Draw an arrow on the position as shown below, rotate it clockwise 90 degree when you done the drawing:

Apply the following layer blending options to the arrow layer:

Drop Shadow

Gradient Overlay

Location 0% – Color: #09c228

Location 100% – Color: #b4ff97

Stroke

You will have the following effect so far:

Step 5

Now we can type some text onto the button:

Apply the following layer blending options to the text layer:

Inner Glow

Gradient Overlay

Stroke

and you will have the following effect:

Step 6

Ok we’re almost done. To spice up the final effect, we can add some light and shadow to the button and text to increase their depth. To do this, create a new layer underneath the button background layer, grab a big soft brush with a dark colour, do a single click on the centre of the canvas:

Use free transform tool to resize it and position it as shown below:

To create a light divider between the text and the button, simply create a new layer on top of the shadow layer, use a big soft brush with white colour, do a single click to the position as shown below:

Again we resize it and fit it to the postion under the text:

and here is the final effect for this tutorial:

Final Thoughts

There are several things I think we need to pay attention to when it comes to making call-to-action buttons:

1. Always try to use fresh, vibrant colour as button background, and make sure the color differs significantly from the rest.
2. Apply gradient to the background creating more depth and make the button stand out
3. Use graphic element and symbol on the button to make it more meaningful to visitors
4. Use Light and shadows to draw user attentions.

Source: psdvault.com

you may also like:

• Photoshop Tutorial – Design a Delicious “Contact Me” Button
  Step 1 Create a document sized 200px * 20opx with white background and 72 dpi (web graphic) – please note that this is the actual size of the button we will be making. Here I will show you a littl...
• Photoshop Tutorial – Clean Two-Level Navigation
  Step 1 First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide). T...
• Photoshop Tutorial – Navigation Bar with Rollover Buttons
  Learn how to create a sleek rollover Navigation Bar. In this tutorial you will learn how to create buttons in Photoshop, export the buttons and add rollover effects in Dreamweaver. Rollover the but...
• Photoshop Tutorial – How to Create Mini Web UI Buttons
  Let’s Begin Open your Canvas and set to 450px width and 255px height. Select your Foreground to #d8dde3 and fill the canvas, now go to Filter > Noise > Add Noise and set it to 2% h...
• Photoshop Tutorial – Vista Styled Button
  Step 1 Like usual we are going to start off with filling the background with a radial gradient from a light grey to a darker grey. Light grey: #3e3d3d. Dark grey: #151515. Step 2 Create a new l...