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