26 May 2008

Echo icons. Tips: guides and grids.

A bit of history

There are two years since the first mockup (no picture, the particular wiki page is dead) for what was going to become the Echo icon theme (at the time it was just "Bluecurve and Beyond") appeared. It was a rough preview (~20 icons) made by Diana.
Honestly, the icons sucked a lot - bloated SVG made with Illustrator, no standard size, no guidelines and so... but a lot of us, bored by the already old Bluecurve and not convinced by Tango, got excited and put some hope in it.


 After a while, without a maintainer, with poor infrastructure (a wiki page), no guidelines and poor SVGs and few active contributors, the development slowed down.
Then Luya and Martin stepped in, took over the maintenance, worked hard on guidelines, a new hosting infrastructure and a number of cool looking icons which are used in various places around Fedora.
The plan is ambitious: to get the icon theme in a state so it can be considered as a default for Fedora 10. The plan is hard but not unattainable. In needs more contributors. It needs you.


Icon development is not my filed of expertise, I have contributed to Echo only a few remixes in the early days, but I like to learn. So here is my idea: show some basic tips to encourage others to put they own tips, generate a healthy exchange of information, learn from each other and encourage new blood.

One of the hard part about the Echo icon theme is that it uses an axonometric (not that is not isometeric) view for the large view, and the creation of such icons have a level of difficulty. So you need to use a kind of helper - the old way was to import a SVG showing a grid, draw on top of it and then delete it (the source is available in the guidelines page):

[SVG grid]

Now Inkscape 0.46 comes with improved features: angled guides and axonometric grids, making your life (and icon creation) easier.

Drag and drop from the top ruler a grid line, double click on it, rotate with 24.5 degrees:
[SVG guide]

Drag another grid and rotate it with -16.25 degrees (at least, those are the values I measured):
[SVG guide]

Now use these two guides to help you drawing the nice perspective (press "|" to toggle their visibility on/off):
[SVG guide]

While the guides are only a visual reference, a grid can be more effective: it is more dense and also allow snapping to its nodes. Its visibility can be toggled on/off using "#".
So use File -> Document Properties, go to the Grids tab and create a new Axonometric grid with a 16.25 degrees X angle, 24.5 degrees Y angle and whatever value you like/need for Y spacing:
[SVG grig]


  1. looks nice. Looking forward to the whole icon set.

  2. Very useful tips worth to add to Echo guideline. Would you mind to update it in order to avoid scattering information? You can contact either Martin and me too add you to echo group.


  3. @Luya: see this as a challenge for you and Martin to be more aggressive in recruiting Echo contributors, blog more about it, produce tips and tutorials...
    F10 looks like a perfect window of opportunity for Echo.

  4. Great post! I have plan to provide some how-to's and similar things, as well as some recruitment page to the fh.o echo page as soon as I have enough time to do so. Sadly the exam term just started, so the amount of spare time is rather low now...


  5. Thanks for this post; I had no idea Inkscape now had the capability to do this, it's a great addition.

    Ben (from fedora Artwork, a little while ago)

  6. For anyone too impatient for the icons (like me):

    I'm running Fedora 9.

    In the terminal, you can install a preview version of Echo.

    Just type:

    yum install echo-icon-theme

    and tah-dah, they're in the Appearance panel.