Page MenuHome

Tool Icon Design
Closed, ResolvedPublic

Description

For 2.8, we plan to create a consistent toolbar user experience. However, our toolbar looks vastly different in our various modes:

  • Object & Edit Mode: No icons, other than the wrong Grease Pencil icons
  • Sculpt and Paint Modes: Icons are big, selected in a menu
  • Hair Mode: No icons. Tool is selected as a radio button

We want to make both the toolbar and the icons within them consistent. This document will serve as an overview of where we want to go with our icons.

Consistent Visual Language

We have been working with icon designer Aslam Cader on creating a consistent visual language for the tool icons. Since they will be fairly small, we need to be able to use visual markers that help make icons clear. Things like adding, removing, deforming can be communicated via consistent colours and shapes.

Add = Green

Deform = Purple

Remove = Red

However, for colourblind people, will will make sure that colours are not the only thing differentiating our icons.

Toolbar

Icons will fit into the new toolbar like this:

Narrow View

Wide View

This means that the icons have to be able to stand alone - even though we will provide an instant tooltip when you hover over them.

Size

We need a wide selection of tool icons for all our modes. Most icons in Blender are 16*16 pt. Paint & Sculpt icons are larger. We want to use the same size everywhere, but 16*16 pt is going to be too small to make them useful. They'll be so small that we cannot possibly convey the information needed (hence why sculpt and paint tool icons are already much larger).

For now our new icon set is being created at 48pt size. This means 96px for 2x hi-DPI displays.

Format

We are considering storing all our icons as .svg vectors. This makes it much easier to re-generate them at larger resolutions and also plays more friendly with Git. This has not been finally decided though.

We are investigating actually rendering them directly as SVG's inside Blender too. This requires further investigation. First step is to put them in as images.

List of needed tool icons:

The plan is that we will require icons for active tools, but not for commands. That makes the job of creating icons somewhat easier, and helps separate the two.

Here's a list of active tools:

These have been created by Aslam Cader:

Object Mode

  • Move

  • Rotate

  • Scale

  • Scale Cage

Missing

  • 3D Cursor

  • Border Select

  • Circle Select

  • Lasso Select

  • Ruler

Edit Mode

  • Move

  • Rotate

  • Scale

  • Extrude Region

  • Extrude Individual

  • Inset Faces

  • Loop Cut

  • Bisect

  • Knife

  • Spin

  • Spin Duplicates

Missing

  • Screw

  • Edge Slide

  • Vertes Slide

  • Randomize

  • Smooth Verts

  • Shrink/Fatten

  • Push/Pull

Grease Pencil (Annotate)

  • Draw

  • Line

  • Polygon

  • Eraser

Pose Mode

  • Move

  • Rotate

  • Scale

  • Push Pose

Missing

  • Relax Pose

Missing

  • Breakdowner

Missing

  • Pose Sculpting tools? (pending pose sculpting branch merge)

Sculpt Mode

Note: We already have icons for these, but we are considering updating them to be more consistent

  • Blob

  • Clay

Missing

  • Clay Strips

Missing

  • Crease

  • Fill/Deepen

Missing

  • Flatten

  • Grab

  • Inflate

Missing

  • Layer

  • Mask

  • Nudge

  • Pinch

  • Rotate

Missing

  • Scrape

Missing

  • Draw

  • Smooth

  • Snake Hook (Extrude)

  • Thumb

Weight Paint Mode

  • Add

  • Blur

  • Darken

  • Draw

  • Lighten

  • Mix

  • Multiply

  • Subtract

Vertex Paint Mode

  • Add

  • Blur

  • Darken

  • Draw

  • Lighten
  • Mix

  • Multiply

  • Subtract

Texture Paint Mode

  • Clone

  • Fill

  • Mask

  • Smear

  • Soften

  • Draw

  • More icons for paint brushes?

Hair Mode

  • Comb

  • Smooth

  • Add

  • Length

  • Puff

  • Cut

  • Weight


This document represents the current state of the icon designs

Details

Type
Design

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Campbell: You are right, of course. Technically, the Extrude icon is wrong too, because the faces at the end are not really new, but might look odd. We'll try it out :)

I think it would be much cleaner if the icons were orthographic.
As it stands, they get smaller in the distance, making for a messier look with them all listed underneath eachother, as the perspectives clash. orthographic would solve this, and: it'd make for cleaner anti-aliasing on the lines.
I'd further advocate for fully flat cubes, rotated only around the up-axis, seen from slightly above.
Something more akin to this:

The same would hold true for icons that don't feature a cube: they'd use the same projection, and favour straight lines and parallel diagonals.

I think while the icons look nice at the presented size. In a real world situation where the icons would be small in the UI, the gradients, excessive colour count, and drop shadow will create an icon that is muddy or unclear at real UI size - the icon should work and communicate clearly at 32x32.

The colours also don't contrast very well, which is again something that is important when the icon is small, and placed in the UI. An icon like the hair comb icon wouldn't be very clear with that colour combo, or the edge or vert slide icons, as the purple is so close to the grey.

@Jac Rossiter (Jakro) Please don't post screenshots from other software (for legal reasons). You can give links to images hosted elsewhere.

Given that this was moved from Reviewing to Doing, is outside feedback being taken to account at all, or is it a waste of time?

Color consistency should be based on department not based on add, remove or deform, etc. (i.e all modeling related icons in one particular color, UV related icon with one particular color, similarly for Shading, Lighting, Effects, Rigging, Animation,etc.). This way artist will be able to judge which icon belongs to which department. and this will solve biggest issue for newbie to enter in Blender.

And Narrow View is more than enough, no need of Wide View. Wide view is just waste of screen space. Proper tool-tip on hover will be useful.

Have you considered colour blindness accessibility especially with the colour coding? Thinking that for the Blender 101 this is going to be important.

For Color blindness , Main focus should be on shape of icon & better contrast with max 2-3 colors. There will be no issue if you do grouping based on department instead of limited task.

Every single icon presented here has an unique shape. Even if I make them monochromatic, I can still easily distinguish every single of them. I think there's no reason to overthink it. If you had to accommodate UI design to everyone's disability and preferences, then it would be impossible.

I'm not a fan of the color schemes, I prefer it to have no color or just one color for contrast.

Just a wild thought, but would it be possible to have them totally modifiable by the users, using external images, much like the brushes can have custom thumbnails?
And much like the way themes are handled it would be nice if we can save and export the UI theme (including the custom icons) so it can be shared with others.
This way everyone can make their own spin on the icons...

Just a thought...

rndmnm added a subscriber: rndmnm.EditedApr 26 2018, 11:46 AM

@Ludvik Koutny (rawalanche) About 8% of males are affected by colour blindness. That is not insignificant. Also, IMO, the "bisect" and "knife" icons are unnecessarily similar. There is a clear difference in the way they work, and it just isn't represented in the design. Maybe design similar to the "comb" icon could be used, with the tool symbol?
Edit: I should have been more clear, IMO the bisect and knife icons are too similar in general, not only in colour blindness context. Also, I agree that the icons shapes are distinct enough to work without colour.

@Ludvik Koutny (rawalanche) About 8% of males are affected by colour blindness. That is not insignificant. Also, IMO, the "bisect" and "knife" icons are unnecessarily similar. There is a clear difference in the way they work, and it just isn't represented in the design. Maybe design similar to the "comb" icon could be used, with the tool symbol?

Well, knife and bisect do look similar, but they share the same accent color, so they look equally as similar to non color blind people as to color blind people. No difference there at all. I am not saying color blindness should not be taken into consideration. There are different forms of color blindness to different sets of colors, so as I said, the best way to accommodate for color blindness is not by choosing a right set of colors, or by introducing unnecessary clutter for users to customize icons colors, but by relying on differentiation by shapes rather than colors.

The reason I spoke up is that I did not see any reason to bring color blindness up in this particular task, since it's clearly obvious that this particular set of icons already considers it by not differing only in colors, but also in shapes.

The reason I spoke up is that I did not see any reason to bring color blindness up in this particular task, since it's clearly obvious that this particular set of icons already considers it by not differing only in colors, but also in shapes.

I have to agree here, the icons shouldn't rely on color to be identifiable, by being different in shape not color the design should not effect color-blind people in any way...
I personally find that good icons are good because they do not need color at all, this makes things look clean and not distracting or cluttered.
(Take a look at Z-brush's UI for example, most icons are colorless or have just a single color for contrast)

I love @Jim Morren (JimMorren)'s suggestion "would it be possible to have them totally modifiable by the users, using external images... can save and export the UI theme (including the custom icons) so it can be shared with others" I really like the idea of passing this to the community. That way the creme of the crop can be included as the new default, those icons will be tried and tested, proven to work.

All this feels like its falling on deaf ears though, if I'm being honest. I'm not sure what was to be expected? When you post a major change to the visual style of blender there is of course going to be an influx of feedback. If this feedback is unwanted, then that should have been made clear in the original post. The lack of any response to anyone's thoughts or suggestions feels rude.

I am agree with JimMorren, first priority should be shape & then Color. My point was same, if you assign Color based on small small task then you will need lot's of color, To reduce number of color you must use max 2-3 colors per department. And remove drop-shadow, it adds clutter on 32x32 size.

Well, my original point was that I don't see anything wrong with this set of icons, shape wise. Maybe only bisect and knife could be distinguished a bit more (Bisect one could have semi transparent plane cutting through the cube). But I see no point in solving color blindness for icons that are already unique when it comes to shapes and look professionally designed.

I took a few minutes during my break time to really analyze the icons. This is direct and to the point feedback, do not assume I'm under-appreciating the efforts by the devs.
(The following comments are based on an my own preferences and experience as a professional artist, not a UI designer)

The icons are over saturated, this makes them distracting and unappealing.
The icons have shadows which is a trend from the early 2000's and has died since due to the fact it's distracting and unappealing.
The icons shapes are fine, I do agree with @michael knubben (michaelknubben) that orthographic versions of the icons would do better.
The 'Move', 'Rotate and 'Scale' icons look totally out of place and need to be redone, they do not fit the rest of the icons.
The 'Hair' icons do not sit right with me, I tried to think of ways to improve them but I have no answers.
The quality of the icons however is superb, it has to be said.

Example of reduced saturation and no shadow:

(Again these are personal observations, do not assume that I think I have the solutions or claim to have the right answers.)

@Jim Morren (JimMorren) thx for summing up a bit of the discussion that happened on twitter at: https://twitter.com/_3Descape/status/989234428315623424.
A lot of users like the new icons, while many complain about one of the following points:

  • Icons being too large(Most frequently pointed out by the users)
  • Icons take up too much space(This came especially from long term users. They would like to strip down the interface to a bare minimum, which means mostly text)
  • Disliking the choice of the colors(too saturated)
  • Shadows of icons
  • icons using perspective instead of orthographic

The first and second points are quite easy to solve, as this can be adjusted quickly or might even get it's own user preference setting, having the size set larger for a beginner template and smaller or even to 0 fro pros.
A few suggested "solving" the "problem" of disagreeing on the colors/the look by allowing that the icons can be adjusted to personal likings. I am not sure if I understood it right, but I think these two commits (rB1287fa3f7c5a and rBc1b310c32bd0) allow for generating icons from a .blend file and therefore customisation, right? If so, we should communicate this to the community, so the extra picky ones know they can chance it, given the possiblility they still don't like the icons in their final state..

To avoid unnecessary gap between icon and text, especially in this case that have similarity with the appearance of a list (icon = bullets), the text should be aligned to the left

  • Icons being too large(Most frequently pointed out by the users)

A lot of the work on this task is not about the design of the icons themselves, under the hood a lot of work is being done to support vector/scale-independent icons. The final size is yet to be tested, but it's better to start big and then go down.

  • Icons take up too much space

Since a few hours there is now snap collapse of the toolbar, which combined with instant tooltips it will be a big improvement in terms of space and functionality.

  • Disliking the choice of the colors(too saturated)

In the latest update in the Blender 2.8 branch you can see a test of tinting all icons gray unless hover or while the tool is active.

It's all a work in progress. Beginners benefit from this as it's easier to find the tools, while power users and add-ons will fill this space with their own tools (icons can be generated). So it's a win-win. I personally am more of a flat/pictogram style icons kind, but I see the appeal in this style as well.

Color change on mouse hover (From desaturate to color) is bad practice. instead of changing icon color on mouse hover or pressed, just change background color.

Color change on mouse hover (From desaturate to color) is bad practice. instead of changing icon color on mouse hover or pressed, just change background color.

How can you say it's a bad practice? It does not go against any UI design guidelines. That being said, I do agree that monochromatic icons that get their color only on mouse over are an excessive overreaction to the community feedback. I would much rather see just a bit toned down saturation, like many others already proposed.

@venomgfx I know it's wip, just wanted to document some of the feedback users gave.. I didn't even expect that my tweet would gain that much attention, othervise I would have added more informations about is being wip ;D I personally like the icons soooo much, because they really improove blender's ui and give it a super modern look. Thank you and the team for the great work. Means a lot to me and many other users!

The snap collapse is super handy, I just tried it. Together with region overlap it is just perfect!
One thing I still don't know exactly: Did I missunderstand that geometry/.blend files can be loaded/registered as an icon, if they follow certain conventions?

Yes, the icons are actual 3D geometry. That's why you can zoom in and they still look sharp. Here's a view at an angle :)

@William Reynish (billreynish) thx for letting me know! so that means all those worried pros can tweak them however they want, if they want to, right? Are the icons itself generated while building or loaded dynamically at startup?

Please do not add those BIG buttons to the new ui, we need more screen space. Also transform icons don't looks great, move icon looks like a d!ck

@konstantin (miller) The devs are trying to create more screen space by removing the current toolshelf and replacing it with a toolbar. I'm sure though they will appreciate your thorough feedback.

I am curious, are those icons rasterized on the fly or only once and then cached? I mean, rasterizing every icon as 3D object in real time would consume a lot of resources, wouldn't it?

How does one implements new icons? is there a template file to follow? how then, the geometry rendera to a file and then implements itself into the code? Is there a document to read about this? *Thanks.

I still believe that major universal icons should be adressed this way(3d icons), and all other functions in plain text. This way we don't have to wait a lot of time for all other functions like "invert normals" to be created as icons. Names will be appearing as new functions surface, but it's easier en quicker to go with names (command code wise).

it's not in *.SVG ?????

SVG is higly scalable and easy to manage. Plus it looks sharp on High DPI image. nowadays every illustration software support *.svg. So why you guys are trying to reinvent the wheel.

We considered using SVG, but we weren’t happy with the libraries we found. Plus, we wanted a system that was very easy to keep updated without having to generate an icon grid with a fixed number of spaces in it. Blender’s UI is already drawn in OpenGL, so it was fairly quick to add support for geometry.

Currently, it’s just a .blend file that generates the icons. It’s very easy and fast to add a new icon. You just duplicate an icon in Blender and modify it, and give it the correct tool name. Once we are more finished with the tools we will probably document how people can do this, if anyone wants to make new icons, or change them.

Quite shocking, Blender has approx 1200 icons, so all will be .blend file ?? How much load it will add on CPU to draw ?

@Robert (robertshatty), exactly how icons are loaded/rendered is an implementation detail.
If there are issues with how they're working we can make them work differently (we can even cache them to an image at build time to implement image based icons like what we have already).

I like most of the Icons but I agree with @Jim Morren (JimMorren) the move, scale and rotate icons look out of place.

I think the part of the issue as to why transform gizmo icons look out of place is their design. They use combination of the some colors (green), which are used as color codes to differ operation types on the icons below.

But I would say that the other significant factor is that using parts of the gizmos as icons is a concept that is very unique to a world of 3D computer graphics. It's a visual language that is very unique to 3D graphics, so it may end up causing some confusion to a new users without any prior experience with 3D graphics.

Google image search is a good reference of what the common consensus is when it comes to iconic depiction of object transformations:


So maybe something similar to these could be a better fit.

@William Reynish (billreynish) now that you're gonna change sculpt mode 3D icons. For better consistency it would be great to change also the icons for the new Grease pencil sculpt and draw modes (currently in their own branch but ready to merge to master 2.8 soon). There is also some other icons needed for the Gpencil UI. Please contact us if you need more info about.

Ludvik: For sure, we could go down this route. One of the advantages of the current ones, however, is that they are maybe a bit more specific, relating to their respective manipulators. We definitely could use more generic icons here, but Blender already uses arrows and boxes in many places, so we want to make these stand out as something more tool-like. We may try some more variations and do some tests to see if other approaches work well.

Matias: Great! Yes, would be fantastic to integrate these icons in a similar way. I've sent them on to Aslam, who does most of the icon work, to see if he can interpret those to fit with his other ones. Can't wait for Gpencil (Needs a new name - Cartoon Mode?) to be integrated :)

Ludvik: For sure, we could go down this route. One of the advantages of the current ones, however, is that they are maybe a bit more specific, relating to their respective manipulators. We definitely could use more generic icons here, but Blender already uses arrows and boxes in many places, so we want to make these stand out as something more tool-like. We may try some more variations and do some tests to see if other approaches work well.

Yes. I think that the current design makes sense too. Once user remembers what gizmos look like, it's easier to associate them with icons. But another benefit that these more universal icons would bring to the table is consistency. There are quite a few more editors in Blender, which allow you to move, rotate and resize entities within their workspace, but without gizmos. In some of the editors, introducing transformation gizmos would not even make sense. With the universal move/rotate/resize icon set, these icons could be used universally across all the editors for the same set of actions, so users could get familiar with them a bit faster :)

By the way, I am happy to see Grease Pencil renamed. There was something off putting about a feature that had a word "grease" in its name. Something like "Toon Pencil", or "ToonSketch", something like that...? :)

Yes - 'Grease Pencil' comes from the idea of annotating things, not making actual cartoons. The new Grease Pencil mode will have to be called something else, like '2D Animation' or ' Cartoon Mode' or something like that. However, that's a different topic.

Please consider making flat icons or give us the possibility to change them.

@Campbell Barton
Storing image cache in c++ as string is nice trick.

@WilliamReynish
Complete renewal of each and every icon (Tools, Menu item, Mouce pointer, Editor,etc) will be great. Make a template file and invite 20-30 good artist from forum to complete fast.

Flat icons. Better viewing when scaled. Please give support to replace icons like in 2.4 with a set of icons externally read. It's too clumbesome to download blender, deploy and cross fingers to get icons working right. Thanks. Please support flat icons through external .png file.

@David Marrs (david)
*.png is raster image, so it looks ugly when you scale up/down. Only vector image looks sharp when you scale. And if you have better design in your mind then share here with community. Instead of asking directly for replacement functionality.

Complete renewal of each and every icon (Tools, Menu item, Mouce pointer, Editor,etc) will be great. Make a template file and invite 20-30 good artist from forum to complete fast.

Now that sounds like a great idea!

Could the current representing numbers in a square icon when doing a long pre-calculation in render be switched to a spinning blender logo? Like it's "blending"? Spinning is always a good choice for waiti g processes.... like building light caches.... :)

Could the current representing numbers in a square icon when doing a long pre-calculation in render be switched to a spinning blender logo? Like it's "blending"? Spinning is always a good choice for waiti g processes.... like building light caches.... :)

I know this is a place for everyone's feedback, but some common sense should still be in order :)

I'd say it would be good to let developers focus on basic functionality and get it right before fun stuff like this is requested. Having a spinning Blender logo would not add anything in terms of ease of use or workflow speed. Current square, while looking a bit basic, will at least tell you one crucial information - how far is the progress of an action which is blocking your input.

Please consider not using colorful and fun icons or even very charismatic icons. Or, at least, leave the icons customizable. It is extremely tiring to work with exaggerated icons for a long time, and it is terrible when the design of the work interface struggles with what we are developing. Mainly because it is a development software for different media, it is very important that it looks as neutral as possible and does not tire or conflicts with what is being developed.

The current state is pretty nice. Thanks for taking all the feedback into consideration. Congratulations on getting this done :)

Dalai Felinto (dfelinto) closed this task as Resolved.Apr 30 2018, 10:10 AM

Because the icons are 3D and the color is per vertex, I suppose it should be easy to flatten them by eliminating shading and shadows. I have done a test to see the result. In the same way that now you can adjust the saturation and opacity, it would be cool to be able to adjust the shading and the projected shadow.

I think it is necessary to flatten the icon to validate them, since the basic form must be recognizable without the details.
In my opinion, the current icons are excellent although they can be improved, but other users prefer them more flat. Maybe it would be the way to satisfy everyone.

Below to the right I have added three points to add the rest of the tools that do not fit in the toolbar.

Late, but hope somebody will still see this.

These icons seem prettier than they are functional. They may look nice very large on the screen, like the tablet-centric interface of ZBrush, but will be extremely difficult to read at a smaller scale, as would those in ZB.

I agree with some of the others commenting here that the icon language should be 2D and orthographic, since the interface itself is 2D, and shouldn't use more than a single color other than black and white for the sake of readability and consistency. (The three colors -- black, white, color -- could be even defined by the operator/UI or theme.) There is a lot of complex academic perspective used in these icons, which doesn't contribute to their functionality. There are also some logical conventions refined over the years among graphics programs, some of which are used here but some which are not, that should be adhered to: a paint bucket for "fill", an eraser for "erase", scissors for "cut", a finger for "smudge", etc.

Also, there are so many operators in Blender it seems like it would be wasting energy and space to design and implement unique icons for each of them (e.g. Extrude Individual, above). For example, there don't need to be separate sets of icons for each of the paint modes -- just remove the sphere and colors from the icons above and use the same icon for the same tool in all modes. The same with tools common to the different sculpt modes. Unified interaction modes (sculpt, paint) is a great feature of Blender's design, and should be reflected with unified icons.

Some smaller, specific points:
The pencil is large and repetitive in the Grease Pencil icons. Just use the lines, which can barely be seen currently.
Eraser tools should use an actual eraser as the icon, as in Krita/GIMP/Photoshop/etc.
Nudge and Smooth sculpt icons are too noisy, the lumpy parts don't need so much detail.