Zunaid Posted March 21, 2017 Share Posted March 21, 2017 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. Quote Follow me: Instagram | Dribbble Link to comment Share on other sites More sharing options...
Mithferion Posted March 21, 2017 Share Posted March 21, 2017 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! Quote AMD FX 8350 :: Radeon HD 5670 :: Windows 10 :: http://mithferion.deviantart.com/ Oxygen Icons :: GCP Icons :: iOS 11 Design Resources :: iOS App Icon Template :: Free Quality Fonts (Commercial Use) :: Public Domain Images How to do High Quality Art :: Mesh Warp / Distort Tool Considerations :: Select Same / Object - Suggestions :: Live Glassmorphism Effect Link to comment Share on other sites More sharing options...
Staff MEB Posted March 21, 2017 Staff Share Posted March 21, 2017 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. Zunaid 1 Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
R C-R Posted March 21, 2017 Share Posted March 21, 2017 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. Quote All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7 Affinity Photo 1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7 Link to comment Share on other sites More sharing options...
Zunaid Posted March 21, 2017 Author Share Posted March 21, 2017 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. Quote Follow me: Instagram | Dribbble Link to comment Share on other sites More sharing options...
Zunaid Posted March 21, 2017 Author Share Posted March 21, 2017 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. Quote Follow me: Instagram | Dribbble Link to comment Share on other sites More sharing options...
Zunaid Posted March 21, 2017 Author Share Posted March 21, 2017 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. Quote Follow me: Instagram | Dribbble Link to comment Share on other sites More sharing options...
Staff MEB Posted March 21, 2017 Staff Share Posted March 21, 2017 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. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
Zunaid Posted March 21, 2017 Author Share Posted March 21, 2017 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. Quote Follow me: Instagram | Dribbble Link to comment Share on other sites More sharing options...
Recommended Posts
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.