I'm very confused as to how to fix blurry export from Affinity Designer 2 to PNG.

[PixelTreason]

I'm so sorry, I know it's been asked before but I am just not getting it. : /

 

I want to export the icon I made in Affinity Designer 2 to PNG for use online. It is 29x33 and I've tried all levels of dpi but exporting it to png makes it crazy blurry. When I was using illustrator I didn't have this issue so I know I must be doing something wrong with Affinity.

 

Can anyone tell me what I am supposed to be doing to export this as a clear icon?

Thank you!

Edited May 10, 2023 by PixelTreason

[R C-R]

29 x 33 px is far too small (has too few pixels) for a bitmap (pixel) format like PNG (or JPEG) to create an acceptably sharp image of anything except the most basic rectilinear shapes. 

[PixelTreason]

It is something I never had an issue with in illustrator, though so I'm confused. It's supposed to be 5mm and 8mm sizes, how do other people get theirs to look good, then? There's obviously a way to have it come out recognizable.

[PixelTreason]

Unless it's just because I am looking at it zoomed in... I just opened it as the png itself and it's not the worst, I guess. 

[debraspicher]

For starters, I would adjust your canvas so your icons output to an even number ("30px x 34px" vs "29px x 33px"). Center alignment tends to throw things off grid when working with odd number output sizes. It can't pad the same number of whole pixels of white space on each side, so there will be sub-pixel rendering no matter what when you center the piece. That alone will add crazy amounts of blurring. (Edit: Obviously the piece itself needs to be even number to be evenly distributed)

Make sure your Artboards (if you are using them) are pixel-aligned and are not decimal-ed. Either in their location or their actual size.

Even in AI, I would take the time to hint something this delicate to move certain key nodes to whole pixels whenever feasible, but it's a process. With areas like straight edges, that's easy. If you have a straight edge going up and down, try to nudge the points to be whole pixel and on the same coordinate on the X axis. Not always necessary, but it's helpful.

As for that process: The issue with something this tiny and delicate, it's sometimes necessary to nudge away from whole pixels to ensure clarity to keep the piece itself true to what it is. So maybe .125px ~ .25px nudging (you can change the nudging in your preferences). You want to avoid crazy coordinates for nodes like 300.302px. Try to keep points at 300.25px for example. Delicate shapes don't hint well at small sizes to begin with. There's too much to define with so very few pixels. Unless they are handcrafted at that scale and pixel-snapped and curves modified with best care, it's very easy to run into issues with subpar output. With logos, we take great care for web output to be sure to manually hint those when necessary. Anyway It's worth having a workflow in Photo from Designer for outputting your vectors, with custom export profile, any sharpening treatment you think necessary, then output...

There's a number of threads on this topic. I will attach some here that I can think off off-hand.

Honestly though, try also to create an Export preset, one specifically for icons. Do not use "Bilinear" for your Resample method for sizing down to something so small. Try one of the Lanczos options. I usually use Lanczos 3 Separable, but Non-Separable sharpens a bit more I noticed. Some of your icons may need different treatment. That is OK.

It's also possible to move the document to Photo to make any necessary post-processing for your vectors before you do the export. Because in your case, your icons are delicate, contain quite a few curves and it may not be feasible to hint those accurately.

You can also try to use Coverage Map in Layer>Blend Options to adjust the AA curve itself to be sharper, but for the time being it is broken. Otherwise it would be a helpful tool to many pixel hinting issues. I suspect Adobe has a custom anti-aliasing ramp and that's why their output tends to be better for smaller/high contrast items.

Edit: *attach*:

 

[PixelTreason]

@debraspicher That is incredibly helpful, you're amazing. Thank you SO MUCH! I can't believe how much good info you gave me, and in a way that I can decipher, haha. I really, really, appreciate it!!

[prophet]

I don't do this kind of work much, but I find working with a curve directly in Photo at the desired size lets me see the actual pixels/hinting in real time. I can see where trouble spots are and move/nudge nodes to minimize problems.