Heres what you do:
Put an Image:
Then, under that add a grey square, though its a bit bigger:
This will look better with rounded UI, but if you look at it properly, it makes a shadow looking 3d.
try doing this though with UICorner, and it will look much better and stand out more.
It also looks better, if you do not put grey and put a darker version of the color.
1 Like
Are you saying do this in Roblox studio or another program? Because the pictures of the ones above I made were created in Roblox studio and they are having that issue. I’m not sure what you’re suggesting would fix it? Because the bottom part is moving away from the main UI. I don’t know if I’m right about this, but I think that the bottom darker colored UI needs to be part of the main UI, but I don’t know how to make that in Roblox studio.
So Ive seen what you have done.
I will make a video, and just put a youtube link to it, because it may be a bit long.
Edit: Nvm its broken.
So, yeah, I’ve already tried the one method. I’d like to try what @TheSuzerain was suggesting. Do you have any thoughts on how to do that?
This whole things is actually giving me an idea for a community recourse I could make!
I’ll start working when I can, and it could certainly help you with your problem.
That’s wonderful! Thank you very much. I’ve looked around at a lot of places to try and learn how to make UI, and I haven’t found anything very good. If you could make a tutorial that would be amazing. My game releases the 19th, so I’ll have to make do with a basic UI until your tutorial is finished, but a basic UI is better than no UI! Thanks again.
1 Like
So basically, get a shape
after that, duplicate that shape, so its completely hidden underneath the first shape.
Then, get the shape you duplicated, and make it slightly darker.
For instance: White button, duplicated button underneath would be grey-ish.
Then, get the button underneath, and make it a bit bigger.
Heres what I made:
I cant really explain it without a video, my screen recorder is broken. So I guess you will just have to search it on youtube. I found heaps of helpful things if you want me to link them.
Ok, I get the basic prinicple. How did you make that? Like, what program did you use to make that image?
Photopea, but you can use roblox studio to do the same thing I did: Just insert a frame.
Well, if you look back at the pictures I posted in the original post, you’ll see that I did try your method. If you look in the third picture though, you’ll see the problem. When changing the screen size, the 3d effect part of the GUI moves, disrupting the 3d effect.
So your issue is with changing the screen resolution/size?
Correct. I use scale for the size and position and on some devices the UI part that makes up the 3d part of the UI moves, ruining the effect.
1 Like
If you are using UICorner, make sure that it uses Scale for the size value as well.
1 Like
What is UICorner? I got the rounded images using a plugin called Interface Tools.
1 Like
UICorner basically makes the curved corners. That would be easier than using plugins.
You can find more information on that here.
1 Like
I think I’ll be able to finish this tutorial before the 19th. I will immediately @ you once I finish.
1 Like
Alright, thank you. That is helpful. If you don’t finish the tutorial that’s cool, the UI I’ve created so far isn’t terrible.
1 Like
I finished scripting everything, just writing the tutorial on how to do it now.
If I don’t manage to finish the tutorial in time, you can get an open-source file of this here.
1 Like
Alright, awesome. Thank you very much!
1 Like