How To Make A Settings UI In Roblox Studio — Transcript

Full transcript

1. 0:00[Music]
2. 0:02today I'm going to show you guys how to
3. 0:03make a settings UI for your Roblox game
4. 0:07using only Roblox Studio shop our
5. 0:10unlimited access bundle to get all
6. 0:13current and future assets check it out
7. 0:15with the first link down below all right
8. 0:18guys welcome back and um as you guys
9. 0:21heard in the intro I'm going to show you
10. 0:23guys how to make a settings UI using
11. 0:27only Roblox studi so we're now going to
12. 0:29be using Photoshop I'm going to try to
13. 0:32make this look uh as best as possible
14. 0:35using the studio tools that we have
15. 0:38access to let's not waste any time uh
16. 0:41let's add a screen GUI we call this
17. 0:45settings and let's go frame and canvas
18. 0:50so we have a canvas we're going to add a
19. 0:52frame this will be our main go anchor
20. 0:57and uh you're going to make this any
21. 1:00size you want um here I guess you just
22. 1:05kind of have to eyeball it as best as
23. 1:07you possibly
24. 1:08can I'm going go for a corner going to
25. 1:12we're going to round off the corners
26. 1:14here 0.1 is too much
27. 1:1805 that looks fine uh let's
28. 1:24add um we can add a gradient
29. 1:28actually 90 for the
30. 1:31angle because I want to go
31. 1:35[Music]
32. 1:37for something like this okay perhaps
33. 1:41this is a little too dark here I'm going
34. 1:44to go for like gu
35. 1:46slly
36. 1:48lighter kind of like this right
37. 1:50here and this looks pretty clean uh we
38. 1:54can make the background transparency
39. 1:5805 so we have some
40. 2:01transparency on our frame right here all
41. 2:04right and the next step for us is we're
42. 2:07going to add we're going to add a
43. 2:09text uh where is it
44. 2:12label and we're going to I'm going to
45. 2:14Anchor it uh X to Zero
46. 2:19actually so I'm going to move it up here
47. 2:22I'm going
48. 2:24to uh background off we're going
49. 2:28to uh go scale
50. 2:30and text color we go for
51. 2:33white go for like a slightly bluish
52. 2:37white like barely off white uh change
53. 2:41the X alignment right here to left I'm
54. 2:45going to go Ty
55. 2:47settings you go bold and you can modify
56. 2:52the font here if you would like a Roboto
57. 2:56right here I'm just going to stick with
58. 2:57this font I think it's fine um we're
59. 3:00going to decrease the
60. 3:04size and we can add an icon actually if
61. 3:07you guys want you can look
62. 3:11for a cog wheel icon all right so I have
63. 3:17imported a settings icon right here I'm
64. 3:20going to go ahead and
65. 3:22paste remove our background and we
66. 3:26can scale and decrease the size
67. 3:31I think this is fun doesn't have to be
68. 3:37anything uh unusual um let's add a
69. 3:42frame we're going to color this our
70. 3:45close and make
71. 3:47this a button so I'm going to go
72. 3:51convert right here
73. 3:54reclass and add a nice little corner
74. 4:01and right here basically you can change
75. 4:05the color so right here a little
76. 4:09brighter if you
77. 4:10want um we can add a
78. 4:13stroke and this for a close button you
79. 4:17want it uh a little big so it's easy to
80. 4:21click and access I don't why this
81. 4:25apparently I didn't
82. 4:27save this Str color but okay uh settings
83. 4:31copy and paste drop it right in here
84. 4:34change the
85. 4:37X also put the text
86. 4:40[Music]
87. 4:42here boom right there and that is our
88. 4:48close button uh corner I'm going to
89. 4:51actually increase this
90. 4:542.2 I think that is better for us all
91. 4:58right so this is what we have thus far
92. 5:02this is looking pretty good okay so next
93. 5:05we shall add a scrolling frame and this
94. 5:09will
95. 5:10house our actual settings panels so
96. 5:16let's move this like right I'm trying to
97. 5:21match it up with the uh low icon
98. 5:25um let's drag this out increase the size
99. 5:29let's go Center we can change the
100. 5:34color9 for
101. 5:37transfery uh we go call this Con call
102. 5:41this
103. 5:43container we're going to add a
104. 5:46frame and for the frame we're going to
105. 5:49go uh for the frame Anchor Point I'm
106. 5:53going go for Z and5 I think we're going
107. 5:56to add a list layout
108. 6:00frame going to drag this
109. 6:02out
110. 6:05oops I think this shed suffice okay this
111. 6:09will be our template we can add a corner
112. 6:13as well like
113. 6:18point1 um okay something very minimal uh
114. 6:23I'm going to go hide the background here
115. 6:25because I'm going to change this color
116. 6:29let's also add UI padding because this
117. 6:34is misaligned so we're going to go for
118. 6:37top 0 no
119. 6:4101
120. 6:43005 okay so we have this um I don't know
121. 6:46just kind of play around with the colors
122. 6:49I
123. 6:51suppose template here know how this
124. 6:55looks it's okay it's not bad
125. 7:01all right it's not a big
126. 7:04deal let's copy the text I'm going go
127. 7:08for for
128. 7:10example
129. 7:12background music all right
130. 7:17oops sure goes like right
131. 7:21here copy and this will be
132. 7:25just the background music go bold
133. 7:31off and also change the text
134. 7:36color like
135. 7:39so elongate this uh text
136. 7:45frame now we have our text right here in
137. 7:48the center okay so for this I'm going to
138. 7:51add a toggle so let's make a frame call
139. 7:55this our
140. 7:57toggle and we're going to go
141. 8:00create the
142. 8:01shape uh it's really
143. 8:04weird okay so here I'm going to add a
144. 8:08corner boom like one zero let's go
145. 8:1725
146. 8:19anyways let's make this
147. 8:22darker let's go add a
148. 8:25stroke two pixels and actually I'm going
149. 8:29to cut copy and control shift B inside
150. 8:32I'm going go
151. 8:35echor I'm going to remove and delete
152. 8:39these and this will be
153. 8:41my parent container this will be
154. 8:45inactive first frame let's go for knob
155. 8:49copy and paste the
156. 8:52corner want to resize our
157. 8:55knob place it right here I can't really
158. 8:58see that well
159. 9:00okay and we're going to modify the
160. 9:04color so we have something like this
161. 9:08pretty good uh suppose it's a little
162. 9:11large so let's resize just say tape
163. 9:17it right here Bo let's make sure we
164. 9:22scale all
165. 9:23[Music]
166. 9:24these all right everything's looking
167. 9:27good so far
168. 9:30all right um
169. 9:3485 oops
170. 9:3885 all right so here is our inactive
171. 9:41we're going to hit controll D to copy
172. 9:44we're going to hide and active this will
173. 9:48be our
174. 9:49active and now we're going to move the
175. 9:52knob
176. 9:53over to this side and you can use the
177. 9:57numbers it's probably better but uh yeah
178. 10:03um
179. 10:04so change the
180. 10:07[Music]
181. 10:09color for this one so
182. 10:13active and now we can copy the
183. 10:17template add some uh padding to the UI
184. 10:22list layout so 05 that's too much
185. 10:2601 that is fine uh perhaps perhaps a
186. 10:29little bit too much
187. 10:35057
188. 10:37okay background sound effects
189. 10:42now adjust the
190. 10:44background sound
191. 10:47effects like this and we can make
192. 10:51this
193. 10:53inactive boom we can also change the
194. 10:57scroll bar color right here as well it
195. 11:00looks much cleaner like this as you guys
196. 11:05can see all right so we can copy as many
197. 11:09as we like and this will
198. 11:13scroll let's make sure everything is to
199. 11:16scale let me go for okay container scale
200. 11:21main
201. 11:23scale okay we have to scale all these
202. 11:27apparently
203. 11:30a little bit careless here all the text
204. 11:32objects as
205. 11:33[Music]
206. 11:34well these real
207. 11:36quick boom
208. 11:40scale make sure we scale all these as
209. 11:43well all right as you guys can see this
210. 11:47right here is our settings UI I hope
211. 11:50this helped you uh this is more of like
212. 11:53a minimal clean style if you guys want
213. 11:57uh more styz
214. 11:59kind of designs like anime or like a
215. 12:02cartoony style I can also give that a
216. 12:06try for you guys anyways I hope you
217. 12:08enjoyed I hope you learned something
218. 12:11check out our
219. 12:12store join our Discord and with that
220. 12:16being said I hope to see you guys in the
221. 12:19next video take care
222. 12:23[Music]