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