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.
Posts
6 comments:
Hi Martin,
Glad to see Echo icon project slowly awakening from slumber. Are those changes included in git repository? Thanks.
so, if i am an user making a new Echo icon, what is the impact of the new pallette on me? what i have to do differently?
Hi Luya,
the changes will go to the git repo after all the pictures are created – so far I have only 16×16, 22×22; and about 13 of 32×32. It's a lot of work to draw them all ;-)
Hi Nicu,
the impact is more practical than formal — you'd probably understand better if you directly compared the old palette with the new one -- it has more shades of the used base colours and the shades are evenly distributed WRT luma which should be helpful when creating the icons. Other than that, no change – you were already supposed to create icons that used the same colour style as the old ones ;-)
@Luya: You can track the progress at http://mso.fedorapeople.org/echo-perspective/new/
@Nicu: I've prepared a palette comparison image: http://mso.fedorapeople.org/echo-perspective/new/echo-palette-compare.png
As you can see, the most noticeable changes are moving the brightest brown shade to orange shades, change red to go toward orange (as that was actually used by most of the icons), slight desaturation of brightest metallic, and add bright brown (this is used on folder icons).
Thank you Martin ^_^
Post a Comment