Hey everyone, welcome to the first part of my series, How to make a GUI!
So a few days ago, I’ve announced the series here, and I’m planning on posting parts of it every few days. Anyways, let’s get started with the tutorial!
First things first…
What is a GUI?
GUI stands for Graphical User Interface. Basically they are elements on a screen, such as a button.
In Roblox, there are four things for the GUI, in which they’re called the StarterGui, the ScreenGui, the PlayerGui and the SurfaceGui. But for now, we will mostly be focusing on the first two things.
Getting Started
Firstly, open up Roblox Studio (if you haven’t already). Then, open up a baseplate experience, and then you’ll see a StarterGui. Inside of it, make sure to add a ScreenGui.
Now, I will explain the main elements for the GUI:
- TextLabel - used to label text
- Frame - used to put multiple elements into one
- TextButton - basically a text button
- TextBox - used to type in stuff
- ImageLabel - used to display images
- ImageButton - basically an image button
You can use of the elements to create a design. You can change the color of an element, you can add a border. But, just in case if you wanna make your designs cooler, you can simply add the following items:
- UICorner - used to make elements rounded
- UIStroke - used to add thick borders on elements
- UIGradient - used to add gradient colors to UI elements, however in order to do that, you need to make the main color of an element white.
That’s all!
I hope you have enjoyed reading this post. You can leave any feedback about this tutorial in the comments, and I’ll see you in Part 2!