2

So I've been creating a sign pack for a game I play and ran into a very odd issue.

What I've been doing is create a bunch of shapes in Illustrator and export them as SVG. Then importing them to PhotoShop for assembling them and from PS I've been exporting them as a transparent PNG. Now the issue is that when I put the exported image infront of a dark background, be it in the game or e.g. when sending it in discord, I see some white color shining from some edges of the image. Which is odd as the image I use started as full colored shapes in SVGs so there shouldn't be any white in the first place.

The image in game

The image when sent in discord

The image in question: This is the image in question

Does anyone have an Idea where this effect could come from and what I can do to prevent it?

Improve this question
5
  • 1
    ermm.. your "image in question" has a white background. So it's not really representational of any transparent png you may be using. In any event, any white fringe is most probably due to anti-aliasing which is being introduced into a PNG (since PNG is a raster format). Why anti-aliasing is being introduced would come down to examining your workflow and export settings. Curves and angles can't be maintained well by default without anti-aliasing. The export settings for the PNG matter.
    – Scott
    Oct 9, 2022 at 17:04
  • @Scott the image I shared has no background, its white bg is just because of stackechange's background color. The export of the shapes from illustrator shouldn't be a problem as there is no aliasing in SVG files. Means that the issue stems from Photoshop. I checked all options I have but aliasing wasn't part of it when using the "Export as" dialogue. :/
    – cscholz
    Oct 9, 2022 at 17:38
  • You're right :) seems copy/pasting introduced a white background for some reason. It's never one that before. I don't see any white anti-aliasing in the transparent PNG. I can only assume the anti-aliasing is being introduced by other processes. Like Discord.. what you upload is not the image you see on Discord. They post-process all uploads to adjust size, recompress, etc. to match their standards.
    – Scott
    Oct 9, 2022 at 17:49
  • The PNG does not have any white, the error is born in the application of the image, but not in Photoshop. Photoshop displays it perfectly against a black background layer; in this way i.stack.imgur.com/gl0JQ.png Start the troubleshooting in the applications.
    – user82991
    Oct 9, 2022 at 17:56
  • @user287001 glad to hear it's not my fault, but kinda disappointing I can't really do anything against it.
    – cscholz
    Oct 9, 2022 at 18:11

2 Answers 2

Reset to default
2

The transparent area of your image has as well black and white, only the alpha channel is zero (=fully transparent). Opening your image in GIMP and turning with the curves alpha to 100% reveals it:

enter image description here

Photoshop does not make errors with this. It displays your PNG perfectly against black background:

enter image description here

But the application programs you use let the RGB values of the transparent area to spread on the violet area or they render a part of the transparent area as opaque.

I suggested in a comment that try to fix the behaviour of your applications. If it's not possible you can either use your image with a solid background or at least fill the transparent area with non-harmful RGB values (=0,0,0 or violet in this case) but keep them transparent.

I have no idea have you a possibility to create better behaving version in a vector drawing program, but make such version in GIMP to have full control. In GIMP you simply make a selection which contains the transparent area and then you turn with the curves the transparent area black or fill it with a non harmful color.

Try also to save as PNG with no transparent area RGB color info. It's an option in PNG exports. Here PNG export BG color is disabled in GIMP:

enter image description here

Improve this answer
1
  • This seems to be what I've been searching for! Thanks a lot, quite disappointing that Photoshop has so few options when it comes to PNG export.
    – cscholz
    Oct 9, 2022 at 18:51
1

I used to do a lot of texturing for an online game - which was very DIY, quick & dirty, because of the engine behind it.
The quick trick to prevent this type of fringing on a simple edge was to magic wand to provide a mask

enter image description here

then hit it twice with the paint bucket, which just nudges the edges in a bit

enter image description here

Result, simple working alpha for clumsy 3D rendering engine.
Alternatively for a single-colour logo, just colour the entire image the same colour as the logo, then the alpha accuracy doesn't matter.

Improve this answer
3
  • Apparently the best way to do this is by going to Layer > Layer Mask > From Transparency. Does what you are doing in one step.
    – cscholz
    Oct 9, 2022 at 19:38
  • Not for the particular usage I had. It would leave a partially transparent edge, showing part of the background colour.
    – Tetsujin
    Oct 10, 2022 at 6:22
  • I see what you mean, thanks. The solution with exporting through GIMP which is turning all transparent pixels black solved the issue for me though
    – cscholz
    Oct 10, 2022 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.