UI Scale problem

[Un0oeufplat (Fylozofi)]

Hello, I have a problem with my GUI, when I do the design, it’s beautiful but when I put in phone version or others … the GUI is stretched … I don’t know why…

Normal :

Phone :

[NinjoOnline]

You need to use 9 slice scaling

How to use SliceCenter (Roblox's 9-Slice GUI Property)

Ever wanted to create borders for your UI that you can stretch however you want without distorting the image? Your solution is using 9-Slice scaling. The concept of 9-Slice scaling has been around for quite some time. So you want something like this? [image] And you want to use one image without getting results like this? [image] Well all you have to do is make a template, like this. [image] The corners of the image never stretch, the 4 sides only stretch to their respective directions, a…

[Un0oeufplat (Fylozofi)]

Doesn’t work for ImageButton or ImageLabel

[Milkeles]

I suggest you using UIAspectRatioContraint if you scalled it properly with Scale and Offset.
I think everything you need to know about UI scalling is explained in this topic: UI Design Starter Guide
I think it can be helpful.

[NinjoOnline]

9- slice is made for imagelabels and imagebuttons. Make sure scaletype is Slice.

[VegetationBush (FartedWayTooHard)]

Yes, you should use 9 slice. Basically, for these kinds of images, you slice the center of the image. So, you should know how big the image was in pixels (e.g., 100 pixels by 200 pixels). If your dimensions are those then your slice center would be:

50, 100, 50, 100

Basically, you divide the dimensions by half.