The Making of an Icon

 

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.

Sketching the initial ideas of the Icon
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.

The Pen Tool
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.

Blending Options
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
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).

Smaller Sizes
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.

Packaging
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.

Download the TextEdit icon

I'll be happy to answer any questions in the comments.


Author: Michael Flarup
URL: http://pixelresort.com
   


Popular Tutorials

Fantastic Sunset WallpapersGirl Photo Manipulation illustration in Adobe Photoshop CSWindows XP wallpaperThe hidden power of Photoshop brush toolwallpaper with logo in Adobe Photoshop CSHow to create Background or LogoSunny Day EffectsAnimated Rainbow WallpaperDesigning a Diving Wallpaper

Latest Tutorials

Chaos ToolsChaos ToolsCreate very shiny summer wallpaperHow to  create wallpaper based on making of the logomake a wallpapermake a wallpaperDigital art wallpapersSpace designnine and venue

33 Responses to "The Making of an Icon"

 
jeka Rating: ratingfullratingemptyratingemptyratingemptyratingempty Unrated
said this on 26 May 2008 4:17:34 AM MDT
not baad ) but i never have the idea to sketch ICons )) - should maybe try it )

 
JEKA Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 26 May 2008 12:40:49 PM MDT
oops mised the 5 th star !

 
Vlasta Rating: ratingfullratingfullratingfullratingemptyratingempty Unrated
said this on 26 May 2008 4:40:58 PM MDT
Using Photoshop is a poor choice for icon such as this. If you used a 3D tool, you would not have to sketch it and the pencil would not look like it does not belong to the pad due to different perspective and lighting. You'll also save lots of time. Nice icon, BTW.

 
Yanith Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 27 May 2008 2:13:00 PM MDT
hey i have made icons before, but for some reason when i make the 16X16 they dont look as god and crisp as yours (( i have tried PS and IconWorkshop but never get the results i want any tips on shrinking the icons yanith yanitho@hotmail.com

 
Andre Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 01 Jun 2008 3:50:26 PM MDT
Wow, great (but little brief) inspiration for those who are lazy to learn in 3D based programs. But maybe Illustrator would be better..

 
kailoon Rating: ratingfullratingfullratingfullratingemptyratingempty Unrated
said this on 02 Jun 2008 2:45:55 AM MDT
this can be a good tutorial but seem a bit too brief. I think illustrator can handle it better because it will not reduce the image quality. I prefer go for illustrator when creating icons :)

 
zachariah Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 02 Jun 2008 5:37:05 AM MDT
can't you elaborate the layer styles?

 
Nick Toye Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 03 Jun 2008 3:23:01 AM MDT
What is confusing me is you say that at smaller sizes you change the detail to make the most from the pixel, so that the icon still looks good at 16x16. However, when you throw the large icon into Icon Builder, that does all the work for you. Reduction etc... So do you still modify the icons that Icon Builder creates or not?

 
vladimir Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 13 Jun 2008 3:06:19 AM MDT
Wow! This is magic! And you wizard of Photoshop!

 
Wasim Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 13 Jun 2008 4:53:55 AM MDT
There are a few very handy tips here. thanks !!!

 
S.Ali Qamar Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 19 Jun 2008 6:21:27 AM MDT
impressive !!!

 
S.Ali Qamar Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 19 Jun 2008 6:28:59 AM MDT
excellent

 
Car Pictures Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 03 Jul 2008 12:08:23 PM MDT
I love your icon design, however, I must say the tutorial is too brief for the new comers. Don't think photoshop is right tool for doing icons.

 
Mary Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 14 Sep 2008 4:40:19 PM MDT
Very nice work i love it

 
Mary Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 14 Sep 2008 4:41:02 PM MDT
I love it

 
santosh Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 01 Oct 2008 7:54:23 AM MDT
good

 
SEO Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 15 Oct 2008 6:58:12 AM MDT
Very great work! I love this icon...

 
freddesign Rating: ratingfullratingfullratingfullratingemptyratingempty Unrated
said this on 13 Feb 2009 10:11:05 AM MDT
Nice outcome, but would be much better done in illustrator and completely possible.

 
sivas Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 05 Apr 2009 2:02:51 PM MDT
very good, thank you

 
e11world Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 12 May 2009 2:07:35 PM MDT
Very impressive. I would like to see a bit more detail in the steps though.

 
Sklep W?™dkarski Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 22 May 2009 4:19:22 PM MDT
This is really possible? 0_o

 
sonnydesign Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 15 Jun 2009 7:55:30 AM MDT
wow! very nice tutorial i will try it also. Thank you for this.

 
photo retouching services Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 05 Aug 2009 12:35:47 AM MDT
My first time back in a while and you are still coming up with quality tutorials!

 
sivas Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 15 Aug 2009 12:41:16 PM MDT
very good, thank you

 
brian-icons Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 21 Aug 2009 5:03:26 AM MDT
Thanks for the directions- This is awesome.

 
Brian-icons Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 21 Aug 2009 5:05:33 AM MDT
Thanks for this tutorial.Its awesome

 
Paul Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 27 Sep 2009 4:11:07 AM MDT
Amazing! But I hoped you will also show us how to draw the pencil you've used :). Anyway, that looks cool!

 
Artful Dodger Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 12 Oct 2009 6:26:35 AM MDT
Wow excellent tutorial! I've never actually tried making an Icon for myself, it just seems too hard and intimidating but I might actually give it a go.

 
nadia Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 15 Dec 2009 12:48:03 AM MDT
Awesome tutorial to learn. Very easy and well defined . thanks for sharing this nice post.

 
Bern Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 01 Feb 2010 5:19:21 AM MDT
For all you guys wondering why Photoshop, have a look at this: http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php 3D software might be OK as a base for an icon??¦ but it isn't ideal. Drawing your icon in a vector format might work for some things, but when it comes to scaling it down to 16px or even 32px you will likely have to recreate the icon anyway. If you look at the best desktop icons around you will notice many of them are actually a completely different icon at 16px. In summary, drawing once and scaling is lazy and produces shitty results.

 
BG Designz Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 02 Apr 2010 1:10:00 AM MDT
Nice Stuff! What is everyone's preference when it comes to logo design; Photoshop or Illustrator?

 
Andrew Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 26 Apr 2010 9:51:58 AM MDT
The text is not within the lines :P

 
Photo Editing Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 26 Jun 2010 7:13:15 AM MDT
This is a great place for me to visit as I need to understand more of this. Thanks for the tips.




Rate this article and leave a reply:
Rating: * Poor Excellent
Your Name *: Email (private) *: Website:
Please copy the characters from the image below into the text field below. Doing this helps us prevent automated submissions.
Security Code: img

Our prep courses include the latest set of actualtests itil and pass4sure ssat exams with 100% guarantee for victory in selftestengine act prep and passguide act prep.Our realtests scjp are simply the best in its quality.





Partner Links

advertise here ...
CSS Gallery