3

I have a solid colour background. Diagram 1.

Over the top of this is a transparent gradient going left to right. Diagram 2. It is RGB 0,0,0, the left edge is 85% opacity, and the right edge fades off to 0% opacity. In the screenshot it is 30px wide (diagram 3 shows where the 0% right edge ends).

Ok, my issue is I can see a white smudge area toward the right edge of the gradient. So it appears to go to a lighter green colour before the solid green background. But zooming in on Photoshop and checking the colours proves to me that this isn't actually happening.

To see for yourself, look at diagram 2, and see if you think it fades from dark green to the slid background green smoothly, or whether you can see a lighter area too. Diagram 4 shows the position that the light area appears in diagram 2.


1. Why does this optical illusion occur?

2. How can I solve this optical illusion so the blend looks smooth?


enter image description here

  • This is actually used as a shadow image saved out as a PNG though, and over laid on top of a solid background within an iOS app. That's where I first noticed it. I recreated the effect in Photoshop for the image above. – Dave Haigh Jul 6 '16 at 11:31
  • How did you make the gradient? Is it a layer overlaid over the background, or did you use layer effects? – Vincent Jul 6 '16 at 11:34
  • It's a separate layer over the top – Dave Haigh Jul 6 '16 at 11:35
  • Are you sure the right side of the gradient is RGB(0,0,0,0) and not RGB(255,255,255,0)? – Luciano Jul 6 '16 at 12:09
  • Yep. That was my first thought. It is definitely 0,0,0. – Dave Haigh Jul 6 '16 at 12:10
3

Nice question.

It is a compensation the brain makes of tonal contrast.

When you have a color you see it lighter if it is next to a dark color, and you see it darker if it is next to a light one.

enter image description here


Let us concentrate on the central rectangles of this next image.

Each of them are next to a darker one to the left. So the brain see each as a litle lighter. But they are also next to a lighter color, so the brain see them as darker...

enter image description here

But all rectangles are just plain color. The result is a gradient. As a wavy ilusion.

enter image description here

The same is happening on youe rectangle. The green is next to a darker color on the left... The brain compensates it with a lighter green next to it.


There is not much you can on a tiny sample, but on a larger sample:

1) You can try to make a "logaritmic or curved progrssion" of the dark side, so the gradient crashes with the green smoother.

enter image description here

In other words, adjust a bit the curves of the shadow, and extend it a bit more so it has more time to fade.

2) Make an intermediate patch and drag it to the dark side.

enter image description here

3) Do not use a "flat green" make a gradient all the way. The example above keeps the gradient all the way and you do not see a white patch.

4) Another possible option is to add a "chromathic shift", to fool the brain with is stares at this direct tonal contrast. Take a look at this: How can I make the color white look as white as possible?

0

Make sure that the gradient layer is absolutely transparent on the transparent side. I could imagine a single row of non-transparent pixels creating this error. Also ensure that the blending mode for the black gradient layer is set to multiply.

I'd recommend using layer effects for creating gradients like these, instead of using separate layers superimposed over the background. Double-click the background layer's bar in the Layers palette, or choose Layer > Layer Style > Gradient Overlay from the top menu.

  • Agreed. However, I cant use layer effects or multiply. The transparent gradient layer has to be saved out on its own as a PNG image. It has to be a separate image/layer as the green background is dynamic and in fact could be any colour or any element within the UI behind the gradient. I have zoomed right in and checked the blend on the right edge. it definitely starts at 0%. Strangely the light/white optical illusion is just to the right of the 0% edge. But it is definitely the same green as the green across the right side of the whole block. – Dave Haigh Jul 6 '16 at 11:44
  • BTW, multiply doesn't make a difference within Photoshop (I though it would). I wouldn't have the option to save as PNG with multiply anyway I don't think. – Dave Haigh Jul 6 '16 at 11:50
0

I run into this issue often. my hard rule for it is, don't use black, use a very dark green (or whatever color it is). i'd start around #002200, which would be nearly black but has some green in it.

your brain i trying to compensate for the lack of green in the black and that's where the "white" comes from, too much contrast. i'm not sure what exactly you're trying to achieve, but in reality, a shadow is almost never black, it takes the colors of what it's being cast on.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.