I’ve had a few requests for insights into the process of making icons. Instead of answering individually, I’ve decided to make this the first subject of a range of articles to be authored here at PixelResort.
This won’t be a tutorial or a step-by-step walkthrough, more like a general guideline based on my own experience. It’s how my workflow crops up. Enough disclaimer, let’s see if we can make an icon. To illustrate the creation of an icon, I’ve decided to redraw my old TextEdit icon from the bottom up.
Sketching
Sketching is an important tool in defining the concepts of your icons infancy. Sketching shouldn’t be accurate, it’s all about getting your ideas down on paper.
Get your ideas down on physical paper, it will save you time in the end
Unconsciously you make alot of decisions when you first put that pen to the paper. Perspective and major elements materialize and you get a first and early look of what might work. The power of moleskins should never be underestimated. Reference pictures and rough tracing might come in handy if you’re drawing something completely alien to you.
Where to Start?
When that unceremoniously blank photoshop document is staring back at you, it might be hard to know where to begin. My advice is, start with large and defining elements of the Icon. In this case the wooden pad sets the perspective and works as the foundation of the icon.
Start drawing large and defining elements
The Pen Tool
The Pen tool is the iconists best friend. It takes time to master, but it’s the heart and blood of icon creation. Even though your finished work will be raster based, vector scalabillity in the work area is essential. It allows you to move around and resize elements like there’s no tomorrow.
Get familiar with the pen tool
Blending Options
If the Pen tool is the iconists best friend, blending options is the beer they enjoy together. Blending options are way more powerful than many recognize. The subtle symphony of individual styles can create almost any texture and surface.
Alot can be accomplished with the blending options
I could write an entire book about the power of blending options. The best way to learn is to play around with it yourselves. Don’t be fooled by the labels adobe has given the individual options - an inner shadow doesn’t necessarily need to cast a shadow, etc. Explore the possibilities of the individual options.
Organize!
As you slowly add more details to your icon, make sure to stay in control of your growing number of layers. Organize in folders, and nestle in smart objects.
Organize layers in folders and smart objects
Icons can easily have 100+ layers, so staying on top of the individual parts make tweaking alot easier.
Smaller Sizes
As you may know, a regular icon package contains several sizes. When you first start out, make sure to work on the maximum size your package will contain. This is often 512×512 pixels (leopard standard). From there on, you should work your way down the various sizes (256, 128, 32, 16).
Give your small versions the attention and care they deserve
Tweak and completely redraw your icon to fit each individual size. Much of the liberty you have in the 512px version won’t be afforded you in the smaller sizes. Each size is equally important. An icon is only as good as it’s least attractive size. Make those pixels count!
Packaging
When you’ve spend a few hours perusing the details and tweaking everything to your satisfaction it’s time to pack up the icon. Personally i use Iconfactory’s marvelous IconBuilder. It outputs Mac & PC formats without a blink.
Packing the various sizes in icon files
Ultimately the creation of each icon is inheretly different. To say that I haven’t gone into detail is a mild understatement. There are quite alot of aspects which i haven’t covered, but I hope that i’ve shed some light on the process of making an Icon.
Download
Download the finished icon from the Icons Section.
I’ll be happy to answer any questions in the comments.
Copyright 2009 Michael Flarup All Rights Reserved
Great insight into your process! It would be great to see an article on how you use the blending tools someday..
This is an interessent article since it is different than a tutorial. It explains how to do an icon, but not especially one icon, it works with all the other, you just have to imagine^^
Thanks
This sure is a nice article.
As said before because it’s not about one specific icon but more the general process. I also hope that we can see more articles like this in the future!
gr8 Douglas Adams quote
Wow, I’m glad I suscribed to your feed recently. I have been wondering how to start icon building and you answered my question. “Start with large and defining elements of the Icon”. Will you ever do a full-on tutorial though? That sounds like a hell of a lot of work but I’m sure many [aspiring] iconists would greatly appreciate it.
Im glad you guys like it, there will certainly be more articles in the future.
@Mateo: I’ve got a Blending Options Article on the ‘writing table’.
@Steven Beelen: Couldn’t help it, i love that quote.
@NetOperator Wibby: Im glad you liked it - it does assume a certain level of photoshop skills and certainly isn’t directed at the novice. I haven’t got any plans for a full-on tutorial - This is mainly because i don’t think you can actually do one that would benefit all. As i wrote in the article, each process is inherently different, as such there isn’t a step-by-step walkthrough of ‘icon design’. Maybe also why there aren’t many tutorials on it in general. I think it will be more beneficiary to write about the individual tools and techniques utilized in icon design. Hope that made sense.
Again, thanks for reading it.
Great article, I’m in the process of learning and it’d be great if you could get more deep into optimazing the little sizes anyway awesome work.
You’re really amazing for doing that. Not what you can call a constructive comment but I really wanted to state how grateful I am for that kind of article.
Thank you
Hey Michael, great post, great tutorials. You did it nicely. And thanks too for making it free for download.
Great tutorial! You’ve definitely inspired me to pick up the PS pen tool. As far as the clipboard goes, is that 3 dimensional effect achieved with blends as well? Thanks!
nice tuts!
well done! 
i really like this..
icon is nice things but needs patient to make greats icon like you did
http://www.eyesontutorials.com/articles/2874/1/The-Making-of-an-Icon/Page1.html
is this a bad rip?
I couldn’t make something like that to save my life. But it’s a great tutorial!
Cool
When do you publish your next icons?
Really like the icon, but why do very few online tutorials use Illustrator for their icon work?
In terms of icon design, AI is a far superior program, though I use PS to add the finishing touches to a design. I personally think a combination of the two is the best method.
How did you draw the rubber on the end of the pencil?
@lonut The rubber at the end is made up of two shapes with some applied layer styles to give the illusion of mass and shadow. I might do a deeper tutorial on this later.
Hi
Love your page and your work.
I am interested in a search option you have on page, as i see its a WordPress you are using, what is the plugin for search i love it.
Thank you.
I loved this small tutorial on icon creating in Photoshop! Do you know if Photoshop will work the same way on a windows computer?
That is a very good tutorial… Can I ask how you go about determining content for the icon and what looks good?
For example I’m trying to design a logo, and I’ve had the idea of a glassy sphere icon with something like a character something like the following in http://img98.imageshack.us/img98/4994/ant.png the middle.
However a character like so looks very bland and 2D on a 3D background icon, so I’m having difficulty finding a way to layer different items together. An obvious thing to make it less bland is to add more detail, but then the question is, how much detail do you add?
i simply loved ur work… pls join us on orkut ..we also have a photoshop communityhttp://www.orkut.co.in/Main#Community.aspx?cmm=24443394 pls check it out.
my profile on orkut will be http://www.orkut.co.in/Main#Profile.aspx?uid=8619434094698432676
love to have u with us.
once again thank u for the tutorials.
take care.
bye.
Elsker dit arbejde!