Jump to content
Zunaid

[AD] Precautions to avoid extra pixels on Export

Recommended Posts

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.


Follow me: Instagram | Dribbble

Share this post


Link to post
Share on other sites

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!


You'll never know what you can do until you get it up as high as you can go!   

AMD FX 8350 :: Radeon HD 7870 :: Windows 10 ::  http://mithferion.deviantart.com/

Oxygen Icons :: Free Quality Fonts :: Public Domain Pictures :: iOS 11 Design Resources :: iOS App Icon Template :: Hot to do High Quality Art :: Mesh Warp / Distort Tool Considerations

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.


Affinity Photo 1.8.4, Affinity Designer 1.8.4, Affinity Publisher 1.8.4;  2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 40GB RAM; macOS 10.15.6
Affinity Photo 
1.8.4.186 & Affinity Designer 1.8.4.4 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.3.1

Share this post


Link to post
Share on other sites

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.


Follow me: Instagram | Dribbble

Share this post


Link to post
Share on other sites

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.


Follow me: Instagram | Dribbble

Share this post


Link to post
Share on other sites

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.


Follow me: Instagram | Dribbble

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.


Follow me: Instagram | Dribbble

Share this post


Link to post
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

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | 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.