Saturday, 18 October 2008

Echo Icon Theme "Perspective", Part I.

One of the most common complaints about echo-icon-theme we receive is that echo is inconsistent in usage of it's "perspective". Why in quotes? Because the word perspective, which has been used since Echo started some years ago, is incorrect. Read on if you want to know why.

Basically what we are trying to achieve when creating icons is bringing real world objects which are 3D (actually 4D, but the fourth dimension is time and we usually paint objects how they look in a concrete spacelike hyperplane, time is "stopped") onto 2D canvas. Such an attempts are mathematically pretty well described and the correct word to use for it is projection.

First take a look, how Echo Icon Theme or Gnome Icon Theme copes with it. Gnome basically uses two different types of projections:

perspective projection (from a certain point of view), it's called On The Table Perspective in tango guidelines

and a plain 2D image of the front face of the object, it's called On The Shelf Perspective in tango guidelines

Appart from that, here and there, there are various slightly different types of projections used, sometimes perspective, sometimes not

On the other side, echo basically uses three different types of projections, neither of them perspective. That's basically where the complaints come from - you can see two icons, both of which will have different projection. Even though we have some rules which projections use for which icons that should idealy help discern whether it's an action icon or not, due to how the icons are used, the rules become less clear.

First we use plain 2D like gnome, in our guidelines listed as Flat Perspective

for action icons we use Cabinet Projection, in our guidelines listed as On The Table Perspective

and for non-action icons we use Trimetric Projection (with certain axes settings, defined in guidelines), in our guidelines listed as Isometric Perspective

Well, I guess most of you get already why I used the quotes around word perspective in the begining. But it would also be good to better explain the various words I used above and add an example image.

So, I'll start with some sorting of projections. Among the most known types of projections there are perspective projections - that's how we actually see the world and is most natural to us - parallel projections - these are especially useful for technical drawings and such, as axes settings is all you need to know to draw a concrete object preciselly into it, because lines that are parallel in 3D are parallel in the resulting picture as well. For further info look at wikipedia's Planar_projection article.

The parallel projection further divides into ortographic projections and oblique projections. In Echo we use both. First one subset of ortographic projections are axonometric projections, one of which is the well-known isometric projection. We use trimetric projection, because all the axes have different scales and the angles between the axes are different to each other. You can read more at wikipedia's Axonometric projection article.

Oblique projections are pretty much similar to the plain 2D, in that that the front face is drawn same as in 2D and the third axis is going of in some angle (we use 37° in echo). In the cabinet projection which we use in Echo, the lengths in the third axis are cut in half compared to the other two. You can read more at wikipedia's Cabinet projection article.

The remaining projection we use for creating icons is the perspective projection. As I outlined above, 3D objects projected on 2D using this projection should appear to our eyes with same properties as when looked at them in 3D (with one eye closed). You can read more at wikipedia's 3D projection article.

And as promised, here's an image showing 3D cube projected on plane using various types of planar projections

Next time, I'll outline how would echo-styled icons look using these various planar projections.


Anonymous said...

I have couple opinions/complains about the Echo icon theme. No offence :).

- Lack of contrast on some icons.
- Too much details. For example in AbiWord the "Save" icon is really stuffed and hard to recognize.
- The blue color is horrific and hurts eyes (just like on "Nokoda" metacity theme). On media players like Rhythmbox "Play" and other buttons looks just horrific.

Máirín said...

I do not think this post addresses the concerns about echo's projection, perspective, or banana, whatever you'd like to call it. I don't really understand the point of this blog post except to showcase some vocabulary.

Martin said...

máirín, hence the "Part I." thing. I'm basically exploring the area and outlining some mistakes we did in the echo icon theme guidelines. I plan to come to some conclusions relevant to echo later. I am *acquiring* the vocabulary myself ;-)

I don't know how in art, but in physics and maths (which I study), it's important do define the terms you are talking about first, this is what this post is mostly about.

nicu said...

I also find useful to see a good and grouped definition of the terms, most people call those icons "isometric".