Create Clean and Fresh Call-to-Action Button + Embossing Text Effect in Photoshop

Sign up for HP0-D07 web designing training to become photoshop expert. Get the latest 642-642 tutorials and 70-662 demos to learn about creative photoshop plugins.

In this tutorial, I will show you how simple it is to create effective, clean and fresh call-to-action button that will surely attract visitor’s attention, plus a super quick way to create this trendy Embossing text effect in Photoshop. Very easy tutorial, have a try!

For those who haven’t yet came across the idea of “Call-to-Action” button – basically they’re buttons that you would want all your users to click on when they land on your page. Usually they’ll be a link to a download, signup or sale. By making those buttons easy to easy and click on, you increase the likelyhood that user will notice the button, then follow up with relevant actions.

As for embossing text, they’re everywhere now on the web, and I personally quite like this particular effect :)

Here is a preview of the final effect for this tutorial: (click to enlarge)

call-to-action-btn-embossing-text

PSD File Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 70+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorial there. Signup now and get exclusive :) Find out more about the VIP Members Areas

OK let’s get started!

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:

1 fill

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)

2 type

Appy the following layer blending option to the text layer:

Inner Shadow

2 inner sha

Stroke

2 stroke

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

2 effect

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)

3 shape layers

3 draw

Apply the following layer blending effect to this button:

Bevel and Emboss

3 bevel

Gradient Overlay

3 grad over

With the Gradient Colour, apply the following settings:

Location 0% – Color: #0083be

Location 99% – Color: #31c8fa

Location 100% – Color: #FFFFFF

3 grad setting

Stroke

3 stroke

And you will have the following effect:

3 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:

4 cust sha

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

4 arrow

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

4 draw arrow

Apply the following layer blending options to the arrow layer:

Drop Shadow

4 drop sha

Gradient Overlay

4 grad over

Location 0% – Color: #09c228

Location 100% – Color: #b4ff97

4 grad over setting

Stroke

4 stroke

You will have the following effect so far:

4 effect

Step 5

Now we can type some text onto the button:

5 type

Apply the following layer blending options to the text layer:

Inner Glow

5 inner glow

Gradient Overlay

5 grad over

Stroke

5 stroke

and you will have the following effect:

5 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:

6 shadow

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

6 resize

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:

6 light

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

6 resize 2

and here is the final effect for this tutorial:

call-to-action-btn-embossing-text

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.

Further Readings

  1. Web Design Trends: Call To Action Buttons

That’s it for this tutorial! Hope you enjoy it!

Categories: Text Effects,Web Graphics

Tags: ,,,,,,,,,

  • http://blogfreakz.com mupet

    Great tutorial, i like this stuff

  • Jefferyfish

    Nice work for sure. Thanks for the great tutorial.

  • http://www.dzinepress.com Dzinepress

    really nice tutorial for make neat and clean buttons for website designs.

  • Claudy

    Thanks!
    I like to visit your site ;)
    it’s really good!

  • http://tutorialblog.info/ tutorial blog

    thank for tutorial

  • Christopher Dunn

    Enjoyed your post greatly!

  • http://www.article-elf.com forex robot

    great post as usual .. thanks .. you just gave me a few more ideas to play with

  • http://www.PositiveWomenRock.com Kelly Rudolph

    This is just what I needed! Thank you so much!!!

  • http://www.orphicpixel.com Mars

    cool very simplified tutorial

  • Michelle

    amazing tutorial and love your blog :)

  • pits salenga

    great one. this website helps a lot. thanx

  • James Qu

    @everyone: thank you very much for your support, appreciate your comments :)

  • Liviu

    Very clean…and fancy!! Tnx for sharing!
    Regards BBX

  • TJFX

    perfect. I followed this while at school and it was amazing.
    great for learning :D

  • http://www.ps3ylod.net Ylod Sean

    A bit complex for my skills at the moment but I will see how it goes. Will give it a try myself :)

  • Mohamed

    really good tops& tricks

  • Strokemilio

    muchas gracias
    saludos desde México
    me quedo genial mi imagen
    que queria ahcer
    gracias
    thank you very much
    this page is awesome
    really
    well
    bye

  • http://www.trmatematik.com Taner Macit

    How can we download psd version?

  • Carlos E. Quevedo

    Beautiful tutorial. I was looking for this kind of effect. It’s gorgeous!

    I love it.

    Thanks.