Thin Space Between Adjacent Objects | Fixable?

[Mythicus]

I keep running into the issue of this very thin space between objects that, according to Affinity Designer, are right next to each other. This space persists when exporting, and sometimes even joining the objects. The following are the things I've attempted to do to fix this issue to no avail.

• Join objects via the "Add" button (fixes the issue sometimes, but doesn't work for objects of different colors)
• Enabling the "Force pixel alignment" and "Move By Whole Pixels" options
• Moving the objects around with the aforementioned options enabled
• Closing the program and opening it again
• Zooming in and out (it appears to go away at certain zoom levels, but the space is still there when exporting)
• ¯\_(ツ)_/¯

If anyone has a consistent fix for this please let me know. I've attached a couple pictures of this problem in action.

 

[loukash]

10 hours ago, Mythicus said:

"Move By Whole Pixels"

The common misconception is that this option should be on.
The opposite is true: if you want to align by full pixel values, you must turn this off.
Otherwise, if the object coordinates are, say, 24.00001 px, and you "move by whole pixel", the new position will still be 25.00001 px.

[iconoclast]

I'm not sure if there really is a gap between the objects. Might be a display error. Because if you zoom it, it won't get thicker. And as I noticed, if I zoom to 100%, it's away. I tested it by exporting the image as png, and there wasn't a gap on the png also.

[Fixx]

Affinity personnel said (at least in one case) that it is antialising artifact and is visible in exported image too. My experience is varied when exporting to PDF, sometimes it is visible, sometimes not. Any case it is a problem when it happens.

[PixelPest]

Unfortunately it translates very well into PNG. This forum is full of threads about this AA-issue.

[iconoclast]

8 minutes ago, PixelPest said:

Unfortunately it translates very well into PNG. This forum is full of threads about this AA-issue.

I already read about it too., but in my case it seems to work correctly. As I said above, I can see a gap if I watch my graphic zoomed, but if I zoom to 100% or export it as png, the gap is not visible. Affinity Designer 1.10.0.1127 on Windows 10.

[PixelPest]

Good luck:

AA-issue.afdesign

[MEB]

Hi @Mythicus,
Welcome to Affinity Forums
These lines are caused by the white (in this case) bleeding through the edges due to the antialiasing. If the object's edges are vertical or horizontal and pixel aligned these lines shouldn't appear when you view the document at 100% zoom (or multiples) or when you export the file. They do appear with angled and curves lines. There's a few solutions depending on the case. You can turn the antialiasing off for a few specific objects (press the cog icon in the Layers panel and set the Antialiasing to Force Off), add a thin stroke to some of the objects (to cover the gap), place an object with a similar colour to the ones in the foreground to minimize the contrast when applicable, switch the stroke adjustment back to centre and double its width when these lines appear between the stroke and the fill due to the stroke alignment being set to outside etc.

[iconoclast]

10 minutes ago, PixelPest said:

Good luck:

AA-issue.afdesign

The coordinates of your objects don't fit exactly. I managed easily to get rid of the gap between the black objects, but it's a little more tricky with the grey one. Still fiddling.

[PixelPest]

Aligning nodes via Transform tab is easy enough - though it won´t close the diagonally gap and you´ll loose when the shape´s color contains any transparency. Though for this simple design I´d overlap/stack the shapes completely to be on the safe side.

[iconoclast]

I think I know what the problem is. Your graphic depends on coordinates in mm. I worked on mine in pixels. Your graphic sometimes has coordinates that would need half pixels, and that doesn't work. If you create your graphic in pixel coordinates that fit to each other, there shouldn't result gaps.

But overlaping eges would in fact be the save way. Evene it would often cause a bit of fiddling.

[PixelPest]

1 minute ago, iconoclast said:

I think I know what the problem is. Your graphic depends on coordinates in mm.

Unfortunately I changed my file here to px already to make sure nodes are placed at full px and not fractions of it. Result is the same though. 🤪

(Fiddling: not sure how you go about it - but you can take the node select tool select all 3 shapes, rectangle select adjacent nodes and adjust X/Y placement @ Transform panel at the same time)

[iconoclast]

OK, here is my result. The diagonal edge is much more problematic. I think because of the aliasing. But the horizontal edge doesn't seem to be a problem if you work with full pixel coordinates (not 2,5 pixel or so).

[iconoclast]

4 minutes ago, BofG said:

You can remove that slight bleed through of the background by adjusting the coverage map of that lower grey polygon. The compromise though is a jagged edge. There's no perfect solution other than adding some extra geometry to hide the compromised edges.

"Coverage Map"? What do you mean with it? Move or scale the polygon? One opportunity could be to use a verry thin grey stroke around the polygon, I think.

[Alfred]

12 minutes ago, iconoclast said:

"Coverage Map"? What do you mean with it?

The ‘Coverage Map’ control in the Blend Options dialog controls the antialiasing ramp for the selected layer.

 

[iconoclast]

1 hour ago, Alfred said:

The ‘Coverage Map’ control in the Blend Options dialog controls the antialiasing ramp for the selected layer.

 

Ah okay, yes, that seems to work fine. It's better than adding a stroke. Thanx you both for that hint!

[lacerto]

(...)

[konstantnnn]

I can have an awful lot of fun trying to figure out "why" is this a mistake, "what" am I doing wrong and "how" can I quickly patch this, but let's all be honest here, a great and amazing design app would die and not move unless it has something as crucial as this figured out. I don't know how to solve it. But I am also unable to figure out how, in the 21st century, three aligned images can't align properly without a seem between them (and NO, its not milimeters, its literally a document the same pixel image size taken from Apple's website). How have they made it without a seem? This can't be put under a rug.

I have, without knowledge of this thread existing, wrote this article about multiple of instances of issues like this

This happened on Photoshop and Illustrator too and it drives me nuts for years since I started doing design. I just can't believe I'll have to pray Apple develops design software, or something.

Isn't there anything that could be done technically regarding this? Nothing?

Doing seventy thousand different tricks with blendmodes blendranges what-so-forth and aligning and going into settings and doing blah and this and that and this and that just to align three images without a seem running through them is kinda insane to me.

 

[lacerto]

(...)

[konstantnnn]

3 hours ago, Lagarto said:

This does happen with many apps, not just Affinity apps, but e.g. CorelDRAW, Inkscape, Xara and VectorStyler. But it normally does not happen with Illustrator:

...because of this:

...and it does not normally happen with a PDF created by Illustrator (when viewed in Adobe Reader or Acrobat Pro):

 

AA-issue_from_ai.pdf 659.48 kB · 1 download

i’m going to cry

 

BTW Didnt know about that png and supersampling, is there an option to do that WHILE working within illustrator??? Not just the raster export option??

[lacerto]

(...)

[Mythicus]

Thank you everyone for your input on this issue. Using a combination of the different suggestions offered, I was able to complete the project. So again, thank you guys.

I'm prefacing what I'm about to suggest with the fact that I am not a software developer, and it is very possible that I have no idea what I'm talking about. That said, I would greatly appreciate it if one of the Serif team's developers, or anyone who might know more than me about vector rendering could weigh in on this:

It seems to me that a potential reason for this issue occurring is that the side of an object that is touching the side of another object, is not occupying the exact same space as the side it is touching, but instead, is drawn directly next to it.
As an example: Lets say line Z is drawn on a grid from point (2, 0) to point (2, 8) and line W is drawn from point (3, 0) to point (3, 8). These lines are exactly adjacent to each other, but if anti-aliasing is involved, it might cause them to render with a very small, but visible space between them. However, if both line Z and W are drawn from the same point (2, 0) to point (2, 8), they would be occupying the same space and maybe the anti-aliasing wouldn't affect how they appear visually.

If this is the case, perhaps this functionality could apply whenever snapping is enabled and the green line appears when moving two objects together as shown in the attached image.

Cheers

 

Edited August 13, 2021 by Mythicus

[konstantnnn]

4 minutes ago, Mythicus said:

Thank you everyone for your input on this issue. Using a combination of the different suggestions offered, I was able to complete the project. So again, thank you guys.

I'm prefacing what I'm about to suggest with the fact that I am not a software developer, and it is very possible that I have no idea what I'm talking about. That said, I would greatly appreciate it if one of the Serif team's developers, or anyone who might know more than me about vector rendering could weigh in on this:

It seems to me that a potential reason for this issue occurring is that the side of an object that is touching the side of another object, is not occupying the exact same space as the side it is touching, but instead, is drawn directly next to it.
As an example: Lets say line Z is drawn on a grid from point (2, 0) to point (2, 😎 and line W is drawn from point (3, 0) to point (3, 8). These lines are exactly adjacent to each other, but if anti-aliasing is involved, it might cause them to render with a very small, but visible space between them. However, if both line Z and W are drawn from the same point (2, 0) to point (2, 8), they would be occupying the same space and maybe the anti-aliasing wouldn't affect how they appear visually.

If this is the case, perhaps this functionality could apply whenever snapping is enabled and the green line appears when moving two objects together as shown in the attached image.

Cheers

 

https://forum.affinity.serif.com/index.php?/topic/147196-aligned-objects-not-actually-aligned/&do=findComment&comment=822722