How to make Modern GUI for Roblox Games — Transcript

Full transcript

1. 0:00All right. So, today I want to go over
2. 0:01how we can make modern UI for Roblox
3. 0:04games. And I thought a good way to show
4. 0:06modern UI inside of games would be
5. 0:08catalog and avatar creator. But looking
6. 0:11back at it, there's not much detail at
7. 0:13all. It's just flat design. And I'm not
8. 0:15wanting to teach that because that would
9. 0:17just be shapes. So, for instance, across
10. 0:20all of this, there's no shading. The
11. 0:22only bit of shading we have is at the
12. 0:24bottom. And that's only a fade out.
13. 0:26There's no gradient, for instance, on
14. 0:28this. DIY is good, but it's not what I
15. 0:31want to be teaching you guys today. But
16. 0:33with that being said, let's hop on
17. 0:34Photoshop to get started. All right. All
18. 0:36right. Luckily for me, I've got some
19. 0:39assets already, which will be in the
20. 0:40description. It will be a gum mode that
21. 0:43you can go and get for free. I've got
22. 0:45some assets such as the buttons and the
23. 0:48text isn't needed, so it won't be on
24. 0:50there. But if you want to know what font
25. 0:51I'm using, it's Archivo Black. But in
26. 0:54all honesty, you won't need to use that
27. 0:56because when you go into Roblox and
28. 0:58import the UI, you'll be putting all of
29. 1:00your text in there anyway, separate from
30. 1:02the best. All right, let's just uh I
31. 1:05don't know. Let's see. All right, so we
32. 1:07can see this or this. When you press it,
33. 1:09you get uh where and view. I want that
34. 1:12to be a constant at the bottom side of
35. 1:14the frame for this. And I don't want it
36. 1:17to be a rip from the game UI. I just
37. 1:21want it to be similar. So, I think
38. 1:22what's probably going to be best is
39. 1:24making its own border here. And because
40. 1:27it is a modern UI, you don't really see
41. 1:29much rounding on the corners. Once
42. 1:31you've got your shape made, go into the
43. 1:34layer style and click on gradient
44. 1:36overlay. I don't want it too light and I
45. 1:38don't want it too dark. All right,
46. 1:40change overlay to normal. I have just
47. 1:42realized I could have just set this up
48. 1:44inside of the actual shapes color. All
49. 1:47right, perfect. Scale up a little bit.
50. 1:49And now you can see that we do have a
51. 1:51nice gradient. It's not too harsh, which
52. 1:53is something to keep in mind. With
53. 1:55gradients, you cannot make them too
54. 1:57harsh. You can see that there is a
55. 1:59direct contrast between this color and
56. 2:01this top color. But the thing is the
57. 2:03smoothing helps out so much and it's not
58. 2:06a harsh change. It's not, for instance,
59. 2:08going from red to green. So now I've got
60. 2:10that. Make a new stroke and set the
61. 2:12position to inside. My fill type is on
62. 2:15color and it's set to white. and the
63. 2:17blend mode is on overlay. Set the
64. 2:19opacity all the way up and it'll give us
65. 2:21a really clean smooth border. Now, what
66. 2:23I've gone and done is added an inner
67. 2:25shadow onto that frame. And if you want,
68. 2:27you can just copy this. It just gives it
69. 2:29a bit more of a bit more depth to it.
70. 2:32All right, once you've got that, if you
71. 2:33want to go and grab these buttons from
72. 2:36the gum robe in the description, and
73. 2:38then we can just start placing them.
74. 2:40Okay, so this button is going to be for
75. 2:42the buy. This button is going to be for
76. 2:44where. And as you can see, they're right
77. 2:46next to each other. So, going to have to
78. 2:49scale them down a little bit. I'm trying
79. 2:51to make sure that in between this side
80. 2:53bit here is the same as between here. I
81. 2:57believe that's slightly off. Be the same
82. 3:00there. All right. There we go. So, we've
83. 3:02got them placed. Now, this is uh by and
84. 3:05that's where. And where doesn't need to
85. 3:07be a red button within that user
86. 3:10experience and cover theory where they
87. 3:11merge over. If you're going to use where
88. 3:14as a red button, you're just going to
89. 3:15question it because the color doesn't
90. 3:17make sense. It's sort of like a negative
91. 3:19color or associated with negative for
92. 3:22something that actually could be quite
93. 3:24good. So, we'll change that from red
94. 3:25over to the gray. The gray is very
95. 3:28neutral and I don't really know if wear
96. 3:30will give any emotion well. So, it does
97. 3:33help with that. Right. Next thing is we
98. 3:35have a little close button. And if we
99. 3:38want to place this close button in the
100. 3:40top right corner and make sure it's not
101. 3:43too big and not all that's attention in
102. 3:46the frame. All right. Now then something
103. 3:48different I'm going to do from the
104. 3:50thumbnail of this video is instead of
105. 3:52having it all in one frame, I'm going to
106. 3:55have its own square. That way it's sort
107. 3:58of more separated from the background.
108. 4:01Just need to center it. Hold on. I know.
109. 4:04Um go to the middle. All right, better
110. 4:07idea. We're going to change the color
111. 4:09first. Wait. Oh my god, it was already
112. 4:11centered. Okay, so same principle with
113. 4:14going to go and get the gradient
114. 4:15overlay. However, this time I want it to
115. 4:18actually be set to overlay and the
116. 4:20colors slightly lighter to give it a bit
117. 4:22more separation and do inner shadow
118. 4:25again and stroke. Now, as this had a bit
119. 4:28of rounding, 15 pixels, we'll do the
120. 4:30same on this one. And that whole idea is
121. 4:33making sure there's consistency within
122. 4:35the design. If there's not, it can get
123. 4:37so confusing for the player so fast
124. 4:39without it would seem so stupid, but
125. 4:41they will get confused. You got to
126. 4:43remember the audience is 5-year-olds and
127. 4:46toddlers basically. But with the
128. 4:48consistency, it's also helpful if you're
129. 4:50sort of selling the game as a brand.
130. 4:52Everything needs consistency. Even
131. 4:54applying to jobs on the Roblox
132. 4:57marketplace, you need to be consistent
133. 4:59to get them. All right, so the next
134. 5:00thing we'll do is we'll bring this
135. 5:02sample over to here. We'll edit this to
136. 5:05go there. And we want to set this to
137. 5:08stick to the left or align to the left.
138. 5:10Oh, no, we do not. Never mind. Scratch
139. 5:12that. All right. So, now we have the
140. 5:13item name, but I think this is a bit
141. 5:15big. I think I'm going to set the scale
142. 5:18of the text to 65. There we go. That's
143. 5:21much better. And I honestly think I
144. 5:23might add some overlay. I'm just going
145. 5:25to check how it looks. Yeah, there we
146. 5:26go. Now it looks a bit more consistent
147. 5:28with the rest. Right. The next thing we
148. 5:30are going to add, which I don't have on
149. 5:33Gumroad, but there is a user that does
150. 5:36have it, and it is completely free. It's
151. 5:39a free vector pack for Roblox. We're
152. 5:41just going to go and grab the check mark
153. 5:43from that pack. And if you don't have
154. 5:45it, you can just get the um normal one
155. 5:48off of Roblox. This one is just slightly
156. 5:50more stylized. And what we're going to
157. 5:53do is add text that says buy. And then
158. 5:55we're just going to add a username. You
159. 5:56can use whatever you want. I'm going to
160. 5:58just brand it with my name. And what I
161. 6:00want you to make sure as well, you don't
162. 6:02have to, but it does just add to the
163. 6:04style a little bit more. If you go ahead
164. 6:06and add a darker color onto the name, it
165. 6:11shouldn't want to do it. Okay. Um, okay.
166. 6:15We'll have to do this externally, but it
167. 6:16does just look a little bit better. Set
168. 6:18the scale down of that and try to align
169. 6:22it quite similar to this one. Right,
170. 6:25there we go. Now then we need to exclude
171. 6:28this. So we'll have to just copy paste
172. 6:30it. Uh reststerize layer. There we go.
173. 6:34That should be right. And there we go.
174. 6:36Let's have a look now. All right. Not
175. 6:37looking bad. These do need more spacing
176. 6:39though. Or just a little bit smaller.
177. 6:42All right. Is it looking good? All
178. 6:44right. My figured it out. I think I'm
179. 6:46going to leave that text at that. And
180. 6:48the only thing we have to work on next
181. 6:50is the text for these buttons, which
182. 6:53will be very simple. We've already got
183. 6:55wear sorted out for us. That doesn't
184. 6:57need a stroke. This one will to separate
185. 6:59it from the background. As you can see,
186. 7:01you can't really tell what's going on
187. 7:03with it. Right, there we go. Uh, we will
188. 7:06have to add a stroke onto this one and
189. 7:08keep it at the same pixel four. All
190. 7:11right, four pixel 4 pixel outlines. And
191. 7:14if we want to actually fully polish
192. 7:16this, we just need to find an image. All
193. 7:19right, once you've found your image that
194. 7:20you want to use, simply just go ahead
195. 7:22and paste it in. And what you would
196. 7:24actually use in Roblox would be a
197. 7:26viewport frame for the item. But for our
198. 7:29use case, it's not really necessary. One
199. 7:32thing I do want to go and add though is
200. 7:34a little sort of gradient going across
201. 7:38and this. I might just help separate it
202. 7:40a little bit. So if I was to go ahead
203. 7:42and se this Oh, rasterize. Oh no. Okay.
204. 7:45Reststerize layer style. And then if I
205. 7:48want to select the outside and subtract
206. 7:50it from this, deselect, I can release
207. 7:53the clipping mask. And then I can bring
208. 7:55it above the other stuff. And that'll
209. 7:57mean that now affects that. Set it to
210. 7:59normal. And the fill slightly down.
211. 8:02Leave it at 90%. All right. And there we
212. 8:05go. We have a clean polished UI. And
213. 8:08don't forget to like and subscribe. And
214. 8:10also the Gumroad is in the description
215. 8:13if you want to go and get these for
216. 8:15yourself. If you are going to use them
217. 8:17though, you don't have to, but it would
218. 8:18be preferred if you credit me in either
219. 8:21the description or somewhere in the
220. 8:22game. If you like this video, make sure
221. 8:24to let me know.