How to create an e-mail button

Hello everyone! Today we start with our first tutorial.I`ll show you how to create a mail button using Photoshop.We start with simple tutorials and in the future we`ll make more complicated and greater tuts.Soon we`ll create and a “Submit” form that you may share with us your greatest tuts.

Let`s start by creating a new file of 300x300px canvas size and fill the background with a black color.

Create a new layer(“Layer->New->Layer”).Now choose the “Ellipse Tool” and drag a circle of 200x200px.Hold the Shift Key while dragging to make a perfect circle.Doesn`t matter what color of the circle you choose right now.It`s your choise.


With the new layer selected,go to “Layer->Layer Style->Blending Options” and add the next effects to your circle:





Ok,now we have our nice blue circle.What we have to do next?The next step is creating the Email shape.If you want,you may donwload a picture with an envelope from google but i’ll use a custom shape from Photoshop.There are 3 or 4 envelope shape,so you are free to chose!In the picture below you can see what shape i used.


Create a new layer.In the tools palette,select the “Custom Shape tool” and from the shape list select the “Envelope” shape and draw an envelope with the dimensions of 145x79px.Now go to “Layer->Layer Style->Blending Options” and apply the next effects to envelope:






Ok,we have our button but it feels like is missing something…hmmm…let`s add some light to it:
Create a new layer and using the “Pen tool” make a moon shape.


With the pen tool still selected,right click into the area created and select “Make selection”.Now choose the gradient tool and create a white gradient “Foreground to Transparent”.
Apply the gradient from top to bottom into the selected area created with the pen tool.Fill the layer with 65% color.


This is how our Email button looks.We`re done here!

[Total: 0   Average: 0/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.

Join the discussion

  1. pierre on April 19, 2009 at 6:40 am

    Thanks for the tutorial.

  2. HD Desktop Wallpapers on June 5, 2009 at 10:16 am

    I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

Comments are closed.