Why becomes a PNG graphic distorted when exported by Designer V2.0.3?

[Bad_Wolf]

Hi all,

Please can you help me with the following problem. I have a Designer v2 file which contains graphics  for a game in a 48x48 pixel format and 72dpi.

Now I export each individual graphic as PNG. In the preview I get a very distorted image which is a preview of the PNG. Also in Fatstone Image Viewer, the PNG graphic get quickly distorted.

Anybody an idea why this graphic is distorted? I include  the graphic together with this thread. Even in this preview, the image is not clear. It is clear in Designer V2.

I will appreciate your help and comments so much. Thank you in advance.

Chris

 

 

[GarryP]

Can you explain what you mean by “not clear” and “distorted”?
It looks okay to me for a 48×48-pixel bitmap, but I don’t know what it’s supposed to look like.

It’s difficult to see the difference between two things when we can only see one of the things.
Can you give us the original document so we can see the differences for ourselves?

[Alfred]

1 hour ago, Bad_Wolf said:

graphics  for a game in a 48x48 pixel format and 72dpi

If it’s graphics for a game it’s presumably 48x48 pixels on screen, so where does 72dpi come into it?

 

[Bad_Wolf]

Hi GarryP and Alfred,

Indeed, when I look the included PNG file, it looks good to me. The 72 dpi comes from the Document Setup dialog, shown in the included files below.

I also included a screencapture of the export dialog. There you can see that the graphic is distorted.

The graphic is indeed for a game with a gridsize of 48x48 pixels. Included the original Designer file also so you can check where I get wrong.

I do appreciate your help so much. Thank you in advance.

Chris

BOB_Board.afdesign

[GarryP]

Thanks for the extra information and the document.
I still don’t know what you mean by “distorted”.
I can see that the exported area is larger than I would have expected, and I can see that the image is pixelated as expected, but I’m not seeing anything that I would call ‘distortion’.

I’m looking at the layer in Designer’s Pixel View Mode side-by-side with your screenshot and they’re pretty close.
The colours look a bit different but that could be due to various things.
If you go to Pixel View Mode and move the layer about you will see it change slightly as the curves move across pixel boundaries but that’s expected too.

[h_d]

By 'distorted', do you mean that the edges are anti-aliased (ie slightly jagged and blurred) in the export dialog?

If so, it's hardly surprising. PNG is a raster format and what you're seeing is massively enlarged. If I export the icon as a .png, open in Affinity Photo and then place a white background behind it, there is little or no anti-aliasing when viewed at its true size:

 

[Pšenda]

3 hours ago, Bad_Wolf said:

It is clear in Designer V2.

It is vector? Shape with arrow and dot on the end? Try Pixel mode view. 

[NotMyFault]

Maybe the usual causes:

• position misaligned
• Object is rotated, so bounding box does not match layer orientation 

To get a better result, I would recreate the shape using the donut tool, and position pixel-aligned to achieve better edges / anti-aliasing

 

[Bad_Wolf]

Thank you all for your replies which I do appreciate.

Indeed, with "distorted" I mean those jagged and blurred edges like a bitmap which is upscaled.

The size in the "preview" section of the "Export" dialog box, is indeed almost 3 times as much as the true size. Inside the Affinity document, everything looks perfect. The game raster (movement grid) is 48x48, so everyhting is drawn in 1:1 actual size. As long as nothing is upscaled everything looks fine.

However, I think I am gonna create a new document and redraw everything again. The document is started almost more then two years ago. So maybe it is better to redraw in the v2 version.

Thank you all again for your help, of which I learned new things.

Chris

 

[R C-R]

2 hours ago, Bad_Wolf said:

The size in the "preview" section of the "Export" dialog box, is indeed almost 3 times as much as the true size.

At the top of the Export window in your second screenshot above it looks like you are previewing at over seven times (747%) its actual size, much more than 3 times its export size.

At that magnification you will always see the antialiased edges for any raster format export where the whole shape cannot accurately be created from pixels of a single color.

[Bad_Wolf]

Thank you R C-R for your observation. At first I could not understand were you got that 747% view of. However, I get that preview magnification when I change "Area" from "Whole Document" to "Selection Only".

It is only the preview which is pixelated, the final output is ok.

Chris

[R C-R]

3 hours ago, Bad_Wolf said:

At first I could not understand were you got that 747% view of. However, I get that preview magnification when I change "Area" from "Whole Document" to "Selection Only".

You can also change the preview size using the keyboard shortcuts shown on the View > Zoom menu like to zoom in or out even though they are greyed out on that menu.