[AD] Precautions to avoid extra pixels on Export

[Zunaid]

Hello,

In a recent project i was having issues with export having extra pixels. I went through the forum and got few tips and tricks. But i wanted to know a systematic way to avoid this.

 

How should i approach a work to avoid having extra pixel during export. 

 

- Is it just keeping all values integer like height, width, x and y distance. Note x and y distance varies depending on the point chosen.

 

Thanks.

[Mithferion]

Hi!

 

That sometimes happened to me when there is a stroke on the image I'm exporting, because I see the size but setting is Align Stroke to Center. What I do is to define as Align Stroke to Inside whenever I have to define it.

 

But maybe there is more, could you provide an example?

 

Best regards!

[MEB]

Hi Zunaid,

What type of work are you referring to? Are you working with artboard based documents or regular (non-artboard documents)?

Usually having Force Pixel Alignment enabled from the beginning should cover most situations. You can also display more decimal units in the fields (Transform panel in particular) so you can easily check if you are not using integer values. You can enable this in Affinity Preferences, User Interface, Decimal Places for Unit Types.

As Mithferion said if you could provide a specific example you may advise you better.

[R C-R]

How should i approach a work to avoid having extra pixel during export.

 

I don't know if this will help but in general the "extra" pixels are the result of antialiasing occurring around the edges of a document exported to a raster image format. Since there is no way to partially fill a pixel, any edges that do not precisely completely fill a pixel either need to be exported using some intermediate shade of gray or color, increasing the image's dimensions slightly, or discarded completely, decreasing the image's dimensions slightly. So for example, any pixel precisely aligned on the edge of a document actually has ½ pixel "inside" the image & ½ pixel "outside" it.

 

As I understand it, during export to raster formats Affinity will discard anything less than ½ pixel "outside" the image & increase the dimensions to include antialiased versions of the edge pixels equal to or greater than ½ pixel "inside" it.

 

So to avoid having extra pixels you need to make sure everything on an edge extends less than ½ pixel beyond the pixel dimensions you are exporting to.

[Zunaid]

Hi Zunaid,

What type of work are you referring to? Are you working with artboard based documents or regular (non-artboard documents)?

Usually having Force Pixel Alignment enabled from the beginning should cover most situations. You can also display more decimal units in the fields (Transform panel in particular) so you can easily check if you are not using integer values. You can enable this in Affinity Preferences, User Interface, Decimal Places for Unit Types.

As Mithferion said if you could provide a specific example you may advise you better.

 

It's related to artboard based documents mobile and web app design. I have been working on a project and unfortunately i had to sign NDA else i would have shared the files.

 

Can you please explain why increasing the value of pixel in  Decimal Places for Unit Types might solve it. I didn't quite understand this. 

I understood the Force Pixel Alignment. The issue is as decimal pixel can't be exported as raster image so an extra pixel is added or removed.

 

So in simple i have to always use integer values for x and y and sizes. X an Y distance also differs depending on the point chosen. Does it effect? By default it's calculated from top left.

[Zunaid]

I don't know if this will help but in general the "extra" pixels are the result of antialiasing occurring around the edges of a document exported to a raster image format. Since there is no way to partially fill a pixel, any edges that do not precisely completely fill a pixel either need to be exported using some intermediate shade of gray or color, increasing the image's dimensions slightly, or discarded completely, decreasing the image's dimensions slightly. So for example, any pixel precisely aligned on the edge of a document actually has ½ pixel "inside" the image & ½ pixel "outside" it.

 

As I understand it, during export to raster formats Affinity will discard anything less than ½ pixel "outside" the image & increase the dimensions to include antialiased versions of the edge pixels equal to or greater than ½ pixel "inside" it.

 

So to avoid having extra pixels you need to make sure everything on an edge extends less than ½ pixel beyond the pixel dimensions you are exporting to.

 

Thank you. Now it makes sense. Though i got lost in the last 2 paragraphs. I will re read it.

[Zunaid]

Hi!

 

That sometimes happened to me when there is a stroke on the image I'm exporting, because I see the size but setting is Align Stroke to Center. What I do is to define as Align Stroke to Inside whenever I have to define it.

 

But maybe there is more, could you provide an example?

 

Best regards!

 

Thank you. Most of the issue i faced were rather related to alignment. But i will keep this point in mind as well. Sometimes it's easy to miss things.

[MEB]

Hi Zunaid,

Thanks for the info. If you are working with artboards and want to have everything pixel aligned make sure Force Pixel Alignment is checked from the begining. Artboards are a special type of object so their coordinates (X,Y) also must be whole values. You can check them in the Transform panel.

 

Since by default the values displayed in the Transform panel are rounded (for display only) you may not be able to see the the full X,Y coordinate values. For example imagine you have an artboard with those coordinates (X: 600.023, Y:700.0). With the default setting you can't see the ".023", it simply displays as 600, leading you to believe that the X coordinate is an integer value when it's not (and when you export that artboard you then have an additional pixel due to this). That's why I suggested you to change the Decimal Places for Unit Types (for Pixels) in Affinity Preferences for checking purposes. In any case if you enable Force Pixel Alignment since the beginning this should not be necessary.

[Zunaid]

Hi Zunaid,

Thanks for the info. If you are working with artboards and want to have everything pixel aligned make sure Force Pixel Alignment is checked from the begining. Artboards are a special type of object so their coordinates (X,Y) also must be whole values. You can check them in the Transform panel.

 

Since by default the values displayed in the Transform panel are rounded (for display only) you may not be able to see the the full X,Y coordinate values. For example imagine you have an artboard with those coordinates (X: 600.023, Y:700.0). With the default setting you can't see the ".023", it simply displays as 600, leading you to believe that the X coordinate is an integer value when it's not (and when you export that artboard you then have an additional pixel due to this). That's why I suggested you to change the Decimal Places for Unit Types (for Pixels) in Affinity Preferences for checking purposes. In any case if you enable Force Pixel Alignment since the beginning this should not be necessary.

 

Thank you again for the explanation. It really makes sense. I will follow the steps.