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

Visible gap between adjacent shapes


Recommended Posts

Try to adjust their positions closer via selecting one and pressing the cursor keys (up or down), which will move them then in/by single pixel steps.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

10 minutes ago, v_kyr said:

Try to adjust their positions closer via selecting one and pressing the cursor keys (up or down), which will move them then in/by single pixel steps.

This creates overlap. Solves the problem, but it just doesn't feel right. ^_^

image.png.4fc2170e056d489e1d0eb332c7440de0.png

6 minutes ago, DWright said:

As these are two separate object a line is shown so that you can see where the two objects meet, if join the objects together the line will disappear.

What do you mean by "join the objects"? As in merge the curves? But then i won't be able to have 2 colors?

Link to comment
Share on other sites

I also noticed this using Designer. If one turns on the pixel or retina pixel view, there is even a noticeable line between the two shapes that would look really ugly when exporting.

Right now, I just overlap them a little but it would be nice if there was a "real" solution.

Check out my Youtube Channel about vector art:

https://www.youtube.com/channel/UCHRE-TL1-AeVBMtxRTmRa8Q

 

Want to see a magic trick for making isometric designs in Designer?

https://www.youtube.com/watch?v=pGtK3KG_nRM

 

My Graphic Tablet

Link to comment
Share on other sites

Small overlaps cause me troubles as they are quite hard to create right, they complicate further adjustments and it's making me feel uneasy knowing there is this random imperfection in something that should be pixel perfect. For the time being I've opted to stacking shapes on top of each other so the larger bottom one fully encompasses smaller ones above it.

Link to comment
Share on other sites

1 minute ago, Xeevis said:

For the time being I've opted to stacking shapes on top of each other so the larger bottom one fully encompasses smaller ones above it

That was something I wanted to suggest after reading your first sentence. Still, I understand that this feels "wrong". For me, I decided to do these adjustments as a final step (using the (retina) pixel view to determine where it is needed.).

Check out my Youtube Channel about vector art:

https://www.youtube.com/channel/UCHRE-TL1-AeVBMtxRTmRa8Q

 

Want to see a magic trick for making isometric designs in Designer?

https://www.youtube.com/watch?v=pGtK3KG_nRM

 

My Graphic Tablet

Link to comment
Share on other sites

3 hours ago, Xeevis said:

Small overlaps cause me troubles as they are quite hard to create right, they complicate further adjustments and it's making me feel uneasy knowing there is this random imperfection in something that should be pixel perfect.

The problem is in the contact of two edges drawn with antialiasing, when there will always be some shining of the background. The solution is a non-zero line thickness to overlap the edges, which is a common technique used in other graphics programs.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

  • Staff

Hi Xeevis,
Welcome to Affinity Forums :)
As said above this is due to the antialiasing (the background colour is bleeding through the edges of the shapes). For pixel aligned vertical and horizontal edges this doesn't happen but with diagonal/round edges it causes the issues you are experiencing.

You can try select one of the shapes, go to the Layers panel, click the cog icon on the top left, then the Coverage Map button and drag the point on the left of the graph to the top (vertically) so both points (left and right) are both on top. Note this may not be applicable in all cases as it changes the antialiasing and may produce stepped lines in other places of the same object.

Other solutions if you want to keep the original objects perfectly aligned (no overlapping) is to add a third object behind them with the same colour of one of them just to hide/reduce contrast with the light colour of the background in the object's edges, add a thin stroke with the same colour as the objects to cover the gap or simply add (boolean operations) the objects if applicable/possible (you may have to delete some extraneous nodes or adjust the shapes before the add boolean operation to get a clean shape.

Link to comment
Share on other sites

14 minutes ago, MEB said:

Hi Xeevis,
Select one of the shapes, go to the Layers panel, click the cog icon on the top left, then the Coverage Map button and drag the point on the left of the graph to the top (vertically) so both point (left and right) are both on top. This should help a little.

Yes this works flawlessly, this is exactly what I was hoping for! Thanks a ton! 

Link to comment
Share on other sites

  • 5 months later...
On 11/21/2019 at 12:30 PM, MEB said:

You can try select one of the shapes, go to the Layers panel, click the cog icon on the top left, then the Coverage Map button and drag the point on the left of the graph to the top (vertically) so both points (left and right) are both on top. Note this may not be applicable in all cases as it changes the antialiasing and may produce stepped lines in other places of the same object.

This is true, changing the Coverage Map to that extent essentially gives the shapes a "fake" stroke and "turns off" anti-aliasing for that shape. But there's a middle ground here that can be useful for some people in some situations. That is borrowing an "old" technique from video games. Just do manual SSAA.

SSAA, Super Sampling Anti Aliasing, is a technique where vector objects are rendered at a much higher resolution and then scaled down to the desired resolution.

A possible fix for some situations like this is to do the Coverage Map trick of MEB, but instead of dragging the left point all the way up, do it only halfway. Then export the image at higher resolution multiplier. 4x is ok, 8x is a good value, and 16x is great if your computer can handle it (anything over 16x is insane). Once the image is exported, take it to Affinity Photo, and scale it down by the same factor. If you exported at 8x from Designer, scale it down by 8x too. This will get rid of most hairlines without jagging all the edges of your image, any hairlines that remain will either be too small to notice or can be dealt manually.

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...
  • 10 months later...

I've never had this issue in Illustrator. I bet the devs love hearing this ☺️

I have a very simple shape with a fill and stroke(aligned to the outside). When I export it there is a visible gap between the fill and the stroke.

On 11/21/2019 at 11:30 PM, MEB said:

You can try select one of the shapes, go to the Layers panel, click the cog icon on the top left, then the Coverage Map button and drag the point on the left of the graph to the top (vertically) so both points (left and right) are both on top. Note this may not be applicable in all cases as it changes the antialiasing and may produce stepped lines in other places of the same object.

I tried the above solution but it doesn't work. The visible gap only dissapears once my edges appear very aliased.

On 11/21/2019 at 11:30 PM, MEB said:

Other solutions if you want to keep the original objects perfectly aligned (no overlapping) is to add a third object behind them with the same colour of one of them just to hide/reduce contrast with the light colour of the background in the object's edges, add a thin stroke with the same colour as the objects to cover the gap or simply add (boolean operations) the objects if applicable/possible (you may have to delete some extraneous nodes or adjust the shapes before the add boolean operation to get a clean shape.

This is a terrible hack that involves a lot of extra work.

Please provide a better rendering option that uses supersampling. I don't care if I have to wait longer for it to export. Forgive me if there is one and I haven't found it 🙂

Link to comment
Share on other sites

10 hours ago, exerion said:

I have a very simple shape with a fill and stroke(aligned to the outside). When I export it there is a visible gap between the fill and the stroke.

It would be helpful if you could attach a sample Affinity document with this shape, & also let us know what format you are exporting it to that shows a gap.

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

Hi @MEB

On 6/12/2021 at 4:01 AM, MEB said:

Do the following: in the Stroke panel, double the stroke width, set the Align to center and the Order to Draw stroke behind.

Thanks for a solution. Isn't appropriate in all cases, like if the fill was a little transparent.

So when are you going to address this rendering issue? I see this rendering flaw has been apart of Affinity Designer for over 6 years 🤨

 

Link to comment
Share on other sites

  • 1 year later...
On 6/15/2021 at 4:44 AM, exerion said:

Hi @MEB

Thanks for a solution. Isn't appropriate in all cases, like if the fill was a little transparent.

So when are you going to address this rendering issue? I see this rendering flaw has been apart of Affinity Designer for over 6 years 🤨

 

I am also waiting. It's about 2023.

Link to comment
Share on other sites

  • Staff

Hi @vikaskumar2299,
Welcome to Affinity Forums :)
This is an issue that's common in other vector based apps as well. From my understanding it's not that easy to fix. The dem team is aware of the issue but I don't know if/when this can be sorted out, sorry. I'm updating our report to reflect your feedback.

Since the OP's post we have added a way to turn antialiasing off (Layer's panel, cog icon, Antialiasing setting (almost on top) which may help in a couple more situations but I understand it's not a proper solution.

Link to comment
Share on other sites

  • 3 months later...

These anti-aliasing effects are almost unavoidable, but you can mitigate them partially, see:

 

whenever you have 2 shapes adjacent to each other,

  • and the edges is not a multiple of 90 degree, 
  • and you activate anti-aliasing

you get 

  • a mixture of both colors (which is technically correct, but not physically correct how those colors would mix in real life)
  • partially transparent pixels (again technically correct, but unwanted in this case)

Both effects will cause a visible edge. The tutorial shows to mitigate the partial alpha issue.

if you don’t want the colors to get mixed, deactivate anti-aliasing in blend options. But then you get a visible staircase of pixels.

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

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.