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

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


Recommended Posts

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

 

 

Open_Active.png

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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? :/

 

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.5.1 (iPad 7th gen)

Link to comment
Share on other sites

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

DocumentSetup.png

DistortedGraphic.png

BOB_Board.afdesign

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

 

455252016_Screenshot2022-12-29at15_01_16.png.b5b2957b3a1e2a26708fb83994f91e94.png

Affinity Photo 2.5.3,  Affinity Designer 2.5.3, Affinity Publisher 2.5.3, Mac OSX 14.5, 2018 MacBook Pro 15" Intel.

Link to comment
Share on other sites

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. 

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

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

 

3023C384-706B-4722-9B8C-703540517DAF.png

Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080

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.

My posts focus on technical aspects and leave out most of social grease like „maybe“, „in my opinion“, „I might be wrong“ etc. just add copy/paste all these softeners from this signature to make reading more comfortable for you. Otherwise I’m a fine person which respects you and everyone and wants to be respected.

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

All 3 1.10.8, & all 3 V2.5.5 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
A
ll 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

All 3 1.10.8, & all 3 V2.5.5 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
A
ll 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

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.