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)
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:
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:- Always try to use fresh, vibrant colour as button background, and make sure the color differs significantly from the rest.
- Apply gradient to the background creating more depth and make the button stand out
- Use graphic element and symbol on the button to make it more meaningful to visitors
- Use Light and shadows to draw user attentions.
No comments:
Post a Comment