Xeevis Posted November 20, 2019 Share Posted November 20, 2019 Hello, I'm trying to put 2 shapes tightly together in designer, but even if i put sharp nodes on top of each other, there is tiny but visible white gap. Is there any trick I'm missing or do I just need to overlap them a little? Quote Link to comment Share on other sites More sharing options...
v_kyr Posted November 20, 2019 Share Posted November 20, 2019 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. Quote ☛ 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 More sharing options...
Staff DWright Posted November 20, 2019 Staff Share Posted November 20, 2019 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. Quote Link to comment Share on other sites More sharing options...
Xeevis Posted November 20, 2019 Author Share Posted November 20, 2019 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. 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? Quote Link to comment Share on other sites More sharing options...
Phillipp Posted November 20, 2019 Share Posted November 20, 2019 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. Quote 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 More sharing options...
Xeevis Posted November 20, 2019 Author Share Posted November 20, 2019 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. Quote Link to comment Share on other sites More sharing options...
Phillipp Posted November 20, 2019 Share Posted November 20, 2019 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.). Quote 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 More sharing options...
Pšenda Posted November 20, 2019 Share Posted November 20, 2019 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. Megnusin 1 Quote 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 More sharing options...
lacerto Posted November 21, 2019 Share Posted November 21, 2019 (...) Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted November 21, 2019 Staff Share Posted November 21, 2019 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. WhiteX, lafasta, Roger C and 4 others 2 3 2 Quote A Guide to Learning Affinity Software | Affinity Quick Reference Link to comment Share on other sites More sharing options...
Xeevis Posted November 21, 2019 Author Share Posted November 21, 2019 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! Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted November 21, 2019 Staff Share Posted November 21, 2019 You're welcome Quote A Guide to Learning Affinity Software | Affinity Quick Reference Link to comment Share on other sites More sharing options...
LCamachoDesign Posted May 13, 2020 Share Posted May 13, 2020 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. Quote Link to comment Share on other sites More sharing options...
jak645 Posted June 15, 2020 Share Posted June 15, 2020 something new for this issue ... wait before starting a isometric project =\ Quote Link to comment Share on other sites More sharing options...
WhiteX Posted August 5, 2020 Share Posted August 5, 2020 All these tips are good, but this should look good without any workarounds Jim57 and Denyer 2 Quote Branding, Identity Design, UI/UX Design. | https://whitex.design Link to comment Share on other sites More sharing options...
exerion Posted June 11, 2021 Share Posted June 11, 2021 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 🙂 Quote Link to comment Share on other sites More sharing options...
R C-R Posted June 11, 2021 Share Posted June 11, 2021 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. Quote 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 More sharing options...
Staff MEB Posted June 11, 2021 Staff Share Posted June 11, 2021 Hi @exerion, Welcome to affinity Forums Do the following: in the Stroke panel, double the stroke width, set the Align to center and the Order to Draw stroke behind. Quote A Guide to Learning Affinity Software | Affinity Quick Reference Link to comment Share on other sites More sharing options...
exerion Posted June 14, 2021 Share Posted June 14, 2021 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 🤨 Quote Link to comment Share on other sites More sharing options...
jak645 Posted December 2, 2022 Share Posted December 2, 2022 as i realise ... you never get an update for that @exerion XD RustyDawn 1 Quote Link to comment Share on other sites More sharing options...
RustyDawn Posted December 4, 2022 Share Posted December 4, 2022 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. Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted December 5, 2022 Staff Share Posted December 5, 2022 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. Quote A Guide to Learning Affinity Software | Affinity Quick Reference Link to comment Share on other sites More sharing options...
Skeletor Posted March 13, 2023 Share Posted March 13, 2023 This is really a big issue in isometric illustrations – there are gaps everywhere. It almost looks as if the objects have contours, but they don't. Unfortunately, the tip above didn't really help. Quote Link to comment Share on other sites More sharing options...
NotMyFault Posted March 13, 2023 Share Posted March 13, 2023 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. Quote 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 More sharing options...
Recommended Posts
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.