How to make images don't go blurry on big or small screens?

Hello! My name is Sandessat, I’m an intermediate UI designer and good at making GUI’s responsive, but I’ve got a problem that stresses me too much and haven’t found a solution to it.

The problem is:

How can I make my images don’t get blurry on big or small screens?

I’m scared of doing an image for a GUI because I know there will be problems (blurry, etc).

I have been investigating and something that I discovered (and made me get more scared) is that I have to make lots of images for every resolution to prevent it getting blurry. It sounds stupid but I don’t know if this is the way the developers do their images…

Please help me remove this fear and be able to calmly create my images without them becoming blurred.

1 Like

The resolution is the problem the smaller the resoloution is i.e 250x250 the more pixely it gets also I dont really understand your problem can you send screenshots please - thanks

I don’t have a screenshot, I just want to know how to make my images don’t get blurry on big screens.

For example, if I put my image in my resolution it will not look blurry, but if I use the test device feature and increase the resolution, the images will look blurry.

Is it a ui or something if its made on photoshop than the pixel resolution you set is the one you will get in studio if you change its size to fit it will become hazy, The only solution i can think of is to add a UIAspectRatioConstrait good luck! :slight_smile:

2 Likes

Did it work @Sandessat Hope it did!

1 Like

A bump but you can export in a much higher resolution (512*512) and refer to this medium post: Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium

1 Like