Friday, 6 June 2008

Echo Icons Tips - Creating Echo Icons with On the Table Perspective

I've just finished a (hopefully) simple how-to on creating Echo icons with on the table perspective. For convenience I paste the content here as well. Comments are welcome :)

Creating Echo Icons with On the Table Perspective

Since creating on-the-table-prespective echo icons can be a little tricky, we provide a step by step guideline for creating most of the action icons.

Step 0 - create grid

On-the-table-prespective echo icons are similar in creating to flat icons, which means it is useful to create rectangular grid. You need create pixel grid, because we use it to help us in creating crisp icons. That means, you need to set the Origin X/Y to 0 px and Spacing X/Y to 1 px. Also, because we use this perspective for creating 32x32 and bigger icons it is useful to also set Major grid lines so that it divides our image into sections. Good values to use are 4 lines for 32x32 icons and 6 lines for 48x48 icons, but if you feel that bigger/lesser setting is better for you, use that. In the example pictures we show the grid setting and grid display in inkscape for 48x48 icon.

Step 1 - create the basic shape

Now one of the most important things comes - creating a metaphor for your icon. The metaphor should be self descriptive and it should have easily recognisable shape. We advise to use same/similar metaphors like gnome-icon-theme as much as possible. In our example, we create the go-forward icon, which is usualy drawn like an arrow pointing to the right. In this part of process it is good to make use of the grid created in the Step 0 and it is not necessary to add gradients yet. It is also good to have in mind that you'll add outline and depth to the icon so you need to make it a little smaller so that the other parts also fit into drawing canvas and move it a little to the left to keep it opticaly in the centre. Look at the example image for reference.

Step 2 - create inner outline

This step is one of the easier ones - you just add a 1 or 2 px wide outline to the shape you created in Step 1. It's useful to fill it temporarily with e.g. yellow colour to make it visible (white picture on white background is not visible at all), you'll fix the colour later in the process. Also make sure to align it to the pixel grid to keep the image crisp. Take a look at the example image.

Step 3 - add depth

In this step we use a small trick to be able to both have the correct perspective and crisp icon. First we move the already created objects -0.2 px along the Y axis (to the bottom). Now we duplicate the whole shape of the created icons and move the duplicate 2 px to the right and 1.5 px along Y axis (to the top). Next we duplicate the original objects once more and union (Path > Union) all the duplicates. Next we put the newly created object to the bottom in Z direction (Object > Lower to Bottom) and edit the shape so that it looks like a side of the icon (it usually means that we remove some points). The resultant image should look like this:

Step 4 - add stroke

In this step we add a simple stroke to the created objects. First duplicate whole object once more and union the duplicates. Move the newly created object to the bottom in Z direction, remove fill and add stroke to it. The stroke should have rounded corners and 1.5 px width (which results visualy in 0.75 px width stroke). The settings we used and the resultant image can be seen bellow.

Step 5 - finalise colours

Next, we set correct colours and add gradients. There is not much to say about this section, only that linear gradients are usually preferred to radial ones and the gradients should not be too strong (e.g. going from mid-bright blue to [near] white). The resultant image might look like this:

Step 6 - add shadow

Next, we add a simple shadow to the icon. First, create the desired shape of the shadow, in the on-the-table-perspective Echo icons it is usually an ellipse. If needed add a simple gradient, as shown in the example:

Next, modify the amount of Blur and Opacity so that the shadow is subtle, but easily visible. The values we used in this example and the resultant image are shown bellow:

Step 7 - check the result, fix problems

Finally we'll check how the icon looks in the target size. Inkscape is very helpful in this by providing an Icon Preview function. Open it, select your target size (in our example 48x48) and on the right you'll see how the icon will look like, on the left you can see the details. As you might noticed, the trick used in Step 3 together with 1.5 px wide stroke led to crisp icon with correct perspective, only with tiny "misrenderings" that are visible only when zoomed. In case there are any other artifacts or misrenders play a little more with the icon while checking the preview (you need to click Refresh in order to see the changes you made) until you are completely satisfied with your work.

The Result

Get SVG source


pedro said...

sorry to nitpick, but this doesn't have anything to with perspective -- it's just a plain old isometric projection.

Apart from that, however, this is an interesting tutorial.

Levi said...

Actually pedro is right here. It isn't perspective projection. Only if the depth didn't move along parallel lines, would it fall into perspective projection.

Martin said...

Heh, actually it is a misuse of the word perspective (most likely). It is not isometric projection, but it is not perspective projection either, up until pedro no one complained about calling it "on the table perspective", and even though "on the table projection" might be better, I don't know if all people would understand the name?

pedro said...

how about calling them just pseudo-3d icons next time? There's no real need to specify the actual projection used...

Anyway, I did say I was just nitpicking, didn't I? :)

Martin said...

well, "on the table" tells about what perspective is used to laic reader much more than pseudo-3d :-D and same goes for using name "isometric projection" for something that's actually some kind of axonometric projection :-p

pedro said...

"on the table" certainly does say more, it's just that "perspective" completely confuses the reader right the next moment ;)

and yes, you're right that axonometry (as a general group of projections of which isometry is a special case) is a more fitting term; on the other hand, isometry is (though slightly wrong) more easily understandable for a laic reader -- thanks to early isometric games, i guess :)

James said...

Just call them icons next time, and don't worry what kind of perspective it is ;D I doubt users looking at the icons are going to think about what type of perspective it is... just that it looks nice...

Anonymous said...

Thanks for the tutorial, I'm new to inkscape and linux and this will help me get started.

Anonymous said...

Hey, I don't know what's wrong, but when I put the grid lines on, it only shows the major grid lines - not the minor lines. Do you know why this would happen? I'm using Windows 7 and I restarted, but I'm new and don't know what I'm doing.

Martin said...

Anonymous: try zooming in a bit, inkscape hides the grids if it decides they're too close to each other.

Anonymous said...

Interesting but where to download this program?