How to make hair on Roblox — Transcript

Full transcript

1. 0:00Hi. Hi. Ivonne aka Vogue Brunette here
2. 0:02and today we're making Roblox hair from
3. 0:04scratch. Quick sidebar. This is just one
4. 0:07way of doing it. Think of it like art
5. 0:09class. Everyone's final project looks
6. 0:11different and that's the fun part. It's
7. 0:13not rocket science. It's more like art
8. 0:15science, hair science, whatever it is,
9. 0:18it works. There are tons of methods out
10. 0:19there, so do your research and find what
11. 0:21clicks for you. This is just the method
12. 0:23that worked well for the style I was
13. 0:25going for. We'll go through modeling,
14. 0:26texturing, and finally bringing it into
15. 0:28Studio so your avatar can actually wear
16. 0:30it. Before we even start, here's what
17. 0:32you'll need. Roblox Studio, Blender,
18. 0:34Photoshop, or any image editor works. A
19. 0:36few plugins and rigs. You can download
20. 0:38these from the Roblox Learn or Inside
21. 0:40Studio. Basic knowledge of Blender,
22. 0:42Photoshop, and Studio. If you're
23. 0:44thinking about selling your item, just
24. 0:46know you'll need Robux for both the
25. 0:48upload fee and publishing fee. My
26. 0:50personal tip, don't rush into publishing
27. 0:52right away. Start by making a few
28. 0:54practice hair first. Get comfy and then
29. 0:56check out these other videos on how to
30. 0:58actually start selling UGC and turning
31. 1:00it into a little business. For my hair,
32. 1:02I want something casual but still
33. 1:04versatile. And since headbands are
34. 1:06literally everywhere this fall, like
35. 1:07they're having a moment. It feels
36. 1:09perfect. Yes, it does mean we're adding
37. 1:11an extra piece of geometry. But don't
38. 1:13freak out. It's super simple, I promise.
39. 1:15First, we start with adding a simple
40. 1:17square mesh plane. Let's resize the
41. 1:19plane to a rectangle. Then apply a loop
42. 1:22cut. The hotkey for this is Ctrl and R
43. 1:24to cut it into five sections.
44. 1:28In edit mode, switch to face select.
45. 1:31Click on the middle rectangle and then
46. 1:33hit O for proportional editing. Press G
47. 1:36and move it up to that natural curve. If
48. 1:39you want it to dip, press G and Z to
49. 1:40slide it down. Basically, we're just
50. 1:42shaping it. Now, let's go back to edit
51. 1:44mode. Press A to select everything and
52. 1:46hit Alt or Option on Mac and E to
53. 1:49extrude along the normals, aka puff it
54. 1:52up a little so it's not like totally
55. 1:54flat. Finally, add a subdivision
56. 1:56modifier with control and three, which
57. 1:58is like giving it a smoothing filter so
58. 2:01your headband goes from blocky to
59. 2:03slightly more realistic. And that's it.
60. 2:05Now, let's do the hair. Okay, so
61. 2:06modeling hair breaks down into three
62. 2:08general steps. This may look
63. 2:10complicated, but once you get the hang
64. 2:12of it, you can apply it to all different
65. 2:13hair types and styles. Step one is
66. 2:16creating the first strand. Step two is
67. 2:18duplicating it and repositioning it. And
68. 2:21then step three is optimizing and
69. 2:23merging everything. So, let's get
70. 2:24started. First, we need to import a rig
71. 2:26as our base. Then, you need to import a
72. 2:28reference photo of the hairstyle you
73. 2:30want. Or if you're extra like me and you
74. 2:33made a whole vision board, we can use
75. 2:34that. Then, we're going to add a curved
76. 2:36path. This lets you bend shapes into
77. 2:38something more organic. Then we're going
78. 2:40to add a mesh plane.
79. 2:44For this, you're going to right click,
80. 2:46merge vertices at center, drag one point
81. 2:49in to form a triangle. Go to curve and
82. 2:51add a path. Then position the path on
83. 2:54the top of your rig's head. Size it
84. 2:56accordingly. And we're going to
85. 2:57rightclick and convert the path to a
86. 2:59curve.
87. 3:01Select the entire mesh. Right click and
88. 3:04select convert to curve. In the right
89. 3:07properties panel, navigate to the
90. 3:09geometry section. Under bevel, select
91. 3:11object. Then use the eyropper tool to
92. 3:14apply a bevel to your object. This makes
93. 3:16your first 3D hair strand. Congrats.
94. 3:20We're going to use S to scale, G to
95. 3:22move, and right click to shade flat.
96. 3:25This is just going to make things easier
97. 3:26to see as we go along. We're going to
98. 3:28adjust using Alt and S or Option and S
99. 3:31on Mac. To change thickness, we're going
100. 3:33to use G and Ctrl and T. to move or tilt
101. 3:36the points while in edit mode. This part
102. 3:38is trial and error, so take time shaping
103. 3:41your first strand until it feels right
104. 3:42to you. Now that we've got our strand,
105. 3:44we're going to go back in object mode
106. 3:46and use shift and D to duplicate it.
107. 3:49Move and rotate them until you build up
108. 3:52volume or the desired look you want to
109. 3:54achieve. Repeat this a bunch of times.
110. 3:57PS, Roblox won't accept hair that goes
111. 4:00below the torso bounding box. No
112. 4:02Rapunzel hair allowed in the front or
113. 4:04the back. Now comes the part where we
114. 4:06merge everything together and keep it
115. 4:08clean. Convert the strands to mesh. In
116. 4:10edit mode, merge using M. We're going to
117. 4:13loop select using option or alt on PC
118. 4:17and command or select on PC. Dissolve
119. 4:20extra edges by right-clicking and then
120. 4:23selecting dissolve edges. We're going to
121. 4:25use G and G to loop slide. Now, if
122. 4:29you're in a pickle, you can always add a
123. 4:31loop to make merging easier. If moving
124. 4:33the loop doesn't work, do not delete
125. 4:36extra edges. It will mess up your
126. 4:38design. But be careful to not make them
127. 4:40too pixelated looking, unless that's the
128. 4:42style you're going for. Then slay on
129. 4:44Mario.
130. 4:47Edge loop trick time. Okay, so here's a
131. 4:49trick to quickly dissolve some edges.
132. 4:51This is going to cut the number of
133. 4:52triangles per hair strand in half,
134. 4:55saving us all of the triangles. We're
135. 4:57going to use control and option to
136. 4:58select edges, not points. You might have
137. 5:01to switch modes here. You can press two
138. 5:03on the keyboard to quickly set to edge
139. 5:05select. Deselect the very bottom or any
140. 5:07unnecessary curves. Go to select check
141. 5:10or deselect. Change offset to negative
142. 5:131. Go to select loops. Edge loops. Right
143. 5:16click. Dissolve edges. All done. We're
144. 5:19going to have one final merge. Check by
145. 5:21distance to make sure we didn't forget
146. 5:23to merge anything. We're going to press
147. 5:24M again. Look at the bottom popup and
148. 5:27adjust. Clean up sliding edges with G
149. 5:30and G if needed. We're going to check
150. 5:32the face orientation. This is very
151. 5:34important. We're going to turn on
152. 5:35viewport overlays face orientation. Go
153. 5:38to edit mode. Press A to select all.
154. 5:41Press option and N and recalculate
155. 5:43outside. Now our hair mesh is merged,
156. 5:46cleaned, and optimize under the 4K
157. 5:48triangle limit. If you're new here,
158. 5:49hello. We need to stay under 4K
159. 5:52triangles per Roblox's upload rules. You
160. 5:54can check the triangle count of your
161. 5:56selection by going in the viewport
162. 5:57overlay options of your 3D export.
163. 6:00Select statistics. Statistics now is in
164. 6:03the top left of your viewport of the
165. 6:04item you're actively selecting. And we
166. 6:07have a hair. And we have a headband.
167. 6:09Now, all we have to do is color it.
168. 6:11Texturing hair. Here's the plan. Because
169. 6:13in Blender, nothing is as simple as it
170. 6:15seems. We're going to split the
171. 6:16texturing process into three stages.
172. 6:18Texturing the hair, texturing the
173. 6:20headband, and combining the textures of
174. 6:22the hair and the headband onto a single
175. 6:24texture map. PS. Before starting any UV
176. 6:27unwrapping of the sort or joining your
177. 6:29fabulous hair with your headband, apply
178. 6:31modifiers in the designated order.
179. 6:34Remember, this is the point of no
180. 6:35return. So, save that file as a new name
181. 6:37or do whatever you got to do. Texturing
182. 6:39the hair. We're going to open Photoshop
183. 6:41or your editor of choice. Create a base
184. 6:43with black, white, and gray lines. We're
185. 6:45going to use gauian blur for softness
186. 6:47and we're going to multiply this by a
187. 6:48th00and or shortcut grab strand lines
188. 6:51from another texture. Recolor them and
189. 6:53fade with layers until it looks like
190. 6:55realistic strands. Okay. Then we're
191. 6:57going to save it as a PNG. We'll need to
192. 7:00modify this file later. So keep
193. 7:01Photoshop open just in case. This is an
194. 7:04optional step because if you're not
195. 7:06doing a headband, then you don't really
196. 7:09need to do some of the steps in this
197. 7:10tutorial. So imagine if you're not doing
198. 7:13a headband, this is all you have to do.
199. 7:14Go to the shading tab. Press shift and
200. 7:16A. Add image texture. Open your PNG. If
201. 7:20the orientation looks off, go to UV
202. 7:22editing. Press A to select all and
203. 7:24rotate to adjust. And you're done. This
204. 7:26step is also optional. If you want to
205. 7:29have multiple hair colors, you'll need
206. 7:31to add a new material. You duplicated
207. 7:33the object, but you didn't make a
208. 7:34different material. Click the number
209. 7:36next to the material name to make a
210. 7:38single user copy. This will allow you to
211. 7:40have different materials assigned to
212. 7:42each object. to actually make the
213. 7:43material in Photoshop or using Adobe
214. 7:45Express faster. You can just drop in
215. 7:47your original material and change the
216. 7:49tone, brightness, contrast, etc. until
217. 7:51you've reached the color you want. Tada.
218. 7:53For the headband, I wanted a classic
219. 7:55velvety look. So, I did the lazy thing
220. 7:57and went to find a copyright free image
221. 7:58on Adobe Photo Stock to use. Or you
222. 8:01could go crazy in Photoshop if you're a
223. 8:02pro artist and create your own. My art
224. 8:04skills don't pay those bills yet. Roblox
225. 8:07expects a single texture image for a
226. 8:09model. And right now we have two, one
227. 8:11for the hair and one for the headband.
228. 8:12So we need to combine or bake these
229. 8:14textures together. While you have a few
230. 8:16options to bake textures into a single
231. 8:18image, one of the easiest ways to do
232. 8:20this is manually with Blender and
233. 8:22Photoshop. First, we're going to modify
234. 8:23the UV map of your hair to make some
235. 8:26space for the headband UV. Next, we're
236. 8:28going to modify the UV map of our
237. 8:30headband to make reference of a small
238. 8:32section at the bottom of our hair
239. 8:33texture image. Make sure it doesn't
240. 8:35overlap with the hair UV. In object
241. 8:37mode, click the headband, then
242. 8:38shiftclick the hair, and rightclick join
243. 8:40to combine the objects. Order of
244. 8:42clicking matters here. In Photoshop,
245. 8:45we're going to add the headband texture
246. 8:46to the image in the same area where we
247. 8:48assign the headband UVs. It might be
248. 8:50helpful to take a screen capture of your
249. 8:52UV layout, so you know exactly where you
250. 8:54can put the headband texture color. And
251. 8:56finally, assign the new image we made to
252. 8:59the materials. Click on the combined
253. 9:01hair and headband object in Blender. In
254. 9:03the materials properties, remove both of
255. 9:05the assigned materials. Add a new one
256. 9:07and base color. Add a new image texture.
257. 9:10Use the new image texture we created in
258. 9:12Photoshop. And now your hair and
259. 9:14headband should look textured,
260. 9:15dimensional, and ready for export. So
261. 9:17the next step is going to be exporting
262. 9:19from Blender and importing into Roblox
263. 9:22Studio as a wearable accessory. To
264. 9:24export from Blender, we're going to
265. 9:25select the hair mesh. The headband
266. 9:27should be combined at this point. File,
267. 9:29external data, pack resources. This
268. 9:31saves your texture. Export as FBX. Check
269. 9:34apply unit scale to FBX unit scale. Name
270. 9:37it export. To import to studio, we're
271. 9:40going to go in studio file. Select FBX.
272. 9:43Import. If texture didn't load, manually
273. 9:46assign it in the texture ID property. To
274. 9:48convert to accessory, we're going to go
275. 9:49in the avatar tab. Click accessory. Open
276. 9:52accessory fitting tool. Select imported
277. 9:55model. Set accessory type to hair. We're
278. 9:57going to adjust the placement on the
279. 9:59mannequin preview. You do not want to
280. 10:01trust the blue box. We're just going to
281. 10:02completely ignore it. We're going to
282. 10:04press generate mesh part accessory. And
283. 10:06boom, your custom hair is officially
284. 10:08living in studio. If you want to take it
285. 10:10all the way to the Roblox marketplace,
286. 10:12just rightclick the item, hit save to
287. 10:14Roblox, set the content type to avatar
288. 10:17item, and the asset category to hair.
289. 10:19Give it a cute name, write a little
290. 10:21description, and Roblox will validate it
291. 10:23almost instantly. Then you can smash
292. 10:25that submit button for the Roblox upload
293. 10:27fee in the marketplace. But don't
294. 10:28forget, once it actually hits the
295. 10:30marketplace, there's a Robux publishing
296. 10:32fee waiting for you. And that's the full
297. 10:34process. From Blender to Studio, now
298. 10:36you've got a Roblox ready hair mesh that
299. 10:38you made yourself. If you survive this,
300. 10:40you deserve a medal. We are all now
301. 10:42earning our PhDs as 3D modelers. I'm
302. 10:45proud of us. Happy building.