Sign In  |  Join Now Become a member to add links and start earning points!

Design a Stylish Mail Icon in Photoshop

I have worked on this new tutorial with Cucu Tudor. In this tutorial you will learn how to create a glossy mail icon that can be used for your apps or websites.

Step 1: Create a new document

Create a new document in Photoshop and fill it with white. Create a new layer and use the Pen Tool (P) to create the shape of the envelope. Then press Command + Enter to transform the path into a selection.

Step 1

Step 2: Apply Color

Fill the selection with this color #80a5c0 using the Paint Bucket Tool (G).

Step 3: Apply Gradient

Double click on the layer to activate the Blending Options and apply a Gradient Overlay like below.

Step 3

Step 4: Envelope interior

Now you need to create a new layer and create a new shape like below. Fill the shape with #738ea3.

Step 4

Step 5

Double click on the layer you have just created and apply an Inner Shadow, Gradient Overlay and a Stroke to the layer.

Step 6: Add Shadow

To add the shadow below the envelope you need to use the Elliptical Marquee Tool (M) and create a black shape like below. Then go to Filter Blur Gaussian Blur and use 3,8. This effect will make the envelope look like it is floating.

Step 6

Step 7

Create another new layer and create a shape like below then fill it with #4b7c9d. Next double click on the layer and add a Gradient Overlay.

Step 8

Create the lower part of the envelope and add a Gradient Overlay like below.

Step 9: Lines

Create a new layer for each line you create. You will create these lines using the Line Tool (U) set to white and different weights. Also you will change the Opacity of each as you wish.

Step 10: Sticky strip

Start creating the sticky strip of the envelope. Create a new layer then use the Pen Tool (P) to create the shape below and fill the layer with white.

Step 11: Strip texture

To create the strip texture you need to make sure you have the white strip layer selected and go to Filter > Noise > Add Noise and set the Noise to 56,56; Uniform and deselect Monochromatic. In the end set the layer to Opacity 15%.

Step 12: Elements

Now it is time to add the elements inside the envelope. Start with a piece of paper. Create a new layer and place it over the envelope like below then create the shape using the Polygonal Lasso Tool (L) and fill it with white. You must create another layer above this shape and use a black brush to create the shadow that is going to be above the inside elements.

Step 13

Create another shape. This time use the Custom Shape Tool (U) and in the shape list search for the puzzle shape. When you find it place it onto the screen, use the Transform Tool to distort the element then add a simple gradient like below.

Step 14

Create another shape as you did in step 13 but this time select from the list the magnifying glass. Apply the shape and fill it with #2ea7fa. Also apply a smooth Gradient Overlay.

Step 15

Create a magnifying effect. Simply create a new layer and place it below the magnifying glass layer. The layer should be white with a soft grey gradient. Then add the text “text” and erase a part of it to make it look like it is magnified. Next you need to add a soft white gloss to make it look like a glass. In the end add the shadow by creating a new layer below all these and applying a soft black color. Then set the layer to 20% Opacity.

Step 16

Create a movie roll the same way as you did with the other elements.

Step 17

The last element is a pen. Create this shape using this color #ff7000.

Step 18: Details

Now it is time to add details and gloss to the elements. Follow the steps below as you will be taken through each modification so you can create it as well.

Step 19: Gloss

Next you need to add some gloss effect to the envelope. Use the Polygonal Lasso Tool (L) and create 4 triangles the use a soft white brush to bring in some gloss.

Step 20: Final Shadow

Create a path like below using the Pen Tool (P) then transform it into a selection and use a black soft brush to add the shadow.

Step 21: Final Adjustment

In the end you need to darken everything a little and add more contrast. Press Command + A then copy Command + Shift + C and paste Command + V. Now that you have the image duplicated go to Image > Adjustments > Brightness/Contrast and increase the contrast a little.

This little icon looks pretty good when it is used on your app. Use Icon Composer to create the icon then set it to your app using Candy Bar.

Final Result

Download the PSD

239 Comments

  1. Add point Subtract point

    I am a designer,it helps me lots

    Flag as inappropriate
  2. Add point Subtract point

    thanks for your valuable tutorial…

    Flag as inappropriate
  3. Add point Subtract point

    it is very good,i enjoy
    its wonderful that we can see this like tutorial
    thank you very much

    Flag as inappropriate
  4. Add point Subtract point

    you are Good man !

    thank you ^^

    Flag as inappropriate
  5. Add point Subtract point

    Thank you~It’s great,and help me a lot.

    Flag as inappropriate
  6. Add point Subtract point
    Nimish Patel (1 Point) September 2, 2010 at 4:27 am

    Hi I have gone through the article.It helps me lots.

    Flag as inappropriate
  7. Add point Subtract point
    fotowoltaika (1 Point) August 19, 2010 at 12:38 pm

    Great! This is amazing what you have done! Good work!

    Flag as inappropriate
  8. Add point Subtract point
    pratham (1 Point) August 19, 2010 at 5:54 am

    I am a web designer.I am always searching to get something
    new inspiration from your website.
    Nice tutorials
    http://www.scrapsforever.com

    Flag as inappropriate
  9. Add point Subtract point
    sowmyabelur (1 Point) August 6, 2010 at 12:39 am

    An awesome one out here !!!

    Flag as inappropriate
  10. Add point Subtract point
    sowmyabelur (1 Point) August 6, 2010 at 12:38 am

    An Awesome one out here !!

    Flag as inappropriate
  11. Add point Subtract point
    Penang Web Design (1 Point) August 3, 2010 at 11:57 pm

    nice job…thanks…i learn a lot…

    Flag as inappropriate
  12. Add point Subtract point

    very nice tutorial…………..
    nice inspiration………..
    thankssssssssssss

    Flag as inappropriate
  13. Add point Subtract point
    Roxana (1 Point) July 16, 2010 at 10:48 am

    E cool de tot! Multumesc pt post! Intr-adevar necesita mult timp ca sa realizezi ceva original…dar merita.

    Flag as inappropriate
  14. Add point Subtract point
    ปั๊ก (1 Point) July 1, 2010 at 3:11 am

    สุดยอดมากๆเลย

    Flag as inappropriate
  15. Add point Subtract point
    Angie (2 Points) June 25, 2010 at 12:32 pm

    Do you know of a similar program like Icon Composer but not for a Mac or can you use it on a non Mac as well?

    Flag as inappropriate
  16. Add point Subtract point
    โหลดเพลง mp3 (1 Point) June 9, 2010 at 4:55 am

    Fun Tut! Love the icon.

    Flag as inappropriate
  17. Add point Subtract point
    โหลดเพลงฟรี (2 Points) May 29, 2010 at 1:55 pm

    Thank you , tutorial.

    Flag as inappropriate
  18. Add point Subtract point
    Web Design (1 Point) April 26, 2010 at 7:46 pm

    Love the mail icon now i can pimp mine out Thanks for sharing

    Flag as inappropriate
  19. Add point Subtract point
    kavyasudah34 (1 Point) April 5, 2010 at 2:58 pm

    This is really good! thanks !! post to webmaster “legitimate work at home jobs”

    Flag as inappropriate
  20. Add point Subtract point
    โหลดเพลง (2 Points) March 29, 2010 at 3:13 am

    Great tip, Thank you for your share!

    Flag as inappropriate
  21. Add point Subtract point
    Roncarrmusic (1 Point) March 17, 2010 at 11:45 am

    Great Tutor! Amazing, Thanks.

    Flag as inappropriate
  22. Add point Subtract point
    ดาวน์โหลดเพลงฟรี (1 Point) February 3, 2010 at 2:34 am

    Excellent post. Thanks26

    Flag as inappropriate
  23. Add point Subtract point
    ฟังเพลง (1 Point) February 1, 2010 at 11:44 pm

    Excellent post. Thanks19

    Flag as inappropriate
  24. Add point Subtract point
    ฟังเพลงออนไลน์ (1 Point) February 1, 2010 at 1:50 am

    Excellent post. Thanks14

    Flag as inappropriate
  25. Add point Subtract point
    โหลดเพลงฟรี (1 Point) January 30, 2010 at 9:45 am

    its very nice. Great post

    Flag as inappropriate
  26. Add point Subtract point
    Berita aceh terkini (1 Point) December 31, 2009 at 1:00 pm

    Artikelnya sangat bagus. Terima kasih sudah berbagi.

    Flag as inappropriate
  27. Add point Subtract point

    tare de tot vad ca esti roman de aia scriu in romaneste.deci e super dar necesita mult timp ca sa faci ceva fain.

    Flag as inappropriate
  28. Add point Subtract point
    Rameexgfx (1 Point) September 28, 2009 at 9:36 am

    very nice I have learned more tips from this tutorial!

    Flag as inappropriate
  29. Add point Subtract point

    I think I’ve done it, look: http://img195.imageshack.us/img195/9949/mailiconfinished.png

    It’s my first work in photoshop :>
    Unfortunately, I created too small workspace so it was a bit more difficult to finish it. But I’m proud of myself anyway xD

    Thank you for this tutorial Constantin!

    Flag as inappropriate
  30. Add point Subtract point
    Seu Pet Shop (1 Point) August 18, 2009 at 6:23 pm

    Uau, it’s perfect. I’ll try to do it by myself!

    Flag as inappropriate
  31. Add point Subtract point
    Design Wannabe (1 Point) August 14, 2009 at 7:39 am

    very clean tutorial

    Flag as inappropriate
  32. Add point Subtract point
    Coji Lee (2 Points) August 14, 2009 at 12:41 am

    It’s amazing~!! It’s so detailed and well-orgnized~~Thanx alot for sharing

    Flag as inappropriate
  33. Add point Subtract point

    First, Good work. But why wasn’t it send to my email. Oh let me guess, because maybe it has no new tricks to show right..

    Flag as inappropriate
  34. Add point Subtract point

    After years I learn something really usefull about photoshop in the web!

    Flag as inappropriate
  35. Add point Subtract point

    nice job . huge man love it

    Flag as inappropriate
  36. Add point Subtract point
    Aria Ardania (2 Points) August 2, 2009 at 5:59 am

    Thank’s for the tutorial, I want to try it..

    Flag as inappropriate
  37. Add point Subtract point
    SALMAN (2 Points) July 25, 2009 at 4:03 pm

    It is nice but think i would be better in video format any ways
    it is also goog like this

    Flag as inappropriate
  38. Add point Subtract point
    Ricardo (2 Points) July 24, 2009 at 8:13 am

    awesome!

    great tut!

    thx!

    Flag as inappropriate
  39. Add point Subtract point
    Hannah (1 Point) July 22, 2009 at 2:36 am

    Very nice, I really like it :-) It’s so cute hehe.

    Flag as inappropriate
  40. Add point Subtract point
    Willem-Alexander (1 Point) July 21, 2009 at 3:08 pm

    Hi,
    THX, for the great tutto..!!
    Cheers..

    Flag as inappropriate
  41. Add point Subtract point
    Paul Endaya (1 Point) July 15, 2009 at 10:01 am

    I like all your tutorials. Thank you for sharing your skills. I’m not a web or graphic designer but when i saw your designs, it made me feel that i can be a good designer too with the help of your tutorials.

    Flag as inappropriate
  42. Add point Subtract point
    Ashley Adams : Postcard Printing (1 Point) July 6, 2009 at 1:58 am

    More than the outcome, I liked the detailed steps. Quite a few nice and smart things to learn here. Don’t get me wrong though. I think the icon is pretty cool. Would love to turn all my OS icons into something similar.

    Flag as inappropriate
  43. Add point Subtract point
    Helen Hunt (1 Point) June 28, 2009 at 2:36 pm

    Thanks for this post again – as a software developer, I think I can now have a go at creating icons for my apps before outsourcing it to the pros :)

    Flag as inappropriate
  44. Add point Subtract point
    _electro_ (1 Point) June 19, 2009 at 3:31 am

    Thank youuuu….

    _electro_

    Flag as inappropriate
  45. Add point Subtract point
    Francki (1 Point) June 18, 2009 at 5:13 am

    Gracias desde Méxicoooooo

    Flag as inappropriate
  46. Add point Subtract point
    Quirijn (0 Points) June 16, 2009 at 6:51 am

    Very nice and easy tut, thank you very much. Would you mind to share us the font of ‘Stylish’ in the header as well? Thanks again!

    Flag as inappropriate
  47. Add point Subtract point
    momo (1 Point) June 9, 2009 at 7:35 pm

    thanks alot for ur effort :)

    Flag as inappropriate
  48. Add point Subtract point
    Web developer (1 Point) June 9, 2009 at 6:13 pm

    Very easy to follow tutorial. One of the best I have ever seen. Thank you.

    Flag as inappropriate
  49. Add point Subtract point
    venaketesh (1 Point) June 9, 2009 at 10:21 am

    great………Awesome tutorial

    Flag as inappropriate
  50. Add point Subtract point
    Michael (1 Point) June 7, 2009 at 6:31 am

    Very nice outcome. Thanks for sharing and plz bring some more :)

    Flag as inappropriate
  51. Add point Subtract point
    Ahmed Sabry (1 Point) June 5, 2009 at 10:44 am

    AWESOME Tut.
    V.good design.
    My regards to u
    keep moving forward

    Flag as inappropriate
  52. Add point Subtract point
    retoucher77 (1 Point) June 4, 2009 at 7:23 am

    really impressive! excellent job!

    Flag as inappropriate
  53. Add point Subtract point
    tasarim george (1 Point) June 2, 2009 at 6:31 am

    thanks

    has worked

    Flag as inappropriate
  54. Add point Subtract point
    6bus (1 Point) June 2, 2009 at 5:14 am

    thanks for the great tutorial
    what’s the font use for “Stylish” in the picture tittle
    thanks

    Flag as inappropriate
  55. Add point Subtract point
    ProjectCenter (1 Point) May 30, 2009 at 6:04 pm

    This was awesome. Very detailed.

    Flag as inappropriate
  56. Add point Subtract point
    WebDev (1 Point) May 30, 2009 at 6:47 am

    Wow, this is a great tutorial. It took some steps until the final result, but it looks fancy! Hope you won’t if I share a link to this tutorial on my blog :)

    Flag as inappropriate
  57. Add point Subtract point

    Awesome tutorial… I like it ;) thnx for sharing

    Flag as inappropriate
  58. Add point Subtract point
    Daniel (1 Point) May 29, 2009 at 4:28 pm

    Nice tutorial.. I will try this, most sertanly.

    Flag as inappropriate
  59. Add point Subtract point
    Stupid Monk (1 Point) May 28, 2009 at 1:48 pm

    details like ‘adding the noise’ are the main differences between a newbie and a pro :)

    Flag as inappropriate
  60. Add point Subtract point
    Mayank Singhal (1 Point) May 28, 2009 at 1:43 pm

    I never thought it would be so easy

    Flag as inappropriate
  61. Add point Subtract point
    Vivek (1 Point) May 28, 2009 at 9:23 am

    Wow! Awesome Tutorial!!!!!!

    Flag as inappropriate
  62. Add point Subtract point

    Absolutely great tutorial :) thanks.

    Flag as inappropriate
  63. Add point Subtract point

    Great tutorial with a very nice outcome.

    Flag as inappropriate
  64. Add point Subtract point
    Dusan (1 Point) May 26, 2009 at 6:55 am

    Great tutorial, although I think 99% of the work is to imagine such a wonderful icon in your head

    Flag as inappropriate
  65. Add point Subtract point
    adobe photoshop tutorial & graphic design (1 Point) May 25, 2009 at 9:33 am

    great tutorial! i like it!

    Flag as inappropriate
  66. Add point Subtract point
    whisky (1 Point) May 22, 2009 at 10:35 pm

    Thank you, This tut is usefull for me.

    Flag as inappropriate
  67. Add point Subtract point
    lawrence77 (1 Point) May 22, 2009 at 7:02 pm

    not bad…..

    Not a Constantin’s stuff :(

    Flag as inappropriate
  68. Add point Subtract point
    colesterol (1 Point) May 22, 2009 at 12:58 pm

    very nice ttutorial!
    thanks

    Flag as inappropriate
  69. Add point Subtract point
    Cucu Tudor Ionel (Crimzprod.) (1 Point) May 22, 2009 at 8:39 am

    I’m very glad,because you enjoy this tutorial.Thank You!

    Flag as inappropriate
  70. Add point Subtract point
    lupozo (1 Point) May 20, 2009 at 8:11 pm

    Very nice tutorial! Thanks

    Flag as inappropriate
  71. Add point Subtract point
    FAQPAL (1 Point) May 20, 2009 at 8:32 am

    Excellent tutorial, thanks for compiling.

    Flag as inappropriate
  72. Add point Subtract point
    Fatin Pauzi (1 Point) May 20, 2009 at 6:36 am

    Thanks a lot. I’m really happy to try it. Thanks! :D

    Flag as inappropriate
  73. Add point Subtract point
    CgBaran Tuts (1 Point) May 20, 2009 at 3:00 am

    Great tutorial thanks

    Flag as inappropriate
  74. Add point Subtract point
    Seojuhyun (1 Point) May 20, 2009 at 12:16 am

    very nice tutorial :D

    Flag as inappropriate
  75. Add point Subtract point
    Dormgear.net (1 Point) May 19, 2009 at 5:01 pm

    Neat tutorial. Don’t think I’d ever have a use for it, but always fun to see new stuff. The design of the envelope still kinda looks odd to me, but all in all the tutorial part was good which is what matters.

    Flag as inappropriate
  76. Add point Subtract point
    Sakis (1 Point) May 19, 2009 at 2:26 pm

    Nice tutorial. Not so useful, but a good exercise.

    Flag as inappropriate
  77. Add point Subtract point
    Symon (1 Point) May 19, 2009 at 12:38 pm

    Always looking for inspiration and this will certainly help. Thx.

    Flag as inappropriate
  78. Add point Subtract point
    rx1 zayiflama kapsulu (1 Point) May 19, 2009 at 11:42 am

    Very nice tutorial!

    Flag as inappropriate
  79. Add point Subtract point
    Liam McCabe (1 Point) May 19, 2009 at 9:23 am

    Sublime, design right up my street :)

    Flag as inappropriate
  80. Add point Subtract point

    terrify, very good result!
    i like it
    great tutorial as well!

    adeux

    Flag as inappropriate
  81. Add point Subtract point
    Harish (1 Point) May 19, 2009 at 4:36 am

    good tutorial as a begineer this blog was really usefull to me thanks alot

    Flag as inappropriate
  82. Add point Subtract point
    Marco (1 Point) May 19, 2009 at 2:42 am

    Nice one, really love the details in the outcome.

    Still, I think you should make a seperate design for the 16×16 and 32×32 version – The design isn’t very clear at those sizes.

    Anyway, keep up the great work!

    Flag as inappropriate
  83. Add point Subtract point
    tashfeen (1 Point) May 19, 2009 at 2:37 am

    frankly i don’t see the point of a mail icon with things sticking out from it, feels a bit overdone for my taste. but it’s a good exercise nevertheless! :o)

    Flag as inappropriate
  84. Add point Subtract point
    Marc Kuiper (1 Point) May 19, 2009 at 2:24 am

    Very nice tutorial!

    Flag as inappropriate
  85. Add point Subtract point
    Shabu Anower (1 Point) May 19, 2009 at 1:38 am

    A class tutorial, I’m sharing this tuts with my readers :)

    Flag as inappropriate