Improved Mask icon with disabled state #102585

Closed
opened 2022-11-17 14:47:00 +01:00 by Julien Kaspar · 33 comments
Member

(NOTE) This task is part of the community & sub tasks of the workboard. Anyone is free to pick up this task and contribute. For any questions or needed reviewers, please tag @Sergey @HooglyBoogly and @JulienKaspar.

Context

We discussed the need to update the icon for Masks.
There is no "disabled" version of the icon, which is very needed for auto-masking in sculpt mode, and masked layers in grease pencil.
Apart from that the current icon is also way too similar to other icons like Overlays.

Current masking icon:
image.png

Proposed icons:
image.png

These are the CLIPUV_DEHLT and CLIPUV_HLT and are currently used in the 2D curve UI and grease pencil layer masks.
They work much better as a recognizable industry standard masking icon.

Goal

CLIPUV_DEHLT will be the new universal masking icon for various areas of Blender:

  • Auto-Masking
  • Mask modifier
  • Mask editing (Image Editor)
  • Mask Data-Block
  • Grease Pencil Masks

In the case of Auto-Masking, the header icon needs to be switched with CLIPUV_HLT if all auto-masking options are disabled.
For the implementation the View3D_PT_object_type_visibility is a good reference.

The icons of GPencilLayerMask.invert also need change.
For now we should use the select_intersect and select_subtract icons as a more accurate depiction:
image
Later on the grease pencil module can change or create new icons for this part of the UI.

(NOTE) This task is part of the community & sub tasks of the workboard. Anyone is free to pick up this task and contribute. For any questions or needed reviewers, please tag @Sergey @HooglyBoogly and @JulienKaspar. # Context We discussed the need to update the icon for Masks. There is no "disabled" version of the icon, which is very needed for [auto-masking in sculpt mode](https://developer.blender.org/T101593), and masked layers in grease pencil. Apart from that the current icon is also way too similar to other icons like Overlays. Current masking icon: ![image.png](https://archive.blender.org/developer/F14220365/image.png) Proposed icons: ![image.png](https://archive.blender.org/developer/F14179512/image.png) These are the `CLIPUV_DEHLT` and `CLIPUV_HLT` and are currently used in the 2D curve UI and grease pencil layer masks. They work much better as a recognizable industry standard masking icon. # Goal `CLIPUV_DEHLT` will be the new universal masking icon for various areas of Blender: - Auto-Masking - Mask modifier - Mask editing (Image Editor) - Mask Data-Block - Grease Pencil Masks In the case of Auto-Masking, the header icon needs to be switched with `CLIPUV_HLT` if all auto-masking options are disabled. For the implementation the `View3D_PT_object_type_visibility` is a good reference. The icons of `GPencilLayerMask.invert` also need change. For now we should use the `select_intersect` and `select_subtract` icons as a more accurate depiction: ![image](/attachments/e5611ad7-612b-4c3e-bca7-f4f10259fc7c) Later on the grease pencil module can change or create new icons for this part of the UI.
2.2 KiB
Julien Kaspar self-assigned this 2022-11-17 14:47:00 +01:00
Author
Member

Changed status from 'Needs Triage' to: 'Confirmed'

Changed status from 'Needs Triage' to: 'Confirmed'
Author
Member

Added subscriber: @JulienKaspar

Added subscriber: @JulienKaspar
Author
Member

Raising priority because this is currently targeted for 3.5

Raising priority because this is currently targeted for 3.5
Member

Added subscriber: @HooglyBoogly

Added subscriber: @HooglyBoogly
Member

I think it would be much better to avoid using an icon that relies on using the double meaning of a real world face mask.
IMO we should aim for icons that are more professional and don't end up seeming like a joke.
We should also aim to use icons that make sense when the UI is set to a different language.

The icons with two intersecting circles are a bit hard to explain-- masking doesn't really imply two shapes to me.
What do you think about a single circle with a section shaded for "on" and completely blank like option 5 in your mockups for "off"?

I think it would be much better to avoid using an icon that relies on using the double meaning of a real world face mask. IMO we should aim for icons that are more professional and don't end up seeming like a joke. We should also aim to use icons that make sense when the UI is set to a different language. The icons with two intersecting circles are a bit hard to explain-- masking doesn't really imply two shapes to me. What do you think about a single circle with a section shaded for "on" and completely blank like option 5 in your mockups for "off"?
Author
Member

Added subscriber: @pablovazquez

Added subscriber: @pablovazquez
Author
Member

I talked with @pablovazquez and we could go for using a universal mask icon for cases where the masks and holdout.
Either by reusing the current holdout icons or simplifying them in a square format.

universal_mask_icons.png

Personally I prefer B but with rounded corners.

I talked with @pablovazquez and we could go for using a universal mask icon for cases where the masks and holdout. Either by reusing the current holdout icons or simplifying them in a square format. ![universal_mask_icons.png](https://archive.blender.org/developer/F14159268/universal_mask_icons.png) Personally I prefer B but with rounded corners.

Why are there two different icon shapes for on/off states? It looks like two different functions. Why memorize twice as much? There is already a indication of the off state in the form of dimming.

Why are there two different icon shapes for on/off states? It looks like two different functions. Why memorize twice as much? There is already a indication of the off state in the form of dimming.
Author
Member

@jenkm Dimming the icon didn't seem like enough since it's still a mostly filled shape.
In many other places there are disabled states for icons where the icon changes to the same icon made of gray wires.

The disabled state needs to clearly read as a different icon in places such as the outliner, grease pencil layers and auto-masking in the header.
If A & B look to dissimilar then the best course would be something like C to make sure they are recognized as variants of the same icon.

Another note from the module meeting today:
The circle in A & B looks like it is shrinking. This should ideally be avoided like in C.

@jenkm Dimming the icon didn't seem like enough since it's still a mostly filled shape. In many other places there are disabled states for icons where the icon changes to the same icon made of gray wires. The disabled state needs to clearly read as a different icon in places such as the outliner, grease pencil layers and auto-masking in the header. If A & B look to dissimilar then the best course would be something like C to make sure they are recognized as variants of the same icon. Another note from the module meeting today: The circle in A & B looks like it is shrinking. This should ideally be avoided like in C.
Author
Member

Turns out we have these icons already:
image.png

They are CLIPUV_DEHLT and CLIPUV_HLT and are currently used in the 2D curve UI and grease pencil layer masks.

IMO we should generalize these as universal mask icons.

Turns out we have these icons already: ![image.png](https://archive.blender.org/developer/F14179512/image.png) They are `CLIPUV_DEHLT` and `CLIPUV_HLT` and are currently used in the 2D curve UI and grease pencil layer masks. IMO we should generalize these as universal mask icons.
Author
Member

As discussed in the recent module meeting, the priority will be lowered.
We'll see when this task can be handled but for the major functionality of the feature it's not vital.

As discussed in the recent module meeting, the priority will be lowered. We'll see when this task can be handled but for the major functionality of the feature it's not vital.
Julien Kaspar added this to the Sculpt, Paint & Texture project 2023-02-08 10:20:48 +01:00
Philipp Oeser removed the
Interest
Sculpt, Paint & Texture
label 2023-02-10 09:10:57 +01:00
Member

Just a (not very strong) personal opinion, but I don't find the disabled state communicates itself well. As in the enabled state mostly looks like "masking" to me but I couldn't guess what the disabled one means if there wasn't further context clues.

Is is possible to take the current mask icon and create an "off" version of it instead?

image

Ideally it would be nice to have an "inverted" version too in a match style.

Just a (not very strong) personal opinion, but I don't find the disabled state communicates itself well. As in the enabled state mostly looks like "masking" to me but I couldn't guess what the disabled one means if there wasn't further context clues. Is is possible to take the current mask icon and create an "off" version of it instead? ![image](/attachments/647c090a-cd4b-423e-84bf-070b6a96af40) Ideally it would be nice to have an "inverted" version too in a match style.
Author
Member

@Harley I was thinking of this icon design too but the issue here is that the 'enabled' is not solid-white enough to be read as an on-state.
The disabled icon on the other hand will always look way more like an enabled icon because of the amount of white space.

This was the initial design exploration.
mask_off_icon.jpg

I prefer the industry standard mask icon design as it is recognizable and the meaning is can be kept fairly consistent.

@Harley I was thinking of this icon design too but the issue here is that the 'enabled' is not solid-white enough to be read as an on-state. The disabled icon on the other hand will always look way more like an enabled icon because of the amount of white space. This was the initial design exploration. ![mask_off_icon.jpg](/attachments/55fd0ca4-58b4-4155-94c5-18237f655b19) I prefer the industry standard mask icon design as it is recognizable and the meaning is can be kept fairly consistent.
Author
Member

I would still like to go forward with the current proposal.
@Harley Or do you disagree?

I would still like to go forward with the current proposal. @Harley Or do you disagree?
Member

I don't disagree at all. I think the most important thing is to get what you need. It can always be tweaked afterward if anyone cares enough to do so.

I don't disagree at all. I think the most important thing is to get what you need. It can always be tweaked afterward if anyone cares enough to do so.
Member

I am fine with the current proposal. The solution for GPencilLayerMask.invert seems alright. Although I would like to find a more permanent solution for these in the future. Especially since select_intersect has the dashed outline, which might be confusing.

I am fine with the current proposal. The solution for `GPencilLayerMask.invert` seems alright. Although I would like to find a more permanent solution for these in the future. Especially since `select_intersect` has the dashed outline, which might be confusing.
Julien Kaspar added the
Meta
Good First Issue
label 2023-04-26 18:00:26 +02:00

@JulienKaspar @HooglyBoogly @jenkm @Harley Hello, I would be interested in taking care of this task, which file should we modify and which icon should we integrate and where should we stock it?
Thanks in advance

@JulienKaspar @HooglyBoogly @jenkm @Harley Hello, I would be interested in taking care of this task, which file should we modify and which icon should we integrate and where should we stock it? Thanks in advance
Author
Member

Sorry for not getting to reply to the task sooner.
@JulianEisel Maybe you can also give some advice?

I think it would be best to rename the CLIPUV icons to be the new mask icons and not use the current MOD_MASK icon anymore.

  • CLIPUV_HLT would become MASK_DEHLT
  • CLIPUV_DEHLT would become MASK_HLT

Many interface .py files would then need to refer to ICON_MASK_HLT instead of ICON_MOD_MASK.

Since the icon of the auto-masking panel in the header should depend on the state of the toggles within, I'd recommend to look at the implementation of rna_object_type_visibility_icon_get_common, since that panel is doing something very similar.

Sorry for not getting to reply to the task sooner. @JulianEisel Maybe you can also give some advice? I think it would be best to rename the `CLIPUV` icons to be the new mask icons and not use the current `MOD_MASK` icon anymore. - `CLIPUV_HLT` would become `MASK_DEHLT` - `CLIPUV_DEHLT` would become `MASK_HLT` Many interface .py files would then need to refer to `ICON_MASK_HLT` instead of `ICON_MOD_MASK`. Since the icon of the auto-masking panel in the header should depend on the state of the toggles within, I'd recommend to look at the implementation of `rna_object_type_visibility_icon_get_common`, since that panel is doing something very similar.
Contributor

Planning on picking work up here soon since the discussion has stalled out, just to be clear there are two main things that need to be done, correct, @JulienKaspar ?

  1. Update the general masking icon to use the CLIPUV_HLT / CLIPUV_DEHLT & Update the global automasking icon so it reacts appropriately
  2. Update the grease pencil icon to use the select_intersect and select_subtract icons

If that sounds right I'll start with getting a PR for the first usecase.

Planning on picking work up here soon since the discussion has stalled out, just to be clear there are two main things that need to be done, correct, @JulienKaspar ? 1. Update the general masking icon to use the `CLIPUV_HLT` / `CLIPUV_DEHLT` & Update the global automasking icon so it reacts appropriately 2. Update the grease pencil icon to use the `select_intersect` and `select_subtract` icons If that sounds right I'll start with getting a PR for the first usecase.
Contributor

The only concern I have with renaming the CLIPUV_HLT icon is that it's currently in use by the Curve Widget and Curve Profile for the Bevel Modifier to indicate clipping. If it's fine to overload the meaning here I think it's fine to continue, but I don't have enough context to give much of an informed opinion.

The only concern I have with renaming the `CLIPUV_HLT` icon is that it's currently in use by the [Curve Widget](https://docs.blender.org/manual/en/latest/interface/controls/templates/curve.html#ui-curve-widget) and [Curve Profile](https://docs.blender.org/manual/en/latest/modeling/modifiers/generate/bevel.html#custom-profile) for the Bevel Modifier to indicate clipping. If it's fine to overload the meaning here I think it's fine to continue, but I don't have enough context to give much of an informed opinion.

ok, I think renaming CLIP is not a problem even if the Curves widget and curve profile refer to it because they can be renamed.

ok, I think renaming CLIP is not a problem even if the Curves widget and curve profile refer to it because they can be renamed.

But I want just know : how o do for the icon?
should I redo the icons or should I download them?

But I want just know : how o do for the icon? should I redo the icons or should I download them?
Author
Member

@Sean-Kim That sounds good. I'd say focus on switching the icons and implementing the on/off state for auto-masking.

I'm also not sure about renaming the icon name. The User Interface Module would know more about what to do here.
IMO it makes sense to rename the icon and remove the old mask icon since it's no longer required.

@Sean-Kim That sounds good. I'd say focus on switching the icons and implementing the on/off state for auto-masking. I'm also not sure about renaming the icon name. The User Interface Module would know more about what to do here. IMO it makes sense to rename the icon and remove the old mask icon since it's no longer required.
Contributor

@JulienKaspar Something I noticed while working on the above PR: the Grease Pencil tool uses CLIPUV_HLT to indicate that a mask is inactive and CLIPUV_DEHLT to indicate that the mask is active.

For the Auto-masking button in sculpt mode, do we want it to follow the same pattern and use CLIPUV_HLT as the disabled mode?

@JulienKaspar Something I noticed while working on the above PR: the Grease Pencil tool uses CLIPUV_HLT to indicate that a mask is inactive and CLIPUV_DEHLT to indicate that the mask is active. For the Auto-masking button in sculpt mode, do we want it to follow the same pattern and use CLIPUV_HLT as the disabled mode?
Author
Member

@Sean-Kim Which GP tool do you mean? Or do you mean the "Masks" panel in the Object Data properties?

@Sean-Kim Which GP tool do you mean? Or do you mean the "Masks" panel in the Object Data properties?

@Sean-Kim I have nothing more to do since you have done the work in #117467. Basically I was going to take over the task
Edit : error of my part i need to modify the scripts

@Sean-Kim I have nothing more to do since you have done the work in #117467. Basically I was going to take over the task Edit : error of my part i need to modify the scripts
Contributor

@Sean-Kim Which GP tool do you mean? Or do you mean the "Masks" panel in the Object Data properties?

@JulienKaspar Ah, upon further review I was mistaken. I meant the Object Data properties for a Grease Pencil object, specifically the use_mask property of a layer, but that actually uses MOD_MASK and LAYER_ACTIVE. (I also missed your comment in the main post saying that CLIPUV_HLT should be used for when no auto-masking options are enabled)

> @Sean-Kim Which GP tool do you mean? Or do you mean the "Masks" panel in the Object Data properties? @JulienKaspar Ah, upon further review I was mistaken. I meant the Object Data properties for a Grease Pencil object, specifically the `use_mask` property of a layer, but that actually uses MOD_MASK and LAYER_ACTIVE. (I also missed your comment in the main post saying that CLIPUV_HLT should be used for when no auto-masking options are enabled)
Contributor

@Gangneron - Apologies, but given that your last post prior to the recent activity was over half a year ago, I assumed that you had lost any interest in following up with this task.

@Gangneron - Apologies, but given that your last post prior to the recent activity was over half a year ago, I assumed that you had lost any interest in following up with this task.

@Sean-Kim I can take care of the code part of the PR

@Sean-Kim I can take care of the code part of the PR

@JulienKaspar question are all C++ files referencing ICON_MOD_MASK need to be modified

@JulienKaspar question are all C++ files referencing `ICON_MOD_MASK` need to be modified
Author
Member

@Gangneron Since @Sean-Kim already started with the implementation it would be best that he finishes it.
I recommend to have a look at some of the other 'Good First Issues' and reported bugs if you want to pick up something else. Thanks!

@Gangneron Since @Sean-Kim already started with the implementation it would be best that he finishes it. I recommend to have a look at some of the other 'Good First Issues' and [reported bugs](https://projects.blender.org/blender/blender/issues?q=&type=all&sort=&state=open&labels=281%2c296%2c290&milestone=0&project=0&assignee=0&poster=0) if you want to pick up something else. Thanks!
Member

This can probably be closed now that #117467 and #117649 are in?

Another task can be made to rename the icon itself later on.

This can probably be closed now that #117467 and #117649 are in? Another task can be made to rename the icon itself later on.
Author
Member

I agree. This task is essentially done 👍

I agree. This task is essentially done 👍
Blender Bot added
Status
Archived
and removed
Status
Confirmed
labels 2024-02-02 15:01:12 +01:00
Sign in to join this conversation.
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 Assignees
8 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: blender/blender#102585
No description provided.