Fixing images in Roblox ui (black outlines)

Love it. Does it just do alpha bleeding but does it also double the size of the image?

1 Like

It just bleeds. Any reason why you’d have to double the size, though?

1 Like

The second part of the tutorial is showing that if you want a 50x50 image to be clearer, you should double its size. It said something about aligning it to a grid and that you can’t just simply resize it, though, so it makes sense that your tool doesn’t have that feature.

1 Like

So this was never fixed?

6 Likes

hmm.

2 Likes

I’ve been using your article to make my UI’s look nicer, but recently I’ve encountered a problem which is if I use offset the whole time to make my images crispier then they will not scale on all devices. I assume there’s no way to make image look crisp while using scale?

1 Like

Sadly not :^(

1 Like

To add on to this topic, I would strongly consider using these same methods mentioned in the OP for MeshParts. Consider this example:

Before

After

5 Likes

For Photoshop users:
Don’t download any plugins, photoshop has it built-in.

Layer > Matting > Defringe.
I usually enter betweeen 2-10 pixels to be safe, doesn’t really matter most of the times.
image

Black outlines? Vanished!

13 Likes

This is going to help so many new UI designers out there! Amazing tutorial, Quenty! :+1:

2 Likes

I’d still recommend the original solution, because after trying that for a few minutes:

5 Likes

True! Forgot to mention that it doesn’t handle stuff with opacity very well. The most common example would be drop shadows or any type of glow.

I’ve never noticed a major change around thin strokes though. Thanks! :slight_smile:

4 Likes

Very sorry for the bump, but the GIMP solution isn’t working for this one image.

path

After importing it into GIMP, resizing the canvas and then doing the fix, I get this result.

image

3 Likes

Idk if Roblox is screwing with my head, but this was literally workong for me this morning. Now, a few hours later I go back into my game, and all the images have the black outlines again.

I think you need to make sure you use the pixel size that fits the game

When you upload an image to Roblox and stick it in your game you sometimes see a black or white outline around your image when it scales. This is due to bilinear interpolation. This has been an issue on Roblox for a long time.
Here is a whole tutorial on how to fix it:

The script link for the gimp redirects you to a malicious site

this shows up for me

the reason it’s on arabic is because I live in a country where people speak arabic

so it’s recommended to use the other methods

1 Like

just an FYI, it no longer works

There is a better version that is linked in the javascript

Do you know if this also works for SurfaceAppearances?