Monday, April 5th, 2010

31 Icon Design Tutorials

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.


Continue Learning…



Related Posts

  1. Social Trucks Icon Set
  2. How to Create a Basic House Icon in Photoshop
  3. The Ultimate Collection Of Brilliant Web Design Tutorials
  4. How To Create a Detailed Apple iPad Icon in Photoshop
  5. How To Design a 3D Glass Icon in Photoshop

Category: Icons
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
  •