Export for Screen glitch causes black outline on white text

Question

Process that causes a glitch/unknown result:

1. Illustrator files made in 2015, converted to 2023 version.

2. A watermark layer which is a layer with just white typography which is a placed illustrator document containing un-rasterized white text.

3. Layer 2 is graphics you want everyone to see.

4. "Export for web (legacy)" , "Export Assets" , and "Export for Screens" causes a shadow/outline around the white typography when exporting web png 24 transparency . Not an anti-alsing issue, or extra style within Appearance panel. Thought it might have to do with some unknown setting that was selected, or pixel conversion. I'm increasing the width from 400px to 1000px within Export Assets and thought that conversion is what does it.

It's a strange occurance, sometimes the the Finder shows me the image as the intended result, while the browser doesn't, or Adobe Bridge reveals the black outline. Safari on desktop sometimes shows no shadow/outline, while viewing the same image on apple watch reveals the shadow/outline.

I even created a new document and copied the graphics into the new document and sometimes get intended result which is white typography can only be seen if you change the background-color of the html to black.

Brad @ Roaring Mouse · Accepted Answer

Scratch that.. no need to send a file.I made a sample file similar to yours and I was able to reproduce the exact same issue.What I noticed is it ONLY happens if you use the Legacy Save For Web export workflow and only if you use the Art Optimized setting. The halo effect does not occur if you use Type Optimized.Why it's happening I don't know. It appears as if it was an old-school alpha channel approach to making a transparent file and it's showing a sliver of a Black background around te transparent anti-aliased edges. I also tried an older Illustrator and it did the same thing so it's not a new "bug".Alternatively, if your goal is to create a PNG of a specific size (e.g. in your case 1000 pixels wide) open them and render them to that size in Photoshop. The halo effect doesn't occur in that workflow at all. I know it's an extra step, but you have more control than the old Legacy Save for Web.

Brad @ Roaring Mouse · Answer

Forgive me while I ask the obvious: There's only ONE layer of only white text in your watermark background image? (i.e. no copy behind it that is Black?). I can see how exporting a sandwich like that could produce the "grey" outline as the antialiasing at the edges would create enough transparency to show a sliver of a darker object behind.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded