Help on improving UI quality!

Hello developers! I recently decided I wanted to begin UI design, and turns out there was A LOT more to UI than I initially thought.

I wanted to learn how to improve my UI quality, because when I imported in an image as a test, I could see some noticeable pixels and a weird black outline. How can I fix this? (I use Inkscape, not Photoshop etc.)

image

Thank you so much for your support! ^^

2 Likes

To fix black outlines it would be helpful to be introduced with this thread made by Quenty: Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium

To make a high quality UI it is reasonable to export the image as PNG and with higher dimensions.

I hope I helped you! Good luck

2 Likes

FYI, the link you provided shows an error. Reason I clicked it was because I thought it would benefit me, this happened to me before.

Hello! I’ve exported the image in the example as a .PNG and with 1000 by 1000 pixels dimensions, so should I export this with even higher dimensions?

1 Like

The link was updated. (30 chars)

1 Like

Is the 1000x1000 pixel dimensions a larger version of the original image? Keep the aspect ratio.

I’ve exported the image as the correct size, the icon in my editor is 1000 by 1000 pixels, so I’ve just exported the image as the correct size that the icon was made.

1 Like

Try to experiment with dimensions and see if it will work or no. As I believe, the outcome is the higher dimensions the higher quality of image. I am interested in solving your issue. :slight_smile:

2 Likes

Thank you! I will notify you as soon as I have some updates. :smile:

1 Like

The article gives multiple solutions to fix the problem. Make sure to give it a look!

1 Like

Roblox has a limit of 420x420, so you are losing quality there.