16

20 Top Photoshop Icon Design Tutorials

title2
Share!

Icons can spice up a website and make it look that extra bit special. I have compiled a list of 20 icon design tutorials from many different websites that teach you how to create icons in Adobe Photoshop. There is a great selection of icon tutorials listed here, for beginners and also advanced Photoshop users.

If you want to add to the list with an icon tutorial you have found online that you find useful, feel free to drop us a comment and share it with us and the WebDesignDev community. Also, what icon tutorial did you enjoy best? (Title Image From Icon Dock’s Rocky Vector Icon Set)

Places I Use To Find Icons

When I want to find icons to use in various web projects, I often head over to one of the following sites…

IconArchive – This website has a great selection of different icon sets. I love the search feature, and often find the icons i’m looking for, if not more!

IconFinder – Icon Finder is an amazing new web app. I love the way they have styled their site, and the user interface is amazing. There is a great collection of icons listed here, and its so easy to use.

Safety Icon Design

Learn how to create this lush safety icon using Photoshop.

Safety Icon Design

CS3 Icons

Ps Hero teaches us how to create Adobe styled CS3 buttons in 10 easy steps.

CS3 Icons

Yellow Helmet

PSD Tuts teaches us how to create a yellow helmet icon from a real image of one.

Yellow Helmet

iTunes Icon

Elite By Design have a nice tutorial on how to create an iTunes styled button for the iPhone and iPod touch.

iTunes Icon

Computer Icon

This is a nice downloadable tutorial on how to create a realistic computer monitor icon.

Computer Icon

Glossy RSS Icon

Create this beautiful RSS Icon for your blog in this tutorial.

Glossy RSS Icon

Jaguar Styled Folder Icon

Learn how to create a beautiful Mac OS X based folder icon in Photoshop.

Jaguar Styled Folder Icon

Speed Gauge Watch

Create this very realistic speed gauge watch in Photoshop.

Speed Gauge Watch

Folder Icon

Learn how to create this customizable folder icon in only 8 simple steps using Photoshop.

Folder Icon

Shiny Lock Icon

Another fantastic tutorial from PSD Tuts. Learn how to create a stunning shiny lock icon.

Shiny Lock Icon

World Icon

Learn how to create this spectacular world icon. The coloured and light effects are amazing.

World Icon

Traffic Cone

Follow this Photoshop tutorial to create a realistic road cone icon.

Traffic Cone

Pencil Icon

Learn how to create this big super shiny pencil icon. You can then resize it accordingly.

Pencil Icon

Photoshop Shield

PSD Tuts teaches us how to create this Photoshop shield they occasionally use for post title images.

Photoshop Shield

Subscribe Badges

After creating these, you could use these badges on your blog / website to get visitors to subscribe to your RSS feed.

Subscribe Badges

XP Style Monitor Icon

PSD Tuts teaches us how to create this Windows XP styled monitor icon.

XP Style Monitor Icon

7 Principles of Effective Icon Design

This article gives you a good starting place for creating icons that work well together and fit seamlessly within your designs.

7 Principles of Effective Icon Design

Juicy RSS Feed Icon

Learn how to make a unique RSS feed icon. This tutorial requires Adobe Illustrator’s basic tools and also the use of Illustrators mapping feature.

Juicy RSS Feed Icon

Adobe Photoshop CS3 Style Icons

In this tutorial you’ll learn how to create the Adobe CS3 style icons using some basic gradients and layer styles.

Adobe Photoshop CS3 Style Icons

Design a Detailed Compass Icon

This is a Photoshop drawing tutorial for icon lovers in which you’ll be illustrating a metallic compass icon.

Design a Detailed Compass Icon

Get Free Email Updates!

Sign up now and receive an email when we publish new content.

We will never give away, trade or sell your email address. You can unsubscribe at any time.

About the Author

Iggy Ko

Facebook Twitter Google+

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

Iggy Ko20 Top Photoshop Icon Design Tutorials

Comments 16

  1. Agence Web

    Thank you for sharing this post. Icons give a great taste and style on a website. it makes a website more attractive.

  2. Pingback: Photoshop Greatness – Part 1 - we are righteous

  3. FindIcons.com

    I justed wanted to suggest a new and better icon search engine, FindIcons.com, which has larger icon collection and complete search filters.

Leave a Reply

Your email address will not be published. Required fields are marked *