Round User Interface Help

Help and Feedback Art Design Support
1

I’ve been using Stelrex’s Roundify plugin (Roundify - Roblox) to better create my UI. I started noticing a bit off-placement in studio:
image
(You notice it on the left bottom side in the question mark box and yes I know that most of the stuff in the picture isn’t scaled right)

Here is full screen resolution of my screen in Roblox:

image
image1202×679 569 KB

And then the disappointment came when it was all folded and off placed when I changed the window size.

image
image760×599 314 KB

The round UI pixels were all the same when I created it so any help would be appreciated on the best option going forward is to make Round UI if it’s from Adobe or inside of Roblox. I’m trying to stay away from using Roblox’s own Round property for quality purposes. This mainly was for just a test of my abilities so I can create something bigger and better soon. Thanks.

1 Like
2

The reason as to why the roundness increases is because the roundify plugin uses the slice method in terms of scaling an image. And the properties for that are in pixels, so they’ll just stay put regardless of screen resolution.

If you really want to keep the roundness of a button, you need to upload a rounded image a button manually from an external source like Photoshop.

2 Likes
3

I created a Round Rectangle in Photoshop and still not sure on what’s best. When I exported it normally and uploaded it to Roblox; the “resizing” / coloring was off.
https://gyazo.com/21a4ea0440bc7b07f46ac54b75a93413
https://gyazo.com/2dd41cb359e7851025d920b7a4f1cbcc

Should I be making the entire UI in Photoshop and uploading it to Robox and overlapping it with an ImageLabel? That wouldn’t be the most effective in animations, but there is an Adobe XD / Illustrator app.

4

Make it white, then you can adjust ImageColor3

2 Likes
5

In regards to resizing it; is there any specific steps I should take in Photoshop?

6

You should be able to just make it the normal value, ScaleType.Strech, unless you’re trying to do something different?

7

The ratio of the corner size is different when changing the size of it
https://gyazo.com/b46735288dec8a37897de543439ffac4

8

Oh, so you’re trying to nine-slice?

9

Yeah, that’s what I’m going towards to for proportional scaling.

10

I don’t have a lot of expertise there, I’m sorry.

11

Set your slice to the centre of your image. For instance, if your image is 128x128px, set the SliceCentre to 64, 64, 64, 64.

This is not always the solution with more complex 9-slices, but for a plain “squared” image, it works great.