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.
Quick Nav:
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 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 4: Envelope interior
Now you need to create a new layer and create a new shape like below. Fill the shape with #738ea3.
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 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.
239 Comments
good
Flag as inappropriateVary Cool!!
Flag as inappropriateI am a designer,it helps me lots
Flag as inappropriatethanks for your valuable tutorial…
Flag as inappropriateit is very good,i enjoy
Flag as inappropriateits wonderful that we can see this like tutorial
thank you very much
vist for basic training of photoshop
Flag as inappropriatehttp://training4free.co.cc/Basic%20training/Basic%20training.html
you are Good man !
thank you ^^
Flag as inappropriateThank you~It’s great,and help me a lot.
Flag as inappropriateHi I have gone through the article.It helps me lots.
Flag as inappropriateGreat! This is amazing what you have done! Good work!
Flag as inappropriateI am a web designer.I am always searching to get something
Flag as inappropriatenew inspiration from your website.
Nice tutorials
http://www.scrapsforever.com
An awesome one out here !!!
Flag as inappropriateAn Awesome one out here !!
Flag as inappropriatenice job…thanks…i learn a lot…
Flag as inappropriatevery nice tutorial…………..
Flag as inappropriatenice inspiration………..
thankssssssssssss
E cool de tot! Multumesc pt post! Intr-adevar necesita mult timp ca sa realizezi ceva original…dar merita.
Flag as inappropriateสุดยอดมากๆเลย
Flag as inappropriateDo 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 inappropriateawsome!
Flag as inappropriateFun Tut! Love the icon.
Flag as inappropriateThank you , tutorial.
Flag as inappropriateLove the mail icon now i can pimp mine out Thanks for sharing
Flag as inappropriateFun Tut! Love the icon.
Flag as inappropriateThis is really good! thanks !! post to webmaster “legitimate work at home jobs”
Flag as inappropriateGreat tip, Thank you for your share!
Flag as inappropriateGreat Tutor! Amazing, Thanks.
Flag as inappropriateExcellent post. Thanks26
Flag as inappropriateExcellent post. Thanks19
Flag as inappropriateExcellent post. Thanks14
Flag as inappropriateits very nice. Great post
Flag as inappropriateArtikelnya sangat bagus. Terima kasih sudah berbagi.
Flag as inappropriatevery nice
Flag as inappropriate非常漂亮值得学习！
Flag as inappropriatetare 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 inappropriateEu zic ca merita ;)
Flag as inappropriatevery nice I have learned more tips from this tutorial!
Flag as inappropriateI 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 inappropriateUau, it’s perfect. I’ll try to do it by myself!
Flag as inappropriatevery clean tutorial
Flag as inappropriateIt’s amazing~!! It’s so detailed and well-orgnized~~Thanx alot for sharing
Flag as inappropriateFirst, 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 inappropriateAfter years I learn something really usefull about photoshop in the web!
Flag as inappropriatenice job . huge man love it
Flag as inappropriateThank’s for the tutorial, I want to try it..
Flag as inappropriateIt is nice but think i would be better in video format any ways
Flag as inappropriateit is also goog like this
awesome!
great tut!
thx!
Flag as inappropriateVery nice, I really like it :-) It’s so cute hehe.
Flag as inappropriateHi,
Flag as inappropriateTHX, for the great tutto..!!
Cheers..
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 inappropriateMore 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:) I like what you said. Thank you !
Flag as inappropriateg00d job !
Flag as inappropriateThanks 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 inappropriateNice tutorial. Thanks.
Flag as inappropriateThank youuuu….
_electro_
Flag as inappropriateGracias desde Méxicoooooo
Flag as inappropriateVery 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 inappropriateTutorial is good. Thanks.
Flag as inappropriatethanks alot for ur effort :)
Flag as inappropriateVery easy to follow tutorial. One of the best I have ever seen. Thank you.
Flag as inappropriategreat………Awesome tutorial
Flag as inappropriateVery nice outcome. Thanks for sharing and plz bring some more :)
Flag as inappropriateThank’s.. Stay cool a new one will be coming soon !
Flag as inappropriateAWESOME Tut.
Flag as inappropriateV.good design.
My regards to u
keep moving forward
really impressive! excellent job!
Flag as inappropriateThanks,
very nice tuto
Flag as inappropriatethanks
has worked
Flag as inappropriatethanks for the great tutorial
Flag as inappropriatewhat’s the font use for “Stylish” in the picture tittle
thanks
Love it :-)
Flag as inappropriateThis was awesome. Very detailed.
Flag as inappropriateawesome site :)
Flag as inappropriateWow, 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 inappropriateAwesome tutorial… I like it ;) thnx for sharing
Flag as inappropriateNice tutorial.. I will try this, most sertanly.
Flag as inappropriategreat tutorial! i like it!
Flag as inappropriatedetails like ‘adding the noise’ are the main differences between a newbie and a pro :)
Flag as inappropriateI never thought it would be so easy
Flag as inappropriatenice!
Flag as inappropriateWow! Awesome Tutorial!!!!!!
Flag as inappropriateAbsolutely great tutorial :) thanks.
Flag as inappropriateGreat tutorial with a very nice outcome.
Flag as inappropriateGreat tutorial, although I think 99% of the work is to imagine such a wonderful icon in your head
Flag as inappropriategreat tutorial! i like it!
Flag as inappropriateThank you, This tut is usefull for me.
Flag as inappropriatenot bad…..
Not a Constantin’s stuff :(
Flag as inappropriatevery nice ttutorial!
Flag as inappropriatethanks
I’m very glad,because you enjoy this tutorial.Thank You!
Flag as inappropriateVery nice tutorial! Thanks
Flag as inappropriateExcellent tutorial, thanks for compiling.
Flag as inappropriateThanks a lot. I’m really happy to try it. Thanks! :D
Flag as inappropriateGreat tutorial thanks
Flag as inappropriatevery nice tutorial :D
Flag as inappropriateNeat 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 inappropriateNice tutorial. Not so useful, but a good exercise.
Flag as inappropriateAlways looking for inspiration and this will certainly help. Thx.
Flag as inappropriateVery nice tutorial!
Flag as inappropriateWow! Awesome result!
Flag as inappropriateSublime, design right up my street :)
Flag as inappropriateterrify, very good result!
i like it
great tutorial as well!
adeux
Flag as inappropriateNice
Flag as inappropriategood tutorial as a begineer this blog was really usefull to me thanks alot
Flag as inappropriateNice 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 inappropriatefrankly 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 inappropriateVery nice tutorial!
Flag as inappropriateA class tutorial, I’m sharing this tuts with my readers :)
Flag as inappropriate