Thursday, March 12th, 2009

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 300×300px 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 200×200px.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.

1

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

2

3

5

6

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.

44

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 145×79px.Now go to “Layer->Layer Style->Blending Options” and apply the next effects to envelope:

7

8

9

10

11

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.

final

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.



final

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



...and don`t forget to subscribe:

Subscribe via RSS
Subscribe via Twitter
Subscribe via E-mail

2 Responses

June 5, 2009

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.


April 19, 2009
pierre

Thanks for the tutorial.