[Design]- Banding in Exported Gradient Asset

[Arohanui2012]

I'm getting a lot of banding in assets that were created in XD for use on the web with gradients. I've tried exporting them every way I can think of - PNG, JPG, PDF, adding to assets panel and exporting for development, they all come out with very noticable banding which can be seen on the final website. See attached in sky and foreground elements.

My solution has been to export the asset as an SVG, open it in illustrator and replace the gradients one by one which is, well...duplicate work, time consuming and not ideal. I'm questioning whether I can ever create another gradient in XD and if that's the case, I might as well create everything in AI then import - and if THAT's the case, then XD is becoming less useful....

{Renamed By MOD}

[Rishabh_Tiwari]

Hi there,

Thanks for reaching out. Adobe XD is yet not color-managed, it should be using SRGB throughout. I'd request if you can check if your monitor is configured correctly to display SRGB correctly? I'd also request if you can share your comments and upvote this request here: https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/17480899-color-man...

This is the best way of communicating with the Engineering and Product Management teams regarding issues and suggestions so they can be implemented in future releases. 

Regards

Rishabh

[Peter Villevoye]

From my judgement, the very subtle gradients you're trying to achieve are hard to retain in a JPEG, because it's using a lossy compression. So at any quality beneath 100%, its bandwidth and color nuances are being restricted, and details are being synthetically generated in matrices of 8 x 8 pixels, in order to get a smaller filesize. However, I discovered that the "100%" JPEG from the Export Batch command is certainly NOT truly 100% !! When I save a similar gradient from Photoshop (without using dithering*) at 100%, it's much better than the one from Adobe XD. That's a flaw !

* Note: both Illustrator and Photoshop are capable of using dithered gradients, i.e. they optionally add a light amount of noise in the gradient (Illustrator on-screen and Photoshop in the pixels), to visually 'disturb' those apparent banding lines. PostScript (and PDF) also improve gradients in this way, but Adobe XD (and the web, and app frameworks) probably don't care about it, yet...

The PNG version should behave well (it uses losless compression), and it does. It's being exported with 8 bits per (RGB) channel, which is enough for rendering appealing gradients. If you see any banding, then this might also be caused by your screen. I gauged the exported PNG in Photoshop and noticed a slightly different RGB value for each pixel, so the correct data is in there !

There's no use in showing any detailed image here in my post, because the forum would severly compress the image anyway. But to get the gist, this is the link to my Preview, which might also be compromised in viewing quality.

Now there might be another effect causing banding: Blend Modes. In the second artboard of my preview, you can see how a Color Overlay Blend Mode (one large green rectangle) is suffering from clipped color gradations. Did you use any of them ?

[Arohanui2012]

Thanks for your reply Peter, I'm sorry I didn't see it. I'll go back and see if I used any blend modes and take your other suggestions as well and try to report back.

Thanks,

Steve

[Dan Rodney]

How are you using the graphic? If it's a website, can you use the SVG file (it would be peferred for vectors on the web)?

[Arohanui2012]

Sorry for the late reply, the graphic was being used in a third party LMS system. They only allow jpgs to be uploaded.

The stakeholders have since changed their approach and are no longer using this image as they think it looked too illustrated.

Thanks,

Steve