Designer export to PNG pixelated

[_SteveC]

Hello,

When I export a vector file (text converted to outlines) from Designer to PNG, the resulting image is severely pixelated around the edges. My original file is about 3875px x 2400px (landscape). 

When I export a PNG file set up to the exact same specs in Adobe Illustrator, the result is crisp with sharp edges. There is a bit of pixelation on the Illustrator-made PNG as expected with a raster file, but it's nearly imperceptible without zooming in very close. This is not the case with the Affinity Designer-made PNG, which is basically unusable.

I should also mention that the PNG will be used for direct-to-garment printing.

Any advice would be greatly appreciated.

Thanks!

Edited December 20, 2022 by _SteveC
adding more details

[_SteveC]

EDIT: I just opened the file in Affinity Designer (3873 x 2407px) and changed the units to inches and Designer shows the file size as 6.455" x 4.012". However when I open the same sized file in Adobe Illustrator (3873 x 2400px) and change the units to inches, Illustrator lists the file dimensions as 52.7017" x 33.4306". I'm guessing this may be why the Designer file appears fuzzy when exported to PNG and the Illustrator file does not when viewed at the same screen size in Photoshop. 

Is there a reason why Affinity Designer is interpreting the pixel sizes differently from Illustrator? I'm stumped.

[Ron P.]

Welcome to the forums @_SteveC, sorry for the response delay.

Compare the DPI for each. I think that's where the difference is. Designer is 300 where PS is problem around 72dpi.

In Designer press the Document Setup button, and play with the different settings of Pixels vs Inches, using the different DPI settings. You'll see the size/resolution changes.

[lww]

Man, I'm really having trouble seeing how this product is supposed to be a competitive alternative to the Adobe Creative Suite for web designers if there is no easy way to export vector files as web-friendly PNGs without ruining the appearance of text. All of this talk of DPI and resolution shouldn't be necessary for a simple, default web export. I have been messing around with a simple .ai logo with a few words of text in Affinity Designer 2 for hours now and can't get a clean, usable PNG export. 

I'm getting better results using Affinity to open the .ai file and export as .svg and then using freakin' Inkscape to export to a .png. That's enormously disappointing!

[Komatös]

Hello @lww

Could you provide us with this .ai file here? So we can see if it might be the source file.

With the Adobe file formats there is the problem that, for example, some layer effects and other things are stored in a proprietary file area that cannot be read by third parties. Therefore, the end result may look different with Affinity Suite programs than with Adobe's programs.

[bryanhughes]

Sorry opening this back up, but I am suffering the same issue. It is 2025. I have attached the artboard and export screen. This is an .afdesign file. I confirmed the it is at 300 DPI.

[Hangman]

Hi @bryanhughes and welcome to the forums,

The exported file is only 17.44 mm x 5.25 mm in size so it will inevitably appear pixelated...

How is the logo intended to be used, for web, print or something else?

[bryanhughes]

It is to be used on an email signature. How is it that Adobe Illustrator does not have this problem? I hate Adobe.

[Ldina]

@bryanhughes Suggest you upload your Designer file, so people can take a look in greater detail. But, as @Hangman mentioned, this is a VERY small image with small pixel dimensions, and PNG will convert it to pixels, so it's bound to look pixelated if not viewed at a small size. Still, there may be a few things in your file that an inspection might reveal to help.

[Medical Officer Bones]

A general tip: I found Illustrator's and Affinity's direct export to small sized bitmaps to be acceptable, but not that great.

Instead: export to a 4 to 6 times increased resolution version, and scale down that version to the required lower resolution. Before you do this you have the option to sharpen the higher resolution version a tad, and that will generally improve the smaller version's edges somewhat.

By far the best method is to use a rsampling algorithm that is strong in maintaining contrast while scaling down images. My experiments and experience tell me that CatmulRom is generally the best candidate to tackle this final down-sampling step. This is also supported by independent research on the matter.**

Unfortunately most image editors do not support this algorithm. Certainly not Adobe, which is stuck in the past with its file formats and core code. Squoosh, PhotoLine, PixInsight, COlorQuantizer - those do support CatmulRom and other resampling methods (such as Mitchell).

If the best quality is required for this type of work, the only path is to use one of these tools.

**https://pixinsight.com/doc/docs/InterpolationAlgorithms/InterpolationAlgorithms.html

[lacerto]

The variables involved in vector to raster export (e.g. PNG) can be so huge that there is no general optimal method to be used, but it certainly helps if an app offers some options, beyond just generic antialiasing and antialiasing turned off. I tried this rather extreme rasterization from vectors to 200px PNG using Affinity Designer and Illustrator, and got this:

a) Vector design:

b) Exported as transparent PNGs from Designer and Illustrator (viewed at 100% zoom level):

Personally I like the legacy art-optimized (supersampled) Illustrator export the best, but supersampling easily produces a bit too smooth (strong) antialiasing. Illustrator also produces better non-antialiased rendering. This is intentionally a bit of an "impossible" job, but it demonstrates that Illustrator does a better job making a distinction between different line widths in the original art and ensuring that even the thinnest line gets rendered, and by offering art and type optimized antialiasing options. Thin lines in practice vanish within Affinity rasterizations. 

Personal experiences and needs naturally vary but for me the age old formats and rasterization methods have worked well up to this date. When it gets too difficult, I rasterize in big size and then resample to final size qualitatively using algorithms which are available for me in apps that I already have and which have never failed in producing what is needed.

UPDATE: I noticed that VectorStyler supports a number of different rasterization/antialiasing algorithms, and ran a short test:

VectorStyler implementation is far from perfect (e.g. selected objects are not processed fully but clipped a bit at edges, and this specific test with text did not work properly with transparent background, and is not performing optimally with text with any of the provided algorithms), but a couple of them were promising and might work well with certain kinds of tasks. Options are good to have, but quantity does not replace quality.