50% OFF All VIP Memberships! Coupon Code: PV2016. Ends 11 December. Sign Up Now >>

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!

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

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!

To complete this tutorial, you will need the following stock:

Font

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!

Categories: Drawing,Web Graphics

Tags: ,,,,,,

  • never able to make things look shiny !!
    nice tute

  • Looks sleek and this new design looks nice aswell :)

  • looks really professional tutorial as per latest requirements of web design.

  • Nice tutorial, I got some new inspiration.

  • Great tutorial thank you for sharing!

  • This is neat and easy to follow. I like your new site design btw!

  • James Qu

    Thanks guys! Appreciate your comment~^^

  • pratham

    excellent tutorials…………………..thanks!
    web designer

    http://www.scrapsforever.com

  • found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later

  • ultrasound technician

    Wow this is a great resource.. I’m enjoying it.. good article

  • Tony

    never able to make things look shiny !!
    nice tute

  • helpful for beginner…….thanks

  • @ james
    correct this ..
    u wrote “Create a new light called” in stead of “Create a new layer called ” in step 2 4th line

  • James Qu

    @PSDMaterial: good one, thanks for pointing it out :)

  • thanks this nice tutorial

    and new technology

  • Rahul

    Very good tutorial, I wasn’t able to make a mail-icon like this, but this time I found you to teach me. Ah!

  • Jahidur Rahman

    Wawww that’s great tutorial…………….
    Thanks a lot………………….
    :)

  • Yeah, it’s good, very useful, thanks :)

  • VERY helpful for beginners/people who aren’t completely comp savvy. I use a lot of these design tools at Sessions College for Professional Design, as they have been useful for me:
    http://www.sessions.edu/Design-Career-Center/Design-Tools.asp?fmid=0

  • Great tutorial thank you for sharing!

  • Paola Koczwara

    I recently came in the course of your web site and occur to become understanding along. I assumed I might personally depart my initial remark. I genuinely don’t know what to say except that We’ve loved examining. Respectable world-wide-web website. I’m going to preserve visiting this weblog actually frequently.

  • thank you for sharing with us,i like it very much and i will always give attention.

  • this is cool! im not in design but this one rocks

  • facebook clone script

    very nice tutorials! can we have the PSDs for practice? thanks

  • Very nice site. Excellent photoshop tutorials. :)

  • ywf

    Great!
    Delicious and beautiful
    I had done

  • Ayo

    Cool tut. Simple to follow, intuitive too.

  • Tibi

    Great tehnique

  • Great blog you have got here.. It’s hard to find high-quality writing like yours these days.
    I seriously appreciate people like you! Take care!!