Affinity Designer Adding 1 Pixel in Slice Export

[JhonatanS]

Hi

When I need to export some UI assets, I always find big issues during the slicing of the objects.

This case, I'm getting the object increasing 1 pixel more, since I can't export this in wrong pixel,

I usually remove the decimals to avoid slices results like this, but it's adding one pixel more even without the decimals..

[GarryP]

Go to Preferences, and then the User Interface section, and then set the Decimal Places values to 3 or more.
Then close the Preferences dialog and look at the values in the Transform Panel.
If any of the values are not integers then you need to fix that before exporting.

If the values are still integers then check to see if any Effects have been applied to the layers you are exporting, and the children of those layers.
Effects can often add small (or large) ‘extra bits’ to the layers.

If that’s not it, can you upload the document to the forums so we can have a look at it?

[dayod4]

Go to Preferences, and then the User Interface section, and then set the "pixel" Decimal Place values to "0".

[GarryP]

25 minutes ago, dayod4 said:

Go to Preferences, and then the User Interface section, and then set the "pixel" Decimal Place values to "0".

That would seem to do the opposite of what is needed here, which has already been explained.
By doing what you suggest, the user would not be able to see if the X and Y values were actually integers or not.
Can you explain why you advised to do this?

[R C-R]

11 hours ago, dayod4 said:

Go to Preferences, and then the User Interface section, and then set the "pixel" Decimal Place values to "0".

Note that only affects how many decimal places are displayed in the UI, but it has no effect on the actual pixel values. So as @GarryP mentioned, this will not help because it won't show fractional pixel values like are very likely responsible for the slight increase in the export sizes.

[Pšenda]

1 hour ago, R C-R said:

this will not help because it won't show fractional pixel values ...

... and which must be fixed (set to an integer value) or it will still export incorrectly (1px larger).

[Old Bruce]

On 3/22/2023 at 4:48 AM, JhonatanS said:

When I need to export some UI assets, I always find big issues during the slicing of the objects.

To do Pixel Perfect work set up your document to use Pixels as the Units of Measurement. Set the Snapping to the Pixel work preset. Myself, I modify this to exclude the "Only snap to visible objects". A caveat is that anything you paste into/onto the canvas may have fractional values for its size and/or its x, y co-ordinates.

[TrentL]

Sub-pixel movement by default really strikes me as a massive gotcha that trips up a lot of people...including me who just spent some time re-doing a bunch of exports that had 1-pixel hairline gaps on the edges.

If I create artboards that are 1000x1000 pixels and then I re-arrange them to be in more convenient positions (as I tend to do), I really don't expect the xy coordinates to look something like 235.7 and 567.9 and my export slices to be 1001x1001. 

And this isn't just affecting people doing pixel-perfect work. The attached file is a basic graphic design. Moving Artboard 2 will almost always result in at least 1 side being 1001 in the Export Persona's slice because you'll land on a non-integer coordinate. And to make matters worse, the extra pixel in the slice does not actually capture your artboard's overflow but instead just puts in a transparent (or semi-transparent) pixel. 

My observation is that when using 1 artboard, it almost always works correctly. I don't think I've seen the off-by-one error. But once you add another artboard, it is almost certainly going to have the problem if you do any artboard re-arranging.

 

 

Artboard_Test.afdesign

[Pšenda]

5 minutes ago, TrentL said:

My observation is that when using 1 artboard, it almost always works correctly.

If the Artboard is placed at an integer position (and everything else is also Pixel perfect), then there is "never" a problem.
If there are more Artboards, and you place another one more to the left or more up than the previous "origin" Artboard, then the "origin" for all Artboards will change/shift, and their previous correct position may be thrown off. The "origin" (zero position) is simply defined by the leftmost and uppermost Artboard.

[thomaso]

In addition to @Pšenda's hint, if you (re-)arrange the artboards with the option "Force Pixel alignment" activated (+ "by whole pixels" deactivated) then no artboard will be positioned at a decimal pixel position.

[TrentL]

Yes, I understand that it can be fixed, but the fact that it has to be fixed is puzzling. Every person who ever uses 2+ artboards and the Export Persona is going to have this problem the first time and they likely won't even notice it at first. The only reason I noticed it is because I have been burned many times with stock graphics from asset libraries that have a hairline seam down the side, so I always do a spot-check of my exports. 

I personally don't know why fractional pixels are even needed. It seems like an incredibly niche use-case that causes more problems than it solves. 

[Pšenda]

38 minutes ago, thomaso said:

if you (re-)arrange the artboards with the option "Force Pixel alignment" activated (+ "by whole pixels" deactivated) then no artboard will be positioned at a decimal pixel position.

At least in Win this doesn't work, or at least not reliably. I have no problem with this setup to reach this position.
 

 

Edit: I found out that this is due to the influence of other enabled snaps, which unfortunately take precedence over Force pixel alignment 😞
It is obvious and logical that Move by whole pixel has priority, which is why it is necessary to turn it off, but I was surprised that other snap criteria also have priority. Wasn't that the case before?

[Old Bruce]

3 minutes ago, TrentL said:

I personally don't know why fractional pixels are even needed. It seems like an incredibly niche use-case that causes more problems than it solves. 

Not so much that fractional pixels are needed as it is that they can happen. If you have Snap to Midpoints turned on then you can have items created at x.5, y.5 pixels, and if you have Move by whole Pixels turned on as well then moving that item will result in it being moved and retaining the half pixel x, y co-ordinates. Further to this is if you scale an object after its creation, increasing or decreasing its size with the transform panel can result in fractional pixel sizes and or locations.

Have only Snap to Pixels turned on from the beginning.

As for it being a niche case, quite a few people do work exclusively for the web.

[loukash]

9 minutes ago, TrentL said:

I personally don't know why fractional pixels are even needed

To align vector strokes of uneven values to the pixel grid without antialiasing.
E.g. a 5 px horizonal stroke will antialias if Force Pixel Alignment is on. You must position it at Y = n.5 px. Then you can activate Move By Whole Pixels so that you don't lose this fractional position.

[loukash]

1 hour ago, TrentL said:

My observation is that when using 1 artboard, it almost always works correctly. I don't think I've seen the off-by-one error. But once you add another artboard, it is almost certainly going to have the problem if you do any artboard re-arranging.

There is a massive conceptual flaw in how Affinity calculates the pixel grid.
When using artboards (or pages, for that matter), each artboard claims to have its own pixel grid when you look at the ruler. 
But it doesn't.
There is something what I'm calling the "absolute pixel grid" of the whole canvas that rules it all.
The major p.i.t.a. is that in Designer, it's not even "absolutely absolut". The absolute X=0 begins where the left-hand edge of the left-most artboard is and the absolute Y=0 where the top edge of the top-most artboard is on the canvas.
Drag your top-most artboard without Force Pixel Alignment somewhere else so that it's no more top-most, and your "absolute pixel grid" may go havoc on every artboard.
It's maddening.

And don't let me even start when bleed comes to play… 

[R C-R]

23 minutes ago, TrentL said:

I personally don't know why fractional pixels are even needed.

Like @loukash said, they often can be needed when exporting work that includes vector objects to raster formats. Using this fractional example.afdesignIt is easy to see how this can affect the exported file in AD by using the Pixel or Retina Pixel view mode and/or the new option to show the Pixel Grid. Just zoom in until you can see the grid & note that there is antialiasing that will appear in the exported raster version.

 

[loukash]

Just now, R C-R said:

Just zoom in until you can see the grid & note that there is antialiasing that will appear in the exported raster version.

When planning to export to pixels, everyone should learn lesson 1 first:

Always work in the Pixel Preview mode!

Repeat that after me, kids!  

[R C-R]

3 minutes ago, loukash said:

When planning to export to pixels, everyone should learn lesson 1 first:

Always work in the Pixel Preview mode!

But that is important only if you are trying to avoid any antialiasing; IOW, if you really need "pixel perfect" output. Many projects do not.

[JhonatanS]

2 hours ago, Old Bruce said:

As for it being a niche case, quite a few people do work exclusively for the web.

I can't agree, There are many Game Artist that use pixel perfect numbers, UI Artists, Social media that needs to export files in correct number,

I honestly struggle to do UI in Affinity because of the pixel addition on the decimals during the snapping or Alts (duplicating an object)

Like @TrentL explained in there, we need to verify always on the export, it's really a pain for us that want to export 1.000 x 1.000 and not 1.001 x 1.000

Again, Using these Auto Snap functions or hold Alt while moving object, it makes Affinity use decimals and ignores the pixel snap function.

I think that Affinity should have a function to Turn Off the Decimals on the document, like real pixel alignment document.

I've worked with Affinity since 2018 working daily,
and I always have a problem with the export adding 1 pixel, so this is an issue that can affect many users too.

[loukash]

2 minutes ago, JhonatanS said:

or Alts (duplicating an object)

Agreed, this is a very common source of non-integer misalignment since (at least on Mac) the Option key can do both duplicate as well as override snapping, depending on when exactly the modifier was pressed.

4 minutes ago, JhonatanS said:

a function to Turn Off the Decimals on the document, like real pixel alignment document

Well, that's exactly what Force Pixel Alignment is for. It's global. Unless you override it by some means.

[JhonatanS]

 

Force pixel alignment fails with the snapping option turned on

Since this doesn't work to all existing decimals objects, The suggestion to Turn off the decimal means literally:  Apply to Whole all document. 

1. Make All existing objects/layers that contains decimal Position or Scale, full integer

So we don't need to remove manually the decimals added because of the Alt etc..
 

[R C-R]

17 minutes ago, JhonatanS said:

2 hours ago, Old Bruce said:

As for it being a niche case, quite a few people do work exclusively for the web.

I can't agree, There are many Game Artist that use pixel perfect numbers, UI Artists, Social media that needs to export files in correct number

Old Bruce simply said that there are people who do not need 'pixel perfect' exports; therefore it is not a niche case even though there are also people who do need that.

[R C-R]

3 minutes ago, JhonatanS said:

Force pixel alignment fails with the snapping option turned on

Your screenshot shows both Force Pixel Alignment and Move By Whole Pixels enabled. As has been mentioned, the latter should be disabled to prevent the issue you see.

[Bit Disappointed]

A solution is needed. That much is obvious whatever the loyalists in here say.

[debraspicher]

Decimal Artboards never made sense because the computer can't display a decimal'ed pixel anyway, so it can't be output this way. All it does is lead to rendering issues and problems at export. Slices when hand drawn, however, are always pixel aligned.