Photoshop: Allow transparency of gradients to be dithered

  • 8
  • Idea
  • Updated 3 years ago
  • Implemented
  • (Edited)
Most (all?) of the various forms of gradients in Photoshop can be dithered on their colour channels. I don’t believe there’s a way to dither on the alpha channel.

My example below uses shape layers, which is where I’d like to see the improvement, but I’d like to see the feature added across all gradient types.



There’s three gradients shown above. The top two are from solid colour to solid colour. The bottom gradient’s first stop is white, but with 0% opacity, so it shows the background.



Posterizing the document shows that the top two gradients are dithered, but the bottom one isn’t, even though dithering is on for that shape layer’s gradient.



It would be great if the dither check box also controlled dithering on the alpha channel.
Photo of Marc Edwards

Marc Edwards

  • 130 Posts
  • 21 Reply Likes

Posted 5 years ago

  • 8
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 830 Reply Likes
Alpha channels aren't involved here - I think you meant transparency/opacity.

Traditionally (going WAY back) gradients have avoided dithering the transparency values to avoid artifacts and less-than-desirable blending.

But if you have some real world examples of where this would help, I'll see what we can do. The biggest problem is going to be finding a place to put a control for this option (since it probably shouldn't be enabled with the simple dither switch).
Photo of Marc Edwards

Marc Edwards

  • 130 Posts
  • 21 Reply Likes
Alpha channels aren't involved here - I think you meant transparency/opacity.


I’m referring to alpha channels in the general sense, not specifically talking about Photoshop alpha channels.

But if you have some real world examples of where this would help, I'll see what we can do.


Thanks.

Imagine you’re designing a website. Here’s part of the header with an awesome logo that contains a gradient.



The background of the website is set in CSS, so a sensible approach might be to use a PNG, set up so the background doesn’t need to be in the logo itself.



This would let me change the background by just editing the CSS.



If the alpha channel of the gradient was dithered, I think the quality of the result would be better, as can be seen to the left of the A.



The top item is the gradient drawn as a shape layer with a gradient fill. Just under that is the same logo posterized.

The item that’s second from the bottom uses a mask that was created with a Photoshop channel, so it can be dithered. Just under that is the same logo posterized.
Photo of Marc Edwards

Marc Edwards

  • 130 Posts
  • 21 Reply Likes
Alpha channels in a general sense are extra channels beyond the color data and without specific meaning.


I’m not sure why you’d choose to keep pursuing that side of the discussion. It’s common for an alpha channel to describe opacity. I’m sure you know that.

“RGBA stands for red green blue alpha”

“The alpha channel is normally used as an opacity channel”

http://en.wikipedia.org/wiki/RGBA_col...

Transparent logos is a pretty good example of why transparency/opacity dithering might be needed in gradients.


Some other examples:

- A watermark image to be applied to photos.

- Any other aspect of a website or piece of software where images with gradients are composited at runtime, like the iOS 6 transparent navbar.
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 830 Reply Likes
It was common 30 years ago, then the meaning shifted pretty quickly as the extra channels were used for all sorts of things. And yes, Wikipedia is not a useful or authoritative source for information (especially since their policies mean that they can only contain hearsay).
Photo of Stephen Nielson

Stephen Nielson, Group Product Manager

  • 30 Posts
  • 15 Reply Likes
Thank you Marc for the great example and extra information. I think we have enough information for Chris and I to discuss offline.

Thanks again for taking the time to explain this.
Photo of Marc Edwards

Marc Edwards

  • 130 Posts
  • 21 Reply Likes
Not a problem at all. Thanks for listening.
Photo of Bradee Evans

Bradee Evans, Product Designer

  • 7 Posts
  • 2 Reply Likes
Yay! Thanks again!
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 830 Reply Likes
Official Response
This is implemented in Photoshop CC 2014, just enable dithering for the gradient.
Photo of Marc Edwards

Marc Edwards

  • 130 Posts
  • 21 Reply Likes
Thank you! Really appreciate it.
Photo of Elliot Jackson

Elliot Jackson

  • 4 Posts
  • 0 Reply Likes
Awesome!
Photo of Ken Robinson

Ken Robinson

  • 1 Post
  • 0 Reply Likes
Sorry to say that we are still getting banding even with dithering on... CC14 plus brand new iMac... very, very disappointed!
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 830 Reply Likes
Then the banding is not due to transparency or dithering, and is most likely due to the limitations of 8 bit images, or 8 bit displays.

As with all banding in smooth gradations: adding a small amount of noise will make it look smoother (by breaking up the edges due to quantization).
Photo of Stephen Nielson

Stephen Nielson, Group Product Manager

  • 30 Posts
  • 15 Reply Likes
Hi Ken,

Sorry you are having trouble. Can you post an example of what you are seeing? I just tried Marc's steps above and I can see the transparency dithering correctly generated in Ps CC 2014. If you can post an example of what you are seeing (perhaps Posterized), that would help a lot.
Photo of Marc Edwards

Marc Edwards

  • 130 Posts
  • 21 Reply Likes
Hi Ken, the alpha dithering has been implemented and is in the latest version of Photoshop CC. Maybe something else is causing the banding you're seeing? I'm happy to take a look at some images and/or a PSD if you'd like.
Photo of Babak Bostan

Babak Bostan

  • 1 Post
  • 0 Reply Likes
Still getting banding for alpha gradient even with dithering using CC15 on Mac. Looks like Adobe is out of love for Mac.
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 830 Reply Likes
No, the same change in there for both platforms.

How are you creating your gradients?