Jump to content

Recommended Posts

I'm new to Affinity Designer so I hope this isn't a stupid question... 

 

No matter what I try if I align the edges of two objects (using snapping to ensure that the boundary points are positioned exactly on top of each other) I end up with a seam between the fills.  I've attached an example of what I'm seeing - both in AD and in the exported images.  It doesn't seem (no pun intended) to matter if I use a boundary line or not.

 

Is this to be expected?   Somehow I'd like to have a seamless transition of colour from one object to the next without having to manually overlap them.

 

I'd really appreciate any input.  

 

Example attached. The inverted 'V' in the bottom centre of the image is a good example of the issue.

 

AF 1.1.0, OS X 10.10

 

 

post-1818-0-78585200-1413735342_thumb.png

Share this post


Link to post
Share on other sites

Yes this is expected. All vector edges get anti-aliased so two separate edges will have a faint line between them unless they are aligned exactly on a pixel boundary. You can get around the problem by overlapping the edges or having another object behind.

Share this post


Link to post
Share on other sites

Thanks for the quick reply - late on a Sunday evening!

 

Doing lots of manual positioning adjustments isn't what I was hoping for - but at least I know it isn't just me now!  Where the objects are the same colour I've painted over the lines using the pixel based brushes, where the fills are different I'm learning to be pragmatic and either over or under-lap the geometry, as you suggested.  

Share this post


Link to post
Share on other sites

I've noticed this as well. It's good to know why it's happening. I assume because it's a antialias preview on screen that when printed it won't be affected or noticed...?

Share this post


Link to post
Share on other sites

This is driving me nuts  :blink: I understand why and yes it happens in AI and Sketch, I'm working around it by combining shapes and placing them behind and sometimes pasting inside objects. Glad to here there may be a solution in the works. I'm not too worried about it in Affinity itself, it's on export it's causing me a headache as I'm doing web graphics.

 

Here's hoping  :rolleyes:  


AD 1.4.1 | AP 1.4.1 | ottobyte.com | @ottobyte | MacPro 8x2.8, 8gb, OSX 10.11.3

Share this post


Link to post
Share on other sites

I'm still having trouble with this and it's starting to spoil my enjoyment of using AD.  Using strokes can help, as mentioned above, but only if I make the stroke big enough to extend beyond the original boundary of the shape - and that changes the look and 'clean-ness' of the original geometry.

 

Painting over lots of seams and creating background objects for geometry I've already carefully positioned is becoming a real pain.  I could live with it if these were only 'on screen' artefacts but they aren't, they are present in the final rendered image output.

 

Maybe AD isn't intended to be used in an environment where shapes need to be precisely aligned?  *sigh* Sadly, I think I'm going to have to stop using it.

Share this post


Link to post
Share on other sites

 

Maybe AD isn't intended to be used in an environment where shapes need to be precisely aligned?  *sigh* Sadly, I think I'm going to have to stop using it.

 

 

Do you know of another vector app that works as you wish?

Share this post


Link to post
Share on other sites

Do you know of another vector app that works as you wish?

Only illustrator, if I understand correctly. Personally I've mainly used photoshop and the like. Is it really hard to do this with a vector application TonyB?

Share this post


Link to post
Share on other sites

Illustrator will also show seams in most cases the same as Affinity. Photoshop vector tools will also act the same for different coloured objects next to each other.

 

Flash is the only rasteriser that doesn't show seams that I know of and that's because it uses a completely different method and causes many other terrible problems at the same time.

 

We can improve the seams a bit by adjusting gamma on outer edges and pixel aligning logical op results but the problem will never go away for different coloured objects next to each other.

Share this post


Link to post
Share on other sites

Hello,

 

I found this old thread and it is relevant to me since I'm making seamless vector patterns.

 

I'm using embedded object and power duplicate to test my patterns and have noticed these seam lines where the pattern objects connect.

My work is intended for both print and web design. I understand that with printing this is not a problem.

 

My question is regarding web usage - if I export my vector patterns to png file format (for example) for it to be used on the web (like say, tile a web page background) will this eliminate the seams since the export rasters the vector image?

Share this post


Link to post
Share on other sites

Hi there,

 

This issue still seems to be present in Designer, both on screen as well as in the final output images, which is creating a major problem for me.

 

Does anyone know if a solution has been developed for this problem yet?

 

If not, I'd like to propose a couple of solutions that should address the issue:

 

Solution 1: When the user is exporting an image, allow them to specify a level of multisampling (i.e. 1x, 2x, 4x, 8x, etc).  For instance, selecting 2x would internally produce an image 4 times as large as the one specified by the user, and then downscale it before writing it to the file.  4x would internally produce an image 16 times as large.  This is something us users can do manually ourselves, but it adds a bunch of extra steps, so it would be nice if it was a build in feature.  The disadvantage of this approach is that it only reduces the appearance of the seams, but does not eliminate them.  I’ve attached 2 images to demonstrate the level of improvement of using x4 multisampling.

 

Solution 2: Have the program skip performing antialiasing on vector components entirely (bear with me) as it produces the output image, thus (presumably) eliminating the seams entirely.  Then, as an alternate way to provide antialiasing, allow the user to specify a multisampling level (2x, 4x, 8x, etc) to use during the export process.  This way a much larger image would again be produced internally, which would then be downscaled to the size the user requested before it gets written to disk.  This should have the advantage of completely eliminating the seams discussed in this thread, while maintaining a decent level of antialiasing, which the user would control via the multisample level.

 

I think Solution 2 is a much better way to go, if it's possible to do it that way.  You might even be able to apply solution 2 in real time to eliminate seams while we use the application.

 

If you have any questions about these ideas please let me know.

Output with 4X Multisampling.png

Normal PNG Output.png

Share this post


Link to post
Share on other sites
5 hours ago, Lionel Seidman said:

Does anyone know if a solution has been developed for this problem yet?

Have you tried doing what @TonyB suggested in his first reply, that being to overlap objects instead of trying to align their edges? Consider this simplified Aligned vs overlapped.afdesign file:

5ab2424f2e621_alignedvsoverlapped.png.def4a8a8d4f385cfee94b49d5579a02a.png

The two examples look the same, right? But the one on the right needs fewer nodes because the yellow 'A' shape & red "B" shape are stacked such that their adjacent edges don't need to be aligned. Not only does this avoid having to tediously precisely align those edges & require fewer nodes for the same appearance, it makes editing much easier because only the shape above the lower one needs to be adjusted.

 

Of course, this won't work if the layers have different blend modes or less than 100% opacity, but there are usually ways to work around that, like using clipping or masking to get the look you want.


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites
19 minutes ago, R C-R said:

The two examples look the same, right?

 

Not exactly, no! The border between the tip of the green shape and the red shape looks more pronounced in the ‘Overlapped’ version. stirthepot.gif


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.1.404 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.1.143 • Designer for iPad 1.7.1.1 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites
13 minutes ago, Alfred said:

Not exactly, no! The border between the tip of the green shape and the red shape looks more pronounced in the ‘Overlapped’ version. stirthepot.gif

Try comparing the two in the Designer file itself, for example by grouping the 3 overlapped shapes, snapping that group over the edge aligned shapes, & setting its blend mode to difference.


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites
1 minute ago, R C-R said:

Try comparing the two in the Designer file itself, for example by grouping the 3 overlapped shapes, snapping that group over the edge aligned shapes, & setting its blend mode to difference.

 

I’ll take your word for it! I was merely observing that the two examples as posted here look marginally different. :)

 


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.1.404 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.1.143 • Designer for iPad 1.7.1.1 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites
17 minutes ago, Alfred said:

I’ll take your word for it! I was merely observing that the two examples as posted here look marginally different. :)

They look different because I was lazy & made a screenshot of part of the file displayed at >100% zoom level in AD instead of exporting it as a png from AD. The screenshot was not intended as a precise representation, but in retrospect I should have made that clearer. :(


Affinity Photo 1.7.1, Affinity Designer 1.7.1, Affinity Publisher 1.7.1; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.1.143 & Affinity Designer 1.7.1.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites
38 minutes ago, R C-R said:

They look different because I was lazy & made a screenshot of part of the file displayed at >100% zoom level in AD instead of exporting it as a png from AD. The screenshot was not intended as a precise representation, but in retrospect I should have made that clearer. :(

 

We’ll let you off this time. Just don’t do it again! :P

 


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.1.404 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.1.143 • Designer for iPad 1.7.1.1 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites

Thanks for your feedback, guys.

 

If I overlap the components, that does generally solve the problem.  However, that is only a workaround and it doesn't solve the core of the problem which is that Designer is not handling adjacent non-overlapping objects correctly.

 

The process of getting every object to overlap every other object it is adjacent to can also be very time-consuming, especially if you are opening complex files that were not created that way in the first place.

 

As someone who is new to Designer, this feels like the one major flaw in it that I've come across so far.  I think it would be really nice if Designer could be improved so we don't have to deal with this problem anymore, rather than just getting used to it and always coming up with workarounds for it.

 

Is it possible to bring this thread to the attention of an engineer on the Designer team?

Share this post


Link to post
Share on other sites
2 minutes ago, Lionel Seidman said:

As someone who is new to Designer, this feels like the one major flaw in it that I've come across so far.  I think it would be really nice if Designer could be improved so we don't have to deal with this problem anymore, rather than just getting used to it and always coming up with workarounds for it.

 

Is it possible to bring this thread to the attention of an engineer on the Designer team?

 

'Top Cat' @TonyB has explained why the problem will never go away completely:

 


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.1.404 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.1.143 • Designer for iPad 1.7.1.1 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites
On March 21, 2018 at 7:58 AM, Alfred said:

 

Not exactly, no! The border between the tip of the green shape and the red shape looks more pronounced in the ‘Overlapped’ version. stirthepot.gif

Good eye!

 

On March 21, 2018 at 8:35 AM, R C-R said:

They look different because I was lazy & made a screenshot of part of the file displayed at >100% zoom level in AD instead of exporting it as a png from AD. The screenshot was not intended as a precise representation, but in retrospect I should have made that clearer. :(

 

They look different because the Aligned version isn't aligned at that tip it's an overlap (the yellow shape is a bit wonky).

The aliased edge of that triangle's tip is a mixture of red, yellow and green.

The edge on the Overlapped version is a mixture of just red and green, so it's a bit darker. B|

 

In reality though, by overlapping you've just shifted the problem right?

Instead of the edges between the shapes its the edges around the perimeter that have trouble.

So in order to get the best of both worlds you still need to be pretty precise with most (not all) vertex placements.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×