I made a UI outside of Studio, and uploaded it to Roblox as a decal. However, when I made an ImageLabel with the decal, the quality was awful.
The image I made is 5079 x 6864, so it shouldn’t be this bad.
Is there anything I can do to improve the quality of the decal?
You shouldn’t really make an image something with that high of a resolution, try going for something below 1024, as for the image I think making the text size more consistent would be better, and change the color palette a bit.
I reduced the image to 1024 x 1383, still given the same quality as before in Studio.
Also, thanks for the visual feedback.
I believe this can’t be fixed. Roblox has a hard time uploading detailed textures.
I may be wrong.
That really sucks, honestly. I do not feel like wrestling with the Studio UI editor to try and replicate the UI I made in the image.
One thing you can try is by going to “ScaleType” and make it “Fit”. This should make the quality slightly better.
Yeah also this, so it fits it to the original res of the image
All this did was offset the ImageLabel by like 1 pixel. It didn’t improve the quality whatsoever.
There isn’t much you can do when it comes to quality with exporting your UI designs. What you can try to do is whatever external program/software you used to make your UI, you should ungroup the whole thing and just export piece by piece, and then assemble everything to how you want it. Also, do not export your text. The quality is not very nice when you export text by itself and not grouped.
What size is your UI? Use that an upload the image again with the exact size of the UI and see if that fixes it.
Agree to this, if you want to maintain the closest in terms of quality, you should scale your UI dimensions based on the dimensions of your image. This can be easily done using the offset property of Size within the ImageLabel.
Adding on to that, make sure you set ScaleType to Fit instead of Stretch. Adding a UIAspectRatioConstraint can also help.
Import the image at the exact size that you exported it at.
@3rdhoan123
@Painshinratensei
@Tedwai
I have already done all of these suggestions. I’m probably just going to have to make the UI in Studio instead.
My mind initially went to exactly what you said. It seems like an odd thing to use an image for: Something filled with text. You could make frames and backgrounds and text labels and have this look crystal clear, and configure exactly as you want it. Use images for things like the envelope and other small icons.
5 months late, but there is definitely a solution to this problem. (Though, it is certainly an impractical one.)
Quenty had a problem similar to this where Roblox’s engine developed these blurry edges around the UIs. I recommend the read he typed up: Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium
Essentially, the impractical route would require you to crop out all the elements in photoshop one by one and increase the quality in each element by following the tutorial. Again, VERY impractical, but if it’s a desperate call, then try it out and let me know how it works!
