Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Create Contact Icon

Step by step tutorial on how to create contact icon for your website.

Final Image Preview

Create Contact Icon in Photoshop CS2

Create a new file (File>New), having 350×350 px and 72 dpi and select the Rectangle Tool (U) to represent the background of the next picture we want to create.

Create Contact Icon in Photoshop CS2

The layer’s parameters:
Blending Options>Gradient Overlay

Create Contact Icon in Photoshop CS2

Gradient’s parameters:

Create Contact Icon in Photoshop CS2

Create Contact Icon in Photoshop CS2

We have to select one more time the previous tool to represent the primary layer of the icon, colored in #BA3526.

Create Contact Icon in Photoshop CS2

The layer’s parameters:
Blending Options>Drop Shadow

Create Contact Icon in Photoshop CS2

Blending Options>Bevel and Emboss

Create Contact Icon in Photoshop CS2Blending Options>Stroke

Create Contact Icon in Photoshop CS2

Gradient’s parameters:

Create Contact Icon in Photoshop CS2

Create Contact Icon in Photoshop CS2

Create a new layer and then take a brush of white color, Brush Tool (B) and picture out several flares on the icon’s surface.

Create Contact Icon in Photoshop CS2

Create Contact Icon in Photoshop CS2

Press on the Alt button and make a mouse’s click between the flare’s layers and the icon’s one for the flare to be applied in the limits of the icon.

Create Contact Icon in Photoshop CS2

Create Contact Icon in Photoshop CS2Select after that the Custom Shape Tool (U) to represent the symbol of the icon and then press on the Shift button to fix a circle on the lowest part of the symbol. Its color should be white.

Create Contact Icon in Photoshop CS2

Create Contact Icon in Photoshop CS2

Create Contact Icon in Photoshop CS2

The layer’s parameters:
Blending Options>Stroke

Create Contact Icon in Photoshop CS2

Gradient’s parameters:

Create Contact Icon in Photoshop CS2

Create Contact Icon in Photoshop CS2

Press on the Alt button and make a mouse’s click between the layers.

Create Contact Icon in Photoshop CS2Create Contact Icon in Photoshop CS2

Create a new layer and select the previously used brush to represent a shadow, colored in #C8C9C9.

Create Contact Icon in Photoshop CS2

Press on the Alt button, make a mouse’s click between the layers.

Create Contact Icon in Photoshop CS2

Create Contact Icon in Photoshop CS2

The layer’s parameters:
Blending Mode-Darken

Create Contact Icon in Photoshop CS2

The final result!

Comments