Removing grey edges on transparent image label

I know that this is a common issue posted here, but I’ve been looking through previous posts and haven’t been able to find a working solution.

I’m trying to create a mask of sorts to give an image a rounded appearance to replicate the round player thumbnail in the home screen. image

to do this I used paint.net to create an image with a white background and a circle in the centre that has 0% opacity.

the issue I’m experiencing is the same as what other people, except that the common fixes, such as the one in this article by quenty Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium, aren’t solving the issue. You can see that the transparent pixels in the image are the same white as the opaque pixels and that there are no pixels in the image with an opacity that isn’t 0% or 100%

I believe that that the issue may be caused by the image not being at its native size, (1028, 1028), but unfortunately, I need the player-thumbnail to be scalable.

I don’t necessarily need to get rid of the issue with the edges, I’m more looking for a clean way to display the image gathered by [

Players:GetUserThumbnailAsync

](Players:GetUserThumbnailAsync).

sorry if that doesn’t make sense, feel free to ask for clarity in the comments

you can see that I’ve already had a look at that, and if you use a colour picker on the transparent pixels in the image you can see that they are the exact same value of white as the opaque pixels. This is the reason I’ve decided to create a new post, as that solution didn’t fix my issue.

1 Like

Try keeping your uploaded image at 1024x1024 or below. Larger images get resized on upload which might change the colors of transparent pixels.

If that does not fix your issue then you should download the asset from Roblox and check if the transparent pixels have the correct color. Recently, Roblox has been changing transparent pixel colors on upload. This is a bug and has been fixed twice so far, but it might have resurfaced. You can download an asset from Roblox by going to http://www.roblox.com/asset?id=your_asset_id here then saving it with the correct file extension (.png)

If the colors are wrong in that image then you’ll need to reply to my existing bug report or make a new one. If this issue is occurring again then it likely will not be fixed until January due to the holidays.

1 Like

I’ve solved the issue by using boatbombers image clipping module, Image Clipping Module.

While this doesn’t fix the issue of the grey borders, it solved my overall image of not being able to effectively create rounded thumbnail of a player’s avatar

1 Like

You’re trying to make it have that grey background in the circle?

You can color the circle MeshPart grey and make it non-transparent and then you’ll have the grey circle.

This is what I did for the “Behind The Scenes” part of the module’s write-up post.

c28ad3c06673943ef13a876f91308b1f95518234~2

1 Like

that’s what I tried and it worked well! thanks for making the module open source, after I got the image clipping to work I’ve been able to get a pretty realistic home page working

1 Like