Exported vector graphic is pixelated

[Guest adesign16]

I exported my vector design in Affinity Designer as a PNG file, and the graphic is pixelated. How can I resolve this issue? This is intended for web display. 

 

Also, when I tried to edit this in Affinity Photo using the "Edit in Photo" feature, the graphic displayed as pixelated too. How can this issue be resolved as well?

[MEB]

Hello adesign16,

Welcome to Affinity Forums :)

Have you changed the Resample dropdown in the Export dialog to a better algorithm? If not change it to Bicubic or Lanczos 3.

[Guest adesign16]

Thank you for your suggestions! I made that tweak in both the Document Setup and before exporting it and it seems to work for JPEG (though still slightly pixelated) but not for PNG (I get a series of black dots on my graphic). The dimensions are 180 px by 180 px. Could it be slightly pixelated on the JPEG file due to the fact that it's a raster conversion? It's slightly pixelated when I open it up and view it at it's actual size and obviously very pixelated when I zoom in. I hope it's possible to get a clean export.   

[PixelPest]

I´m under the impression you didn´t get the difference about raster&vector graphics yet.  ;)

 

Cheers

P.

[MEB]

Hi adesign16,

Seems you are saving your work to a very small size (180x180 pixels for web eventually). If the document you created in Affinity is much larger than this size (and detailed) it's expected you lose some quality/sharpness because there's not enough pixels on the output image to represent all the details you have created in the original document. Both JPG and PNG are raster formats so your work will be rasterised in both cases.

I'm not sure what you mean by black dots when you save to PNG. Can you upload the exported images to somewhere so we can take a look?

 

The quality of the exported image depends on the algorithm used to downsample the image (Bicubic and Lanczos are the most efficient in most circumstances), the format you have chosen to save it (JPG uses lossy compression which means there always some quality loss when you save in this format for example), and if your object/layers are pixel aligned or not with the pixel grid (this is particularly important for small images like icons and logos for webpages and small text).

[Guest adesign16]

Yes, it has to be saved to that size since it's going to be a Facebook page profile picture. The document is the same size too. If I make the original document larger than 180 px by 180 px and I export it to 180 px by 180 px (JPG or PNG), would I achieve a better result?

 

I definitely understand why some of the image quality is lost when the design is exported to either JPG or PNG, given that they are both raster formats. Thanks for expounding on all of that as well.

[MEB]

 If I make the original document larger than 180 px by 180 px and I export it to 180 px by 180 px (JPG or PNG), would I achieve a better result?

 

Not necessarily. This depends a little on the type of image/profile picture you are working with. Is it a vector based image like a logo? Does it have small text or no text at all? It's a photographic image?

For photographic images, working with a bigger document and then downsampling (exporting to a smaller size) may help (choose an appropriate algorithm like Bicubic or Lanczos on export). For a logo with small text, working at the same size, pixel aligning all elements may give you better results.

[Guest adesign16]

Thanks for clarifying. It's vector-based since it's a logo.

[MEB]

In that case make sure all elements/objects are pixel aligned. To help you visualise this you can change your View Mode to Pixel View or Retina Pixel View (menu View ▸ View Mode, or use the icons on the main toolbar on the top of the interface). You can also enable Force Pixel Alignment (you may have to adjust previously created elements/objects - new ones will be pixel aligned on creation after enabling this option). To do it go to menu View ▸ Snapping Manager... and check Force Pixel Alignment.

[Guest adesign16]

This is exactly what I was looking for. Thanks so much for your help!