Author Topic: Request: more powerful/less cumbersome gradient tool sidebar interface  (Read 3900 times)

mattnava

  • Full Member
  • ***
  • Posts: 181
  • Creative/Art Director. The Pathless, ABZÛ, Journey
    • Matt Nava Portfolio
The gradient tool makes it cumbersome to create custom gradients with many colors and alphas. You have to dig into a few panels before you get to the color bar ui with little color key things. The side bar has a mode that lets you select a single color, to try to be faster. But it’s limited to just blending to 0 opacity.


It would make a lot more sense to just put the powerful color key bar ui right on the side bar, so no ui digging would be required to author complex gradients. I did a mock up of how this might look. This could probably just replace the current “fast gradient” side bar mode in my opinion. The swatches mode could remain to facilitate saving/browsing gradient presets.


To save space and reduce visual clutter, I just made one column of keys next to the gradient, instead of having separate opacity keys. To control alpha, I suggest adding a simple opacity slider to the color panel when you open it by tapping a color key. The alpha could preview as a checkerboard blending with the gradient, like in the current quick gradient side bar ui. (Not pictured in my mock up.)


It would be neat if in the tool options panel, there was a button to “save current gradient” that would just add the current gradient to your presets.


This would make the process of working with gradients way faster, more powerful, and more intuitive. Thank you for your consideration!

mattnava

  • Full Member
  • ***
  • Posts: 181
  • Creative/Art Director. The Pathless, ABZÛ, Journey
    • Matt Nava Portfolio
Another thought: selecting a gradient swatch preset in the other sidebar ui could populate this ui with that preset’s gradient, when you switch back over to this sidebar ui. That way you could really easily switch the sidebar back and forth to select presets and then modify them, to make/save new variations.

alfanders

  • Full Member
  • ***
  • Posts: 121
Ah I had a concern about the gradient as well! And Lucky Clan already kindly replied that they might consider this in the future. May I know whether this is similar to the thread here?

https://www.luckyclan.com/forum/index.php?topic=2886.0

mattnava

  • Full Member
  • ***
  • Posts: 181
  • Creative/Art Director. The Pathless, ABZÛ, Journey
    • Matt Nava Portfolio
Yes, I saw that thread! Very good idea there to unbury gradient editing for gradient map layers. I find that anywhere you have to edit a gradient right now, you have to dig through too much ui.


In this post, I’m referring specifically to the gradient tool, not gradient map layers. However I have a suspicion that this ui I’m proposing may also potentially be used with gradient map layers too to speed things up. But I haven’t thought that use through yet.


This idea should make the act of using the gradient tool smoother and require less ui digging each time you want to change the gradient setting. I would love to get the changes from both threads, which I think are 100% compatible!

alfanders

  • Full Member
  • ***
  • Posts: 121
Ohhh ya ya I see what you mean! ✨✨
Thanks for clearing that up!! ✨

LCArt

  • Full Member
  • ***
  • Posts: 162
yah, gradients are really annoying to use currently :(

mattnava

  • Full Member
  • ***
  • Posts: 181
  • Creative/Art Director. The Pathless, ABZÛ, Journey
    • Matt Nava Portfolio
I thought of a way to improve this idea a bit and remove the need to add an opacity slider in the color picker for this to work.

In this mockup, there's a simple button on the top of the sidebar that toggles between editing color and opacity keys. This allows color and opacity keys to have different amounts and positions, which is ideal. Opacity keys could use the standard number entry UI to edit their value, and color keys could use the color picker.

This version is more powerful and requires less new UI elements than my original mockup.

alfanders

  • Full Member
  • ***
  • Posts: 121
Loving the mockup you made!!

I want to ask what you think about this. This might be a good inspiration for gradient
https://youtu.be/hmvvzPVVfFk?t=1140

Also as for the new Mockup, I personally love the initial mockup where the color and opacity could be accessed at the same time without having to switch. I believe it'd be more efficient and less cumbersome to use since everything you need is available at the same place 💖✨

mattnava

  • Full Member
  • ***
  • Posts: 181
  • Creative/Art Director. The Pathless, ABZÛ, Journey
    • Matt Nava Portfolio
Hey thanks! Glad you like it.


Yeah it’s definitely a trade off, between the first and second mock-up. The first one puts color/opacity editing in one combined key, which simplifies the key ui. However, it makes some kinds of gradients harder to author, where you want a simple gradient for opacity but a lot of keys for color. It can be nice to separate opacity and color in those cases.


Gradients in Art Studio Pro already are set up with separate color and opacity keys, which means the second mockup probably has a higher chance that lucky clan could do it with less trouble (higher chance it might actually happen! Haha). Also they don’t have to do any changes to the color picker ui which simplifies things further.


I included an example of a gradient that would be hard to author with combined color/opacity keys (it’s art studio’s existing gradient editing ui).


Another thought I had is that you would have to be able to add and delete keys- probably just tapping on the bar anywhere would add a key, maybe dragging a key off the bar would delete it. Additionally, another cool thing about either of these designs is they could support the “show midpoints” option in the tool options.


Regarding that affinity photo gradient tool vid- there’s some neat stuff in there! It gives you an interface to edit a gradient after you draw it, and select color keys on the canvas. Personally, I find that the issue with this sort of design is that it can really slow you down if you are just trying to do a lot of gradients overlapping each other, since you are forced to accept each one before you can do another. You also lose the ability to edit it if you switch tools or do any additional actions. There’s lots of ways to design around those issues or make the post-edit ui optional, but I think it’s a level of complexity and control that’s more fitting for a gradient adjustment layer, which persists and can be edited later. And indeed, in the video, he shows that ui is best used with a gradient adjustment layer for this reason. I like the gradient tool remaining focused on one-and-done quick gradients, since it really is not focused on persisting gradients individually. So if it were up to me, I would consider adding something like that to a gradient adjustment layer, but not the gradient tool.
Last Edit: May 01, 2022, 03:52:11 AM by mattnava

alfanders

  • Full Member
  • ***
  • Posts: 121
Oh I just got what you meant! So you want to separate the opacity slider and the color slider by changing mode? Thanks for clearing that up! ✨

The thing that I might add is probably to have a small non-intrusive indicator of the other mode while you're in one mode. So when you're in a color authoring mode, you could have an indicator of where the opacity keys are. I think it could be helpful!

and I see your point about the adjustment layer, that makes sense! thanks! ✨

LCArt

  • Full Member
  • ***
  • Posts: 162
any thoughts on this luckyclan?

mattnava

  • Full Member
  • ***
  • Posts: 181
  • Creative/Art Director. The Pathless, ABZÛ, Journey
    • Matt Nava Portfolio
Would love to get Lucky Clan’s thoughts on this mock-up I did a while ago! I still think it would be a big improvement to the app.