2.8 Outlined/Coloured Icon Adaptation

I this case I mainly meant the swapped brightness of the green and blue.

The outline is unmodified from the monochrome original. For light backgrounds all white could be replaced by black.

It’s still far too saturated, Though I did edit again, added a few points of saturation since the last one was a bit too close to white for my liking.
image

I realise it needs to be ‘blue’, but the point is to not go overboard, we’re looking for subtle.

3 Likes

blender_world_bright

I must say with a dark outline a bright ocean does seem to work better.

1 Like

Okay, a few points…

I didn’t think anyone would actually start this, and you’ve proven me wrong.
I didn’t think I would actually like this, and you’ve proven me wrong.

But I am also coming to the realization that very few of the 500 icons actually need to be colored at all. The most important are the edit component icons, then those in the Properties tabs, maybe a few more in a few more headers. Actually color the “record” button (automatic keyframe Insertion) red. Maybe the Editors menu icons. But then you start getting diminishing returns.

Having color can be (for some people) quite important when the icon is used alone, but becomes a lot less important when it is paired with text, like in pull-down menus.

In the end you could probably color less than 10% of the icons and make 95% of the complaints go away. Anyway, thanks for doing this.

8 Likes

Absolutely, it’s why that’s part of the guidelines I wrote up.
The only niggle is I can’t just work on 10% of the icons, the outlines need to be all or nothing.

Pull down menus definitely depends on the menu, even though there’s text. For instance the Add menu probably doesn’t need colour, but the ‘pivot point’ menu could do with something that makes the center dots stand out.

2 Likes

Great to see you make an effort on that subject you were so passionate about. Although i am in love with the monochrome set I have to say this looks a lot better than I expected it to be. Keep it up!

1 Like

Can you share your guidelines (if you didn’t already?)

They’re on the first post.

Comparison of more icons with separate light and dark themes:

blender_compare2

SVGs

blender_color_white

blender_color_black

EDIT: I turned down the saturation a bit.

If you really care… learn from the most exemplary & most influential icons – traffic signs.
Once you’ll get experienced working with Blender (or whatever) you’ll see distractions.

“The last thing you want to do when you’re working is think ‘look at that lovely X or Y’. All you want to do is be told what you’re doing and what tools you have at disposal.”

Traffic signs are:

  • Large
  • Have enforced negative space
  • Have enforced background colour
  • Often Have an enforced outline around that background
  • Convey ideas so incredibly basic that are not linked to colour
  • Do include colour where it counts - Stop signs are red.
  • Are not software
  • Are not restricted to 14 pixels
  • Are not buttons
  • Don’t sit in a cluster where you have to distinguish 4-5 signs at the same time right next to eachother from your peripheral vision regularly.

These icons purposely don’t include bright flashy colours that would be distracting anyway.

3 Likes

I’m interested. Particularly with the icons for property tabs. I just cannot get used to them no matter how much I use 2.8

Is there a build with these icons somewhere so we can try them out?

Ahhhhh, it’s alive again!!!
Thank you, I applaud your enthusiasm for embarking on such an extensive endeavour. Results are very promising so far, keep it up! :smile:

As someone else stated, open source is just wonderful. I feel like this is the perfect middle point between the two worlds. I hope it pans out.

Cheers!

Got some more done.
Viewport mainly, also finished another line off. Mesh data dots are more orange now.
Vert/Edge/Face select icons, Hair particle select icons, Origin icons, Proportional editing icons (curves + enable/disable states). Some icons I thought were for tracking but I don’t use tracking enough to find them in the interface :man_shrugging:. Oh, fake user aswell.

Afraid not, I keep a windows build on me, but it’s a bit of a chunk to upload frequently. And unfortunately the process for compiling blender + icons is… a hassle to setup or walk someone through…

1 Like

Here’s another side-by-side comparison of both approaches on #424242 and #FFFFFF backgrounds with a monochrome light bulb:

blender_compare3

Top: Single icon set
Bottom: Separate light and dark icon sets

image image
I mention in the first post that browsers don’t display the icons properly, whatever you’re viewing them with must do the same. It seems some things don’t like inkscape’s “clipping” groups.

I can’t work on the hope that the blender devs would be willing to implement what you’re demonstrating here, espescially since It isn’t possible to change the outline with simple filter, no matter what way you do it you’d require multiple icon sheets.

Further, the approach you have there has side effects. It nukes themeability with midtone value colours, much less that the icons for a lighter background contain no themeable white areas at all. I also believe those darker colours would make the icons stick out, becoming more distracting against the white ones that would remain, it wouldn’t feel like a cohesive icon set.

It’s not a terrible idea, but I just don’t think it’s going to work well in this case, and it requires more implementation we don’t have.

2 Likes

That looks a lot better, indeed. I updated the comparison image I posted earlier accordingly.

Doesn’t this hold true when combining any partially colored icon set with theming?

Despite having two sets I believe it would save work because less icons would have to be modified.

Not neccesarily, notice the shading menu quite easily colours the globe red, because it’s bright. (granted the continents and oceans are inverted compared to the normal)
image
image

As you may or may not have noticed. The brightness of the globe’s landmass and oceans are switched in the black set to more closely match the original brightness levels. When done correctly this should be less disturbing to the consistency of the whole.
You’re probably right about the midtones, but I believe this can be remedied by increasing the difference in brightness. As such:
blender_compare_globes
This effect may even be achieved using a shared transparent layer of midtones (for which a slider could some day be implemented to control it’s alpha value?).

How do I replace the icons to test run them? That would make it a lot easier to pick icons to work on as well.

Also, since there’s two world icons, is this case of the red tint really an issue? Would it maybe be better to leave one of the two monochrome?

I’d have to add an outline anyway, I could invert that one, but it’d just be for the sake of keeping it like the old icon, I’d rather keep the two in the same set similar instead.

Layers, you’re talking about using more than one icon sheet again.

As for adding them to blender, first you need to figure out how to, and get blender compiling. There’s guides on that you can google. Then you need to add inkscape and blender to your system PATH, then you need to install python and add that. Then you replace the blender_icons.svg, and run the blender_icons_update python script, then build blender.