Change an offset gui to a scaled one, without looking ugly

Hi!
I have a gui like this:


But, I want to make it scaled fully.
But when a scale it fully it looks strange.
This GUI is an image with the size of {0, 1261},{0, 789}
How do I fix this?

Kind regards,
Sasial.

1 Like

What I would do is change its size to {0.1, 0},{0.1, 0} to make it Scale, then drag-to-resize it with the tools onscreen. I find that method much easier than finding the exact number for Scale.

Tip: a Scale size of {1, 0},{1, 0} will be the size of a screen. Work with those dimensions to figure out what’s right for you.

1 Like

A better idea is to download a plugin that I use that converts offset to scale and vice versa. Sorry I do not know the name of the plugin, I will try to look for the name!

1 Like

But what about other screen sizes?

1 Like

Make use of this plugin. It should help you solving your problems.

1 Like

That was the plugin I was talking about! Thanks for putting it there.

1 Like

Thanks for your help.
My question is answered, but when I change the GUI’s scale to 1,0,1,0 it becomes strange.
I’ve tried a UI aspect ratio, but it doesn’t work on some screens.
My screen and @xJxck_yy’s screen:


(Thanks 2 displays, discord screenshare and print screen)

How do I fix this?

Set the most parent frame’s size to 1,0,1,0.

Edit 1: You probably set ScaleType to Fit

My scale type is stretch.
What should it be?

For making the GUI scale to the entire screen you are going to want to use the size of {1, 0},{1, 0} on the background ImageLabel (the one listed in the picture below). You also don’t need to use a UIAspectRatioContraint but you can if you want to. If the GUI is still looking weird, you might need to redesign the UI elements inside of the background ImageLabel (again, listed in the image below) to scale better across all screens. If you have any other questions feel free to ask them! :+1:

image

That’s what I’ve done. :confused:
The GUI was originally done in offset.

So what currently is the issue with the GUI? As I said in the post before, you might need to redesign your GUI to work with scaling across all screens.

Yea. I can tell I need to re-design it.
It’s been done in illustrator (Using an offset ofc)
So I don’t know what size to do it as where it’ll scale well…

When you say size are you are referring to what the image size is when exporting it out of illustrator?

Yes, I am.

30 chars

Ah, I see. I recommend exporting the image out as a 1920x1080 image so you will get the most out of the image then set the size of the ImageLabel in studio to be {1, 0},{1, 0}. From there, choose the “Crop” ScaleType under the image section for the ImageLabel in the properties window. What that will do is crop that image to whatever the screen size it, so it will look great across all screens with the least hassle.

Please note: the “Crop” ScaleType will crop out portions of your image so it might not all be visible. However, in your case it’s just some background detail, so I think you’ll be fine.

Is there a difference ScaleType?
As I’d rather not crop…

Take a look at all the different ScaleTypes here: https://developer.roblox.com/en-us/api-reference/enum/ScaleType/index.html