accuracy when exporting png

[just doug]

So it appears that Affinity has some challenges in accuracy when exporting a png.  It appears that when you export your image, it "grows" by a pixel or two when opened in, say, Illustrator.

 

This might not seem like a problem to some, but when you have to work in pixel accurate LED walls, growing images means bleeding on to other walls.

 

Can anyone help explain why it does this and how to fix it.

 

I have attached a screen shot to illustrate (no pun intended) my problem.

 

d

 

 

[MEB]

There's two situations here:

1. Exporting a PNG from Affinity and opening it in Photoshop or Illustrator does keep its correct dimensions.

 

2. What you are showing in your screen capture is creating a new document in Photoshop based on contents previously copied to clipboard.

In this case Photoshop does add one pixel or two to the dimensions of the new document compared to the dimensions of the object copied to the clipboard from Affinity (even with pixel-aligned objects).

Curiously, if we paste the exact same object in illustrator (as vector object) it does report the correct dimensions. 

 

Thanks for reporting it. I'm logging this to be looked at.

[just doug]

MEB,

 

I, respectfully, must disagree with you.  The screenshot I posted was a 100 pix x 100 pix square created in affinity and exported as a png.  When that png was opened in illustrator it had "grown" the pixel dimensions that you see.  It was NOT copied and pasted, but exported and imported.

 

Doug

[MEB]

Hi Doug,

I'm unable to replicate this. Can you tell me which version you're using (MAS, beta) and the OS?

[just doug]

Affinity designer 1.1.2 (trial) I am not going to buy 10 licenses until I know it works mac os 10.10.1

 

Doug

[MattP]

Hi Doug,

 

I'm also unable to reproduce this. Take a look at my attached .afdesign file and the exported .png it produced.  I've also shown a screenshot in Illustrator showing the 100x100px dimensions, as expected.

 

RedSquare_100px.afdesign

 

 

 

Thanks,

Matt

[joost]

Hmm, resurrecting this threat - using AD 1.2, designing a 58x58 app icon, I am getting 57.95 and 58.03 in illustrator when copied from AD to illustrator (using clipboard). This might be a small offset but when multiplied by 2x, 3x it becomes an irritating roundoff error that I have to correct for manually later on.

 

There are a few things in this workflow I like to see changed/corrected:

1. First off, the displayed accuracy (digits after decimal point) should be more than just 1.  

2. The size of an object should be made visible when selecting it, at the moment it is only when resizing it.

3. I like to be able to set the size of an object by typing in the dimension in addition to resizing it visually.

[MEB]

Hi joost,

This is probably because your icon is not pixel aligned. Go to the Transform tab (on the bottom right of the default interface) and check if the X and Y coordinates are whole numbers.

Also make sure the width and height are exactly 58px. Then copy to Illustrator. It should work fine. You can also enable Force Pixel Alignment in the toolbar to make sure you only use integer values.

 

1) I believe we will have an option soon to let the user choose the number of decimal values he wants displayed;

2) Do you know you can get object dimensions and position info from the Transform tab (View ▹ Studio ▹ Transform)?

3) You can also do this in the Transform tab, including using math operations inside the input fields

[joost]

ah, I hadn't discovered the transform dialog yet, thanks. You were correct, the x position was off by 0.1. However, setting the dimensions correctly and than copy/paste into illustrator still showed the problem. I had to save the file in AD to make it stick.

 

Playing with this some more, I made a series of transformations starting with a square without pixel alignment turned on. I created a 12x12 pixel square and copy/paste over to illustrator - dimensions are off by a bit. Then i turned on force pixel alignment, changed the dimensions in AD to 15x15 copy/past over to illustrator - dimensions are still off by a bit. Did a whole bunch of these sort of manipulations and dimensions were never integer in illustrator although they showed they were in AD.  Until I moved the object at (x,y)=(0,0) and made it fairly large (58x58), only then the dimensions were integer in illustrator. From then on other transformations in AD and copy/past to illustrator were fine (keeping force pixel alignment on). 

 

BTW, it would be nice if we could dock to the menu bar (i'd like my x,y,w,h at the top similar to illustrator)

[MEB]

The Force Pixel Alignment only works for objects created after you turned it on. So, if you created some rectangles without it enabled from the beginning, turning it on will not correct those rectangles automatically. You have to move them a little, so they can stick to the pixel grid.

[joost]

So do you mean:

1. place object

2. turn pixel alignment on

3. move object position and sizes to force to snap to pixel grid

 

that would make sense. And that is the process I followed above which still led to 'problems'.  If I start an object with PA==off, then set PA==on and move it around, the transformation dialog will show values that are on pixel boundaries, but copying them to illustrator reveals they are not.

[bootsgal]

I'm making a logo 100x100pxl size, png and when i export the file instantly the logo loses quality. when I'm working on program there's no such problem. i've already tried changing dpi's from 300 to 72 but there was the same result. what problem could that be?

[MEB]

Hi bootsgal,

Welcome to Affinity Forums :)

While you are working in the program you are using vector objects, which are resolution independent (they never lose quality no matter how much you zoom in or enlarge them). When you export them as raster graphics (PNG, jpeg etc) they become resolution dependent and so will only look good when you see them at the size you set on the export options.

If you compare your icon at 100% zoom in the program and the exported PNG, they should look the same. If they don't match can you post your file here so i can check what's going wrong?

[bootsgal]

So if i want the best quality of my exported files, i have to export different sizes of design that i made, because if i upload a 10x10pxl file to (whatever thing) that needs a 100x100pxl picture, my file will automatically lose quality? thanks for responding :)

[bootsgal]

So if i want the best quality of my exported files, i have to export different sizes of design that i made, because if i upload a 10x10pxl file to (whatever thing) that needs a 100x100pxl picture, my file will automatically lose quality? thanks for responding :)

[MEB]

Hi bootsgal,

Yes, generically speaking you will want to output the raster files to the pixel dimensions intended for they use.

 

So for example If you want to use an image as a background for a presentation that will be projected at 1280x720px you should export the background image from Affinity with those dimensions. This will ensure that 1 pixel on your image will correspond to one pixel of the projected image.

If you make it smaller (like 800x450 px for example) and then enlarge it inside your presentation software to fill the slide, it will have to "interpolate" pixels (meaning to create new pixels from the available data) to fill in the 1280x720 size of the projected image. This process leads to a loss of quality, because those pixels were not originally there but were generated ("invented") from the existing data from the smaller image.

 

Here's a crude example in practise: the image of the cat on the left has 500 x 250px and it's being displayed at that size. The image of the cat on the right was exported with 250x125px (half the size) and is being forced to display at 500 x 250 px in the browser. Can you spot the difference in quality?

It's possible to get a better quality from the small image using a better resampling algorithm but you will always lose some quality.

[Zemo]

Hi MEB,

I am also having problems with the quality of exported PNG's. I agree with what you have said above, and I have also played around with the pixel alignment etc, but I still cannot get a high quality image to export. I'm using the latest release of Designer on OS X Yosemite.

[MEB]

Hi Zemo, 

Welcome to Affinity Forums :)

Can you provide a sample file so i can see what's going on? The exported PNG should look exactly the same as your document in Affinity when viewed at 100%.

[Ajnabi]

I have similar problem. When I export my logo to a web site it loses the quality. I have tried  different pixel dimensions and DPI, still the same result. I even selected the web in the type when I open the new document, but it automatically sets the dimensions to 1280X800 pixels, which I do not want. If I change the dimension to lower pixels the web selections changes back to device. What am I doing wrong. How can I export for the web and still maintain the quality.

[MEB]

Hi Ajnabi,

Welcome to Affinity Forums :)

There's still some issues with the values you input and the presets chosen by the app. We are aware of this.

Just select web and input the width and height you want for the document size. If the preset changes to Device just ignore it.

 

Regarding the quality issue, can you attach the .afdesign file here (or send me a link trough PM) so i can see what's going on?

This may be related with the complexity of the logo and the output size, the chosen resample algorithm etc

 

When you export your document as JPG or PNG, you are rasterising it (converting vector data in pixels) so it becomes resolution dependent and will only look good when viewed at 100%. Inside Affinity Designer you are working with vectors, which are independent from resolution and can be scaled up or down without losing any quality. If you want to see how the logo will look after you export it inside Designer, make sure you set the zoom to 100% and enable Pixel View Mode to see exactly how the vectors will be rendered/drawn as pixels (View ▸ View Mode ▸ Pixels, or press ⌥ (option/alt) + ⌘ (cmd) + Y).

[bootsgal]

Hi bootsgal,

Yes, generically speaking you will want to output the raster files to the pixel dimensions intended for they use.

 

So for example If you want to use an image as a background for a presentation that will be projected at 1280x720px you should export the background image from Affinity with those dimensions. This will ensure that 1 pixel on your image will correspond to one pixel of the projected image.

If you make it smaller (like 800x450 px for example) and then enlarge it inside your presentation software to fill the slide, it will have to "interpolate" pixels (meaning to create new pixels from the available data) to fill in the 1280x720 size of the projected image. This process leads to a loss of quality, because those pixels were not originally there but were generated ("invented") from the existing data from the smaller image.

 

Here's a crude example in practise: the image of the cat on the left has 500 x 250px and it's being displayed at that size. The image of the cat on the right was exported with 250x125px (half the size) and is being forced to display at 500 x 250 px in the browser. Can you spot the difference in quality?

It's possible to get a better quality from the small image using a better resampling algorithm but you will always lose some quality.

yeah i can, thank you for explaining to me, after some tryouts i figured out that i need to export in those dimensions that picture will be used. the picture that has a cat on right side def will lose quality :) thanks again