Create 3D effect email icon with reflection

19 November 2008 by Tags: ,,

This mail cover icon will be very useful in your web design projects.
This can be used as image link to contact form, subscription form, etc.

Result Preview:

Step 1

Start with a new layer, name it as “BG” and draw a gradient rectangle with grey colors. This could be used as background for the icon.

Background

Step 2

Create a new layer over BG and name it as “Rectangle”. Take the rectangle shape and draw a rectangle. Apply some gradient for the shape with dark and light grey colors. Rotate the gradient to 57 degree.

Gradient-rotation

Step 3

Draw a triangle shape over the rectangle and adjust its width to match the width of the rectangle. Make the triangle shape’s stroke color as “#c0c0c0”.
Using the selection tool, select both the rectangle and triangle shapes by holding the shift key.

Vector modification

Step 4

By holding the shift key, click the right bottom node of the selection and drag the selection upwards. Drag the selection towards left by clicking the top right corner node as well as top left corner. So the result will look like below.

mail cover

Step 5

Make a duplicate layer from layer “Rectangle”. This can be done by right clicking over the layer and select “Duplicate”. Change the color of the shapes to #666666.

Step 6

Now by selecting shapes at the duplicate layer, reduce the height to half and rotate the selection slightly to get a position like below.

Shadow

Now convert the duplicate layer to raster, go to Adjust => Blur => Gaussian Blur and give it radius of 6.

Step 7

Create a new layer and name it as “reflection”. Draw a rectangle below and give the same gradient colors which were given for rectangle at layer “Rectangle”. By selecting the shape, click any of the nodes and drag the selection upwards or downwards.
So the result you will get is a nice email icon with 3d reflection.

Final Result:

1,579 Downloads