Design a cool looking contact icon

Posted in Buttons, Icon

In this photoshop tutorial, we will make a cool looking glossy contact us icon. Tutorial is easy, just follow the steps carefully.

Preview of final icon:

Step 1:
Create a new document, roughly about 400 px by 400 pixels, with white background. Create a new layer and set color to #ed870f. Select “Rounded rectangle tool” and radius 8px draw a rounded square shape.

Apply following layer style to this round shape layer.

Step 2:
Press and hold CTRL key and click on round shape layer. This will load the button shape.

Drag the selection below the button.

Create a new layer. Set foreground color to #dc4801 Select gradient tool with “Foreground To Transparent”. Press and hold SHIFT key and drag mouse from top of selection to middle of selection.

Press CTRL+D to de-select selection.

Step 3:
Create a new layer. Set foreground color to white. Select a soft brush of radius 200px and set opacity to 60%. Click once on top of the button as shown below.

Change layer mode to “overlay”.

Create a duplicate of this layer and set layer mode to “Normal”. Press CTRL+T and contract the shape like this:

Our button looks like this now:

Step 4:
Create a new layer and select “Rounded rectangle tool” with 5px radius. Draw a shape as shown below in white color.

And apply following layer style.

Button should now look like this:

Step 5:
Create a new layer. Select “polygon Tool”

and set number of slides to 3. Set color to #e9e9e9 and draw a shape as shown below.

Press CTRL+T to resize the shape.
Apply following layer style to this shape.

It should now look like this:

Repeat same process and create another triangular shape with same layer style as shown below.

That’s it, our contact icon is ready. This is how final contact us icon looks on a white background.

And this is on transparent background.

License:
Free for personal and commercial use. If possible, please link back to our site as source.

I hope you like the tutorial. below you can download PSD file.