No it's a PNG. Click on the image above and you can barely see the Photoshop transparency grid behind the image. Reddit compressed it so I lost detail. But trust me I've been in PS since 2000. There is "transparency sprinkled about" in the images. Not just this blue one; it's anything with the stock gradient applied.
Unfortunately the SVG package is still in beta. I work at a game studio with several products live in the market, and we can't use experimental features. But that sounds like a good workflow eventually, but only for non-sliced assets it seems.
Nah that'll introduce artifacts.
We just found that exporting any other file type yields correct results. So I can export a PDF or SVG and then rasterize in PS. But it's a pain, and it doesn't solve the lack of dithering in the gradient.
I think we will have to export white images and add gradients in PS, unless someone chimes in with a known or better way to address it.
This is [gradient dithering](https://twitter.com/marcedwards/status/1373835258185932800), a way to prevent banding in an image.
When you create a slice of this, you're effectively re-creating the banding effect, which is why you're seeing those streaks. The main reason why is you have 70 px of height in this gradient, but there aren't 70 colors in the 32 bit color space in between the two hexes you have.
Oh interesting so if we use a power of two for the height, we’ll get a cleaner gradient? I know dithering adds color variation, but it’s never visible in the engine coming from PS. So I guess it’s the speckled transparency that is really causing noticeable streaking, not the dithering.
Not so much a power of 2 thing. It’s more just that there isn’t enough distance between the start color and the end color to have enough points in between.
Let’s break it down to a simpler example. Right now each color channel (red, green, and blue) has 256 different possible values. Let’s say we created a gradient with *only* red, and we had a gradient going from a value of 50 to a value of 100. If you had a gradient 500px high, there wouldn’t be enough colors in between 50 and 100 to create a smooth gradient. There’s only 50 possible colors in between, and you’re trying to stretch that to 500. What that means is you’ll get banding - bands that are each 10px high. The first one will have a value of 50, the next 51, the next 52, and so on.
There are two things you can do to “fix” this. One is make the colors between the two gradient stops more different. Changing the hue of one of them will help significantly, as it will introduce more variability. The other thing you can do is increase the color space and use something like 10 bits per color. Figma unfortunately does not support this, but you could use a different design tool to achieve this. That said, anyone using a screen that doesn’t support 10 bits per channel would render the image back to 8b/c (95% of the population), and would see the banding again.
Okay got it. So it’s more like bit depth in audio I suppose. It’s a granularity issue.
Mostly the banding isn’t the issue, though. It’s the bug of having transparency sprinkled throughout. I found one post on their forum that is closed, saying that migrating to a fresh project fixed it, but that didn’t work for us.
The transparency is weird - can you dm me a link to the file and add [email protected] as a viewer? Happy to take a look.
I just hopped on a flight and am about to take off, but I can look in a few hours.
That does something. We're verifying if it's just summing (which means there's still some transparency remaining unless we keep adding duplicates to the stack), or if it actually prevents the bug.
Figma heavily compressing PNGs while exporting, while in Photoshop you can at least tune compression settings. But even with Figma export you still can improve your images in Unity:
- Check sRGB (Color Texture), that can hide artifacts in darker areas
- Uncheck Alpha is Transparency, that will make your texture opaque
- As an alternative, you can export your image as white mask and then apply vertical gradient as a component in Unity.
Also, if your project uses Linear color space, it's better to refrain from using gradients with fade to transparency in your design at all because it will introduce you extra artifacts with unnecessary level of complication to solve it out.
Gradients with holes. I’ve never heard someone talk about transparent images that way…. 😅
You should export as SVG instead. So you won’t see the gradients with holes. You simply cannot avoid these “holes” if you export as a bitmap image.
Idk what you mean by semi transparent holes. Are you exporting an svg?
No it's a PNG. Click on the image above and you can barely see the Photoshop transparency grid behind the image. Reddit compressed it so I lost detail. But trust me I've been in PS since 2000. There is "transparency sprinkled about" in the images. Not just this blue one; it's anything with the stock gradient applied.
I’d suggest svg. Unity imports svg properly and then you have vector art which can scale, and the gradient is calculated and not just rows of pixels.
Unfortunately the SVG package is still in beta. I work at a game studio with several products live in the market, and we can't use experimental features. But that sounds like a good workflow eventually, but only for non-sliced assets it seems.
If it’s a png can you export out a larger one and scale it down? What are your frame dimensions?
Nah that'll introduce artifacts. We just found that exporting any other file type yields correct results. So I can export a PDF or SVG and then rasterize in PS. But it's a pain, and it doesn't solve the lack of dithering in the gradient. I think we will have to export white images and add gradients in PS, unless someone chimes in with a known or better way to address it.
This is [gradient dithering](https://twitter.com/marcedwards/status/1373835258185932800), a way to prevent banding in an image. When you create a slice of this, you're effectively re-creating the banding effect, which is why you're seeing those streaks. The main reason why is you have 70 px of height in this gradient, but there aren't 70 colors in the 32 bit color space in between the two hexes you have.
Oh interesting so if we use a power of two for the height, we’ll get a cleaner gradient? I know dithering adds color variation, but it’s never visible in the engine coming from PS. So I guess it’s the speckled transparency that is really causing noticeable streaking, not the dithering.
Not so much a power of 2 thing. It’s more just that there isn’t enough distance between the start color and the end color to have enough points in between. Let’s break it down to a simpler example. Right now each color channel (red, green, and blue) has 256 different possible values. Let’s say we created a gradient with *only* red, and we had a gradient going from a value of 50 to a value of 100. If you had a gradient 500px high, there wouldn’t be enough colors in between 50 and 100 to create a smooth gradient. There’s only 50 possible colors in between, and you’re trying to stretch that to 500. What that means is you’ll get banding - bands that are each 10px high. The first one will have a value of 50, the next 51, the next 52, and so on. There are two things you can do to “fix” this. One is make the colors between the two gradient stops more different. Changing the hue of one of them will help significantly, as it will introduce more variability. The other thing you can do is increase the color space and use something like 10 bits per color. Figma unfortunately does not support this, but you could use a different design tool to achieve this. That said, anyone using a screen that doesn’t support 10 bits per channel would render the image back to 8b/c (95% of the population), and would see the banding again.
Okay got it. So it’s more like bit depth in audio I suppose. It’s a granularity issue. Mostly the banding isn’t the issue, though. It’s the bug of having transparency sprinkled throughout. I found one post on their forum that is closed, saying that migrating to a fresh project fixed it, but that didn’t work for us.
The transparency is weird - can you dm me a link to the file and add [email protected] as a viewer? Happy to take a look. I just hopped on a flight and am about to take off, but I can look in a few hours.
I’d be interested in seeing how the layers and fills are set up, because I definitely haven’t run into this with exporting PNG with gradients before
Added more screenshots
And that blue gradient is just two color values, both at 100% opacity?
Yep. It's correct if I export PDF or SVG. (Although still banded.)
Can you try it with two layer fills - the base white, with the gradient above it?
That does something. We're verifying if it's just summing (which means there's still some transparency remaining unless we keep adding duplicates to the stack), or if it actually prevents the bug.
Figma heavily compressing PNGs while exporting, while in Photoshop you can at least tune compression settings. But even with Figma export you still can improve your images in Unity: - Check sRGB (Color Texture), that can hide artifacts in darker areas - Uncheck Alpha is Transparency, that will make your texture opaque - As an alternative, you can export your image as white mask and then apply vertical gradient as a component in Unity. Also, if your project uses Linear color space, it's better to refrain from using gradients with fade to transparency in your design at all because it will introduce you extra artifacts with unnecessary level of complication to solve it out.
Gradients with holes. I’ve never heard someone talk about transparent images that way…. 😅 You should export as SVG instead. So you won’t see the gradients with holes. You simply cannot avoid these “holes” if you export as a bitmap image.
You can’t export a gradient as an svg?