go-home echo icon concept

[Diana Fong]

Martin Sourada wrote:
> Teoretically, from the position of the imaginary light source we might 
> guess, that it is time around noon. So the shadows - epsecially their 
> opacity should reflect this. Thus they should not be very dark. Next, 
> I would pick the one of the more"massive" icons (because it would cast 
> more shadow than a smaller one) and choose the base values for it. The 
> darkest would be nearest the place where the icon touches the 
> imaginary ground. For that purpose, I think, could serve e.g. 
> 'video-display'. But how to chose the best value for that particular 
> icon? I think we could try different values of opacity and brightness 
> (for start grey scale would serve well) against different backrounds 
> and pick up that which works nicest with most of them - this should be 
> the one that resembles most the behaviour of real shadow IMO. Than we 
> should decide how much of the shape of the icon we want to save in its 
> shadow. Looking at the icons I would suppose that only simplified 
> outline. Finally I would choose how blurry we wont it to be - that has 
> a lot to do with the shape preservation I think. In other cases the 
> shadow should be more transparent and more blurry, but not much; the 
> amount I would leave on artists. The colouring I would leave as it is 
> suggested on wiki.
>
> I think, if we start with dark-grey or black(ish) colour values (aka 
> $666666 and $333333) for the brightness and pick the desired opacity 
> for them it might be the best, since these are on Echo Icon Pallette. 
> Also the decision would thus simplify to choosing just one out of two 
> colours and opacity for darkest shadow. 

As per your suggestion, I looked at the various shadows and here are 
some numbers that might help...for 'video-display' I used #2D2D2D at 75% 
as the darkest.  That color is closest to #333333. For objects that do 
not touch the ground (as with 'list-remove') the opacity is closer to 
15% if still using #333333.  Of course, we can change these if it's 
found not to be useful when tested against the various backgrounds.  As 
in my examples, I've only tested against white (which I took to account 
for the light color of panels and window browsers) and a dark gray 
(which accounts for darker wallpapers and possibly dark window 
borders).  Obviously, a more conclusive test could be conducted here if 
someone would like to take it on.


I also include an additional shadow to overlapping objects, such as 
'drive-optical.'  This is to create a bit of depth, while also help to 
visually separate/identify the overlapping objects.  The color for this 
also varies depending on how dark or light the back object is.  However, 
a starting point could also be #333333 or more accurately #2D2D2D at 
50%-75% blur size of 2-3px.


As I usually insert the shadows after creating the vector icon shapes 
and so I do not have the blur info.


As evident with the existing icons, I've not tried to preserve the exact 
shape of the icon in the shadow.  For the action icons, I've gone with 
more of a simple shadow below the object.  With other icons, the shadow 
does take on a very skewed, simplified outline of the shape which often 
does not reflect the shape of the top of the object.  Example...the 
shadow of 'audio-input-microphone' is mainly of the base, with only a 
slight hint of the top microphone.


Diana Fong
---
Red Hat
Visual Designer | Desktop Group