Suggestion : Layer Mask UI and interactions

[alfanders]

Hi Lucky Clan! I have several suggestions regarding how Mask work and being presented in the UI.

The thing I absolutely love about Artstudio Pro's implementation of Mask layer is that you could stack multiple Masks, which is pretty unique to this app. This would enable a more non-destructive approach to masking which is missing from most of other programs.

The experience of adding masks is also wonderful where the first mask you make would treat eraser as a "black-colored brush" effectively erasing the target layer, but the next ones would be treated as a common layer where you could erase the part you don't want to use, and manually add "black-colored brush" to "erase" the lower part. This is just a great design and I believe there'd be more mask interaction possibilities in the future!

However in my humble opinion, I have encountered several things that makes it rather challenging to use Mask in Artstudio Pro in its current implementation. Here are some of them.

----

1. A rather "less-tidy" UI.



On the image above it is shown that the combination of clipping mask icon, mask icon, and the uneven indentation makes it rather challenging to see which layer actually clips to which. Or which mask actually affects which. This is getting even worse if it's inside a group that is inside another group.

With that in mind, here's my proposal of a solution so that the layers looks tidier, and more intuitive to see.



As shown above, now the mask layer uses the same column position with the target layer it is masking. I also reserved the left side of the layer just for the clipping mask icon. This declutter the view of the UI and makes it easier to actually see which column does a layer resides in.
I also reserved the right side of the layer to show the Mask icon. It also makes it easier to glance which layers are actually mask layers. It is easier to see since you don't have to think much about it.

"How about layer locking then? Isn't it on the right side as well?"

Yeps!
And here's my proposed solution for the locking icon. I made it smaller and put it on the left side of the mask icon. I think it looks quite nice and also functional at the same time.



--

In conclusion, above solution could provide:

- clearer column view, which makes it easier to see which layer clips to what layer.
- distinct placement of icon, which makes it easier to see which one is a mask, and which one is a clipping mask.

--

2. Less Intuitive Color to Opacity in Mask Layers

I think this is a pretty small additional feature I'd like to request. Right now, you could use a colored layer as a mask. This is fine, since you could use it as a regular layer later if you wish to. But on the thumbnail, it makes it rather challenging to actually imagine the color as black and white. For example, say, I use yellow color as a mask. It is quite challenging for me to know which grayscale opacity the yellow color actually being read as.

My solution for this is to simply show the thumbnail of a mask as a grayscale version of the layer. I believe this would make it easier to see which opacity the color actually stands for.



In conclusion, above solution could provide:

- More intuitive which "opacity" it is rather than guessing which color translates to which opacity.

----

3. Mask Selection

This is an additional feature that I believe would be immensely helpful to indicate which layer masks actually affects this current active layer.



As shown above, it now highlights all layers that's affected by the Mask. I think this solution makes sense since a layer mask is inseparable with the target layer. So as such, it should be treated, shown, and considered as one group of layers that acts as one. And with this, it is way easier to, at a glance, indicate those interconnecting layers.

I also believe it is quite important if the target layer is being moved or reordered, that the layer masks to also move along or reordered with the target layer.
Right now, if you have a few layer masks, if you move the target layer, the masks would just stay there. It makes it quite cumbersome to use masks, since if you do use them, you have to always multiple select those masks if you want to move your layer. It is quite a shame since the masking system is already very robust in Artstudio Pro.

Imagine you already spent half an hour to mask a challenging area like hair, with several mask layers so that you can do it in a non-destructive way and come back to it later. Only to find out that now, you have to always use multiple select whenever you want to move that hair layer, or reorder the layer. If you don't then only the hair layer would move, and the mask wouldn't. Which defeats the purpose of using mask to make your life easier.

That is why I suggest that Layer Mask always moves and reorders along with the Target Layer, if the Target Layer is being moved.

"But what if I don't want the layer to move along with the target layer? What if I want it to act independent positionally?"

I suggest to also add this option in the layer option menu. It's on by default, but you can disable it if you want to. If it is disabled, the layer now doesn't follow the movement of the target layer. But it's still reorders along with target layer.



"What if you want to only move the mask layer or reorder the mask layer?"
then you simply select The particular Mask Layer (not the target layer) and then move/reorders it.

I believe this is pretty intuitive, yet also easy to use. It now encourages you more to actually use the layer mask feature in a more non-destructive way.

--

In conclusion, above solution could provide:

- Easier way to Manage Masks without having to multi-select every single time.
- More intuitive UI that indicates which layers actually affects and being affected by the mask layer.

----

4. Additional UI Polish to add intuitiveness



Having Only the corner shows on the outside part of mask-affected layers helps to indicate which layer belongs in which mask group. I think this is quite nice to show in a glance which mask affects which layer! And which mask belongs to what group.

----

I love how Artstudio Pro enables you to use multiple stacked masks. I believe having these features would help the system to be more intuitive and easier to use.

Thank you so much! ✨✨

[icezimy]

These are great suggestions! I’d like to add two additional points, regarding “Clipping Masks”.

5) An option to "Merge Clipping Mask". So if you have several layers of clipping masks on one target layer, you can select just the target layer and merge all clipping masks down at once (similar to Photoshops implementation). The option for this could appear when pressing the little merge down arrow in the layers panel, while the target layer of clipping masks is selected.

6) As someone who names all their layers it would be great, when merging several layers, the layer name of the target/lowest layer is kept, instead of the top layer. This is especially true for merging clipping masks (attached a screenshot), but even when merging normal layers without any mask, I think it's much more common to want to keep the name of the lowest layer.

Right now to merge several clipping masks(or normal layers) to a layer, you have to: select target layer, select each clipping mask individually, merge, select target layer and rename it again. Which is not fun when organizing 100+ layers (especially having to keep renaming them after merging).

Thank you!

[alfanders]

Oh!! These actually makes so much sense!! The naming standard also behaves this way in other programs. That's so intuitive, that's a really nice thought icezimy!! 💖✨

5) "Merge Clipping Mask"
This makes so much sense! I use this all the time in Photoshop I haven't even realized that it's missing on Artstudio Pro.

What about, the Unified Merge (Merge Down) having this feature instead?
So if the Target Mask is selected, if there's some layers above that clips to it, it would prioritize merging those down to the target mask first. So when you assign it to a keyboard shortcut, it would prioritize merging the clipped layers first.
And if you want to prioritize merging with the lower layer first rather than merging the clipped layers, you could use the button to show the popup options. Since it's pretty infrequent, I think this would be fine! ✨

hmmm with the button, I think it is nice to show option whether you want to merge down, or to merge clipped layers 🤔
what if, when merge down and merge clipped layers are both available, it would show a popup choice. But if only one is available, it would automatically do whichever available? I think that's pretty great as it could minimize the amount of popup needed to be opened! ✨

I do have a question tho now that we're thinking about this. If you have a layer with some layer masks, and there are some layers that are clipped to that layer. When you merge it, should the target layer still retain its own layer masks?

I personally prefer for them to still retain the layer masks while clipping all the other clipped layers onto that layer tho 🤔

----

6) Use target layer name for Merge
I 100% agree with this. Hands down a really great observation icezimy!! Cheers!! 👐

Thanks!!

These are great suggestions! I’d like to add two additional points, regarding “Clipping Masks”.

5) An option to "Merge Clipping Mask". So if you have several layers of clipping masks on one target layer, you can select just the target layer and merge all clipping masks down at once (similar to Photoshops implementation). The option for this could appear when pressing the little merge down arrow in the layers panel, while the target layer of clipping masks is selected.

6) As someone who names all their layers it would be great, when merging several layers, the layer name of the target/lowest layer is kept, instead of the top layer. This is especially true for merging clipping masks (attached a screenshot), but even when merging normal layers without any mask, I think it's much more common to want to keep the name of the lowest layer.

Right now to merge several clipping masks(or normal layers) to a layer, you have to: select target layer, select each clipping mask individually, merge, select target layer and rename it again. Which is not fun when organizing 100+ layers (especially having to keep renaming them after merging).

Thank you!

[icezimy]

1) After looking at this suggestion again, I think it might be better to keep the layer mask icon on the left side of the thumbnail, but to have it always on the same alignment as clipping masks. Because having the icons for masks at 2 different sides of the layer thumbnail, might be confusing. I think it’s more intuitive to look at the same side for the “same” kind of functionality(masks), and makes for an even tidier column look. And I think the icons between “clipping mask” and “layer mask”, are different enough to see which is which at just a glance. Also the lock icon or sizes, wouldn't need to be adjusted. I tried making a quick mock-up too, sry for the bad quality.😅



5) Yes, whenever you have a target layer selected that has clipping masks to it, it should only then show the pop-up with the options to either “merge down”(if available) or to “merge clipping masks”(automatically, if it’s the only option), like you said.

I do have a question tho now that we're thinking about this. If you have a layer with some layer masks, and there are some layers that are clipped to that layer. When you merge it, should the target layer still retain its own layer masks?

I personally prefer for them to still retain the layer masks while clipping all the other clipped layers onto that layer tho 🤔

When “merging clipping masks”, it should simply merge all layer masks and clipping mask that are linked to the same target layer, into one layer. That’s how it works in Photoshop and it will get too complex otherwise, especially if you have layer masks in between or below clipping masks, it would give wrong results, if only the clipping masks were merged to the target layer. To make it more clear, maybe instead of “Merge Clipping Mask”, it could just be named “Merge Masks ”, or something like that, indicating that it will merge down every mask linked to that target layer, or that is currently selected from the target layer, into one layer.

One functionality that is important to keep here, is that it should still be possible to let’s say only merge 3 of 5 clipping/layer masks down to the target layer, at once,by selecting them and merging with the target layer, but still keeping the remaining 2 clipping masks above it (something that’s not possible in photoshop). That’s also why 6) would be really nice to have first, since even if  5)“merge clipping mask” couldn’t get implemented, it would still make life a lot easier, if it would just keep the name of the lowest layer, whenever you merge together any selected layers.

7) Just got one more small suggestion, which would be to slightly reduce the opacity/brightness of the “eye” indicator of the layer masks/clipping masks, when they are clipped to a target layer that is hidden. This would clarify that they are linked together, while the target layer is hidden. Made another mock-up to try and show it.



Thanks! 😊

[alfanders]

1. A rather "less-tidy" UI.

After looking at this suggestion again, I think it might be better to keep the layer mask icon on the left side of the thumbnail, but to have it always on the same alignment as clipping masks. Because having the icons for masks at 2 different sides of the layer thumbnail, might be confusing. I think it’s more intuitive to look at the same side for the “same” kind of functionality(masks), and makes for an even tidier column look. And I think the icons between “clipping mask” and “layer mask”, are different enough to see which is which at just a glance. Also the lock icon or sizes, wouldn't need to be adjusted. I tried making a quick mock-up too, sry for the bad quality.😅

I have to disagree about this one.
This "left side but indented" is basically the current implementation of layer masks
also, using the mask layer on the left actually disables it to have the same column as the target layer it is masking



as can be seen in the image above, now the mask layer column is inconsistent. "Layer 7" is now on the right side column of Layer 3. But "Layer 8" and "Layer 5" are both in the same column as "Layer 4". This is quite confusing and in my opinion, makes it harder to see which layer actually masks which.

And having both icon on the left also crowds the icons which in my opinion makes it harder to see which layer are clipping to which, and which layer is just a mask.

I'd argue having it like the image below is easier to see since you could just glance to the right if you want to see which layers are masks, and glance to the left to see which layers are clipping masks



---------

5) Yes, whenever you have a target layer selected that has clipping masks to it, it should only then show the pop-up with the options to either “merge down”(if available) or to “merge clipping masks”(automatically, if it’s the only option), like you said.

I agree with you on this! And on the keyboard shortcut, it would always prioritize “merge clipping masks” automatically!


------

I do have a question tho now that we're thinking about this. If you have a layer with some layer masks, and there are some layers that are clipped to that layer. When you merge it, should the target layer still retain its own layer masks?

I personally prefer for them to still retain the layer masks while clipping all the other clipped layers onto that layer tho 🤔

When “merging clipping masks”, it should simply merge all layer masks and clipping mask that are linked to the same target layer, into one layer. That’s how it works in Photoshop and it will get too complex otherwise, especially if you have layer masks in between or below clipping masks, it would give wrong results, if only the clipping masks were merged to the target layer. To make it more clear, maybe instead of “Merge Clipping Mask”, it could just be named “Merge Masks ”, or something like that, indicating that it will merge down every mask linked to that target layer, or that is currently selected from the target layer, into one layer.

hmmm I actually disagree on this one. That's not how it works in Photoshop either, so that is quite inaccurate.
I believe rather than merge all layer masks and clipping mask, it should be merge all layer masks on clipped layers and clipping mask, while retaining the layer masks of the target layer.

Here's how it works in Photoshop


as shown above, all the other masks that is clipped onto the target layer are merged. But the mask on the target layer is still intact.

----

One functionality that is important to keep here, is that it should still be possible to let’s say only merge 3 of 5 clipping/layer masks down to the target layer, at once,by selecting them and merging with the target layer, but still keeping the remaining 2 clipping masks above it (something that’s not possible in photoshop). That’s also why 6) would be really nice to have first, since even if  5)“merge clipping mask” couldn’t get implemented, it would still make life a lot easier, if it would just keep the name of the lowest layer, whenever you merge together any selected layers.

I agree that using the name of target layer should be implemented.
As for the partial merge, I agree that this would be hepful 🙏

--

7) Just got one more small suggestion, which would be to slightly reduce the opacity/brightness of the “eye” indicator of the layer masks/clipping masks, when they are clipped to a target layer that is hidden. This would clarify that they are linked together, while the target layer is hidden. Made another mock-up to try and show it.

Thanks! 😊

This actually makes so much sense!! Great idea!!
Here's another example To reiterate what icezimy mentioned (since it took me awhile to understand on the first time)

[icezimy]

1) True, didn't think about that case. Maybe it could show on the left side. But when you have a mask as target layer with more masks clipped to it, it could only then show on the right side? That would indicate even clearer that the first mask is actually the target layer, and it can be in the right column space. (Edited your image to show it, hope that’s okay!)

I guess it's personal preference of what option would look better. I wouldn't mind either option (though I'd prefer this one), since both are better than the way it's looking currently



5)

hmmm I actually disagree on this one. That's not how it works in Photoshop either, so that is quite inaccurate.
I believe rather than merge all layer masks and clipping mask, it should be merge all layer masks on clipped layers and clipping mask, while retaining the layer masks of the target layer.

Here's how it works in Photoshop


as shown above, all the other masks that is clipped onto the target layer are merged. But the mask on the target layer is still intact.

I see what you mean now, just understood it wrong before, thinking you wanted to retain every clipped layer mask, not just the one from the target layer. Yes, that way it makes total sense!😁

7) Thanks for reiterating! 🙏

[alfanders]

1) True, didn't think about that case. Maybe it could show on the left side. But when you have a mask as target layer with more masks clipped to it, it could only then show on the right side? That would indicate even clearer that the first mask is actually the target layer, and it can be in the right column space. (Edited your image to show it, hope that’s okay!)

I guess it's personal preference of what option would look better. I wouldn't mind either option (though I'd prefer this one), since both are better than the way it's looking currently

No worries, the images are for discussion purposes to better illustrate our points so edit away!

I really don't suggest this option. This is even more inconsistent than before.
with this one, aside from the column being inconsistent, the icon placement is also inconsistent. This would create confusion and redundancy with the UX. We also would not be able to get the advantages of having the icons in different places.

With the rightside mask icon, you get :
- Easier to see clipping mask icon. Easier to glance mask icon.

With both mask and clipping mask icon on the left, you get :
- All the icon on the left side, freeing the right side for lock icon.

With this option, you don't get the easier to see clipping mask icon, or easier to glance mask icon. If you glance on the right, it would just show "some" of the mask icon. If you see on the left, it might or might not show the mask icon depending on in what column the mask layer resides. You also still occupy the rightside icon placement for lock icon.

in addition of it being inconsistent, it also defeats the purpose of both right-side icon and left-side icon design. So I don't think I agree with this one. Sorry 💦

I see what you mean now, just understood it wrong before, thinking you wanted to retain every clipped layer mask, not just the one from the target layer. Yes, that way it makes total sense!😁

Lovely!! Glad we're on the same page!! 💖💖

7) Thanks for reiterating! 🙏

No probsieee, it's an absolutely wonderful idea!! It's a terrific polish and UX idea!! Thank you icezimyyy 💖💖

[alfanders]

Hi Lucky Clan, would kindly love to hear your opinion on this thread ✨
Thanks!

[LCArt]

really good ideas in this thread +1

[alfanders]

Upping this since I feel that mask interaction in Artstudio Pro right now is the least intuitive and effective one compared to other drawing programs like Photoshop or CSP, even Procreate.

Especially the selected-mask layer indicator, move layer + mask, and rearranging layers.

[BoroseMedia]

 yes, this would be very helpful! +1

[c0mp0ser]

+1

[Lucky Clan]

Thanks for all your suggestions about mask/clipping mask, they are really helpful!
We will implement some of them in the new major update.

[alfanders]

Hi Lucky Clan, thank you so much for your reply and consideration!
Can't wait to try! ✨

Thanks for all your suggestions about mask/clipping mask, they are really helpful!
We will implement some of them in the new major update.