Monday, 31 December 2012

Designing Echo icons again

It's been a while since I designed my last icon but for one reason or another I decided I need to make some progress with Echo Perspective Icon Theme again… The final push was me playing with colours—when I had started writing code for Nodoka, I begun with a colour representation. Since we use gradients and shades a lot, I decided to go colour managed and started researching about colour representations and ended up redoing Echo colour palette in sRGB using CIE Luv (in Luma, Chroma, Hue coordinates) as a working space.

The resultant palette is redone from scratch based on the Echo (Perspective) icons that have been already released instead of the current palette for better consistency, but it's "normalized" WRT CIE Luv colour space. The result looks like this:

The right column actually uses normalization WRT CIE Lab colour space, but I decided to stick with the CIE Luv one, which is in the left column. The differences are subtle though.

From there it was ony one step to doing icons, actually. I went all out and decided that I'll

  • make more sizes than before to better support current and future DEs, i.e. 16×16, 22×22(24×24), 32×32, 48×48, 64×64, 128×128 and 256×256;
  • make similar icons in a single file svg (which means I'll need to write some helper libraries to help split it automatically during build);
  • start with action icons in media player, browser and related, which is 23 icons in two groups.

Well, it's a lot of work—23 icons, each in 7(8) sizes, that's 161 pictures. Ugh, that will take a while... Some preview WIP is bellow:

You can notice some design changes, some are new, some have been appearing for a while already, albeit inconsistently. First I went back to slightly darker blue hues than what we were doing recently, it makes better contrast and should work a bit better with darker backgrounds. You could have noticed this design change in my nodoka designs as well (there were three icons in them).

Second change that has been already visible in nodoka designs, is departure from sharp corners. They make the images unnecessary bigger (especially the arrows) and look kinda oldish. I decided that the white outline as well as border should have rounded corners. IMHO it looks better and I hope to retain this style consistently throughout Echo Perspective.

Last change is to shapes—first one I did was view-refresh. The old two big arrows looks sort of heavy and are hard to do at smaller sizes. So I've done something simpler and later I noticed that my new e-book reader uses similar style while loading, lol. My primary source of inspiration in this was an anime I liked for its easygoing style and, believe it or not, typesetting (the anime is called acchi kocchi):

Second shape change was for process-stop icon from circle to the more common octagon. And finally a small change to media-record icon for it to be better distinguished from similar dialog related icons like dialog-no.