Introduction
So this UI design is based on Sims 4. But you can definitely customize it the way you like and turn it to your own preferred style
Get The Model
Here’s the the model so you can customize it and fun around with it.
Procedures
Add a ScreenGui to the StarterGui:
You can always rename the ScreenGui for organization purposes or whatnot.
After, Add a ImageButton to inside the ScreenGui:
After adding an ImageButton this would be the property:
Add a UICorner to the ImageButton
This would be the UICorner Properties:
This is how it would look like:
Add an UIGradient:
This will add a bottom accent bar that will act a background for the Button that will be created below.
Gradient Properties:
Gradient ColorSequence:
Add an ImageButton to the Panel:
The ImageButton Properties can be this:
After setting those properties you need to add these things in the ImageButton:
- UICorner
- UIGradient
- UIStroke
UICorner Properties:
UIGradient Properties:
This is the ColorSequence Property for UIGradient:
This is mostly unoticable gradient but the button is small so the gradual fade would be compressed when placed on the button.
UIStroke Properties:
We need a translucent stroke to act like a Unshaded Shadow.
OOOH You reached the middle!
Add a Frame to the Panel to act a Container:
This frame is the place where you can place your stuffs
This would its properties:
Now this is optional to add a UILIstLayout but for brief organizing we’re going to add one.
We need to add 3 things in the Container:
- UIListLayout
- Description (Textlabel)
- Title (Textlabel)
UIListLayout Property:
Description Property:
Title Property:
To Finish Off the Agree Button, just copy the “Title” from the Container and paste it on the Agree Button and set the position to:
{.5, 0},{.5, 0}
To Polished Off the Main Panel, just copy the UIStroke from the Agree Button and past it to the Panel.
This is the preview without the Textlabels:
The close button will be created below!
We need to make now is the Close Button!
Duplicate the Agree Button:
and Add a UIAspectRatioConstraint:
The Aspect Ratio will make it onto square!
Close Button Property:
And We’re Done!
Okay these are the final previews and ideas:
This one is the Final UI:
This is one have different font:
This one have gradient bottom bar:
This one have left allignment:
Discussions
-
Actually this style of UI can be anywhere or any genre it’s just how you presented it.
-
This just present Shadows, Highlights, Lowlights, Light Angles, 3D Overlay.
-
This style was used in Sims 4!
-
Some people might dislike this style.
Outroduction
This is my 2nd Community Tutorial Post!
Hope this helps I included the Model Link for you to play around
Anyways leave up some replies and I’m up for them and likes are appreciated!