Fixing images in Roblox ui (black outlines)


#1

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
#2

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


#3

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


#4

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


#5

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!


#6

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


#7

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)

Before:

After:

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


#8

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

image


#9

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


#10

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


#11

This was apparently fixed multiple times, no?


#12

This has saved me


#13

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

http://js.do/rootmars/alpha_bleed_js (right side of the page)

or

https://pastebin.com/raw/81QpWtsv (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?
#14

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


#15

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


#16

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.


#17

So this was never fixed?


#18

hmm.


#19

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?


#20

Sadly not :^(