What ui design type is this?

I am gonna make a stamina and health bar. What type of ui design style is this?

1 Like

Which part? There looks to be three ui elements here… the bar which will tween left, the bar which will tween right, and then the diamond ui over it that will count up. Or do you just mean the color shading?

I mean like, how did the screenshot I provided, how did they make the bars look like that? It looks nice and I wanna know how they made the bars look like that.

I dont know how they did it exactly but i got something very close by using two overlaying buttons… see the explorer to the right to understand and i just used two different reds, the lighter bigger one underneath the darker smaller one:

Edit: I duplicated the other side and added a button to the middle thats square but rotated 45 degrees:

2 Likes

It’s that easy? Wow. I’m shocked lol

Was it just a blank image button? Or did the image button have an image on it.

Just a blank image button i just changed the color… the only image i added was the skull… ofcourse this was done super quick with no sizing or scaling or finishing touches just to give you an idea of how to make it.

1 Like

The first image of just the red side is two image buttons overlayed, one shorter (in height) than the other with a different shade of color and the shorter image button has the border set to zero so it blends in nicer.

1 Like

I can’t seem to exactly get it to look like this. It looks a little different.

This is what I got:

image

Thats good… just make the background one lighter… and thinner.

Also, make sure you only use Scale values from the start.

1 Like

Okay, here.

image

It doesn’t look the same as in the image you provided. I’m not sure why.

Make the lighter strip of red even lighter, almost a little pinkish. Then remove the border from the same lighter strip.

1 Like

This is what I got:

image

I’m starting to see it a little bit, but it still doesn’t look as close as the images above

Can you add a black border around all of it now? Like this.

image

image

Above was a comparison of the two. Still need to make the red more pink. Can’t remember if you can do this on GUIs and stuff since I’m not an expert or anything, but I would grab a color picker, copy the ID for the color provided in the first picture above, and then paste it into your GUI.

Yeah, I did. Look:

image

Ok so I grabbed the color picker, and I got the pinkish red. Here’s how it looks now:

image

2 Likes

Yes i mentioned it here: . . .

1 Like

Look. I’m comparing the two.

Mine:

Yours:

image

1 Like