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, 128×128px) 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 32×32px 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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Callum Chapman
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
just feel it - More
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
nice collection here
Yea, Of course it was best collection. Thank you Khalid bhai for suggestion.
Nice! Briefcase icon tut is awesome!
Thanks! It was so much fun to do.
nice collection, few links are new to me. i try that
Very handy, very handy. Kudos. You just gotta luv the Envato / PSDTUTS+ guys.
7, 17 and 11 look awesome I am going to have some fun doing this!
I like 7 and 11 too,man!
And 27 looks very pro,too!
Number 10 is a guitar amplifier isn’t it?
yeh not a radio
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
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;)
Thanks for claryfying that, you’re right. It’s the wrong picture.
Nice roundup Callum. Definitely some stuff here I can put to use in my renders.
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?
very good collection , thanks
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.
LOL. Saw the detailled compass icon in a header on some website recently.
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.
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!
very nice and i like number 11 & 28 & 7
Goodness, they’re all so detailed. I agree the briefcase looks so genuine.
I’m assuming they were done in Illustrator, most of them?
Great collection here. I’m quite interested in the mini icons!
Awesome collection! Can’t wait to try these. Like Tom said, I also am interested in the mini icons as well.
A very nice collection of design tutorials, i am excited to try out the social media icons…..
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.
Hey, it’s not a vintage radio, but guitar combo!
Oh man I needed these, I’m terrible at making icons.
Nice post – thanks Callum. Look forward to your next post.
Great finds man!
Thank you very much
Great tut, many thanks.
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
Some nice tutorials here, thanks for adding mine (4. Create a 32×32px Social Media Icon) to the list Callum.
10, looks more like an Amplifier
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
I like the hand drawn social media icons. They are all great design tutorials. I like the glassy ones as well.
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.
Wow Wow…Nice Collections Tutorial… Every one will get impression to design a icon, when reading this Article
Every one will get impression to design a icon, when reading this Article…Nice Collections Tutorial
thx.very nice