Version 3 (modified by mso, 9 years ago) (diff)


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.