PNG export best practices | Affinity Designer

[Saeglopur]

Hi guys!

I've spent some time on logo design, then a whole design book about it - all in Affinity Designer as a part of testing it. Now when I had to finally use it for a webdevelopment and export logo to PNG with transparency I noticed that there's a big distort. Smaller resolutions = bigger problem.

I'm talking about all those outlines which are generated because of layers below. I can hide them for letters and few objects but head and tail of fox are made with many layers which some have to 'move' behind another ones. Everything is aligned perfectly but still always when exporting there is some 'shade' of color from layers below, it's best recognizable with transparency and on black background/preview.

I tried different resampling modes but it changes only a bit. What I'm doing wrong? Never had issues like this in Illustrator or Photoshop. I could prepare 'flat' version where's nothing underneath but it's a lot of work and I mean here work for every project in future where should be original one and prepared for exports. Also many curves would change a lot :/

Are there any 'best practices' for exporting to PNG? What I'm doing wrong?

[Protium Design]

Does that all in 100% zoom preview or?

[MEB]

Hi Saeglopur,

Welcome to Affinity Forums :)

Without seeing the file (layer structure) it's difficult to give you a specific reason for this. There may be a few different causes. If you go to Affinity Designer ▸ Preferences, Performance section, do you have Use precise clipping checked? If not enable it. Are the objects that compose the object pixel aligned (do you have Force Pixel Alignment enabled in the Snapping Manager)? This is particularly important for small sizes but may also lead to antialiasing issues on bigger images. Resampling images (scale them down) also may lead to non-pixel aligned elements which prevents vertical/horizontal lines form appearing sharp. Depending on the size/medium where the image will be used - specially true for small logos for web - you may have to optimise (pixel align wherever possible) those elements.

[Yah-Yah]

I've got same issue. I'm preparing a favicon for my website, it's 16x16px and I made it pixel perfect: all nodes are snapped to the pixel grid etc. It looks crisp and sharp when zoomed out into an Actual Size. Problem is it gets super blurry when exported into png. I enabled Use Precise Clipping as you advised but nothing changed.

[Vikash]

I had the same issue which i tried different way Like exporting the svg or eps file to Ai and then export the smallest size ( favicon ) It was perfect from illustrator export. One thing I noticed the while exporting from illustrator we have options like to use the art broad or not. which format you want to export ( Png in default. ) the DPI so the out put is clear.. Same thing is in affinity designer too.. but little tricky  what i did was to go to document setup  - in dimension setup increase the dpi ( if you won't do that also fine ) while exporting Affinity default PNG format is PNG 8 dithered which i find the problem for small images.. so i selected the PNG  only then exported it it resolved the issue.. Of course  I got this idea by observing illustrator export pattern.