Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Posts

Total inexperienced guy here, so apologies if this is obvious. If I create a design in Designer with a gradient, I get what I think is called 'banding' when I export it as a PNG file (i.e. where I can see almost 'stripes' where the colour changes with the gradient).

Is there a way to stop this? I've attached a sample file - when I export that as a PNG the banding is clear (especially if I view the PNG on my iPhone).

Sample.afdesign

Link to comment
Share on other sites

43 minutes ago, Matt James said:

I get what I think is called 'banding' when I export it as a PNG file (i.e. where I can see almost 'stripes' where the colour changes with the gradient).

When I export as 24-bit PNG, open it in Photo and view it at Pixel Size zoom factor, it looks exactly the same as your original document also viewed at Pixel Size zoom factor.
So, to tell you what may have happened, you may want to attach the PNG as well.

But in general: zoom factor matters. Artifacts or banding can be the result of your computer display attempting to antialias and compensate for non-integer zoom factors.

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

11 minutes ago, loukash said:

When I export as 24-bit PNG, open it in Photo and view it at Pixel Size zoom factor, it looks exactly the same as your original document also viewed at Pixel Size zoom factor.
So, to tell you what may have happened, you may want to attach the PNG as well.

But in general: zoom factor matters. Artifacts or banding can be the result of your computer display attempting to antialias and compensate for non-integer zoom factors.

Ah OK, so apologies for the stupid question, but am I interpreting that correctly as meaning I'd need to make the document the same size as the screen it's being viewed on to avoid seeing banding?

Link to comment
Share on other sites

Well, the display resolution vs the zoom factor will definitely affect what you're seeing when it comes to such subtle nuances.

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

  • 3 months later...

In Designer you may want to try this as well: Go to File - Document Setup.... Click the colour tab in the dialog box. In Colour Format select RGB/16 or LAB/16. Click OK.

Also in the Document Setup... I set the DPI in the Dimensions tab to 400, even though some claim this does not help (because I'm a stubborn type probably).

Best of luck.

Home: https://vectorwhiz.com  : : : :  Portfolio blog: https://communicats.blogspot.com

Link to comment
Share on other sites

28 minutes ago, VectorWhiz said:

In Designer you may want to try this as well: Go to File - Document Setup.... Click the colour tab in the dialog box. In Colour Format select RGB/16 or LAB/16. Click OK.

Also in the Document Setup... I set the DPI in the Dimensions tab to 400, even though some claim this does not help (because I'm a stubborn type probably).

Best of luck.

Thanks for that, it was on RBG/8 so will change to /16. Does colour profile matter much? It's currently set to sRGB IEC61966-2.1.

DPI was currently lower I think, so will change to 400. 

Link to comment
Share on other sites

8 hours ago, BofG said:

The higher the bit depth the more colours you have, so the graduations can be finer.

Absolutely true in principle, but beware using RGB/32 as this uses linear color profiles and introduces lots of unnecessary complications. /16  is all you need and enough to get butter smooth gradients.

Another unfortunate complication comes from Affinity: it could imply forced dithering of gradients with inadequate 8 bit methods, at least until 1.9.x.

 

Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

My posts focus on technical aspects and leave out most of social grease like „maybe“, „in my opinion“, „I might be wrong“ etc. just add copy/paste all these softeners from this signature to make reading more comfortable for you. Otherwise I’m a fine person which respects you and everyone and wants to be respected.

 

Link to comment
Share on other sites

  • 1 month later...
On 4/21/2021 at 2:54 AM, Matt James said:

If I create a design in Designer with a gradient, I get what I think is called 'banding' when I export it as a PNG file (i.e. where I can see almost 'stripes' where the colour changes with the gradient).

Is there a way to stop this? I've attached a sample file - when I export that as a PNG the banding is clear (especially if I view the PNG on my iPhone).

I'm seeing significant banding in your sample file (which is reported as 16-bit DCI-P3) when opened in Affinity Designer on an sRGB display, but not when exported to PNG and opened in a photo viewer. I have high quality display settings enabled in Affinity, and my desktop is running in 10-bit.

Which is interesting, because I am trying to solve a problem where a gradient I created in Affinity is banded during editing and after export, but gradients imported from SVG files created by others are not.

So, playing with your file has led to an interesting discovery that might shed light on my problem. Your 16-bit document exports as 48-bit PNG, but mine exports as 64-bit PNG, unless I export with the vector object that has the gradient overlay visible, in which case I end up with a 32-bit PNG. Yet both documents are 16-bit to begin with, and export settings seem to be the same in all cases. However, mine has a transparent background and yours does not, so only the 32-bit output case is surprising. But the 64-bit/48-bit difference primed me to spot that I was unexpectedly exporting the gradient overlay vector as 32-bit, which was something I missed before.

But now I am thinking the gradient that has given me trouble is somehow stuck in 8-bit regardless of the document it is embedded in. I accidentally started that object off in an 8-bit document, so perhaps I need to recreate the gradient FX in 16-bit (rather than copy-paste the vector into a 16-bit document, or convert the source document to 16-bit).

And sure enough, that did make a difference. It now exports as 64-bit rather than 32-bit. It still has subtle banding not seen in an imported SVG of the same image (which I was recreating for practice as part of my learning curve), which is still a bit odd, but it has improved.

But there seems to be something odd going on, such as vector objects somehow being partially baked as the bit-depth they were created in and not being upgraded to higher bit depths when copy-pasted or documents are set to new parameters.

I'll have to have more of a play when I have had some sleep. It is late and I could be making silly mistakes.

BTW I just realized the banding in your document might be a color-management issue, and I have a monitor that actually covers DCI, so switching monitor mode to DCI and relaunching Affinity to pick up the new monitor profile, your sample document is displaying without banding in Affinity. However, it also displays without banding after I switch back to sRGB mode(!), so now I have another problem to track down! I might take a break from this until I either restore my system from a backup image (to amend that backup image with latest video drivers and various updates, etc), and see if that fixes any glitches that may have developed, or perhaps get cracking on rebuilding the system with Windows 11, as that comes out tomorrow.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.