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

Background shows through when shapes with no stroke are alligned


Recommended Posts

When two or more shapes are alligned (from anchor to anchor), and these shapes have no stroke, it results in a transparent edge instead of no edge.
See Example.

 Each of the triangles here are perfectly alligned from point to point, which should leave no space between shapes. The stroke is set to no colour, and the weight set to none, so I would imagine that the 'fill' should take up 100% of each shape. However, it seems that the stroke (which shouldnt exist), stil takes up a fraction of the shape, and allows the background to show through ever so slightly.

The obvious way to get around this is to slightly overlap each shape - as you can see, there are quite a lot in the above, so this would be impractical. Is there any obvious way to get around this?

Apologies, this question has probably been asked before, but I was finding it dificult converting this question to a searchable term.

Example.PNG

Link to comment
Share on other sites

This issue has indeed been mentioned many times before but trying to find the right search term to show them is not easy. I used "gaps" only because I remember that term appearing in a few of them. While it generated a lot of unrelated hits, it did show the perfectly aligned shapes showing background behind topic among a few others.

 

The short version: it is a rendering issue caused by anti-aliasing pixels along shape boundaries. To work around it, add a very thin stroke aligned to the outside of each shape, using the same color as the shapes' fill.

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

Thanks for your response, and for digging out that post.

 

if it's a rendering issue, I'm curious if it shows up that way when printed / exported. I'll give this a try tomorrow and report back.

 

Im surprised that there is no solution for this, only a workaround. If you have to create a separate line for every edge of every shape which is aligned to another shape, and give this its own stroke which matches the shapes fill, this is tedious. Especially when it comes to gradients. 

 

If if I remember rightly, I think this is not specific to Afinity Designer, but is a problem for vector based design software. Bit of a nightmare.

Link to comment
Share on other sites

20 minutes ago, Klicker said:

If if I remember rightly, I think this is not specific to Afinity Designer, but is a problem for vector based design software. Bit of a nightmare.

Yes, in one or another topics (that of course I cannot find right now) one of the staff or developers said this is true for all vector based apps, or words to that effect.

 

A fairly simple workaround when every shape is the same color is to add a shape behind them with the same fill color, which should be easy to do by duplicating all the precisely aligned shapes & using the Add boolean to create it from those dups, but that may or may not work as expected because of a bug in the boolean operations that sometimes creates a "Curves" layer (note the plural) consisting of more than one shape.

 

Which brings up something I just noticed from your screenshot: the selected triangles appear to have a gradient fill, not a solid fill color. Is this correct?

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

7 hours ago, owenr said:

 

I think the developers should provide a function where we simply specify a stroke width and then the software gives each currently selected object a stroke of that width and the same colour/gradient as the object's fill. There could be an option to change the stroke of all selected objects or only the ones which currently have no stroke.

 

This would definitely be much easier for the user. Perhaps something that could be raised as a feature request. I'll try this and see how it goes, and raise it as a suggestion accordingly. 

 

7 hours ago, R C-R said:

Which brings up something I just noticed from your screenshot: the selected triangles appear to have a gradient fill, not a solid fill color. Is this correct?

 

Yeah these triangles are all filled with a gradients. It's currently jut a one-for-all gradient, however the final design will have individual gradients for each shape. 

 

I I think it should still be possible to create an outline with the same gradient, just reusing the recent gradient from the swatches tab. However, I'm not sure if this retains the gradient settings or just the gradient colours. 

 

Another thing for for me to try and report back.

Link to comment
Share on other sites

So yeah, exporting and printing both result in the 'transparent edge' effect, allowing the background to show through - you can never get this edgeless. Although it's nowhere near as obvious as it is in the application, its still to noticeable to get away with ignoring it.

I've tried the suggestion of adding an an edge / stroke to the shape that is the same colour as the fill, which is all good and well, until the shaps are filled with gradients. It is almost impossible to match the stroke gradient to the fill gradient for one shape alone, nevermind trying to match it on as many shapes that are in my screenshot above.

Although this is dificult to get the fill and stroke gradient to match exactly, its pretty close, and could go unnoticed depending on the design. I think it will be possible to use this method to achieve an almost edgeless effect, however will require a lot of precision and time. I see no other way around this, so time and precision is what it will cost me...

Example.PNG

Link to comment
Share on other sites

2 hours ago, Klicker said:

I see no other way around this, so time and precision is what it will cost me...

For shapes with gradient fills, something you might try is to slightly increase the size of the shapes lower in the stacking order, so instead of exactly aligning their edges adjacent to the edges of shapes above them there is a small overlap. Since the shapes above will hide the overlap, this should be as effective as adding strokes & not require trying to match the stroke gradient to the shape gradient.

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

  • 1 year later...

V1.7 is amazing!

... but I would like to raise awareness of this issue. It's still not fixed and is quite annoying. Every once in a while I have a project that would need more precision. This is not a problem that occurs in every vector design app as someone stated before. It might appear in some others as well, but the most used vector design apps don't have this problem. Please fix this. The workarounds are not good enough.

Keep up the good work @affinity!

Branding, Identity Design, UI/UX Design.    |    https://whitex.design

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.