Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver

20 Top Photoshop Icon Design Tutorials

Posted on 04. Nov, 2009 by Web Design in Photoshop

Icons can spice up a website and make it look that extra bit special. I have compiled a list of 20 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.

* * * * *

CS3 Icons

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

* * * * *

Yellow Helmet

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

* * * * *

iTunes Icon

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

* * * * *

Computer Icon

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

* * * * *

Glossy RSS Icon

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

* * * * *

Jaguar Styled Folder Icon

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

* * * * *

Speed Gauge Watch

Create this very realistic speed gauge watch in Photoshop.

* * * * *

LG LCD Monitor Icon

Learn how to create this very stylish LG monitor icon using Photoshop.

* * * * *

Folder Icon

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

* * * * *

Hard Drive Icon

Create a hard drive icon in many different colours. This can then be styled to fit your web design.

* * * * *

Shiny Lock Icon

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

* * * * *

World Icon

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

* * * * *

Traffic Cone

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

* * * * *

3d Mp3 Player

Learn how to create a realistic mp3 player like the one below in this tutorial.

* * * * *

Pencil Icon

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

* * * * *

Calendar Icon

This icon would look good next to your blog posts timestamp. You can customize the colours too to fit your design.

* * * * *

Photoshop Shield

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

* * * * *

Subscribe Badges

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

* * * * *

XP Style Monitor Icon

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