How to recreate such UI style?

Hello.

I’ve recently been invited to a game called Evade.
Right after the game loaded, I was amazed with this splendid user interface (images) and wanted to replicate it in my games.
How is this UI style named and how to make UI with it?


image

1 Like

Not really sure what style it would be called but the UI is like dunno more modern or somthing. It just looks super neat.

That’s what im saying. I cannot get how to recreate it

Well all it really is, is just a box with an image (or colour) with some text in with a border around the button.

Something like this could be designed in most editing websites or software easy.

This looks to me to be completely done inside studio, no outside software needed.

image label, UI corners (probably around .1 or less), text button in the middle with what seems to be normal font that’s white.
image

There’s a slight gradient on the solid colored buttons, it gets darker towards the bottom a bit:
image
There’s a white or black frame or both “behind” or “around” the initial UI, that could be a UI stroke or it could be a physical “frame” behind the image/colored frames.

seems to be .5 transparency, black, or something similar for the very “back” of the UI, like the first frame of the buttons.

1 Like

Imo it seems pretty easy to do. A few UIStrokes and UIGradients on the buttons, maybe viewportframes but probably just screenshots.

1 Like

Sure it may be possible to be done inside studio but sometimes people find it easier.

1 Like

After taking a precise look at the buttons, I noticed that there are 2 strokes in the buttons: one grey second black. Roblox doesn’t allow you to have multiple UI strokes.

You can make a gray-colored frame with a UIGradient with the color black. Then you can insert a GUI object inside it just slightly small enough that it would look like it had 2 outlines.

2 Likes