Page MenuHome

Icon Shadows
Needs ReviewPublic

Authored by Harley Acheson (harley) on Tue, Jan 29, 9:34 PM.

Details

Summary

Something to play with, or maybe just discuss...

Sometimes the icons could use a bit more contrast, especially when they are a light color. This patch adds an (optional) shadow that can be displayed under the icons to give them a bit of extra contrast and definition.

The color of the shadow is determined automatically based on the brightness of the icon color. So black for light icons, and white for darker ones. The user can select the shadow opacity and the offset. The opacities for light and dark shadows are set separately in case you like one but not the other.

The following illustrates a fairly common result, with light icons on a dark field. The top section shows what it looks like currently, and the bottom section what it can look like after this patch:

Here is a more extreme example with a theme that has mostly dark icons and some light. You should see dark drop shadows on the shading icons, while most dark icons look a bit embossed. But again. you can turn on the dark shadows but turn off the light ones if that is your preference.

Diff Detail

Repository
rB Blender

Event Timeline

Whoops, meant to add...

Once applied you can change these settings in Preferences.
Themes / User Interface / Styles

Interesting. Well done on the fact that the automatically finds the correct contrasting color for the shadow.

Is the shadow size fixed? I couldn't seem to find a way to increase the size here. But, even in its current form, it can increase legibility a bit some places.

I think this makes sense to add.

@Pablo Vazquez (pablovazquez) @Brecht Van Lommel (brecht) ?

Yes @William Reynish (billreynish) the shadow size is fixed.

The problem is that there really isn't much latitude with it. Any smaller and it would not
be visible, and any larger and it would overflow its boundaries - consider how small the
buttons are for "shading" icons.

Could the soft shadows not be drawn outside the icon boundary?

Could the soft shadows not be drawn outside the icon boundary?

This is very lazy shadow. LOL. It is drawing the same icon data in black (or white) with opacity and an offset before drawing the actual icon. So it is quick and easy and it will use the same icon cache.

Even if we wanted to go through the trouble of blurring it (with the shader) there just isn't enough room for that to be effective.

Even if we take 2 pixels rather than one, the result is substandard. With the row of "shading" icons the shadow touches the border between them so it looks like they are all connected - you loose the visual separation between them.

The times this helps the most is for light icons on a lighter background.

Here is a very contrived example:

I don't really get what you mean.

I was thinking about this:

Using a soft shadow doesn't make it any less clear as I can see. in fact it has the advantage of essentially creating a rim all around the edge of the icons.

That does look pretty sweet. But...

For testing you need to do so within the typical small confines. Start with the display scale set to 1X. Then do the mockups with the smallest icons in a row, like the section of them for "shading".

So although tiny, this new shadow does add contrast to those little icons. But notice that there is just a single pixel separating the selected white ball from its border. And see how, even with this, the right two icons start to visually connect together. If you extend that shadow more than the one pixel they will all run together.

to be fair I think what you already did is neat - it might well be good enough - and themes can use it or not.

to be fair I think what you already did is neat

Thanks!

it might well be good enough

If anything it might be too simplistic. Where this shadow-drawing occurs is in a very common place, basically used for all icon drawing. That is why you probably noticed that it even effects the blender logo to the left of the menu. But to make it more granular would increase the complexity a lot. So we could make this only affect some interface widgets and not others, but then we'd have to pass these new parameters around and I didn't want to go through too much trouble for what is probably just a proof of concept. But then again, an all-or-nothing solution is certainly easy to configure...

I tend to prefer cleaner looks, but it does improve readability in some situations.

My current issue is that it also seems to be adding a shadow on some text elements, like Transform, Location XYZ or Rotation XYZ etc. in the second screenshot. Am I correct?
Under icons it can be beneficial, but on text it looks blurred and doesn't help at all. Is that the case or were shadows already there before?

I tend to prefer cleaner looks...

Yes, me too. I personally like the dark outlines on the light icons, but hate the light (embossed-looking) shadows. But other people were the opposite or liked both so I kept them both in as options.

My current issue is that it also seems to be adding a shadow on some text elements, like Transform, Location XYZ or Rotation XYZ etc. in the second screenshot. Am I correct?
Under icons it can be beneficial, but on text it looks blurred and doesn't help at all. Is that the case or were shadows already there before?

No, this does nothing to the text at all. Those shadows were already there as part of the theme "Blender Light", set in Preferences, Themes, Text Style

My mistake then, it does look good; especially the more blurred version test, even if the do merge a little with the borders or each other.

Thinking this through, there might be some ways to improve it to make it fit with other ideas....

We could leave the shadow-drawing code exactly where it is, but move the decision to do so out out of it, and pass that as a boolean param instead. Then do the same decision based on the same preferences somewhere upstream like ui_but_draw_menu_icon(). That way it would be easier to add more than one layer to this.

What I am thinking about is just adding a couple of new members to uiBut. One could be icon_color and the other could be another BIFIconID called "icon2" or some such. With the first we could then easily override the color, rather than always being the text color. So we could get a red button for the automatic keyframe button. The second icon2 could be used, in very limited circumstances, to layer one icon on top of another.

So, for example, Andrzej could make three new icons, for each of the "component selection" buttons, that are blank except for the selected parts. Then we could draw those over the existing icons in some "highlight" color (like orange). Just these two color changes would take care of a large portion of the complaints about the monochrome icons.