Quality loss on images in GUIs, how to solve?

Hi, I’m creating a game but I’m having quality problems in Guis

I’m having quality problems, my menus have no quality, kind when I put on the roblox they lose the quality it seems
image

and when I go to see in photoshop the quality is high

I was wondering if anyone has an example or an idea to help me
I really just want a way to get more quality

2 Likes

When making custom images for ui, you should look for the size of the ui first, if its in scale, convert it to offset to see the size of the ui or select it. Then, make your picture based off that. If you want to remove the blurry edges, you can use a plugin with Quenty lists in his post : Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium

Hope that helps!

9 Likes

I will try :smiley:

I could not but if you could make an example for me would be very useful

From the picture you’ve provided, there’s no theme to the icons you’ve used. Some of which are washed out, some have totally different designs.
What I can say is be consistent with your use of UIs- keep one theme, not multiple.

@3rdhoan123 made a valid point too

I wouldn’t be able to do it as you have the picture files. The first thing you would want to do is find the size of the ImageLabels/Buttons.

Use that size and make the buttons using that size. The more consistent and close it is, the less blurry and unclean it looks.

The image you gave me is a 6080 by 2080 which is way too large for what your working on and using it.
Remember, the larger the image, the more blurry it becomes when it is shrinked down to fit.

Thats all I could help with, other than that, good luck!

Edit: Change the artboard size in adobe illustrator to fit the button sizes then shrink the buttons to fit with the new artboard. That should make it better.

3 Likes

Could I use this for my own work?

oh ok

ok :smiley: