Design a Delicious “Contact Me” Button in Photoshop

In this tutorial, I will show you the steps I took to create this (delicious?!) “Contact Me” button in Photoshop. This is really simple tutorial, great for beginner to learn a few tricks. Have a try!

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 little trick: hit Ctrl + R to make the rule visible on the top and left edge, click on the ruler and drag a guide to the edges of our canvas, as shown below:

Hit Ctrl + Alt + C and bring up the Resize Canvas window, then apply the following settings:

You will have the following effect (I set the background colour to grey for demonstration purpose):

You can see by doing so, we have the perfect guides setup for a 200px * 200px button, without the need to add and remove guides afterwards:

Step 2

Now let’s perpare a simple background to work on. I perferred  a nice light grey gradient fill. So grab a the Gradient Tool and fill the background layer as shown below:

Create a new layer called “backlight” and grab a big and a small soft round brush, do two single clicks to the position as shown below: (top and centre)

Resize and position this layer as shown below:

Now we have a nice background to work on our button :)

Step 3

Now grab the Rounded Rectangular Tool from the toolbox (press the U key) and apply a 10px feather to it, draw the following according to the guides:

Name this layer as “button bg”, and apply the following blending effect to this layer:

Drop shadow

Gradient Overlay

Stroke

Here is the effect so far:

Step 4

Now let’s add some highlights and shadows to the button background. Create a new layer under the button bg layer, use the rectangular marquee tool to create a shape like this:

Name this layer as “shadow” and apply the following Gaussian Blur settings to it. Make sure you deselect the layer first:

Resize it from the top (Ctrl + T) and reduce the opacity to around 30%, you will have the following effect:

Create a new layer called “Highlight” on top of the button bg layer, set its blending mode to “Overlay”, grab a white soft brush, do a single click as shown below:

Duplicate this layer once and change the blending mode of the duplicated layer to “Normal”, resize it to a very thin level, position it just above the top edge of the button bg layer, as shown below:

You will have the following effect so far:

Step 5

Now let’s draw a simple envelope onto this button. Create a new layer on top of all previous layer, grab the Rectanglar tool and draw a rectangule as shown below:

Call this layer “envelope” and apply the following layer blending options to it:

Drop Shadow

Outer Glow

Stroke

and you will have the following effect:

Step 6

Now let’s add a few more stuff onto the envelope to make it look more realistic. Create a new layer called “envelope top” and grab the Polygon Tool from the toolbox:

Apply the following settings: (3 sides)

and draw a triangle as shown below, use the Free Transform tool to fit it onto the envelope:

apply the following layer blending option to it:

Drop shadow

Inner Shadow

Gradient overlay

Stroke

and you will have the following effect:

Duplicate this layer once and rename the new duplicated layer to “envelope bottom”, flip it vertically by Ctrl + T and right-click:

Retain all the layer blending option except the stroke option, position this layer as shown below:

Create a layer in between the top and bottom envelope layers, grab a soft round black brush and do a single click in the centre:

here is the effect so far:

Step 7

Now we’re almost done. Finally we can type some texts onto the button – “Contact Me” with font we downloaded, as shown below:

You can here I used a dark red color – the reason I did it is that I’d like to use a bit embossing/sink-in effect here. The trick is to use a slightly darker colour for the font than the background color, so that when we apply the blending effect later on, we will achieve better looking result.

So let’s add the following layer blending options to it:

Inner Shadow

Gradient overlay

Stroke

Also here is a trick – when adding stroke effect to the text, make sure to select a color slightly lighter then the background colour, for the embossing effect.

Here is the final effect I have: (click to enlarge)

That’s it for this tutorial! Hopefully you learnt something new and find it useful! Till next time, have a great day!