Replies: 1 comment
-
|
I know this is very old question, but I thought I'd leave my findings here for anyone else who was wondering about this effect. I did a little digging through the UI code and found that it's a Tailwind CSS effect. Since all the code is minified it's hard to figure out what the exact setting is, however doing a little comparison work here's what I've figured out: The hover effect is a Tailwind CSS hover filter that increases saturate() via --tw-saturate. The closest I can tell is that the saturate effect is 1.1 (110% of original). To replicate it, open image in Photoshop and go to Image > Adjustments > Hue/Saturation and +10 or +15 in Saturation to your preference. It won’t match to a perfect 1:1 comparison because of the way Photoshop and CSS renders color. Sorry, can't speak for other image editing software, but you can always setup a Tailwind CSS framework and find out for yourself. Edit: Sorry forgot to add the :active mouse click state when you hold it down. This one is a bit more complicated, it's a combination of Brightness, Contrast and Saturation. In Photoshop: Image > Adjustments > Brightness/Contrast The closest I can come to the setting is Brightness 25, Contrast 40, Saturation 10. You can play a bit with slightly deeper contrast at 45 or slightly more Brightness, but the effect is so close it would be hard to distinguish the difference at-a-glance. Good luck! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
To preface, I'm certain the answer is in the code somewhere otherwise it wouldn't be happening at all, and I have looked for the last hour for any sort of clue as to what it is, but I have come up with absolutely nothing, so I'm resorting to these discussions.
What I'm looking for is what methods are used to shift the colors/tones of generated images whenever you're hovering and selecting them within a Preview Image node. There's a certain amount of shifting that occurs when hovering, and a deeper shifting that happens when you click the image.
You can see the color/tone shifting that I'm talking about in the following gif:
I am aware that the effect can be duplicated by simply adjust some parameters like Contrast or Black Point in editing software. However, seeing as how this is happening on the web interface, I feel like it's probably a much simpler method than even those.
I've tested several different possible methods in my editing software to try and recreate these color differences, but I'm getting nothing without more extensive editing methods, which while possible in web, I figure isn't going on in this instance.
I'm asking because I'd like to be able to recreate this or otherwise export the generated images with this effect already applied because the default images are a little bit bland in comparison; However, as mentioned, I'm getting nowhere fast with my testing of this.
I'm looking for the exact method used in the UI, not necessarily a way to recreate it. If anyone has any insight as to what's happening then I'd appreciate the response, as I'm at a loss at this point.
Beta Was this translation helpful? Give feedback.
All reactions