Fixing images in Roblox ui (black outlines)


Hi! Here’s an article about fixing ui images and those weird black outlines!

Importing crisp looking images (with alpha) into Roblox
How do I fix this fuzzy image outline?
Hitchhiker's Guide to GIMP: The Free Image Editor
ROBLOX UI bleeding issue
Black outline appears when scaling images
Is this a good UI design?
Image masking problems on circular UI
Black outline appears when scaling images
Black Outline Around Transparent Decals
Pixelfix: Remove the black edges on scaled images

Didn’t know that last part about 1:2 UDim pixels :wink:

That explains why complex images can look pixelated when at their original size

Nice tutorial


@Quenty, you truly are a national treasure, thanks for this!


Thank you @Quenty this is going to help me and alot of developers.


Wonderful article my dude! :grin:

The last part is what I didn’t actually know about which is pretty interesting to acknowledge, so thank you for that!


Just figured this out and it works like a charm! Thank you


For those that are able to compile this, here’s a command-line tool I found that automates this process:

EDIT: I ported the algorithm to Javascript! It should be runnable in your browser. Read this post: Fixing images in Roblox ui (black outlines)



(The transparency of both images were removed so that you can see how it affects the colors.)


I seem to be getting this error when I click ok.



I restarted gimp and it didn’t give any error but the transparent parts are still black for me.


Huh. I didn’t have this issue. You may have mixed versions of gimp installed, may want to uninstall and reinstall.


This was apparently fixed multiple times, no?


This has saved me


I wrote a javascript app that automates this process. It uses the same algorithm as the alpha-bleeding program I posted a while back, but is more accessible since you don’t have compile it yourself. Most importantly, you can run it entirely from your browser!

You can access it at (right side of the page)

or (save this as an .html and run it in your web browser)

How to run:

  1. Open the page.
  2. Click choose file and select the file you want to bleed.
  3. An image should appear in a black box at the bottom of your page. Save this image.

Importing crisp looking images (with alpha) into Roblox
How do I fix this fuzzy image outline?

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


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


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.


So this was never fixed?




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?


Sadly not :^(