FIRST ASSIGNMENT
Make an icon for an application to wash a car (or any other
application). Here is the specification: it has to be a 2D pixel image,
size 32x32 pixels, in black and white on a transparent background.
Black and white icons are hard to make, you can not use colors to set
objects apart. You will have to keep it 2D. Making a black and white
icon may be the most valueable learning expercience you ever get (in
the icon field...). For pixel images you can for instance use the GIMP.
Ready? Save the image as a png.
Next step. Scale the image to 16x16; scaling goes better after indexing
(Gimp: image - indexed - black/white palette) . It will need repair
now. Repair it and save it under a new name. Does it look the same as
the 32x32 icon? Of course the bigger icon can have more detail. But
overall the icons have to look the same. May be you have to simplify
the bigger icon a bit to make it possible to scale it down. Play with
it till you have Visual Consistency. You will have noticed that every
pixels counts, especially in the 16x16 icon. Making black and white
icons really learns you to Keep It Simple.
Optional: add color to your icon. You will now have a 2D color icon.
This is the way in the old days the MacOS icons were made. First black
and white, then color. It results in visual consistency between black
and white icons and color icons. Since that time icons grew bigger,
became full color. With full color the artist can add gradients,
suggest 3D. Never there will be visual consistency again between black
and white icons and color ones... Icons became more beautiful, but not
more effective.
SECOND ASSIGNMENT
Make a new icon, 32x32, 3D, full color. Keep a 1 pixel transparent
border around your drawing. Then make the 16x16 icon, also with
transparent border, and work on both till you have visual consistency.
There are tricks to use, like sharpen, but first try it pixel by pixel.
Can you beat the tricks?
Take a look at the 16 icon. How many major objects does it have? (fi
car, bucket, brush) How many sub-objects does the biggest major object
have? (fi car: body, 2 wheels, 2 windows) How many sub-objects does the
smallest major object have? How big are these sub-objects, how many
pixels do they use? Is the count the same for the 32 icon?
You now have an idea about how many objects and sub-objects an icon can have.
Still got the 1 pixel border? Now add a black outline to both icons.
How do you like them best - with or without outline? Should the outline
be aliased or anti-aliased? Do you allow semi-transparent pixels
outside the outline? What happens with an icon with outline if you
scale it?
THIRD ASSIGNMENT
Redesign the icon as a vector icon, for instance in Sodipodi. You can
use the 128x128 size many artists use. Do not use an outline. Do keep
in mind the icon will have to be exported to the 16x16 size too. You
already know how many objects and sub-objects an icon can have... Do
not start to paint landscapes full of details. Use the same simple
objects you drew before, KISS...
Export the icon as 16x16, 22x22, 32x32 and 128x128 png icons. Do you
have Visual Consistency? You can not leave scaling to very small sizes
to applications, since every pixel counts at small sizes. You can
hand-optimize the 16 and 22 icons with the GIMP, as you did before.
Now you will have 3 images that matter: a svg vector icon, and 16x16
and 22x22 png icons. With the svg icon the bigger sizes can be rendered.
It was a pleasure to have you in boot camp. Say after me: "I will always keep it Simple, I will KISS my way through live."
We declare you Icon-Master.
(This is an excerpt from the Icon Guide on wiki.kde.org.)