Jump to content
You must now use your email address to sign in [click for more info] ×

Affinity Designer: Pixelated PNG export


Recommended Posts

Hi Everyone,

Can you please help me with pixelated export PNG/SVG images? I included the files here together with this post.

These are graphics for import as sprites in Construct 3, a game development environment. On the screen in Designer (v2.2.1) for Windows, everything looks good. Once exported, the export is pixelated.

I tried everything I knew of, but nothing worked.

I can remember in the past, I posted the same question and received a result. However, I cannot find that post anymore.

I would appreciate your help, and thank you in advance.

Kind Regards,

Chris

imgBlue.png

imgRed.png

PNG_Pixelated_Problem.afdesign

Link to comment
Share on other sites

The dots are only 20px wide, so naturally you will see those pixels when you export as raster / bitmap format.

You can use the view modes (vector, pixel etc) and even dual view mode to inspect how the file would look when exported.

you need to increase resolution or export as vector format to improve. 

IMG_0852.png

Mac mini M1 A2348

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

Link to comment
Share on other sites

Thank you so much for your reply, NotMyFault, I appreciate it.

I checked the resolution, and it is 300 dpi. The graphics are for a game and have to be 20 pixels wide.

I did not know you could check the export before really exporting. So, I learned something new.

I raised the resolution to 400, 1200, but the image keeps pixelated. In fact, whatever I do, everything remains pixelated.

I wish you a great day.

Kind Regards,

Chris

Link to comment
Share on other sites

Considering that your end product is a sprite, it may well be that what you need is to have a non-antialiased bitmap, rather than anti-aliased. If so, you can turn off antialiasing for bitmap exports by using the Layer Blend options (accessed by clicking the Cog icon at the top of the Layers panel).

antialiasing_turned_off.thumb.png.2f48444352cf0b42499be9fa1e785e2b.png'

Above the View mode is changed to Pixels (Retina) to see the effect already on canvas. Instead of just forcing antiallasing off, you can use the Coverage Map to have effect on how exactly the object will be rendered (considering whether an edge pixel will be turned on or off), but in your case forcing off is probably what is needed.

Link to comment
Share on other sites

When it comes to the screen, forget about dpi. dpi is important for printing. For the screen, the pixel dimension is important.

If you have a 20×20 px image, changing the dpi on the screen doesn't change the size of the image on the screen.

The pixel size on the screen is determined by the hardware.

When printing, the fineness of the print can be affected by the dpi of the printer. A larger dpi value will make the print finer. The digital object (given the pixel size) will then print smaller.

Link to comment
Share on other sites

Thank you, Lacerto and Bures,

I tried forcing anti-aliasing, even forcing it on, but it had no positive effect. The result remains the same. Even an SVG export, which should be vector, is pixelated. Even with a document and export resolution of 300 dpi, the result is terrible.

I tried it on another laptop, but the result was poor. The zoom factor is 100%, so it is not magnified. Even when I import it into C3, the pixels are visible.

I did a little bit more research without mentioning Affinity Designer in the search string and found out that it is a Google Chrome bug. Because the images are too small (20 px), Google Chrome renders them poorly. In Firefox, those 20 px images render fine. Chrome requires a minimum of 24 px; otherwise, everything gets pixelated.

Thank you all for your replies, which are highly appreciated.

I wish you all a great day!

Chris

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.