Fill pixels from behind the stroke

[ChinqMiau]

G’day, I have a simple question about the fill and stroke. Sample document is attached.

 

Long story short, when I stroke a circle on the inside of the path I can see the fill poking out from the edges. My problem is that I need to create an icon that fits 180px precisely and I’m creating a circle path that is of this exact dimensions (180px diameter)

 

What would be your recommended solution to this problem?

 

I can stroke the path in the middle or on the outside but then I would have to compensate for the stroke width and path diameter to fit exactly 180px. Is there any other way to solve this task?

 

A document where I tried this is attached and it also includes exported assets clearly showing the fill pixels outside the stroke.

 

/k

 

 

 

 

Icon.afdesign

[MEB]

Hi ChinqMiau,

Welcome to Affinity Forums :)

No currently there's no other way to do it, unless you create another duplicate circle for the stroke only and reduce the original circle a little.

[ChinqMiau]

Thanks MEB! This is bit a bummer as most of my work has some form of curves and stroked in it. Ah well.

[JimmyJack]

You could do a radial gradient with a real short drop off from blue to white "underneath" the interior stroke.

[crabtrem]

By using the expand stroke command, the stroke will become that second circle. One option is to create the stroke on the outside, and make everything the way you want it, except for overall size.  Expand stroke. Group them together.  Use the transform studio box and resize to the exact measurement you want.  Now you have your logo, with a border the way you want, and at the exact size you want.

[R C-R]

Maybe I'm missing something but after playing around with this for a while, it isn't exactly that the fill is "poking out from the edges." Instead, it is that the outer edge of the stroke is anti-aliased with shades of the fill color (in this case blue) instead of the shades of the grays that one might expect for an anti-aliased white stroke.

 

In a sense, this could be considered a bug, could it not?

[R C-R]

ChinqMiau, I think the simplest way to get what you want is to duplicate the circle & scale it down to 180 px less the stroke width you want (in this case 180 - 2x7.5 px or 165 px), then change the smaller circle to no stroke & the larger one to a white fill & no stroke. This is actually pretty quick & easy to do visually with the move tool, or you can use the transform panel with the chain lock on & change the width or height with the scroll wheel if you want to avoid the math.

 

The attached is the result of doing that. Exporting it to pngs anti-aliases the outer edge with grays, which I think is the best you will get.

icon v2.afdesign

[ChinqMiau]

Thanks for the responses, you're all quite helpful! All suggestions are easy workarounds which is great yet I'm somewhat disappointed that the stroke (over fill) functionality is unusable for UI design. R C-R, are you suggesting that I should perhaps try to log a bug report?

[R C-R]

Yes, I think you should report it & see what the developers say about it.

 

In fact, after doing a few more experiments, I noticed that both the inside & outside stroke settings have what I consider to be undesirable anti-aliasing effects when exported as png's. As we saw, when the stroke is inside the fill, the outside edges of the stroke are anti-aliased with the fill color instead of the stroke color. I originally thought the inside stroke edges were anti-aliased with the fill color but now I think it may be the fill itself that is being anti-aliased. 

 

That is because when I set the stroke to be outside the fill, I got what looks like the fill & stroke being anti-aliased separately, with the result that the boundary between the stroke & fill seems to be partially transparent, allowing the background color to show through.

 

Only when the stroke is set to be centered on the fill does it produce what I think is the most desirable anti-aliasing effect, which is the inner edge being antialiased with blue & the outer with white shades.

 

This is hard to describe so I have included a screen shot comparing the three stroke settings. All were done with the same blue fill & white stroke colors against a contrasting orange background to show the worst case edge effects. All were adjusted as required to be 180 px before export & pixel aligned. I used the standard PNG-24 export preset. The screenshot is from an 800% zoom of the 1X export size to show the effect as clearly as possible, but the 2X & 3X versions have the same issue.

[MEB]

This is already known and has been explained in other threads.

It's due to the antialiasing picking some some colour from the background or background objects. It also happens in other situations (when you split an object in two through a boolean operation for example as long as the cut is not totally vertical or horizontal). This also happens with other software in similar circumstances. It's not something trivial to improve.

[R C-R]

It's due to the antialiasing picking some some colour from the background or background objects.

In effect, with the exception of the centered stroke setting, it is because during export the anti-aliasing is applied to the stroke & the fill as if they were separate objects. It also occurs when there is just one shape object with both a fill & stroke color & there is no background or other object (as with a transparent background).

 

If not for the centered stroke behavior, I would agree that this would be extremely difficult to fix. Maybe I'm missing something, but as it is I don't see why it could not be programed to automatically do what I can do manually as a workaround, that being to resize the object to take into account the size change that occurs when changing the stroke from outside or inside to the center setting. This also works for boolean cuts on an angle.

[ChinqMiau]

I just tested this in AI and PS and yes it's happening on splitting an object, but not with the stroke. Anyone knows whether this is going to be addressed in the future release?