[Tutorial]Cage's door texture walkthrough
Posted: Wed Dec 12, 2012 11:22 pm
Howdy folks!
Recent GFX works made me think about doing a tutorial about some of my sprite/texture work.
This one is more of a walkthrough how I make a texture but that should give you some insight
THE TOOLS
Adobe Photoshop CS4 - I'm almost 100% sure that you should be ok with even CS1. Most of the techniques used should be adaptable to other programs, like gimp. - If you have any pointers on this, drop me a line and I'll add them to the tutorial. Any software, as long as it has layers, pressure sensitivity for brushes and automatic bevel/shadow/glow effects (with a good amount of control over them) should work
Graphics Tablet - I'm using Wacom Intuos 3 A5 size, Intuos is a line that is considered professional (I guess the Cintiq Tablet-Screen thing is the top end) but you can work comfortably on Wacom Bamboo tablets, I've used one for some Hacx textures (I've made them at work). I think the model I've had was meant for writing, not drawing, but worked it fine - so long as you have a tablet with pressure sensitivity and okay precision you should be good to go. (I've seen a tablet which always made jaggy lines - even with a ruler...)
THE IDEA
Okay so this is the concept art made by Mechadon. Maybe he's no DaVinci but it's pretty clear what's going on
I don't have to be too strict, he's open to (some ) of my interpretations. We'll do a comparison with the finished one later.
THE BASE
Okay, so I start off with a perfect midtone, with no color whatsoever - a middle gray tone. Almost all Hacx and Supplice are made in grayscale and colored with gradient maps once finished. I only work in color for the Doom stuff, since I often use bits and bobs from the original texture set - for the consistent look.
In my interpretation, the whole texture is in an indent - so here's the beveled border. On a new layer, I've created a square and edited the layer style options - to access it, go to the layer palette and double click on the space to the right of the layer's name.
The effect I'm using is bevel & emboss. Size, soften and the highlight/shadow opacity options are pretty self explanatory. The depth setting is pretty important, since it adjust how the bevel behaves - whether it's a soft or an straight angle bevel. High depth makes the light behave like on a straight line - I use high depth bevels almost always, in this texture too. Adjust the light's angle accordingly to the light source - I've chosen the top left corner. The "use global light" makes all the bevels use the same light direction settings - since I'm going to need various bevels, behaving differently, I'm turning it off. I recommend, that you use low/middle amount of opacity of the highlight/shadows. At this stage, we're keeping everything low contrast and rubbery looking.
As a future note - I'm usually using a separate layer for every shape. You can have more shapes on one layer, but they will all share the set behavior.
I've added the corner details, which are copied over from another door from Supplice's texture resource. I'm not going into details how I've made it at the moment, but the descriptions further down the road should give you the idea Also, I've darkened the texture to reduce the contrast between the background and the corners, and edited the bottom edge.
Okay, got a bit more going on - I've added the top indent/vent corner thingies and the rounded center-piece. I've used the shape tool. Take note of the tool options bar (top of the screen) once you select it:
There are three options to the left - the first one creates a vector shape, the second one creates only the vector mask of the shape, and the third one creates a shape as pure pixels - we'll use the third option. In this case I'm leaving antialiasing ON and adjusting the size of the rounding to taste.
Take note - in case of low-res graphics, use the marquee (selection) tool and color fill (alt+backspace) - selection tools are bound to pixels, while the shape tool is not. If you use antialiasing you might get the blurred sides for example (since you didn't draw the shape pixel-perfect) , if not, you may end up with a shape shifted by one pixel for example. I'm using the shape tool since the selection doesn't have the rounded box shape.
The center piece uses a bevel layer style and a drop shadow with almost default settings:
Left the global light on, since I'm not using drop shadow anywhere else
Despite the concept drawing I'm kinda not sure how the bottom of this element should look. I'm leaving it like this and I'll improvise later
Next step:
As you can see, I've made the shape which will make the center indents (it's just a solid filled shape at the moment) with ellipse and box selection tools - shift lets you add to the current selection, alt substracts.
The corner shapes are a solid black fill too, but they have low fill % and inner glow layer style. The vents have some more definition now.
(The black and white icon is a mask - we'll get to that in the next step)
The difference is: fill is the opacity of the content of the layer, opacity is the opacity of both fill and layer style. If you lower fill, the pixels of the layer will be more transparent but layer style effects will be in full opacity.
As far as inner glow, it's pretty much self explanatory - we use a black inner glow, and since the default blending mode is "screen" it won't display (this is an additive transparency mode - google about blending modes if you don't know what's going on ) we have to change it - normal or multiply work well, color burn most likely will be too dense.
The vents use a simillar idea - they're a black shape, I've lowered their fill, and added an inner shadow filter for some 3dness - a plain gradient would be too boring.
Next:
I wanted to cut out what's unnecessary from the shape, but I want it, to be editable - you can use a mask to do this. On the bottom of the layer palette, there's the add mask - rectangle with a circle inside. Masks are attached to a layer and work exactly like alpha channels.
Click the mask icon to edit it. The bars are pretty straightforward, the center cut-out was made by using the rounded center piece layer as a selection (ctrl + left mouse click on layer's ICON) and then using the top menu option: select -> modify -> expand. Since the selection work on pixels (and thus, modify selection commands and tools), the expand command is not as precise as we'd like, as you probably can see. I'm a lazy ass and I've used a quicker method instead of better one - use the rectangle/ellipse marquee tools.
After we have our cutout we adjust the fill and go to layer style, you should know the drill by now. This one uses inner glow and bevel and emboss - in this case we want to hightlight the outside edge - in the bevel options, select "outer bevel" from the style list and use 0 or 1 as the size. A lower depth value might work better in this case too.
OKAY, you can now slap on a metal texture overlay and WE'RE FINISHED, WOO HOO!
Who am I kidding. We've just made the bare bones for our texture
THE BRUSHWORK
We can now kiss our bevels goodbye - stylus in hand!
We have to set it up first - select the brush tool (B) and push F5 to open the brush configuration.
Select the first brush - the default 1 pixel hard brush (it's hardness should be 100%, if it's not, adjust it). Keep the size. One pixel is all we need
In shape dynamics select the "control" setting under size jitter and set it to "pen pressure" - IIRC that this is the default for this brush, if it's not, well... You know the drill.
The second option is the opacity jitter in other dynamics. This further enhances the dynamics of your line - if your lines will be too faint you can turn this off.
Bigger brushes need a bit different set up (IMO) to work well, but I'm usually not using them for Doom stuff. Just in case - the [ ] bracket keys shrink and enlarge your brush.
Use the same set up for your eraser tool.
What colors should I shade with? Since you're in grayscale, black and white of course. I'm using the default (press D) pure black and white colours, controlling their intensity by using the pen pressure. For convenience you can press the X key - it will switch between the two colors (b&w in this case) so you don't have to pick any colors etc. whether you switch from shading/lightening. If you end up with harsh colour transitions you can press alt while using the brush tool - it will change to eyedropper so you can pick up intermediate colors.
With the set-up complete I just dig in! While the method is more towards digital painting - we use antialiased brushes with varying opacity - we have to apply pixel-art principles and ideas to make it look best. Start painting over on a new layer. I create a new layer every once in while - to split highlights from shadows or just to have an ability to fallback in case.
Okay, our first strokes are laid. The corner vents seem to be moved, but I've just painted in some shadows/highlights. Edges of the bevels are spiced up a bit too. In general, in the painting stage we detail our lighting and edges and create some actual shine/specularity.
1 pixel brush is pretty precise, but still you can get some unwanted bleeding. You can use the marquee/selection tool to limit the are where you can draw. However, in places with strong highlights, you may do some intentional bleeding (a bit like glow/bloom effect)
Went over the whole thing, and done more of what I've did in step 3. I've also lower the opacity of the bevel on the center piece since it was a bit too much before.
Allright, this step may actually be considered cheating The dark strokes may seem unrealistic - like there's a bit of indent behind each edge - but it's not supposed to be realistic. However, it's a great way to add detail, contrast and texture. I'm darkening a bit of every edge, highlighted or not - essentially I'm doing what the sharpening filters do, but consciously and tastefully. The strokes can't be too defined, or the effect will be too much. Try to keep the strokes sharp towards the edge a more faded when it moves inward the surface.
Not much over here. Added the warning stripe indented details on the bottom and a basic gradient as a base for our vent details. Won't be going in-depth about the gradient tool, since it's pretty straightforward. I recommend unchecking the dither option. Also, in the gradient type drop list, the first gradient uses your two set-up colors (foreground color and background color) while the second one is a gradient from your foreground color to complete transparency. Those two are very useful!
Okay, refined the vents and added the little circular detail in the center. Also added in the rivets - the rivet was painted on transparency, on a new layer. I wanted to make it feel like it's a bit rounded inwards in the center, so I highlighted the bottom edge. There's a faint, straight dark stroke coming down from the rivet - think of it as a little bit of rust. The rivets were then copied over - move tool is useful here. If you have the move tool selected you can move any of the layer with alt - this will copy them and move them to where you want. The move tool works only on the layer you have selected in the layer panel, or if you have the "auto-select" option checked on the top option bar.
Every rivet as a separate layer will cause a lot of clutter in your layer palette, so either merge them down with CTRL+E or group them into a folder (use the folder icon on the bottom of the layer dock)
Time for the center details
For the center, I've used another Supplice texture for the background. I'm not going in-depth, but this one was made by painting over, using the principles described earlier, on a procedurally generated block noise texture (one that has few layers), so it looks like rectangular metal placed overlapping themselves.
The pipe/cable details are straight 3px lines made with the shape tool (use antialasing for diagonals and turn it off for straight lines for best effect), and simple bevel and drop shadow layer style. They're not masked to the shape yet - if I mask them now, the bevel and drop shadow will accommodate to the cut out shape - we'll get cut shadows, and highlights on the edges. Before we apply the mask we have to convert the layer to a smart object (right click on the layer in the list and "convert to smart object"). If you can't do it (I believe this functionality is from CS3 onwards) create an empty layer beneath and merge down (ctrl+e) the top layer. Be sure to copy the layer first, and make it invisible (eye icon) to have a backup.
I need to finish the center piece and shift the contrast of the middle details, like this
And guess I'm done with the whole texture. To shift the contrast, Ive made a new layer, made a selection from the shape of the middle areas and filled them with black. Then I've made a selection from the pipes and filled it with white, on the same layer. This way, I've made a "mask" for lighting and darkening the desired area. Change the blending mode to one you like the most from the overlay group - those modes are a mix of additive and subtractive transparency. I've used overlay. Adjust the opacity to adjust the amount of effect and that's it.
Seems were done here, we can add some color now, or maybe some wear and grit to it. I recommend you paint any damage by hand and be wary of overlaying any textures. Some might add a lot of flavor, some make the whole thing cheap. It can also make, or break, a good conversion into a limited palette. I recommend using procedurally generated stuff (filters, noise - but more complex ones). Photo textures usually look out of place, even when they downscale well, so watch out. More on downscaling here
I hope that some insight to my workflow was helpful in some way. Good luck in your own textures!
http://imgur.com/a/tQPG0#0 - All pictures from the tutorial
Recent GFX works made me think about doing a tutorial about some of my sprite/texture work.
This one is more of a walkthrough how I make a texture but that should give you some insight
THE TOOLS
Adobe Photoshop CS4 - I'm almost 100% sure that you should be ok with even CS1. Most of the techniques used should be adaptable to other programs, like gimp. - If you have any pointers on this, drop me a line and I'll add them to the tutorial. Any software, as long as it has layers, pressure sensitivity for brushes and automatic bevel/shadow/glow effects (with a good amount of control over them) should work
Graphics Tablet - I'm using Wacom Intuos 3 A5 size, Intuos is a line that is considered professional (I guess the Cintiq Tablet-Screen thing is the top end) but you can work comfortably on Wacom Bamboo tablets, I've used one for some Hacx textures (I've made them at work). I think the model I've had was meant for writing, not drawing, but worked it fine - so long as you have a tablet with pressure sensitivity and okay precision you should be good to go. (I've seen a tablet which always made jaggy lines - even with a ruler...)
THE IDEA
Okay so this is the concept art made by Mechadon. Maybe he's no DaVinci but it's pretty clear what's going on
I don't have to be too strict, he's open to (some ) of my interpretations. We'll do a comparison with the finished one later.
THE BASE
Okay, so I start off with a perfect midtone, with no color whatsoever - a middle gray tone. Almost all Hacx and Supplice are made in grayscale and colored with gradient maps once finished. I only work in color for the Doom stuff, since I often use bits and bobs from the original texture set - for the consistent look.
In my interpretation, the whole texture is in an indent - so here's the beveled border. On a new layer, I've created a square and edited the layer style options - to access it, go to the layer palette and double click on the space to the right of the layer's name.
The effect I'm using is bevel & emboss. Size, soften and the highlight/shadow opacity options are pretty self explanatory. The depth setting is pretty important, since it adjust how the bevel behaves - whether it's a soft or an straight angle bevel. High depth makes the light behave like on a straight line - I use high depth bevels almost always, in this texture too. Adjust the light's angle accordingly to the light source - I've chosen the top left corner. The "use global light" makes all the bevels use the same light direction settings - since I'm going to need various bevels, behaving differently, I'm turning it off. I recommend, that you use low/middle amount of opacity of the highlight/shadows. At this stage, we're keeping everything low contrast and rubbery looking.
As a future note - I'm usually using a separate layer for every shape. You can have more shapes on one layer, but they will all share the set behavior.
I've added the corner details, which are copied over from another door from Supplice's texture resource. I'm not going into details how I've made it at the moment, but the descriptions further down the road should give you the idea Also, I've darkened the texture to reduce the contrast between the background and the corners, and edited the bottom edge.
Okay, got a bit more going on - I've added the top indent/vent corner thingies and the rounded center-piece. I've used the shape tool. Take note of the tool options bar (top of the screen) once you select it:
There are three options to the left - the first one creates a vector shape, the second one creates only the vector mask of the shape, and the third one creates a shape as pure pixels - we'll use the third option. In this case I'm leaving antialiasing ON and adjusting the size of the rounding to taste.
Take note - in case of low-res graphics, use the marquee (selection) tool and color fill (alt+backspace) - selection tools are bound to pixels, while the shape tool is not. If you use antialiasing you might get the blurred sides for example (since you didn't draw the shape pixel-perfect) , if not, you may end up with a shape shifted by one pixel for example. I'm using the shape tool since the selection doesn't have the rounded box shape.
The center piece uses a bevel layer style and a drop shadow with almost default settings:
Left the global light on, since I'm not using drop shadow anywhere else
Despite the concept drawing I'm kinda not sure how the bottom of this element should look. I'm leaving it like this and I'll improvise later
Next step:
As you can see, I've made the shape which will make the center indents (it's just a solid filled shape at the moment) with ellipse and box selection tools - shift lets you add to the current selection, alt substracts.
The corner shapes are a solid black fill too, but they have low fill % and inner glow layer style. The vents have some more definition now.
(The black and white icon is a mask - we'll get to that in the next step)
The difference is: fill is the opacity of the content of the layer, opacity is the opacity of both fill and layer style. If you lower fill, the pixels of the layer will be more transparent but layer style effects will be in full opacity.
As far as inner glow, it's pretty much self explanatory - we use a black inner glow, and since the default blending mode is "screen" it won't display (this is an additive transparency mode - google about blending modes if you don't know what's going on ) we have to change it - normal or multiply work well, color burn most likely will be too dense.
The vents use a simillar idea - they're a black shape, I've lowered their fill, and added an inner shadow filter for some 3dness - a plain gradient would be too boring.
Next:
I wanted to cut out what's unnecessary from the shape, but I want it, to be editable - you can use a mask to do this. On the bottom of the layer palette, there's the add mask - rectangle with a circle inside. Masks are attached to a layer and work exactly like alpha channels.
Click the mask icon to edit it. The bars are pretty straightforward, the center cut-out was made by using the rounded center piece layer as a selection (ctrl + left mouse click on layer's ICON) and then using the top menu option: select -> modify -> expand. Since the selection work on pixels (and thus, modify selection commands and tools), the expand command is not as precise as we'd like, as you probably can see. I'm a lazy ass and I've used a quicker method instead of better one - use the rectangle/ellipse marquee tools.
After we have our cutout we adjust the fill and go to layer style, you should know the drill by now. This one uses inner glow and bevel and emboss - in this case we want to hightlight the outside edge - in the bevel options, select "outer bevel" from the style list and use 0 or 1 as the size. A lower depth value might work better in this case too.
OKAY, you can now slap on a metal texture overlay and WE'RE FINISHED, WOO HOO!
Who am I kidding. We've just made the bare bones for our texture
THE BRUSHWORK
We can now kiss our bevels goodbye - stylus in hand!
We have to set it up first - select the brush tool (B) and push F5 to open the brush configuration.
Select the first brush - the default 1 pixel hard brush (it's hardness should be 100%, if it's not, adjust it). Keep the size. One pixel is all we need
In shape dynamics select the "control" setting under size jitter and set it to "pen pressure" - IIRC that this is the default for this brush, if it's not, well... You know the drill.
The second option is the opacity jitter in other dynamics. This further enhances the dynamics of your line - if your lines will be too faint you can turn this off.
Bigger brushes need a bit different set up (IMO) to work well, but I'm usually not using them for Doom stuff. Just in case - the [ ] bracket keys shrink and enlarge your brush.
Use the same set up for your eraser tool.
What colors should I shade with? Since you're in grayscale, black and white of course. I'm using the default (press D) pure black and white colours, controlling their intensity by using the pen pressure. For convenience you can press the X key - it will switch between the two colors (b&w in this case) so you don't have to pick any colors etc. whether you switch from shading/lightening. If you end up with harsh colour transitions you can press alt while using the brush tool - it will change to eyedropper so you can pick up intermediate colors.
With the set-up complete I just dig in! While the method is more towards digital painting - we use antialiased brushes with varying opacity - we have to apply pixel-art principles and ideas to make it look best. Start painting over on a new layer. I create a new layer every once in while - to split highlights from shadows or just to have an ability to fallback in case.
Okay, our first strokes are laid. The corner vents seem to be moved, but I've just painted in some shadows/highlights. Edges of the bevels are spiced up a bit too. In general, in the painting stage we detail our lighting and edges and create some actual shine/specularity.
1 pixel brush is pretty precise, but still you can get some unwanted bleeding. You can use the marquee/selection tool to limit the are where you can draw. However, in places with strong highlights, you may do some intentional bleeding (a bit like glow/bloom effect)
Went over the whole thing, and done more of what I've did in step 3. I've also lower the opacity of the bevel on the center piece since it was a bit too much before.
Allright, this step may actually be considered cheating The dark strokes may seem unrealistic - like there's a bit of indent behind each edge - but it's not supposed to be realistic. However, it's a great way to add detail, contrast and texture. I'm darkening a bit of every edge, highlighted or not - essentially I'm doing what the sharpening filters do, but consciously and tastefully. The strokes can't be too defined, or the effect will be too much. Try to keep the strokes sharp towards the edge a more faded when it moves inward the surface.
Not much over here. Added the warning stripe indented details on the bottom and a basic gradient as a base for our vent details. Won't be going in-depth about the gradient tool, since it's pretty straightforward. I recommend unchecking the dither option. Also, in the gradient type drop list, the first gradient uses your two set-up colors (foreground color and background color) while the second one is a gradient from your foreground color to complete transparency. Those two are very useful!
Okay, refined the vents and added the little circular detail in the center. Also added in the rivets - the rivet was painted on transparency, on a new layer. I wanted to make it feel like it's a bit rounded inwards in the center, so I highlighted the bottom edge. There's a faint, straight dark stroke coming down from the rivet - think of it as a little bit of rust. The rivets were then copied over - move tool is useful here. If you have the move tool selected you can move any of the layer with alt - this will copy them and move them to where you want. The move tool works only on the layer you have selected in the layer panel, or if you have the "auto-select" option checked on the top option bar.
Every rivet as a separate layer will cause a lot of clutter in your layer palette, so either merge them down with CTRL+E or group them into a folder (use the folder icon on the bottom of the layer dock)
Time for the center details
For the center, I've used another Supplice texture for the background. I'm not going in-depth, but this one was made by painting over, using the principles described earlier, on a procedurally generated block noise texture (one that has few layers), so it looks like rectangular metal placed overlapping themselves.
The pipe/cable details are straight 3px lines made with the shape tool (use antialasing for diagonals and turn it off for straight lines for best effect), and simple bevel and drop shadow layer style. They're not masked to the shape yet - if I mask them now, the bevel and drop shadow will accommodate to the cut out shape - we'll get cut shadows, and highlights on the edges. Before we apply the mask we have to convert the layer to a smart object (right click on the layer in the list and "convert to smart object"). If you can't do it (I believe this functionality is from CS3 onwards) create an empty layer beneath and merge down (ctrl+e) the top layer. Be sure to copy the layer first, and make it invisible (eye icon) to have a backup.
I need to finish the center piece and shift the contrast of the middle details, like this
And guess I'm done with the whole texture. To shift the contrast, Ive made a new layer, made a selection from the shape of the middle areas and filled them with black. Then I've made a selection from the pipes and filled it with white, on the same layer. This way, I've made a "mask" for lighting and darkening the desired area. Change the blending mode to one you like the most from the overlay group - those modes are a mix of additive and subtractive transparency. I've used overlay. Adjust the opacity to adjust the amount of effect and that's it.
Seems were done here, we can add some color now, or maybe some wear and grit to it. I recommend you paint any damage by hand and be wary of overlaying any textures. Some might add a lot of flavor, some make the whole thing cheap. It can also make, or break, a good conversion into a limited palette. I recommend using procedurally generated stuff (filters, noise - but more complex ones). Photo textures usually look out of place, even when they downscale well, so watch out. More on downscaling here
I hope that some insight to my workflow was helpful in some way. Good luck in your own textures!
http://imgur.com/a/tQPG0#0 - All pictures from the tutorial