Tool Icon Design #54662
Labels
No Label
Interest
Alembic
Interest
Animation & Rigging
Interest
Asset Browser
Interest
Asset Browser Project Overview
Interest
Audio
Interest
Automated Testing
Interest
Blender Asset Bundle
Interest
BlendFile
Interest
Collada
Interest
Compatibility
Interest
Compositing
Interest
Core
Interest
Cycles
Interest
Dependency Graph
Interest
Development Management
Interest
EEVEE
Interest
EEVEE & Viewport
Interest
Freestyle
Interest
Geometry Nodes
Interest
Grease Pencil
Interest
ID Management
Interest
Images & Movies
Interest
Import Export
Interest
Line Art
Interest
Masking
Interest
Metal
Interest
Modeling
Interest
Modifiers
Interest
Motion Tracking
Interest
Nodes & Physics
Interest
OpenGL
Interest
Overlay
Interest
Overrides
Interest
Performance
Interest
Physics
Interest
Pipeline, Assets & IO
Interest
Platforms, Builds & Tests
Interest
Python API
Interest
Render & Cycles
Interest
Render Pipeline
Interest
Sculpt, Paint & Texture
Interest
Text Editor
Interest
Translations
Interest
Triaging
Interest
Undo
Interest
USD
Interest
User Interface
Interest
UV Editing
Interest
VFX & Video
Interest
Video Sequencer
Interest
Virtual Reality
Interest
Vulkan
Interest
Wayland
Interest
Workbench
Interest: X11
Legacy
Blender 2.8 Project
Legacy
Milestone 1: Basic, Local Asset Browser
Legacy
OpenGL Error
Meta
Good First Issue
Meta
Papercut
Meta
Retrospective
Meta
Security
Module
Animation & Rigging
Module
Core
Module
Development Management
Module
EEVEE & Viewport
Module
Grease Pencil
Module
Modeling
Module
Nodes & Physics
Module
Pipeline, Assets & IO
Module
Platforms, Builds & Tests
Module
Python API
Module
Render & Cycles
Module
Sculpt, Paint & Texture
Module
Triaging
Module
User Interface
Module
VFX & Video
Platform
FreeBSD
Platform
Linux
Platform
macOS
Platform
Windows
Priority
High
Priority
Low
Priority
Normal
Priority
Unbreak Now!
Status
Archived
Status
Confirmed
Status
Duplicate
Status
Needs Info from Developers
Status
Needs Information from User
Status
Needs Triage
Status
Resolved
Type
Bug
Type
Design
Type
Known Issue
Type
Patch
Type
Report
Type
To Do
No Milestone
No project
No Assignees
29 Participants
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: blender/blender#54662
Loading…
Reference in New Issue
No description provided.
Delete Branch "%!s(<nil>)"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
For 2.8, we plan to create a consistent toolbar user experience. However, our toolbar looks vastly different in our various modes:
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 1616 pt. Paint & Sculpt icons are larger. We want to use the same size everywhere, but 1616 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
- Rotate
- Scale
- Scale Cage
Missing
- 3D Cursor
- Border Select
- Circle Select
- Lasso Select
- Ruler
Edit Mode
- 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)
Pose Mode
- Rotate
- Scale
- Push Pose
Missing
- Relax Pose
Missing
- Breakdowner
Missing
Sculpt Mode
Note: We already have icons for these, but we are considering updating them to be more consistent
- Clay
Missing
- Clay Strips
Missing
- Crease
Missing
Missing
Missing
Missing
- Smooth
- Snake Hook (Extrude)
- Thumb
Weight Paint Mode
Vertex Paint Mode
Texture Paint Mode
Hair Mode
- Smooth
- Add
- Length
- Puff
- Cut
- Weight
This document represents the current state of the icon designs
Added subscriber: @WilliamReynish
Added subscriber: @VukGardasevic
For Brushes there is the no brush active / linked (currently BRUSH_DATA upscaled). That should also be available for the brushes' set as a fallback.
Vuk Gardašević: I'm not 100% sure if we will keep this state of not having an tool active linked, so may not be necessary.
Of course, it depends on the brush tools implementation concerning custom brushes creation / removal, just to keep it in mind if a similar data-block system is kept :)
Added subscriber: @ideasman42
"Inset Faces" has green face in the middle, the new faces are in fact around the edges.
Added subscriber: @DotBow
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 :)
Added subscriber: @JosberthArellano
Added subscriber: @michaelknubben
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.
Added subscriber: @Cornelius
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.
Added subscriber: @JacRossiter
This comment was removed by @JacRossiter
Added subscriber: @PawelLyczkowski-1
@JacRossiter Please don't post screenshots from other software (for legal reasons). You can give links to images hosted elsewhere.
Added subscriber: @leandro_cavalheiro
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?
Added subscriber: @robertmiles
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.
Added subscriber: @CharlieJolly
Have you considered colour blindness accessibility especially with the colour coding? Thinking that for the Blender 101 this is going to be important.
Removed subscriber: @CharlieJolly
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.
Added subscriber: @Rawalanche
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.
Added subscriber: @JimMorren-3
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...
Added subscriber: @rdnmnm
@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.
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.
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 @JimMorren-3'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 @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.)
Added subscriber: @michaellackner
@JimMorren-3 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:
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 (
1287fa3f7candc1b310c32b) 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..Added subscriber: @mendio
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
Added subscriber: @pablovazquez
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.
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.
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.
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 :)
@WilliamReynish 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?
Added subscriber: @youthatninja
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
@youthatninja 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?
Added subscriber: @PierreSchiller
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.
Added subscriber: @ChristopherAnderssarian
@Rawalanche & @robertmiles
https://devtalk.blender.org/t/icon-development-guide-lines/289
https://devtalk.blender.org/t/icon-development-guide-lines/289/6
@PierreSchiller
https://devtalk.blender.org/t/icon-development-guide-lines/289/2
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 ?
@robertmiles, 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).
Added subscriber: @default_monkey
I like most of the Icons but I agree with @JimMorren-3 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.
@WilliamReynish 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 :)
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.
Added subscriber: @cedriclepiller
Please consider making flat icons or give us the possibility to change them.
Added subscriber: @william-70
@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.
Added subscriber: @david-20
@david-20
*.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.
Removed subscriber: @david-20
Removed subscriber: @VukGardasevic
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.... :)
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.
Added subscriber: @gusto
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 :)
Changed status from 'Open' to: 'Resolved'
Added subscriber: @wevon-2
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.
Added subscriber: @bunny
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.
Added subscriber: @Abdou-2