YT YouTube2Text

YouTube2Text → Transcripts → How To Improve Your UI In Roblox Studio

How To Improve Your UI In Roblox Studio — Transcript

by Kingkade 3D · 3,040 words · 394 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00I'm going to be showing you all how to
0:01improve your UI and transform it from
0:03this over to this inside Roblox Studio.
0:06Let's jump right into this. So, as we
0:07can see, this UI right here isn't too
0:10good. It's kind of outdated. Of course,
0:12it still works, but it kind of makes
0:14your game look bad compared to this UI
0:16right here. Which this UI is just as
0:18easy to make, if not easier, and I'm
0:21going to be showing you all how to make
0:22it. So, first off, go over to Starter
0:24GUI and click the plus and add in a
0:26Screen GUI and rename this whatever you
0:28want. I'm just going to rename it video
0:30UI for now. And then from here, we have
0:32a few options, but I recommend just
0:33clicking the plus, adding in an image
0:35label, and now you want to make sure you
0:37have the toolbox open. If you don't have
0:39it open, just click this button right up
0:40here, and then click on these three
0:41lines, go down over to decals, and then
0:44just type in studs. If you don't want to
0:46make this into stud UI, you don't have
0:48to, but I think overall, the stud effect
0:50looks a lot better, and it's also super
0:52popular in games right now. And on top
0:54of that, it's just as easy to make as
0:56regular UI, so you might as well include
0:58it in the game unless it just absolutely
1:00does not match the theme. Anyway, back
1:02over to our regular UI, we just added in
1:04an image label, and we just searched up
1:05the stud texture. We actually want to
1:07right click this and click copy texture
1:09ID, and then inside your image label,
1:12scroll down inside the properties and
1:14paste it inside this right here where it
1:15says image. Then just click enter, and
1:17this will put the stud texture. But
1:19currently, if you try to scale this, it
1:21will just stretch it, which we do not
1:22want that. So, go down here, change
1:24scale type over to tile. This still
1:26won't fix it, because as we can see, it
1:28still stretches, and to fix that, we
1:30want to go down over to tile size and
1:32type in 0,100
1:34and then type in ,0,100.
1:37Click enter, and at first, nothing will
1:39change, but now if you try scaling it,
1:41as we can see, it scales much better.
1:42Anyway, now that we have this, we're
1:44ready to start building our UI. So, if
1:45you look at these ones right here, as we
1:47can see, we have the top where it says
1:49like server effects, settings, and then
1:51we just have the background where all
1:52these scrolling frames in the actual UI
1:54are. So, we're we're to be doing the
1:55same thing here. Also, feel free to
1:57change it up, but I think this style
1:59right here looks super good. So, we're
2:00going to go over here and we're just
2:02going to start off with the top. Also,
2:03when making your UI, I would recommend
2:05scaling it depending on the studs. So,
2:07right here, as you can see, it ends
2:08directly on a stud and I wouldn't really
2:10do that just because it kind of looks
2:11sloppy because there's just kind of half
2:13a stud there. So, I wouldn't really
2:15recommend doing that. It is kind of
2:16inevitable whenever you do like UI
2:18scaling and all that. But, while you're
2:20making it, I would just try to just keep
2:21it clean. Anyway, we want to make our
2:23header right here. Now, we're going to
2:24click control D to duplicate it and now
2:26this is just going to be the background
2:27and we actually want the background to
2:29be right on top of it and then we're
2:31going to scale it down. So, now for the
2:32background, we're going to go down here
2:34to background color and I'm just going
2:35to use this color right here. You can
2:37copy it if you want to. But, now for
2:39background transparency, we're just
2:40going to change this to like .15. I find
2:42that works pretty well so you can still
2:44kind of see through it. But, now since
2:46we changed it, the studs are a little
2:48bit too prominent. So, we're going to go
2:49down here to image transparency and
2:51we're going to change that to about .75.
2:54Which So, I'm just going to type it in,
2:55.75 and there we go. That's our
2:57background. Now, as we can see, our
2:59header is behind it. But, what we're
3:00going to do is we're going to go down
3:02here and we're going to change the where
3:03it says ZIndex. We're going to change
3:05that to zero and that's pretty much just
3:07what layer it's on. So, as we can see,
3:09this one right here, our header, is
3:10ZIndex one. So, the layer is higher than
3:12the background and of course we want to
3:14keep it clean. So, we're going to rename
3:16this and we're just going to name it
3:17background. And before we make the
3:19header and make this UI 10 times better,
3:21I just want to say I created a new
3:23Discord server and on here you can talk
3:25about all sorts of development stuff and
3:26also get help from other people and also
3:28I'll be available in chat. So, if you
3:30want any help from me, you can contact
3:31me on there and I'll also be listing
3:33multiple resources such as free UI packs
3:36that I make and also free assets. So, if
3:38you're interested in that, the Discord
3:40server will be in the description down
3:41below. But, let's jump right back to the
3:43video. Now, for [clears throat] our
3:44header, there's a few things we want to
3:45do if we want it to look like these
3:47right here. First off, we want to click
3:48on it and we actually want to make a
3:50duplicate and move it down just
3:52slightly. This is going to be our
3:53shadow, but now let's go back over to
3:55our header. Let's change these index to
3:57two just so it's on top of the shadow.
3:59Which speaking of our shadow, I'm just
4:00going to make the image transparency all
4:02the way to one just so it kind of gets
4:04rid of it completely because we don't
4:05really care too much about the side
4:07texture. Now for our main header, we're
4:08going to click the plus and we're going
4:09to search for a UI gradient. This one
4:12right here. And now where it says color,
4:13we're going to click on it, click on the
4:15three dots, and now with our gradient
4:17open, we just need to select the colors.
4:19So for this one, I think I'm going to do
4:20a green gradient kind of like a shop. So
4:22I'm just going to choose the brightest
4:24green and then I'm going to click on
4:25this side over here and I'm still going
4:27to choose green, but I'm going to move
4:28it over kind of to the yellow side about
4:30right there. Now we just click close and
4:32as we see it's from left to right, but
4:34to fix that we can go down over to
4:35rotation and we type in -90 and then
4:38this will make it go from the bottom
4:40upwards. And now with this, we want to
4:41click the plus icon again and we want to
4:43search for a UI stroke. So this one
4:45right here and now this is going to be
4:47the outline that kind of glows. Like all
4:49of these how they all have an outline
4:50that's brighter than the inside. That is
4:52what we're adding right now. So for this
4:54UI stroke, we want to change it from
4:56outer over to inner and for thickness, I
4:58think I want to do about five. Yeah, I
5:01think that looks pretty good. Now for
5:02color, we just need to choose a color
5:04that's brighter than that. So let's go
5:05over to green, bring it all the way up
5:07and now let's just slowly slide it over
5:10and yeah, about right there should be
5:11good because it's a bit brighter than
5:13the entire thing. Now we're going to go
5:15back over to our shadow and we're going
5:17to click on background color. And what I
5:19usually do is I click pick from screen,
5:21I click the bottom right here and then I
5:23usually just make it a bit darker and
5:26since this is green, I'll probably
5:27change it over to a bit of a blue color
5:29while I'm still making it darker and
5:31there we go. Now that's definitely moved
5:33down too far, so let's move it up a bit
5:35and there we go. But we're not done
5:36quite yet because for our shadow, we
5:38need to click the plus icon again and we
5:40need to add a UI stroke and this one we
5:42do want to be on the outside. And I'm
5:43going to change the thickness to five
5:45and as we see it doesn't go around the
5:46whole thing, and it also doesn't fit
5:48around the entire top. But to fix that,
5:50what we're going to do is we're going to
5:51select our background, we're going to
5:53add in a UI stroke as well, and we're
5:55also going to change the thickness to
5:56five, and then boom, look at that. That
5:59is pretty much our UI right there. Now
6:01let's just rename a few things. So let's
6:03rename this right here to header, and
6:04let's rename this over to shadow. And
6:07I'm just going to make a frame, which if
6:08you're actually doing this, it's
6:10probably best to make a frame right at
6:12the beginning, rather than waiting till
6:13the end like how I did. But we're going
6:15to make the frame, change the background
6:17transparency to one, and we're just
6:18going to toss everything inside of it.
6:20And that's why it's usually better to
6:21make at the beginning. Here you go,
6:22let's kind of do that. Let's grab
6:24everything once again. Let's put it
6:26right in the center of the frame, and
6:28now we're going to change the
6:29transparency back down to one. And now
6:31we can rename the frame shop UI. There
6:33we go. And if you're making a game, this
6:35is usually what you want to do. You want
6:36to put everything inside of a frame,
6:38just so whenever these scripters are
6:39scripting the game, they can add code
6:41that says make the shop UI visible, and
6:43then it will go from this over to this,
6:45and it will pop up on the player's
6:46screen. Rather than if you don't have a
6:48frame, they'll have to make each
6:49individual one of these things visible,
6:51and it just makes the whole thing super
6:53difficult. So that's why you want
6:54everything inside of a frame. But we're
6:56not quite done just yet. Because we're
6:58going to click the plus icon, and we
7:00just want to add the header. So ZIndex,
7:02let's change that up to three. Let's
7:03scroll down. We're going to change the
7:05font type over to Fedorka One. And now
7:07we're going to change the text just so
7:08it says shop, which actually I'm going
7:10to make that all lower case. There we
7:11go. Change it to shop just like that.
7:13And now for text color, I'm thinking I'm
7:15going to do white. And we're going to
7:16change the background transparency all
7:17the way to one, and we're also going to
7:19click text scaled. So that will just
7:21scale it up. Now we can toss that right
7:22there in the middle. Now we want to
7:24click the plus icon again, search up a
7:26UI stroke, and I want this stroke to
7:27match the thickness of all the other
7:29strokes. Otherwise, it's going to look
7:30kind of weird. So we're going to change
7:31that to five. If you want to change it a
7:33little bit, that's okay. Like four
7:35should be good. Yeah, I think that
7:36actually looks better. And we're also
7:37going to change line join mode over to
7:40bevel. The join mode doesn't really
7:42affect too much, but if you scale it
7:43down for example, that is what bevel
7:45looks like. And if we leave it on the
7:47regular round, that's what it looks
7:49like. So as we can see the O and the P
7:51aren't really filled in. So that's
7:52usually why I always change it to bevel.
7:54But there we go, that's our shop icon.
7:56And now we just need to do the buttons.
7:58Because if you look at all of these, as
7:59we see they all have multiple buttons.
8:01And these are a lot easier than you may
8:03think. Because we already have
8:04everything we need made. We just have to
8:06copy it. So let's go down here. Let's
8:08click on the plus icon. Let's add in a
8:10text button. And now we just need to
8:12move it to where we want it. So I think
8:14I'm going to do the top buttons. So
8:15we'll have like two or three along here.
8:17So let's place this one right there. And
8:19for this first button, I'm actually not
8:21going to add any text. This is just
8:22going to be the button itself. So let's
8:24go ahead and delete the text. We can
8:26keep the background for now, but we are
8:28going to remove it later. And what we
8:29want to do is just copy the header and
8:31the shadow. And we're going to right
8:33click our text button, and we're just
8:34going to click paste into. And now we
8:36can just scale it down to the text
8:37button ourselves. And we can scale it up
8:39as we need to. Like about right there.
8:41And now those are button pretty much
8:42done. We can always change it up a
8:43little bit such as making the shadow a
8:45bit more prominent by moving it
8:47downward. We just want to make sure the
8:48text button itself covers up the whole
8:50thing. But that's pretty much it. Now we
8:52just need to go into the header, and we
8:54need to change up the gradient unless we
8:56want it the same color. If you want it
8:57the same color, you can do that as well.
8:58But I'm going to change mine over to
9:00like a yellow type. So this going to be
9:02orange going into yellow. And I'm
9:04actually going to make the yellow go
9:06down a bit more. If you want to add
9:07multiple colors, you can just click in
9:09the middle to add another color. Or you
9:11can add the same color and then drag it
9:13down. Like about right there should be
9:15good. Now let's go over to our UI stroke
9:16because we want to change the color of
9:18this a little bit as well. And we're
9:19going to make this a lighter yellow. And
9:21now let's go over to our shadow. Let's
9:23make this kind of like a dark orangish
9:25color. And now we just click okay. And
9:28that's our button. Now the final touch
9:29is to click the plus icon, add in a text
9:32label. Make sure that we change the Z
9:33index of this like three or something
9:35just so it's on top of everything. And
9:37now we just change the font, the scale,
9:40the color, change the background
9:41transparency all the way to one, add in
9:43a UI stroke, change it over to bevel,
9:46change the thickness to four or five, go
9:48ahead and retype it such as coins, and
9:51toss it about right there in the middle,
9:52and then you're good to go. You can
9:54change the border color if you want to,
9:56such as for the tags, instead of
9:57outlining in white, you could outline it
10:00in like orange or yellow to kind of
10:01match the color a bit more, but I'm not
10:03going to do that because I do like the
10:05black color. And now once you have one
10:06text button, you can click control D on
10:08it to duplicate it, select all the
10:10insides, and then just drag it over, and
10:13then just rename it. So, let's just type
10:15in wins, and just like that, that's our
10:17second button. And if we really need to,
10:19we can select everything, scale it all
10:22down just a tad bit just to make room
10:24for another button. Once again, select
10:26all the insides, control D, move it
10:28over, and just like that, that's all
10:30three of our buttons. And we could keep
10:31repeating this for whatever we need.
10:33These are just the title buttons that
10:35would switch between different tabs. So,
10:36just if you open this up, we have our
10:38main game passes right here, and the
10:40player can click on any of these buttons
10:42to switch between buying coins, wins, or
10:44just straight up buying pets. And you
10:46can just do this with whichever one.
10:48They're all pretty much the same, you
10:49just copy and repeat and change up the
10:51colors. And this can allow you to make
10:53an entire game UI in just a couple of
10:55hours, because you just copy what you
10:57previously made, paste it over, and it
11:00speeds up the process so much. Like, of
11:02course, in an actual game you add like
11:03scrolling UI and stuff, but for example,
11:05let's just copy this, move it over, and
11:07we could change up these buttons or
11:09straight up delete them. We could change
11:11the title to like effects or whatever
11:13you want, and now we just switch up the
11:14colors, and then we're good to go to
11:17make a whole new UI set. But anyway,
11:18that's a super easy and simple way to
11:20create UI in Roblox Studio. If you want
11:23me to go more in depth on things such as
11:24adding scrolling UI and all that, let me
11:26know in the comment section below. But
11:28from this tutorial, you should be able
11:30to make all of this right here super
11:32easily. The only struggle might just be
11:34the scrolling frames because those are
11:36pretty complicated. But anyway, if this
11:38video helped you out, please make sure
11:39to smash that subscribe button and I
11:41will see you all in the next video.

About this transcript

This page contains the full transcript of How To Improve Your UI In Roblox Studio by Kingkade 3D, generated from the public captions YouTube serves with the video. The transcript has 3,040 words across 394 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.