Icons can come in incredibly handy for both web and print design. They are a great and very simple way to add graphics to text areas, overall making it a much easier and better experience for the user.
There are a lot of icon tutorials on the web that are specifically for Adobe Illustrator, mainly because its vector image capabilities allow you to scale your finished icon up and down to the size of a pin-head or the muscles of the Incredible Hulk. However, if you know what the purpose for your icon is going to be (i.e. you know you're not going to want it any bigger than, lets say, 128x128px) designing it in Photoshop is not a problem, in fact, in some cases, it's a lot easier! Therefore in this article I have collected 31 magnificent icon tutorials specifically for those who know the purpose of their icons, only have Photoshop to work with or are simply more confident and skilled in Photoshop. Enjoy!
1. USB Hard Drive Device Icon
Difficulty: Intermediate
Skills: Use Gradient and Shadows to add depth to otherwise very simple shapes.
2. How to Design Mini Icons
Difficulty: Easy
Skills: Use the Pencil Tool to make simple custom shapes.
3. Skype Icon Design
Difficulty: Intermediate
Skills: Use different Blending Modes to add highlights and shadows to certain areas.
4. Create a 32x32px Social Media Icon
Difficulty: Easy
Skills: Use the Modify > Contract Tool to create pixel-perfect highlights.
5. How to Create a Basic House Icon
Difficulty: Intermediate
Skills: Use plenty of Layer Styles such as Gradients and Shadows to give your icon a 3D appearance.
6. Vintage Mac Icon
Difficulty: Easy
Skills: Use Layer Styles such as Glows and Satins to give your screen a glossy effect.
7. Leather Textured, Realistic Briefcase Icon
Difficulty: Advanced
Skills: Use Blending Modes and Levels to blend a texture into your icon.
8. Unique and Funny Digg Icon in a Bottle
Difficulty: Intermediate
Skills: Use Gradients to make realistic blends and shadows to make your bottle appear 3D.
9. Postal Packet Logo Icon
Difficulty: Easy
Skills: Use the Polygonal Lasso Tool to create simple out of proportion but funky shapes.
10. Vintage Radio Icon
Difficulty: Advanced
Skills: Use textures and patterns to create a photo-quality and life-like icon.
11. Detailed Compass Icon
Difficulty: Advanced
Skills: Use the Free Transform Tool to edit and combine simple shapes to make them appear three-demensional.
12. Animated RSS Feed Icon
Difficulty: Intermediate
Skills: Use Photoshop's built-in animation tool to animated your RSS Feed Icon.
13. Traffic Cone Icon
Difficulty: Advanced
Skills: Use the Pen Tool to create custom shapes and edit them with the Direct Selection Tool.
14. RSS Icon
Difficulty: Easy
Skills: Use the Pen Tool to create curvy lines to add depth and interest to your icon.
15. XP Style Monitor Icon
Difficulty: Intermediate
Skills: Use the Distort Tool to change the overall dimension and angle of your icon, making it appear 3D.
16. Hand-Drawn Social Media Icons
Difficulty: Easy
Skills: Use the Hue/Saturation Tool to add color to your hand-drawn elements.
17. Glossy RSS Icon
Difficulty: Intermediate
Skills: Use the Direct Selection Tool to reshape simple shapes such as circles.
18. Shiny Lock Icon
Difficulty: Intermediate
Skills: Use the Path and Direct Selection Tools to modify shapes and make them pixel perfect.
19. Watercolor Social Networking Icons
Difficulty: Easy
Skills: Use the Brush Tool to create "hand-drawn" like elements.
20. Coffee Stained Social Networking Icons
Difficulty: Easy
Skills: Use textures and Blending Modes to create realistic coffee stains.
21. Glossy Home Icon
Difficulty: Easy
Skills: Use the Elliptical Marquee Tool and Gradient Overlays to produce a realistic glossy look.
22. Glossy Download Icon
Difficulty: Easy
Skills: Use the Pen Tool to add a realistic reflective highlight.
23. Cubite Graphic Icon
Difficulty: Intermediate
Skills: Use the Dodge Tool to create realistic highlights and make 2D objects appear 3D.
24. Compact Disc (CD) Icon
Difficulty: Easy
Skills: Use the Perspective Transform Tool to transform rectangles into other shapes.
25. 3D Reflected Mail Icon
Difficulty: Easy
Skills: Use simple shapes and Gradients to produce a realistic and modern mail icon.
26. Mac OS X Leopard Folder Icon
Difficulty: Intermediate
Skills: Use the Lasso Tool to create random dots to make realistic natural paper.
27. 3D Box Icon
Difficulty: Advanced
Skills: Use the Burn Tool to create realistic shadows and curvers.
28. Stylish Mail Icon
Difficulty: Advanced
Skills: Use the Pen Tool to create custom shapes.
29. Vista Error Icon
Difficulty: Intermediate
Skills: Use the Type Tool and Transform Tool to create elements for your icons.
30. Calendar Icon
Difficulty: Intermediate
Skills: Use the Rectangular Marquee Tool to delete different areas of shapes to produce squares.
31. Satisfaction Guaranteed Seal Icon
Difficulty: Intermediate
Skills: Use various Blending Modes to add a three dimensional look to your seal/badge.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )malik December 1st
nice collection here
( )Afraz December 7th
Yea, Of course it was best collection. Thank you Khalid bhai for suggestion.
( )jimkakain December 1st
Nice! Briefcase icon tut is awesome!
( )Andrea Austoni December 1st
Thanks! It was so much fun to do.
( )sriganeshw December 1st
nice collection, few links are new to me. i try that
( )Elektric December 1st
Very handy, very handy. Kudos. You just gotta luv the Envato / PSDTUTS+ guys.
( )Dwayne Paisley-Marshall December 1st
7, 17 and 11 look awesome I am going to have some fun doing this!
( )Madalin December 1st
I like 7 and 11 too,man!
( )And 27 looks very pro,too!
Elbert December 1st
Number 10 is a guitar amplifier isn’t it?
( )jake December 1st
yeh not a radio
( )Callum Chapman December 1st
That’s what I thought when I was rounding the tutorials up; had to list it as a radio though because that’s what the tutorial name is
Djierod December 2nd
he picked the wrong picture for it. The radio is smaller and number 10 is just a different effect which shows what you can do with the tutorial.
( )Doesn’t matter Callum;)
jurgen December 6th
Thanks for claryfying that, you’re right. It’s the wrong picture.
Margaret December 1st
Nice roundup Callum. Definitely some stuff here I can put to use in my renders.
( )Luci December 1st
Nice collection you have here, a fair amount that i’ve not seen yet too, so i’ve bookmarked them for future reference. Looking forward especially to the house and compass ones, thanks a lot! What’re everybody else’s favourites?
( )moaty December 1st
very good collection , thanks
( )Admiral December 1st
Hmm… I don’t know about you, but I don’t like how any of these look.
( )I prefer more basic icons, not flashy stand out ones.
Leon December 1st
LOL. Saw the detailled compass icon in a header on some website recently.
( )AEVION December 1st
Nice collection, but half the stuff here is already on psdtuts… usually round ups are complied with posts taken from other sites other than the one that the article is on.
( )jose December 1st
is so funny how the perspective in the tutorial 5 and 9 are so off haha but nice post though!
*although number 9 is intended to look like that. its still funny!
( )MySofTDS December 1st
very nice and i like number 11 & 28 & 7
( )Omar December 1st
Goodness, they’re all so detailed. I agree the briefcase looks so genuine.
( )I’m assuming they were done in Illustrator, most of them?
Tom December 1st
Great collection here. I’m quite interested in the mini icons!
( )Design Informer December 1st
Awesome collection! Can’t wait to try these. Like Tom said, I also am interested in the mini icons as well.
( )Rishabh Verma December 1st
A very nice collection of design tutorials, i am excited to try out the social media icons…..
( )Miguel625 December 2nd
Some of these are a joke and not worthy of the quality that is displayed on this site, if you’re gonna create a list of stuff it better be up to par with the quality we’ve grown used to on envato site, more than a few of these are very amateurish, I hope this doesn’t go the way of the crappy mess that smashingmagazine has become.
( )Dmitry December 2nd
Hey, it’s not a vintage radio, but guitar combo!
( )David Moreen December 2nd
Oh man I needed these, I’m terrible at making icons.
( )Mike Chanter December 2nd
Nice post – thanks Callum. Look forward to your next post.
( )josh December 2nd
Great finds man!
( )Nelutu December 3rd
Thank you very much
( )Troy Hite December 3rd
Great tut, many thanks.
( )Ted Rex December 3rd
Whew! That’s an exhaustive list! I made this one of the three links for the day on my daily design blog:
http://designthoughtfortheday.blogspot.com/
Ted
( )Benjamin Reid December 4th
Some nice tutorials here, thanks for adding mine (4. Create a 32×32px Social Media Icon) to the list Callum.
( )Bobkelso December 4th
10, looks more like an Amplifier
( )jurgen December 6th
It’s the wrong picture. I showed other stuff that you can do with the techniques in my tutorial. One of them was this guitar amp. ;D
( )Web Print Brand December 9th
I like the hand drawn social media icons. They are all great design tutorials. I like the glassy ones as well.
( )Sikat ang Pinoy December 23rd
I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post. great icons you got there.
( )