NotMyFault Posted December 20, 2022 Share Posted December 20, 2022 (edited) Many users scratch their heads about the effect of layer pixel aligment, and resulting blurriness when looking at the rendering of images in Photo, or in exported (bitmap / raster) files. In Photo, you can move layers to non-integer positions, using fractional digits - those digits after the decimal point (or comma for German locale). It is important to set-up Affinity accordingly to be able to inspect positions. First, use Preferences->User Interface Options and set Decimal Places for Unit Types to a high number, e.g. 6. Decimal Places for Unit Types—controls the number of decimal places allowable for each document measurement unit and degree readouts. Next, you should always make the transform panel visible, and check the position and size of layers. What is the impact of layers using fractional pixel positions? If you have documents with very detailed structures, this can lead to loss of contrast and blurriness. I use a checkered board as example to make this visible. Affinity used special algorithms to map any pixel or vector objects from the open document to the pixels of the canvas or display. View Quality / resample method For rendering, as default "Bilinear" is used, often leading to perceived blurriness. Alternatively, you can choose "Nearest Neighbour" in Preferences->Performance->View Quality which gives a sharper / crisper rendering. Test file Here is a test file, showing a checkered rectangle of 256x16px, copied 9 times, and placed as rows from top to bottom. Each row is shifted by 0,1px in x-axis. The screenshots show the result when viewed at 800% (ctrl-4 / cmd-4) With View Quality Bilinear (default of Affinity) yo can see that the checkered board becomes more blurry, with maximum at 0.5 position shift where you get a 50% grey row - the black and white pixels become indistinguishable. In this specific example, it would be possible to regain contrast (except for the 0.5px row) by adding a levels or curves adjustment. In more real world or more complex cases, you could try a high pass filter with blend mode overlay, or unsharp mask filter. All methods have their limits, and cannot fully regain lost details, and often introduce other artefacts. With View Quality "Nearest Neighbour", the same file looks sharper: This looks sharp, despite the image is actually blurry by resampling. Starting with 0,6px misalignment, you see that the squares are shifted by 1px to the right, so you swap blurriness by a different rendering issue. It is physically impossible to get a sharp image if it's misaligned (using pixel based display technology with fixed DPI), and rasterised. On the other hand, this resample methods often introduces unwanted artefacts, so use with caution (see next post). Exporting these images in same pixel size and with matching resample-settings normally will create the exact same image visible in Photo - but there are some exceptions, covered in my other posts. More complex scenarios My checkered board example shipped in x-axis is one of the simplest possible. There are countless other forms to create blurriness, all even harder to correct: resizing layers (DPI mismatch) rotating layers Shearing or skewing layers using embedded / linked files color artefacts Moving masks (by accident) relative to parent layer Creating unwanted extra pixel during export checkered 256x256 misaligned.afphoto29.24 kB · 3 downloads Edited December 21, 2022 by NotMyFault typos and corrections joe_l, Ldina, loukash and 3 others 4 2 Quote 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. Link to comment Share on other sites More sharing options...
NotMyFault Posted December 21, 2022 Author Share Posted December 21, 2022 To mention one big disadvantage if using View Quality Nearest Neighbour: If you use any rasterise or merge operation like merge visible, rasterise, rasterise & trim, merge down, you can get very surprising results, as merge and rasterise always use Bilinear resample. You can check this with the example file from this thread (first post). Open the example file checkered 256x256 misaligned.afphoto Set View Quality to Nearest Neighbour merge visible (or rasterise) The rendering will change dramatically. Quote 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. Link to comment Share on other sites More sharing options...
paolo.limoncelli Posted January 18, 2023 Share Posted January 18, 2023 If I could add further suggestions, is a great idea to enable both Move By Whole Pixels Force Pixel Alignment In particular in UI design scenarios these are fundamental to spot "off-grid" assets. 🙂 Quote The white dog, making tools for artists, illustrators and doodlers Link to comment Share on other sites More sharing options...
loukash Posted January 18, 2023 Share Posted January 18, 2023 1 hour ago, paolo.limoncelli said: is a great idea to enable […] Move By Whole Pixels … is not a great idea because if your object is already off the pixel grid, it will never snap to it. Quote MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2 Link to comment Share on other sites More sharing options...
paolo.limoncelli Posted January 18, 2023 Share Posted January 18, 2023 21 minutes ago, loukash said: … is not a great idea because if your object is already off the pixel grid, it will never snap to it. When you have lots of elements this his is exactly the best way to "spot" what is off grid... 😜 You know it should so if it does not snap you could go to transform panel and fix. Look at this scenario Pixel perfect positioning and size in Transform Panel... But you have pixel blur on the left edge... How can it be? Headaches... If you have Pixel snapping active and create a new shape, it helps you in finding the problem here. As you said, it will not snap, so you know that there is something wrong, since when I start dragging the X value starts with 0,8px off... You could move manually but it will be still off grid... In this case the whole artboard is 0,2px off. Move it back to integer and your job is done. 🙂 Quote The white dog, making tools for artists, illustrators and doodlers Link to comment Share on other sites More sharing options...
Staff MEB Posted January 18, 2023 Staff Share Posted January 18, 2023 There should be no object off the pixel grid if you are working with Force Pixel Alignment enabled from start (usually for UI Design as stated) and if there is it's probably because the designer want it that way - for example to better control antialiasing on small text, small logos or icons/icon design - in such cases the decimal value should be preserved. To detect problems it's also helpful to switch to Pixel and Retina Pixel view modes to easily check for blurriness in box edges and similar elements. loukash 1 Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
loukash Posted January 18, 2023 Share Posted January 18, 2023 5 minutes ago, paolo.limoncelli said: If you have Pixel snapping active and create a new shape, it helps you in finding the problem... As you said, it will not snap, so you know that there is something wrong Force Pixel Alignment will always suffice here. If your artboard is off the absolute pixel grid, then all its content will be off the absolute grid as well, snapping only to the artboard's "internal" pixel ruler grid. You will see that in the Transform panel right away, provided you have at least a few decimal places active. "Move By Whole Pixels" can actually make it worse as it prevents snapping to the absolute pixel grid no matter what. Quote MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2 Link to comment Share on other sites More sharing options...
loukash Posted January 18, 2023 Share Posted January 18, 2023 2 minutes ago, MEB said: There should be no object off the pixel grid if you are working with Force Pixel Alignment enabled from start Exactly. Quote MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2 Link to comment Share on other sites More sharing options...
loukash Posted January 18, 2023 Share Posted January 18, 2023 4 minutes ago, MEB said: if there is it's probably because the designer want it that way - for example to better control antialiasing on small text, small logos or icons/icon design - in such cases the decimal value should be preserved. Yes, that would be a scenario where you can make good use of the Move By Whole Pixels mode. I just think it shouldn't be enabled by default. Quote MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2 Link to comment Share on other sites More sharing options...
paolo.limoncelli Posted January 18, 2023 Share Posted January 18, 2023 7 minutes ago, MEB said: There should be no object off the pixel grid if you are working with Force Pixel Alignment enabled from start (usually for UI Design as stated) and if there is it's probably because the designer want it that way - for example to better control antialiasing on small text, small logos or icons/icon design - in such cases the decimal value should be preserved. To detect problems it's also helpful to switch to Pixel and Retina Pixel view modes to easily check for blurriness in box edges and similar elements. I'm the designer in this case... 😉 Off the pixel grid could happen even if totally unwanted Meb... When you have to deal with thousand of assets, nested stuff, bounding boxes, contraints and there is a "mixed" snapping scenario (candidates, reference etc...) cut&paste, drag from Assets... Even if the pixel snapping is on, sometimes rounding error happens. Anyway this has been my workflow since 2014 in AD... My idea was to add further hints to the discussion, if unwanted and what I wrote is totally wrong feel free to erase my comments. 😉 Quote The white dog, making tools for artists, illustrators and doodlers Link to comment Share on other sites More sharing options...
Staff MEB Posted January 18, 2023 Staff Share Posted January 18, 2023 5 minutes ago, loukash said: Yes, that would be a scenario where you can make good use of the Move By Whole Pixels mode. I just think it shouldn't be enabled by default. Turn off Move by whole pixels. It's sticky - Affinity should honour what you select and keep it for new documents. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
loukash Posted January 18, 2023 Share Posted January 18, 2023 7 minutes ago, MEB said: Turn off Move by whole pixels. It's sticky - Affinity should honour what you select and keep it for new documents. I know, but it's on in some of the factory presets like Object Creation, even though it's grayed out because Force Pixel Alignment is off. That means: If you take Object Creation as your starting point for a new preset where you want Force Pixel Alignment on, then Move By Whole Pixels will be automatically on as well. That can make everything quite confusing, especially for new users. (That discussion should now likely go to the Feedback section, I guess… ) NotMyFault 1 Quote MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2 Link to comment Share on other sites More sharing options...
Staff MEB Posted January 18, 2023 Staff Share Posted January 18, 2023 33 minutes ago, paolo.limoncelli said: I'm the designer in this case... 😉 Off the pixel grid could happen even if totally unwanted Meb... When you have to deal with thousand of assets, nested stuff, bounding boxes, contraints and there is a "mixed" snapping scenario (candidates, reference etc...) cut&paste, drag from Assets... Even if the pixel snapping is on, sometimes rounding error happens. Anyway this has been my workflow since 2014 in AD... My idea was to add further hints to the discussion, if unwanted and what I wrote is totally wrong feel free to erase my comments. 😉 Hi @paolo.limoncelli, Yes, it was a a bit of an overstatement from my part, my apologies - in theory it should work but in practise depending on various settings it may go wrong (stroke alignment, stroke width, include bounding box midpoints (in snapping) can even cause situations where off the pixel cases are unavoidable. Also user error (duplicating while moving pressing alt instead of cmd for example etc). These's some room for improvement for sure. debraspicher 1 Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
paolo.limoncelli Posted January 18, 2023 Share Posted January 18, 2023 No problems at all! 👊🏻 Quote The white dog, making tools for artists, illustrators and doodlers Link to comment Share on other sites More sharing options...
NotMyFault Posted January 18, 2023 Author Share Posted January 18, 2023 For me there is one exception where move by whole pixels is valuable: if you have objects with 1px stroke width aligned to center - which is the only available option in case of open curves, and a specific requirement if the length between (sharp) nodes matters even for closed curves. In that case, you need to align to 0.5 positions. Moving such objects is easier and less error prone with this option active. If Affinity would provide an option to enforce alignment to whole pixels or 1/2px positions, this would be superior. Quote 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. Link to comment Share on other sites More sharing options...
paolo.limoncelli Posted January 18, 2023 Share Posted January 18, 2023 I work for the OEM market where UI screen are mainly low res (some of these use non-square pixels) and some implementations still need sprites as design strategy. In this case Pixel preview, Move By Whole Pixels and Force Pixel Alignment are vital. Also and Blend options are very useful. Quote The white dog, making tools for artists, illustrators and doodlers Link to comment Share on other sites More sharing options...
Staff MEB Posted January 18, 2023 Staff Share Posted January 18, 2023 32 minutes ago, NotMyFault said: For me there is one exception where move by whole pixels is valuable: if you have objects with 1px stroke width aligned to center - which is the only available option in case of open curves, and a specific requirement if the length between (sharp) nodes matters even for closed curves. In that case, you need to align to 0.5 positions. Moving such objects is easier and less error prone with this option active. If Affinity would provide an option to enforce alignment to whole pixels or 1/2px positions, this would be superior. You can set the Nudge (or Modifier Nudge) distance in Preferences, Tools section to 0,5 px if you need this regularly. NotMyFault 1 Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
loukash Posted January 18, 2023 Share Posted January 18, 2023 Or Option-ArrowUp/Down in the Transform panel fields to round up/down by 0.1 px. Quote MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2 Link to comment Share on other sites More sharing options...
NotMyFault Posted January 18, 2023 Author Share Posted January 18, 2023 3 hours ago, loukash said: Or Option-ArrowUp/Down in the Transform panel fields to round up/down by 0.1 px. That needs 5 clicks, unable to count such high. Quote 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. Link to comment Share on other sites More sharing options...
loukash Posted January 18, 2023 Share Posted January 18, 2023 Just now, NotMyFault said: unable to count such high Obviously, haha! It needs 1 click, 1× pressing and holding the option key and 5× pressing the arrow key Quote MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2 Link to comment Share on other sites More sharing options...
NotMyFault Posted May 11, 2023 Author Share Posted May 11, 2023 On 1/18/2023 at 6:42 PM, loukash said: Obviously, haha! It needs 1 click, 1× pressing and holding the option key and 5× pressing the arrow key Did you mean 5+1=6 clicks? (revisited this thread) Quote 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. Link to comment Share on other sites More sharing options...
loukash Posted May 11, 2023 Share Posted May 11, 2023 1 hour ago, NotMyFault said: Did you mean 5+1=6 clicks? No. Quote MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2 Link to comment Share on other sites More sharing options...
Baddy Posted March 11 Share Posted March 11 On 1/18/2023 at 9:40 AM, paolo.limoncelli said: If I could add further suggestions, is a great idea to enable both Move By Whole Pixels Force Pixel Alignment In particular in UI design scenarios these are fundamental to spot "off-grid" assets. 🙂 Careful with Move By Whole Pixels. It's a great option for objects you want to move pixel-based while having it offset on the pixelgrid. It does not help aligning objects to the pixel-grid itself. For example: You import an image into your workspace and its coordinates are x:0,2px y:0,5px. If you have Move By Whole Pixels active, moving the object will always have the x: ,2px y: ,5px offset, as you are moving by WHOLE pixels, EVEN if you have Force Pixel Alignment on. Example: Moving an object (dragged by mouse). → You can see how X and Y keep the offset. In case there was any confusion about how these two work together, I hope this example clears things up. It caught me off-guard earlier, when I was trying to figure out why my artboard exports had white gaps. TL;DR: Unless you want to have certain objects offset on the pixel-grid, disable Move By Whole Pixels. Force Pixel Alignment is all you need to get your objects on the grid. Quote Link to comment Share on other sites More sharing options...
paolo.limoncelli Posted March 11 Share Posted March 11 Yes I well know... We've been using AD since 2014... 😜 It also creates problems with slices' dimensions in Export Persona. This is a long term glitch, and could be fixed to snap back to the closest integer (if the Force Pixel Alignment is ON), but could be very demanding for CPUs maybe? I guess switching complex vector art stuff could be tricky... Today I'm accustomed to the scroll-wheel over the input field to fix if weird things happen. Quote The white dog, making tools for artists, illustrators and doodlers Link to comment Share on other sites More sharing options...
paolo.limoncelli Posted March 11 Share Posted March 11 When you have to deal with custom OEM displays and low-res stuff you want both on... Or at least... I need both on... 😜 Return 1 Quote The white dog, making tools for artists, illustrators and doodlers 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.