Email Icon Photoshop Tutorial

August 17th, 2006 by Nick

Email Icon

1. Make a new photoshop file with a pale blue background. For the first steps of this tutorial the images will be of the button zoomed in to 200% magnification, but as the smaller details are made, you’ll need to increase it to about 400%. So, after you’ve made the magnification 200%, make a grey circle ,using the elliptical marquee tool and on a new layer.

image2

2. After you’ve made the cirlce, contract the selection by 2 pixels and then create a new layer. Fill the new layer witha pale yellow.

image10

3. Use the rectangular marquee tool to cut the yellow circle in half and then make a selection using the top half of the cirlce. You can do this by clicking on the layer in the layers panel while pressing the CTRL key.

image10

4. Make a new layer, while the selection is still active and then choose the gradient tool from the tool bar. Select the reflected gradient from the top of of Photoshop, chossing white as the foreground and a light blue as the background. Create a gradient by dragging from the center of the selection. The gradient should look like the image to the right.

image10

5. Use the rectangular marquee to create a dark grey rectangle on a new layer, and then a smaller one on top of it

image10

6. Then create a smaller light grey rectangle

image10

7. Zoom in to 400% magnification, using the polygonal lasso tool to create a white shape like the one shown to the right.

image10

8. Use the polygonal lasso tool again to cut away part of the light grey rectangle inline with the white shape. Create a yellow rectangle below the grey rectangle layer, for the paper. Then sse the eraser tool, set to pencil to delete the corners of the dark rectangle

image12

9. Use the pencil tool to add some detail near the corner you just erased and then make a selection with the 1st grey circle that was created.

image13

10. Feather the selection by 2 pixels and then fill a new layer with navy blue. You should end up with a puffy circle. Move the blue circle below all the other layers and then nudge it downwards and to the right a bit.

image14

11. Thats the end of this tutorial and now you have an email icon to use on your site!

Email Icon

Posted in buttons

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.