Video icon 64
Want to learn graphic design? Start your free trial today.
Advertisement

31 Icon Design Tutorials

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

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.

Advertisement