Consistent Perspective in a Group of Icons – How To

I've been creating a bunch of Echo icons lately and one thing I wondered how to do properly is perspective. It's easy to do thinks consistently if you're using some kind of metric projection (e.g. isometric), because you have simple linear transformations from (X, Y, Z) to (x, y). That's not true for perspective. How the 3D projects to 2D depends on the shape, on the position, on the size and many more factors when projecting with perspective. Because I was creating many icons at once, all flat ones with constant thickness, I wanted to do this not only consistently, but also quickly. I've came up with the following workflow.

Start with drawing the front face of the icon on the canvas, just like if you were drawing pure 2D.

Then duplicate the canvas as well as the icon shape. Don't forget to change colours so that you can easily tell them apart.

Next change the size of them by some factor and use the same factor for every icon you create and is supposed to have the same thickness. The resize should be done to both canvas and the icon shape at the same time so that it scales properly, keeping the ratios and position of the icon on canvas.

Then move the resized canvas together with the icon shape to it's new position. Again this has to be done consistently for all icons with the same thickness. You can imagine that the original and edited canvas create together some kind of cuboid whose front and back faces are squares, even in the 2D projected image its thickness regulates thickness of the icons and the relative position of its back side to the front side controls your point of view.

Next delete the changed canvas (we don't need it anymore) and put the back side of the icon behind the front one.

Next you should remember that you're doing an icon so it should be properly aligned to pixel grid in order to look crisp. This can be done quickly with the help of inkscape grid feature.

Now we have front and back side of the icon, but we still don't have it's sides, as can be seen on the next picture.

The easiest and for simple icons also the best way to do them is to duplicate the front side again, merge it with the back side and fix those bumpy parts to look as you'd expect them using the node tool.

Now the icon is only missing some shading and outline.

So next we add some gradients to make it look as we wish – this can be a tedious task, depending on how realistic we want the icon to look. On small size like this one it can be greatly simplified though. And finally we add an outline. This can be done by duplicating the edited shape again, adding an outline that is twice as wide as we want it to be (because half of it will be hidden) and push it bellow the whole icon. The result looks like this:

Finally we render the icon in desired size with transparent canvas and it looks like this:

I hope you like my today's how-to :-) Also, bear in mind that this is greatly simplified perspective projection as we use it in icons, if you were going for fully realistic painting you'd quickly find this workflow isn't suited for such task.

Echo Perspective Discussion

We're just staring final discussion about the base designs for Echo Icon Theme Perspective. If you can, you are welcome to either vote in fedora forum or join the discussion either in the fedora forum, at the fedora-art-list, or when I (msourada) am around, also on #fedora-art or #fedora-design on freenode.

Here are the desing concepts in question:

Echo Icon Theme "Perspective", Part III

It's been a while since I've last blogged about this topic. It's mostly because new semester is keeping my spare time low... But anyway I thought I should take the first step and make some conclusions from my previous posts.

We are starting Echo Perspective

Ok, it's not official yet and there are still things that need to be done, but I am practically starting new parallel icon set to the current Echo called Echo Perspective. As the name suggests it's going to be more or less same as the current one, only we'll be using perspective.

Since we are starting basically on a clean field we can afford some more or less radical changes to the current looks, like complete redesign of some icons, slightly different looks, etc. I've drawn a proof-of-concept video-display icon to outline what way I'd like Echo Perspective to take. My goals are (in no particular order):

• usability - an icon must be easily recognisable at all sizes, the metaphor must suggest it's meaning and thus must not be too much complex
• looks - we are aiming at the same time at more realistic look, we'd like to be slightly more realistic looking than mango or tango, but slightly less than oxygen
• modern - we will use modern metaphors where appropriate, for example we'll use wide screen flat LCDs in favour old 4:3 CRT ones
• cross desktop - we aiming this icon set to be default in some future version of Fedora, this means we need to satisfy as much Fedora users as we can, so we need to support all major Fedora desktop environments like Gnome, KDE or XFCE

What's Next

Well, we need to set up our infrastructure to allow us easily push Echo Perspective icons to our git repository. I am working on that, but given the amount of free time I currently have, it'll take a while. But we can create the icons without pushing them to git in the mean time. And there are a few decisions that need to be made.

Directory Based Icons

From time to time, we are criticised for not having the directories blue in Echo. Also the design is pretty oldish, modern systems have folders that are standing. Now the questions is, how to make them in Echo Perspective? Any ideas? Any designs? I'd like the wider community to help with this one. You need not to create whole icon - concept design is all we need. I hope we can gather a few and decide later which one to use. I've set-up a wiki page for it, but you can as well send the designs to the fedora-art-list.

Trash Can

Trash can is another icon that is in dire need of redesign. We'd like our trash can to look more modern, perhaps made of metal, perhaps from coloured glass, perhaps semitransparent, whatever. Submit your ideas on the above mentioned wiki page or at fedora-art-list.

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.