Make an Icon for Contacts (Exclusive Tutorial)

As you may already know, I have a penchant for browsing the vast gallery of templates available at Template Monster. Sometimes I go looking for particular templates, but more often than not, I look for cool web page elements like icons. In this lesson, we will create a basic icon for contacts. This will be the end result.

In this lesson, we you will learn how to make an icon.

Create a basic icon for contacts . This will be the end result.

Step 1: Creating the Basis (Drawing a folder)

Create a new document. Set the size at 271-180 pixels. Next choose Pen Tool (P).

Then, choose Shape layers mode from the tools panel located in the upper left corner of your screen, and begin drawing a folder.

Give it a shape something like this:

In the layer style, choose gradient overlay effect.

Bearing my own individual taste in mind at this point, I choose a warmer gamma.

Then draw the second part of the folder like this, keeping in mind that the inner side of the folder will be darker than the outer one. We should get something similar to the following result.

Step 2: Adding Details

In this step I want to emphasize the "realism" of the image, to give it a more realistic look.

Now you will work with a bit-mapped image.

Create a new layer.

Next select the image in the layer; to do this simply click (ctrl+click) on the layer in the layers panel.

Then choose Gradient Tool(G) and create the desired effect.

The result should be similar to this picture.

Step 3: Drawing an Envelope

Let's begin by drawing an envelope. It can be drawn using different methods and each one is equally acceptable.

We now create an envelope, working in the same way as when we made the folder, beginning from the simple foundation, and step-by-step ending up with complex shapes and colors.

The result should be something like this image .

Then "place" a piece of paper with the @ sign in the envelope. First, make the page appear curled by using the gradient effect and Drop Shadow effect.

The sign itself will be chosen by using the Horizontal Type Tool(T).

Turn the sign by using ctrl+T. The final stroke will determine the shade of the envelope. For this you need your Lasso Tool(L).

Select the needed area, and then fill it with the chosen effect.

Blur to smooth the sharp edges.

In the end, you should have this result:

See additional examples on the practical use of such elements.

Icons examples