Jump to content
You must now use your email address to sign in [click for more info] ×

Understanding Pixel Alignment, resample methods and effect on sharpness / blurriness


Recommended Posts

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.

1153506291_UIPreferences.thumb.png.dd5c9a646217e484293a37c211240ce2.png

Next, you should always make the transform panel visible, and check the position and size of layers.

1822905162_Screenshot2022-12-20at23_03_16.png.0f5a5220a80d1cc10582d6877c9fcbe5.png

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.

image.thumb.png.f25ad9358ded5aef257bad39ab5a9b16.png

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:

image.thumb.png.a45a9478080cf388f198dec8107277a6.png

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 by NotMyFault
typos and corrections

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

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).

  1. Open the example file checkered 256x256 misaligned.afphoto
  2. Set View Quality to Nearest Neighbour
  3. merge visible (or rasterise)
  4. The rendering will change dramatically.

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

  • 4 weeks later...
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.

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

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...

image.png.ec5074d661119f2930ac11915b08506d.png

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...

image.png.190a9787de01a98215f643bd1d72c25b.png

 

 

You could move manually but it will be still off grid...

In this case the whole artboard is 0,2px off.

image.png.596547af208c9644f722faf7325a83ca.png

 

Move it back to integer and your job is done.

 

🙂

 

 

 

The white dog, making tools for artists, illustrators and doodlers

Link to comment
Share on other sites

  • Staff

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.

Link to comment
Share on other sites

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.

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

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. :) 

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

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.

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

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.

😉

 

The white dog, making tools for artists, illustrators and doodlers

Link to comment
Share on other sites

  • Staff
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.

Link to comment
Share on other sites

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… :))

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

  • Staff
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.

Link to comment
Share on other sites

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. 

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

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.

The white dog, making tools for artists, illustrators and doodlers

Link to comment
Share on other sites

  • Staff
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.

Link to comment
Share on other sites

Or Option-ArrowUp/Down in the Transform panel fields to round up/down by 0.1 px.

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

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.

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

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

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

  • 3 months later...
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)

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

1 hour ago, NotMyFault said:

Did you mean 5+1=6 clicks?

No.

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

  • 10 months later...
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

 

image.png.5ffb62627ed2c1641e393bf5384cd253.png 

 

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).

image.png.6128f8e0b8a4254cb78d8992729447ec.png image.png.020851c44fbb4271d096c54b97159966.png

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.

Link to comment
Share on other sites

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.

 

The white dog, making tools for artists, illustrators and doodlers

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

Terms of Use | 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.