With icons, web designers and graphic artists have a good opportunity to showcase their skills, prove their experience and explore their creativity. A well created, good looking icon set is a great way for designers to showcase their work and it may be a way to build up some reputation in the online sommunity. Creating professional Icons and allowing people to download them for free is a certain way to attract attention and visitors on a design portfolio or blog. But how how should you get started with creating icons that rock and stand out from the endless masses? This article provides a large collection of tutorials for Photoshop and Illustrator that currently is the de facto standard tools for this purpose. The article also provides links to some very interesting and worth reading articles on icon design. Get started and please comment and drop a link to your own creations and favorite icon tuts and resources.
Illustrator Icon Design Tutorials
StumbleUpon 3D Icon Tutorial
Learn about designing a 3D social bookmarking icon in Adobe Illustrator. You can download the icon here as well
Glossy Arrow Icon Tutorial
Learn how to design a glossy arrow in Illustrator with this great tutorial.
iTunes Icon Illustrator Tutorial
Great tutorial that will help you master your Blend techniques in Adobe Illustrator while replicating the iTunes icon. The challange of this tutorial is to use various Blending modes and blending techniques to replicate the iTune icon. This tutorial is a good exercise to master your Blend techniques. Download Source File
Photoshop Tutorials
Under Construction Helmet Icon Tutorial
In this tutorial, we’ll be creating our very own icon from a photograph. The tutorial is published by psdtuts and it is of exceptionally high quality and may be used as inspiration for transforming other objects from photographs into icons!
Traffic Cone Icon Tutorial
Illustrate a Traffic Cone Icon in Photoshop, cool icon for “under construction”. Another great psdtuts tutorial.
The Making of an Icon
A great tutorial on process of designing an note pad icon. Download the finished icon from the Icons Section.
Clock Icon Photoshop Tutorial
35 step detailed tut showing how to design a simple alarm clock icon.
Draw magnifying glass
Learn essential drawing skills in Photoshop when creating this good looking icon
World Icon Photoshop Tutorial
Create a great looking world icon in Adobe Photoshop. This tutorial shows some really great techniques.
Glossy Round RSS Icon Tutorial
This tutorial will teach you how to create a round RSS icon for our website or blog with some really cool light effects.
Create a Shiny Lock Icon Design
A popular icon that you can find on the internet is the lock icon. It is widely used to identify secure Web pages. It often indicates password fields for secure files. Wherever you wish to place a lock icon, this tutorial will show you how to create an attractive one for you to use! PSDTUTS Plus membership is required to download the PSD.
Vista Folder Icon
Learn how to create a folder icon from scratch
Glossy Graduation Hat Icon Tutorial
Step by step turorial that will show you how to design a glossy, clean graduation cap icon.
Handy Web 2.0 Icons In Photoshop
When we are working on a Web design project, we quite often need icons to show commands like add, delete, or edit. With the Web 2.0 trend, the use of badges and subtle 3D has become very popular. In this tutorial, I will show you how to create a really easy and very nice 3D effect to be used in either buttons and icons or elements that need some depth.
How to Design Mini Icons
Learn the technique of using Photoshop pens tool for creating mini pixel icons. Download PSD
Stylish Search Icon
Learn how to design a professional stylish search icon.
Vista Error Icon Photoshop Tutorial
Learn how to create a Windows Vista erroe icon using basic Photoshop techniques.
Pyramid Icon Design
You will be creating a pyramid icon or logo on this tutorial. All steps are on separate pages – really annoying.
Create a Jaguar Style Folder Icon
n this tutorial, we will show you how to cover an object in a Jaguar style fur texture. In this example, we’ll cover a computer folder, but this technique can be used with any other object, like a CD cover, a mouse, or even a computer.
Creating an XP Style Monitor Icon
Let’s go back in time and look at Windows XP system icons. We’ll get inspired by an old computer icon. Then we’ll create a simple monitor icon in that style. Icon Factory is the company that created the icons for both Vista and XP Windows operating systems. Their works serves as inspiration for not only this tutorial, but many icons created today.
Icon Design Articles
Drawing an Icon: Sketches and Metaphors
Process of sketching of an icon
Icon Design Explained (Quickly)
Quick slides for teaching some fundamentals
10 Mistakes in Icon Design
Denis Kortunov explains the mosty commonly observed mistakes in icon design
7 Principles of Effective Icon Design
Some guidelines and principles before approaching icon design
Icon Design: Bitmap vs Vector
A good article about differences between bitmap and vector file formats
Related posts:
- 79 Free Icons from WooThemes The free download contains all 79 icons, sized at 256×256...
- Hand Picked Photoshop Web Design Tutorials to Sharpen Your Skills Tutorials on how to create Web designs in tools...
- 20+ Highest Quality Photoshop Typography Effect Tutorials With Photoshop you can turn plain text into awesome...
- Using Photoshop Styles to create awesome web2.0 effects in no time What is a Photoshop Style? A Style in Photoshop...
- 80+ Photoshop Tutorials: Practical Web Interface Design When it comes to graphic design, Adobe Photoshop is a...
SHARE THIS!
Please help tripwire magazine and share this post is you liked it...
Share
Submit
More Links
July 8th, 2009 at 10:37 am
This article has been shared on favSHARE.net.
July 8th, 2009 at 7:36 pm
Wow, what a collection. For me the glossy RSS and the pyramid icon tuts rock the most
July 8th, 2009 at 7:56 pm
Another website that you can make your own icons is http://www.smileycentralstudio.com. The icons can be embedded in e-mail, become an avatar, and be made into a stuffed smiley. Thought I would share.
July 8th, 2009 at 8:00 pm
Thanks for the great tutorial! I’m going to tell my clients about it as well as use it to create favicons for them. Very helpful!
Jenn Wong
http://webhead20.com
July 9th, 2009 at 5:29 am
Great stuff! Now would someone please find some decent Inkscape/[Insert favourite free raster editor here] tutorials? We don’t all have the money to throw at expensive software like Illustrator and Photoshop, indeed some of us literally can’t pay for them. I’m not about to go out and pirate them either, not when I have perfectly functioning alternatives.
July 9th, 2009 at 8:22 am
Here’s a tutorial on making Tango* icons.
http://tango.freedesktop.org/Generic_Icon_Theme_Guidelines
* Tango – a project to create a consistent user experience for Open Source software.
July 9th, 2009 at 10:17 am
Lots of great tutorials here, but whats missing is “How to create good looking 16×16 icons”
August 7th, 2009 at 10:00 am
I’ve bookmarked and tweeted this list.
August 7th, 2009 at 3:49 pm
thank you, and I’ve bookmarked this list.
February 4th, 2010 at 6:27 am
nice collection and i love this…thx
February 4th, 2010 at 7:43 am
@satrya, thanks for your feedback – great and really appreciated.