Hello everyone. I would like to make a UI similar to the one seen in this game. I like the small effect under the UI that creates the 3D effect. I’m trying to make a UI like the first image. The second image is my attempt to make it. I am having a problem though as seen in the 3rd image, as the bottom 3d effect is misplaced. So, how do I make a UI like the first one?
It honestly depends on how you’re wanting to use the 3D UIs that will decide what solution you use.
(Do keep in mind I’ve only done UIs a couple of times, and they were mostly tutorials because UIs are a huge problem for me, so I may not have the best advice)
If you’re not planning on animating these buttons so that they will have an illusion of becoming 2D (not sure what to call that) then the easiest thing would be to just use photoshop to make the button (here’s an example I made just for this below):
(If you’re gonna use it feel free, that took like 2 seconds to make)
If you are planning on animating it, my only suggestion would be to go through the very tedious process of checking every device resolution and adjusting it to the point where it works on every device.
That’s what I did when I was trying to find a proper place to put a picture of a clock and a time label:
Hope I can help in any way.
This is wonderfully useful, thank you very much. The example image you made is pretty much exactly what I want. I guess I really don’t understand how you made it. I don’t have photoshop, but I have some similar programs I think. Is there a good youtube series that I can watch to learn how to make a button like that?
It really depends honestly, I learned it all by myself, but the things is different photoshop programs offer different features and have different ways of doing things.
To make that button I actually used two free mobile-photoshop apps. PicsArt and Bazaart. PicsArt for the text, and Bazaart for everything else. I’ve been photoshopping in mobile apps for 3 years, so I do have quite a bit of experience.
Mobile photoshop tutorials are VERY bad (in my opinion), so I don’t necessarily know of any ones that would be good to follow. Sorry for that.
What programs do you have? I might be able to find tutorials on those.
On my computer, it looks like I have gimp, paint, and paint 3D installed. If I find another one I’ll be sure to edit this and add it in.
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