This was really interesting, appreciated. It's a bit easier to understand what colors of a normal map mean, if you separately check out red, green and blue channels - you'll see that green channel is "left-right", red is "up-down", and blue is depth, z-axis, white parts are where light hits, dark parts are shadows - together it all represents vectors for light hitting the surface. So you may want to make edits per channel separately, if you have hard time guessing what you need to pick from the sphere, and generally treat blue channel like a height map.
This is wrong. Normal maps are a collection surface normals, ie. unit vectors pointing in the direction of the surface at the sampled location in the texture. They are used together with the vertex normals of a 3D-model to add detail to a low polygon model. If each pixel is a vector, an arrow of length 1 (length of 128 in the form of an image) pointing in a specific direction. The red channel then represents the tip of the arrow in the X axis, and for the green channel the Y axis. A channel value of 127 is equal to zero for these channels and lower values go into the negative directions. The blue channel represent the Z axis, the forward offset of the arrow tip. The blue values must be above 127, because a normal cannot really point inward. Painting normal maps is not really correct and will cause inaccurate lighting calculations. The least one can do is to normalize the normal map before using it. Never blend normal maps! To blend correctly you need to first transform the source normal to the target normal's basis, add and then normalize the result. Normalize means to restore the unit vector aspect (length of 1).
Protip for anyone attempting this today, the new PBR renderer they added with CC 2020 won't give you the same results. There's no realtime preview for reflectivity. The IBL preview when rotating completely washes out the scene too, but you can work around that by creating a second window for the document so you can rotate in one view and see the result in the other.
As A. Shift also points out, it is easier to work in R, G, B channels separately. Red representing the X-axis, lighting the object from the side. Green representing the Y-Axis, lighting the object from top. Blue representing the Z-Axis, lighting the object from the front. If your 3d app interprets the direction of a channel differently, simply invert the color on that channel. I think Nick Lewis' method is faster though, but you have to train for that.
Really neat workflow! Now, coming from the world of gamemaking (and shaders), let's suppose I want to have different layers of normal maps. One for the coarse details, and one for the thinner ones, which should gently carve and apply on the coarse ones, without overriding them (weighted). How should we blend them appropriately in Photoshop to avoid having incorrect normal maps? Do you have any tips on this? A specific blending mode? Or, brute forcedly splitting all channels down, normalizing everything and recombining them back as a single layer?
I assume you would need to separate the channels and multiply/average the coarse and thin details for each of them, then go on and blend them all together again, but it just feels like too much work. Using a software such as Substance Designer to make a height blend and output it as a color texture could be a way easier solution.
@@danielebulgaro2694 Indeed, splitting the channels was part of my original message :) There are surely other ways around to blend normal maps (Unity shaders, 3rd party software), I was just curious about the Photoshop workflow. I already own the full Substance suite but sometimes you simply want to test unusual routes :)
I have semi successfully shaven some characters from the game Sleeping Dogs using a little bit of logic and instincts. I've taken a liking to messing around with normal/bump maps, not just the regular textures, so I'm here to see what else you can do. Many thanks for sharing what you've learned.
Ive been trying to find a way to create a painterly style for 3D assets so they can be lit, rather than painting shadows and lighting into the diffuse and not lighting the asset. This has given me a thought to create that painterly artstyle through painterly normal maps instead. So the diffuse can be a standard diffuse, and the light being reflected off the NRM can create that painterly effect which looks more modernised instead of an old school game. Thanks man!
I like this video and your painstaking work! One question, though: can I change the position of a light source and apply a normal map to a picture in GIMP?
I've been using the same method mostly to paint some geometric shapes for vases, frames, other types of accessories/furniture etc, but you took this concept much further than I thought possible. Well done man, now I have new avenues to explore. :)
I have a coca cola bottle and I need to add the bulges in the glass but I sure as hell don't want to model that detail then bake it back down. Especially if I can simply draw the bulges in photoshop on a normal map. This is perfect ty for this video
Ok this is great and makes perfect sense for those simple forms! But I still have no idea of how someone could hand paint a normal map of something as complex as a portrait... Looks like an insane amount of work... Simply modeling it would be quicker, wouldn't it?
awesome thecnique! although i can't seem to rotate or move the infinite light after i select it... anyone else tried this and couldnt get it to work either? the gizmo just doesnt show up. dont know if its a bug or me just missing something. anyway, really great stuff!
What is the difference in this pipeline with ndo, crazy bump, b2m or substance alchemist workflows? If the purpose is creating normal from image we have.
Only a few minutes in and this looks like an incredible technique for workflow in illustration / concept art / photobashing. You could find or take references with ambient lighting and bash them together, spend a little effort making rough normal maps and set up a realistic guide to do use as a foundation for something presentable. Matching lighting and perspective is one of the things that slows you down most in my experience; this is like making yourself a a digital equivalent of a carving/relief or a little diorama to work out lighting and texture. Honestly, I'm _going_ to learn this, I can tell already. This will supplement my skills where they are weakest very well. Thanks for sharing your method!
You are explaining normal map wrong. They are not color images at all. The fact that we can display them is just a coincidence. They really are a grid of 3D vectors, saved to an image file for convenience. Each "pixel" in an RGB image has 3 components (red, green, blue) and so it's handy for storing 3D vector's X, Y, Z components. Rendering using normal map is not based on different "colors" in a normal map "reflecting light differently". Instead the renderer combines rendered polygon's normal vector with vectors from normal map for calculation of angle a light hits the surface and reflects off of it. And because of all above, they are not ment to be painted or treated as picture in general.
You're well correct in what the definition of a Normal Map really is. But hand painting it with the reference normal colours, seems to be the only effective and efficient method to fake those details for a 2d art, other ways like having to create a 3d representation of the 2d art, and then automatically generating the normals from it would obviously be so time consuming and not a method I'd recommend to anyone, hand painting it with the reference normal colours seems to be the only viable options we have as 2d artists.
I agree with most of this; the video definitely glosses over the mathematical and technical definitions of what normals and normal maps are. However, the conclusion that they're not meant to be painted ignores the intended target audience which isn't tech/vfx artists or modelers, it's 2D artists. Yes, painted normals make no sense from a physically based point-of-view, you'd generate them from a proper reference model. But most 2D artists aren't aiming for physically based realism and instead aim for a more stylistic appearance, and this technique is just another way for artists to stylize their work.
I wrote my comment because I am a long time game developer. And during my career I met so many people who completely misunderstood normal maps and similar technologies and treated them as images. Trying to paint them, painting over them and destroying them and by doing that often introducing bugs to the project. So I really do not think it is a great thing to misinform people about those things. In any context. One day some of the "2D artists" will find themselves working on a game or software project and because of this dumbed down, completely nonsensical explanations, they will mess it up bad.
@@Riva1000 Fair point, I also work in games primarily as a graphics engine dev, but also doubling as tech artist on a few projects. I've met a few artists who would use "tools" to create normals from a diffuse texture or the albedo, though the lead artists/tech artists would generally catch that during asset reviews. Only time I'd run into artists hand painting or tweaking normal maps after baking was a project with a pixel art aesthetic; creating reference models of some sprites wasn't practical, but at least the lead artist of that project was aware of what normal maps represent and the problems to avoid. My experience is anecdotal, but I respect and understand where you're coming from. I only stumbled across this video from a friend who tried a similar process in their comics to shade a complex lighted scene. There are many other more relevant resources for model and texture artists than this video, and I'd hope someone would watch more than one video on the topic and especially videos more relevant to their fields. Though of course in reality that isn't always the case and videos like this really shouldn't gloss over the technical background or caveat that this technique is not proper in any 3D environment. Anyway, cheers!
Friends don't let friends paint normal maps.
420x420 bake maps every day
How do you bake your normals?
"I hand paint them."
What an absolute fucking legend
I understand normal maps a bit better now but painting normal maps still seems pretty daunting. Awesome work!
This was really interesting, appreciated.
It's a bit easier to understand what colors of a normal map mean, if you separately check out red, green and blue channels - you'll see that green channel is "left-right", red is "up-down", and blue is depth, z-axis, white parts are where light hits, dark parts are shadows - together it all represents vectors for light hitting the surface.
So you may want to make edits per channel separately, if you have hard time guessing what you need to pick from the sphere, and generally treat blue channel like a height map.
This is wrong. Normal maps are a collection surface normals, ie. unit vectors pointing in the direction of the surface at the sampled location in the texture. They are used together with the vertex normals of a 3D-model to add detail to a low polygon model. If each pixel is a vector, an arrow of length 1 (length of 128 in the form of an image) pointing in a specific direction. The red channel then represents the tip of the arrow in the X axis, and for the green channel the Y axis. A channel value of 127 is equal to zero for these channels and lower values go into the negative directions. The blue channel represent the Z axis, the forward offset of the arrow tip. The blue values must be above 127, because a normal cannot really point inward. Painting normal maps is not really correct and will cause inaccurate lighting calculations. The least one can do is to normalize the normal map before using it. Never blend normal maps! To blend correctly you need to first transform the source normal to the target normal's basis, add and then normalize the result. Normalize means to restore the unit vector aspect (length of 1).
Protip for anyone attempting this today, the new PBR renderer they added with CC 2020 won't give you the same results. There's no realtime preview for reflectivity. The IBL preview when rotating completely washes out the scene too, but you can work around that by creating a second window for the document so you can rotate in one view and see the result in the other.
Normal maps are a cool looking aesthetic by themselves
As A. Shift also points out, it is easier to work in R, G, B channels separately. Red representing the X-axis, lighting the object from the side. Green representing the Y-Axis, lighting the object from top. Blue representing the Z-Axis, lighting the object from the front. If your 3d app interprets the direction of a channel differently, simply invert the color on that channel. I think Nick Lewis' method is faster though, but you have to train for that.
>handpaint normal maps
No I don't think I will
Damn this is some next level shit
Really neat workflow!
Now, coming from the world of gamemaking (and shaders), let's suppose I want to have different layers of normal maps.
One for the coarse details, and one for the thinner ones, which should gently carve and apply on the coarse ones, without overriding them (weighted).
How should we blend them appropriately in Photoshop to avoid having incorrect normal maps?
Do you have any tips on this? A specific blending mode? Or, brute forcedly splitting all channels down, normalizing everything and recombining them back as a single layer?
I assume you would need to separate the channels and multiply/average the coarse and thin details for each of them, then go on and blend them all together again, but it just feels like too much work. Using a software such as Substance Designer to make a height blend and output it as a color texture could be a way easier solution.
@@danielebulgaro2694 Indeed, splitting the channels was part of my original message :) There are surely other ways around to blend normal maps (Unity shaders, 3rd party software), I was just curious about the Photoshop workflow. I already own the full Substance suite but sometimes you simply want to test unusual routes :)
Why
"How did you do the 3D model?"
"I didn't."
this is blowing my mind
Anyone knows where to get the normalized sphere image he has as image to color pick?
Hey, thanks for the tutorial. Even though this makes perfect sense to me in theory, it still blows my mind. Awesome work.
Ohh very helpful, I was actually in need of a tutorial like this for a job I'm doing, ty
I'm hand-painting a normal map in MS Paint rn, I think I'm getting a hold of what you're doing
I have semi successfully shaven some characters from the game Sleeping Dogs using a little bit of logic and instincts. I've taken a liking to messing around with normal/bump maps, not just the regular textures, so I'm here to see what else you can do. Many thanks for sharing what you've learned.
Frickin' brilliant. In the words of Denzel Washington, "My man."
Ive been trying to find a way to create a painterly style for 3D assets so they can be lit, rather than painting shadows and lighting into the diffuse and not lighting the asset.
This has given me a thought to create that painterly artstyle through painterly normal maps instead. So the diffuse can be a standard diffuse, and the light being reflected off the NRM can create that painterly effect which looks more modernised instead of an old school game. Thanks man!
I like this video and your painstaking work! One question, though: can I change the position of a light source and apply a normal map to a picture in GIMP?
This was reallyl cool. I've always wanted to do a deep dive into normal maps. I never really quite understood how they worked. Appreciate this.
I've been using the same method mostly to paint some geometric shapes for vases, frames, other types of accessories/furniture etc, but you took this concept much further than I thought possible. Well done man, now I have new avenues to explore. :)
I have a coca cola bottle and I need to add the bulges in the glass but I sure as hell don't want to model that detail then bake it back down. Especially if I can simply draw the bulges in photoshop on a normal map. This is perfect ty for this video
This looks good but the mayor problem is in games will have loads of seams due to the normal not being Seamless.
Ok this is great and makes perfect sense for those simple forms! But I still have no idea of how someone could hand paint a normal map of something as complex as a portrait... Looks like an insane amount of work... Simply modeling it would be quicker, wouldn't it?
awesome thecnique! although i can't seem to rotate or move the infinite light after i select it... anyone else tried this and couldnt get it to work either? the gizmo just doesnt show up.
dont know if its a bug or me just missing something.
anyway, really great stuff!
What is the difference in this pipeline with ndo, crazy bump, b2m or substance alchemist workflows? If the purpose is creating normal from image we have.
Thanks, Bud that's awesome tut just what i was looking for :)
Nice
Next one, develop a game:
...a pixel at time.
Only a few minutes in and this looks like an incredible technique for workflow in illustration / concept art / photobashing.
You could find or take references with ambient lighting and bash them together, spend a little effort making rough normal maps and set up a realistic guide to do use as a foundation for something presentable. Matching lighting and perspective is one of the things that slows you down most in my experience; this is like making yourself a a digital equivalent of a carving/relief or a little diorama to work out lighting and texture.
Honestly, I'm _going_ to learn this, I can tell already. This will supplement my skills where they are weakest very well. Thanks for sharing your method!
This guy is fucking insane to be honest.
Anyone else see that mountain range as 3D?
Oh cheers I understand it a little better now, the colour directions threw me on my first try but ill give it another shot
He's a genius! I have no doubt!!
👍
Tihs is so, so helpful! Thank you!: )
Wait... Photoshop can do 3D AND animations now?!
Animation could be done back in CS5 i believe, and 3D in CS6 extended.
Fascinating!
Useful tut. Thanks!
Or...you know..just use the Normal Map Filter in Photoshop and then start manipulating that result in Designer
You wut??
WOW this is a SUPER tutorial, Thanks Nick!
That Ending, you are such a Titan !
This is epic level of brilliant 💡
You are explaining normal map wrong.
They are not color images at all. The fact that we can display them is just a coincidence.
They really are a grid of 3D vectors, saved to an image file for convenience.
Each "pixel" in an RGB image has 3 components (red, green, blue) and so it's handy for storing 3D vector's X, Y, Z components.
Rendering using normal map is not based on different "colors" in a normal map "reflecting light differently".
Instead the renderer combines rendered polygon's normal vector with vectors from normal map for calculation of angle a light hits the surface and reflects off of it.
And because of all above, they are not ment to be painted or treated as picture in general.
You're well correct in what the definition of a Normal Map really is. But hand painting it with the reference normal colours, seems to be the only effective and efficient method to fake those details for a 2d art, other ways like having to create a 3d representation of the 2d art, and then automatically generating the normals from it would obviously be so time consuming and not a method I'd recommend to anyone, hand painting it with the reference normal colours seems to be the only viable options we have as 2d artists.
I agree with most of this; the video definitely glosses over the mathematical and technical definitions of what normals and normal maps are. However, the conclusion that they're not meant to be painted ignores the intended target audience which isn't tech/vfx artists or modelers, it's 2D artists. Yes, painted normals make no sense from a physically based point-of-view, you'd generate them from a proper reference model. But most 2D artists aren't aiming for physically based realism and instead aim for a more stylistic appearance, and this technique is just another way for artists to stylize their work.
I wrote my comment because I am a long time game developer.
And during my career I met so many people who completely misunderstood normal maps and similar technologies and treated them as images. Trying to paint them, painting over them and destroying them and by doing that often introducing bugs to the project.
So I really do not think it is a great thing to misinform people about those things. In any context.
One day some of the "2D artists" will find themselves working on a game or software project and because of this dumbed down, completely nonsensical explanations, they will mess it up bad.
@@Riva1000 Fair point, I also work in games primarily as a graphics engine dev, but also doubling as tech artist on a few projects. I've met a few artists who would use "tools" to create normals from a diffuse texture or the albedo, though the lead artists/tech artists would generally catch that during asset reviews. Only time I'd run into artists hand painting or tweaking normal maps after baking was a project with a pixel art aesthetic; creating reference models of some sprites wasn't practical, but at least the lead artist of that project was aware of what normal maps represent and the problems to avoid. My experience is anecdotal, but I respect and understand where you're coming from.
I only stumbled across this video from a friend who tried a similar process in their comics to shade a complex lighted scene. There are many other more relevant resources for model and texture artists than this video, and I'd hope someone would watch more than one video on the topic and especially videos more relevant to their fields. Though of course in reality that isn't always the case and videos like this really shouldn't gloss over the technical background or caveat that this technique is not proper in any 3D environment. Anyway, cheers!