Odd jagged rendering of smooth shape (AFD)

[worriedpixels]

I created a simple dark-grey rounded rectangle today as part of a backpack icon. The top L and R are rounded to 50% each, forming a semicircle. It should be smooth, but it appears to have odd stepping or small peaks. This is visible in AFD and in exported PNGs. It's a little hard to see, but the top of the rounded rectangle is not smooth on either side. Is there anything I can do to improve this? I've been working with ADF for a few months now and not spotted anything like this before. Why is my rounded rectangle rendered poorly? Thank you.

Edit: If I replace the rounded rectangle with a circle of the same width and same position, is also renders poorly in the same way.

[GarryP]

Is the example image of the size you want to have as the result, or is it just a small screen-grab?

My guess is that this is just an artifact of the anti-aliasing which just happens to make it look like this in this specific case.

You could try changing the Blend Options of the layer which relates to the larger rounded dark grey rectangle to see of you can get a better result.

Or you could try changing the rounding by a tiny amount.

[worriedpixels]

The screenshot is 100% size. It's not shrunk or enlarged for the forum. As mentioned, the exported PNG has the same issue. Changing the rounding doesn't work unfortunately.

[carl123]

Can you upload an Affinity document, with that icon in it, to the forum?

It's too small to see what is happening

 

[worriedpixels]

Sure. It's called inventory_ui. Edit: when you zoom into it it will looks smoother, though.

inventory_ui.afdesign

[GarryP]

I think you might just be a bit unlucky with how the anti-aliasing works in this case.

You could try changing the Coverage Map as in my attached image but I think this might take a bit of experimentation to get something much better.

[worriedpixels]

Doesn't seem to be helping, but thank you. I noticed that if I draw the same shape, same size, in a newly created document it is smooth. But if I copy that new shape into the backpack document it becomes jagged. I have already created the backpacks from-scratch twice due to this issue. I think I'll have to live with it.

[GarryP]

The only other thing I can suggest at the moment is to reduce the size of the rounded rectangle and then give it a stroke (centre-aligned) of an appropriate width to bring it back to the shape you had to start with.

This would mean that the outline is drawn using a different ‘shape’ (the stroke), which might make a difference, but I can’t say if will work better.

[worriedpixels]

Thank you for the suggestion. I tried that already and had no luck (it's quite reassuring that I think of the same things as the helpful folk here 😊). But I did manage to improve it a touch by switching the rounding to absolute, rather than percent, and reducing it down by 1 pixel. The result has strayed into 'good enough' territory. And I really don't want to go back to Adobe because I can't get a smooth rounded rectangle in this one case. I stubbornly refuse.

[lepr]

5 hours ago, worriedpixels said:

It should be smooth, but it appears to have odd stepping or small peaks. This is visible in AFD and in exported PNGs.

 

Try supersampling: export the vector design to a 4x scale PNG, then open that PNG and re-export at 0.25x scale with 'Bicubic' or 'Lanczos 3 (separable)' resampling.

 

The 4x scale export:

 

Bicubic reduction from 4x to original scale:

 

Lanczos 3 (Seperable) reduction from 4x to original scale:

 

 

[worriedpixels]

That's wonderful, thank you. That did the trick: lovely smooth edge that no longer looks like I used a polygon with lots of sides. And I still have the pixel-sharp sides and bottom that I wanted (white outer), even after a resize back to original size in Photo. Thank you, thank you, thank you!