Duotone: Add a posterize option #33673
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
scruffian
added
the
[Feature] Media
|
Size Change: +146 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
|
This is pretty cool, I tested it out and worked well in editor. 👍 , but did not show in published view 😦 I'll leave it to @ajlende for implementation details, and if @jasmussen has any UX thoughts for it. |
|
The code you have looks good to me! But I think there should be a way to also make posterize available as a preset swatch in theme.json. Depending on how we implement it, we may need a different style for the swatches, so I'd like to hear @jasmussen's thoughts on the UX too. We're also going to want to add other types of "filters" in the future. How will we separate out these different types of filters especially when each one will likely have its own kind of customization? Is posterize even different enough to be called a different type of filter with its own section of preset swatches? (Mostly rhetorical questions just there to give some things to think about) |
|
@ajlende Also related to this issue for Duotone support in theme.json |
|
This is wiiiild:
I did notice at the end that if you just toggle "Posterize" without having a color preset set first, it won't do anything. Showing it conditionally might be a better start. This is a cool effect! I can see how it can be of great use to theme developers. The fact that it's a simple toggle in the SVG filter is neat as well. To Marcus point, this is more of a UI question on how to best surface this. On a low level, the duotone dropdown itself could use a great deal of love, some of it tracked in #31373, other aspects are more dependant on progress in #27331 to have collapsed color swatch pickers and such. The added feature also moves the duotone dropdown slowly towards being more of a "filter" dropdown, potentially holding tools such as brightness and contrast as well. Going even deeper, that then opens technical questions on whether those use CSS filters or SVG filters. If we were to add a contrast slider, would the posterize then be a preset instead of a toggle, given that you could likely achieve the same? I'm back from some AFK, so apologies for the belated response. I'll mull this over a bit more and return as soon as I can. In the mean time, I'd also love some @ajlende thoughts on the technical perspectives of where this could go with filters in the future. |
|
If we're sticking with SVG filters, in addition to brightness & contrast we can do any sort of "color levels" adjustments, sharpen & blur, hue rotate, vignette, even a simple film grain effect and more. VectorStyler has a good list of the basic SVG filters that we can apply and combine for more complex filters. We can't do an arbitrary LUT (look-up table) with SVG which is how many filters are saved in various programs—we'd need canvas or WebGL to do things like that—but there's still a lot of things that we can do with SVG filters. Some of those features (like color levels) would make sense as a swatch while other ones (like sharpen/blur) are more like traditional image editing controls. |
|
I think this particular effect is a bit niche to be in core by default. It's probably better to figure out how filters in general could be extended upon the infrastructure duotone provides and how the UI might scale with them. |
7 tasks
|
Closing in favour of #35359 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds a posterize option to the duotone control. This can help create some interesting effects.
How has this been tested?
In empty theme
Screenshots
Before:
After:
Here's how it works with an image that has duotone enabled already:
Before:
After:
Sometimes it doesn't look so good :)
Types of changes
New feature (non-breaking change which adds functionality)
Checklist:
*.native.jsfiles for terms that need renaming or removal).