| Tutorial Title: Tips for Icon Design |
Introduction: This is not really a tutorial, it is more like an article or guide. These are not the rules of design for
making icons and they are not anything that you have to follow.
They're just some tips you might want to take into consideration
when designing your own icons.
Step
1: The first thing you might
want to do when making icons is to sketch out a few onto
a piece of paper. You can just jump right into your imaging
program and begin the designing, but you might find it easier
to have a simple sketch to guide you along the process.
You also should figure out what type of icons you will be
creating before you start making them on the computer. Are the icons going to be a complete
set or are they just going to be a desktop set? If they
are a whole set, be prepared to make upwards of more than
40 to 50 icons at least.
|
| Step
2: Once you have step
one figured out, you can move onto the actual construction
of the icons. When designing them, you should make your
canvas size about 128x128 pixels (you can make the canvas
smaller but always keep both the height and the width
the same). This way you can add details, yet be able to
resize your design later on (always remember to rescale
an image down, never up). However, do not go overboard
with the details. The 128x128 pixel canvas is very big
for an icon and its very easy to get crazy with details.
You have to remember that you will be rescaling the icons
later on and that a lot of the detail will be gone; especially
if you are rescaling the design into glyphs. Also, you
do not want to use text in icons. Text does not rescale
very well. In some fonts it might rescale ok, however
most fonts wont unless you play around with the antialiasing.
While on the topic of antialiasing, you might not want
to antialias edges on your icons. This is because the
icons should have a transparency and if you have antialiased
edges in your design, then your final icon will most likely
have fuzzy jaggies along the icon edges.
As
you can see, a lot of the detail begins to disappear as
you scale the image. The blue cloth looks like a grid
when scaled to 32x32. And at 16x16 its very hard to tell
what the icon is.
The
text begins to get a little blurry at 32x32, and with
some fonts, letters begin to look alike. At 16x16 its
almost too blurry to read. Some sharpening with the Unsharp Mask filter may help.
|
| Step
3: Even though this step
might hinder your design's creativity, its very important.
When designing your icons, ask yourself what it is that
it will represent and is it recognizable. Will a user automatically
know what your icons represents when they see it? In picture
A you there's a CD, now it could represent any CD, it could
even represent the CD drive. In picture B there are headphones
and they could be used for the sound settings or volume
in a control panel. Now in picture C we now can tell that
the icon represents something about music or an audio CD.
|
| Step
4: In this example, the
scaling is a little better. The 32x32 has not lost much
of the detail and you can still tell what the icon is. The
16x16 is not too good, but you can still see what it is
and it would most likely look better on a dark background
color.
For
glyphs, I suggest that they be done in the actual 16x16
canvas and be drawn pixel by pixel. Also, glyphs should
almost never have much if any antialiasing because since
they are so tiny, any antialiasing will just make the icon
look blurry. Below you can see a glyph zoomed in. There
is no antialiasing and it was drawn pixel by pixel, that's
why its clear and clean when viewed at its normal size.
If you do feel you need to make a glyph in a larger canvas
and then scale it down at the end, use a sharpen filter to regain some of the lost pixels.
|
|
