Tài liệu 2D Artwork and 3D Modeling for Game Artists- P9 doc

374 Advanced Texturing Examples Gaussian blur Levels Figure 9.29 Start a new channel and fill the selection with white Carve the selection to your liking, then Gaussian Blur it Use the Levels command to sharpen it back up TE Modify selection AM FL Y 30 To sharpen the image, choose Image, Adjust, Levels and drag the Shadows and Highlights markers together until the edges of the shape are nice and crisp, as shown in Figure 9.29 (This technique is a great way to create smooth, curved objects.) 31 Make another circular selection around the existing pattern 32 Choose Image, Adjust, Invert; you should end up with a white pattern that looks like the one in Figure 9.30 Remember, the white areas in the channel represent the selection boundaries Figure 9.30 Create another circular selection around the existing object and invert it Ctrl+click the channel to load the selection 33 When the shape in the Alpha channel looks good, Ctrl+click the channel to load the selection 34 With the selection active, go back to the Layers palette and start a new layer 35 Fill the selection with a sample of rust from the rusty_metal.jpg image ® Team-Fly Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Medieval Castle/Haunted House Gate 375 36 As you did in steps 17–22, finish the pattern with an outer bevel and some smaller rivets (see Figure 9.31) Figure 9.31 On a new layer, fill the selection with rust from the rusty_metal.jpg image Apply an outer bevel and some smaller rivets 37 Merge the pattern you just created with the metal binding’s layer 38 In the same way you created the rivets, create two small raised objects that will support the actual drop handle itself; Figure 9.32 shows mine Figure 9.32 Create two small raised surfaces that will support the drop handle (or knocker) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 376 Advanced Texturing Examples 39 Now for the handle—you’re essentially going to make a 3D hoop from scratch (a technique you learned in the section “Pipes, Wires, Rivets, and Screws” in Chapter 8) Create a circular selection in the shape of a hoop that barely touches both of the raised objects you created in the last step (see Figure 9.33) Figure 9.33 Create a circular selection in the shape of a hoop, where the handle will be 40 In the Channels palette, create another new channel 41 The hoop’s selection should still be active; choose Edit, Stroke, about pixels wide 42 Stroke this selection with white 43 Ctrl+click the channel to reload the selection 44 Choose Filter, Blur, Gaussian Blur, about pixels 45 With the selection still loaded, adjust the levels (slide the Midtones and Highlights markers together) until your start seeing a 3D shaded hoop appear (see Figure 9.34) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Medieval Castle/Haunted House Gate 377 Figure 9.34 Stroke the selection in a new channel Use the blur-levels technique to create a 3D appearance, and then make a copy of the selection Stroke Blur Levels 46 Press Ctrl+C to copy the selection 47 In the Layers palette, start a new layer 48 With the new layer active, press Ctrl+V to paste the contents from the channel 49 Adjust the levels again to darken the hoop 50 Choose Filter, Noise, Add Noise, about 10% (see Figure 9.35) Now it looks like a beautiful, weathered, wrought-iron drop handle 51 Add a finishing touch by applying a drop shadow to the drop handle Figure 9.35 Paste the hoop onto a new layer, adjust the levels, and add some noise Finish it off with a drop shadow Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 378 Advanced Texturing Examples 52 Link and merge the handle’s layer and the metal binding’s layer You should now have only two layers: the bindings and drop handle on one layer, with the wooden door on the background layer 53 Choose Image, Adjust, Curves to correct the colorization and specularity of the metal binding’s layer In Figure 9.36, you can see how I adjusted the graph in the Curves command to tone down the metal and make it look much more real The Curves function is very handy for adjusting specular highlights in images Figure 9.36 Merge the metal layers and adjust the specularity of the layer using the Curves command 54 Touch up the entire image using the Burn tool with a very low setting, like 5% exposure, and a splatter-like brush I went over the wood doors too, and made sure the bottoms of the image were darker than the tops, indicating a highnoon sun 55 Flatten the image, and increase the canvas width by 100% 56 Make a copy of the door, paste it into the same image, and click Edit, Transform, Flip Horizontal TIP If you burn shadows into the top areas of the wood, it’ll make the bindings appear to be floating away from the door Correct this by undoing it, or using the Dodge tool Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark High Tech 379 57 Position the copy next to the original (see Figure 9.37) Finally, you’re finished! Figure 9.37 Touch up the image using the Burn tool with a low setting Make a copy of the door, flip it, and align it next to the original High-Tech Making textures suitable for any space ship or futuristic otherworld is my forte This type of texture involves nothing less than creating lots of pipes, wires, lights, metal panels, and anything else that makes you feel as far as possible from quaint In addition, this texture will have an animation frame associated with it—a NOTE couple of the lights will go on and off, depending on the actions of the player I’m going to pick up the pace here and assume that you already know (once the texture is in a game engine, the basics of the general filters that is) Figure 9.38 shows the texture Photoshop has to offer, as well as whose creation I’ll demonstrate now applying styles, adjusting levels, and so on If you find that you get lost quickly, you might want to go over Chapter in more detail, where these essentials are thoroughly covered Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 380 Advanced Texturing Examples Figure 9.38 The futuristic, high-tech texture you’ll create in this section Start a new 1024 × 1024-pixel RGB color image with a resolution of 1024 Fill the image with the Clouds filter, using pure black and medium gray (hex# 808080) Choose Filter, Render, Difference Clouds Add noise, 10% Choose Filter, Stylize, Emboss This will make the surface appear slightly bumpy (see Figure 9.39) Figure 9.39 Use the Clouds, Noise, and Emboss filters to make a uniquely textured background Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark High Tech Filter: Angle: Height: Amount: 381 Stylize, Emboss 135 degrees pixel 118% Using the Polygonal Lasso tool, with both the Grid and Snap features enabled, create a selection as shown in Figure 9.40 Right-click on the selection and choose Layer Via Copy Figure 9.40 Create a polygonal selection on the background layer and copy it to a new layer With the selection on its own layer, apply an inner bevel Notice that the style causes bevels on the left, right, and bottom edges, which you don’t want To get rid of them, flatten the layer (that is, add a new layer, link the two, and press Ctrl+E to merge them); click Edit, Transform, Scale; and scale out the sides and bottom Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 382 Advanced Texturing Examples 10 Adjust the levels on all layers to darken the image (see Figure 9.41) Figure 9.41 Bevel the selection based on the background texture Adjust levels to make it darker Style: Style: Technique: Depth: Direction: Size: Soften: Shading Angle: Style: Range: Bevel and Emboss Inner Bevel Smooth 1000% Up 20 75 degrees Linear Contour 50% 11 The large, circular furnace thing (in the middle of Figure 9.38) is simply a pattern I created using an Alpha channel in the Channels palette To begin, create a circular marquee selection, and then fill it with white in a new channel 12 Continue making the pattern by deleting and filling other circular selections, as I have done in Figure 9.42 (I used the Line tool to make the straight lines of fixed width.) 13 Once the pattern is about what you want, use the Gaussian blur/levels technique, as mentioned in the previous example, to round the corners 14 When you’re finished, Ctrl+click the channel to load the selection Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark High Tech 383 Figure 9.42 Create a cool grate pattern in a new Alpha channel 15 With the pattern’s selection loaded, right-click the background layer and choose Layer Via Copy 16 Apply an inner bevel to the new layer to make the surface look 3D (see Figure 9.43) NOTE I don’t have any set preferences for bevels; I usually just play around with the settings to get the look I want The most important thing to is to use the Global Light feature, which is usually enabled by default 17 Start another layer below the grate Figure 9.43 Use the pattern selection to copy the material from the background layer, and apply an inner bevel to this layer Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Skin and Bones 409 15 Make a copy of this background layer, and move the copy above the bone layer Filter: Light Type: Intensity: Focus: Gloss: Material: Exposure: Ambience: Texture Channel: Height: Render, Lighting Effects Spotlight (from above and right) 25 25 0 Alpha 100 16 You should now have three layers in the image: a bone layer surrounded by two flesh layers Create another new layer above all other layers; this will be the skin layer 17 For the sake of example, I’m going to use a typical Caucasian flesh mixture for the skin in this tutorial I recommend you use two similar colors as the base mix For my example, I applied the Filter, Render, Clouds filter using hex# AC883B and hex# CA8C4A TIP Getting skin tones correct is a trial-and-error process, but the best way to it is to search the Web for images of people whose skin matches the color you want, and sample it in Photoshop 18 Choose Filter, Noise, Add Noise, about 5% Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 410 10 Organic Texture Tutorials with Photoshop 19 Choose Filter, Noise, Median, with pixel The results are shown in Figure 10.18; I also adjusted the skin with the Levels command, and desaturated it a bit using Image, Adjust, Hue/Saturation Figure 10.18 Create a new layer and fill it with the Clouds filter, using skin colors of your choice Also add noise, and adjust the levels and saturation to suit 20 Now it’s time to tear the skin and expose the muscle and bone To the top skin layer, use the Lasso tool to make a large gouge surrounding the underlying bone (see Figure 10.19) Figure 10.19 Create a selection on the skin layer that will represent a gouge in the flesh 21 Press Q to enter Quick Mask mode 22 To tear up the skin a bit more, as if a monster or something swiped at it, choose Filter, Brush Strokes, Sprayed Strokes (see Figure 10.20) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Skin and Bones 411 Figure 10.20 Enter Quick Mask mode and apply the Sprayed Strokes filter Filter: Stroke Length: Spray Radius: Stroke Direction: Brush Strokes, Sprayed Strokes 20 22 Right Diagonal 23 Press Q to exit Quick Mask mode 24 Press Delete to remove the skin and expose the muscle layer beneath it 25 To expose bone, click on the muscle layer itself, and contract the selection by choosing Select, Modify, Contract with a value of about 20 pixels 26 Press Delete You should end up with something like Figure 10.21 Figure 10.21 Delete the skin contents of the selection Select the muscle layer below the skin layer, contract the selection, and delete the muscle tissue as well Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 412 10 Organic Texture Tutorials with Photoshop 27 Apply a Bevel and Emboss style of your choice to both the top skin layer and the muscle layer below it I played around, and found that the Pillow Emboss style looks great TIP I cover using styles in more detail in Chapter 8, and in the Photoshop tutorials located on this book’s CD-ROM 28 Change the colors of the Highlight and Shadow modes of these styles to a reddish color Overall, you should end up with a nice 3D look to the skin and muscle (see Figure 10.22) Figure 10.22 Apply a Bevel and Emboss style to both the skin and muscle layers 29 Use the Burn tool with a very low setting (less than 5% exposure) to char the edges of the skin, the muscle, and areas of the bone (see Figure 10.23) Figure 10.23 Use the Burn tool to dirty up the image, particularly at the edges Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Clothing 413 Clothing I’m tossing in a quick section on rendering clothing here because, well, it usually goes on something organic! First I’ll show you how to create camouflage clothing, then move on to demonstrating the use of a displacement channel to aid in making its appearance look more 3D The displacement channel helps you falsify folds in cloth and thereby avoid the inefficient process of modeling wrinkles in shirts and pants Camouflage There must be dozens of different schemes for this type of material, from jungle to desert to what appears to be camouflage meant for the Arctic tundra None of those are difficult to make; it’s just a matter of getting the four to ten colors recorded and applying them to foliage-like patterns In this tutorial, you’ll regular Army camos; then I’ll show you samples of other types The trick to doing camouflage is alternating the layering properly Start a new 512×512-pixel RGB color image Fill the image using the Clouds filter, with your foreground set to a dark green, like hex# 081406, and the background set to a more grayish darkgreen, like hex# 192517 Using the Channels palette, start a new channel Using the Lasso tool, create a goofy, foliage-like pattern that appears very random—like an amoeba or something, as I have done in Figure 10.24 Fill this selection with pure white Figure 10.24 In a new channel, draw a foliage-like shape using one of the Lasso tools Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 10 Organic Texture Tutorials with Photoshop NOTE You don’t have to create a perfect pattern; in fact, you could even use the Polygonal Lasso tool, because you’ll smooth it out in the next step Just don’t be too square with your design AM FL Y Press Ctrl+D to deselect Choose Filter, Blur, Gaussian Blur, with a radius of about 5.0 pixels Choose Image, Adjust, Levels, and slide the Shadows and Highlights markers toward each other until the shape in the channel becomes crisp and sharp (see Figure 10.25) Don’t bring the markers completely together, or you’ll get aliased edges TE 414 Figure 10.25 Apply the Gaussian Blur filter to the shape, then resharpen it using the Levels command Repeat steps 3–7 to make about nine more of these shapes, some very small, and others larger but not too big Make sure each shape is on its own channel! That way, you can call up the individual shapes and overlap them later Also make sure each of the shapes is unique compared to the rest Ctrl+click one of the shape’s channels to load its selection 10 In the Layers palette, start a new layer ® Team-Fly Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Clothing 11 Fill the selection with a medium tan (hex# 737244), a dark orange-brown (hex# 3F250E), or pure black (hex# 000000) 12 Repeat steps 9–11 for each of the remaining shapes you created, fill them with one of the three colors mentioned Try to make things very random, overlapping, but not too cluttered, as I have done in Figure 10.26 The trick to a nice camo is to even out the color scheme, and to have the colored shapes interlayered nicely TIP Store your color selections in the Swatches palette for quick retrieval Figure 10.26 Fill the selections of the different shapes you created with dark tan, dark orange-brown, and black, in different arrangements and on separate layers 13 When you’re satisfied with your camo, choose Layer, Flatten Image 14 Choose Filter, Texture, Texturizer, and select the Canvas option—this will give the camo a perfect, rough style 15 Adjust the levels to suit Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 415 416 10 Organic Texture Tutorials with Photoshop 16 Choose Image, Adjust, Hue/Saturation, and desaturate the colors a tad to wash them out appropriately (see Figure 10.27) Figure 10.27 Flatten the image, and apply the Canvas filter Adjust the levels and saturation to suit Filter: Texture: Scaling: Relief: Light Direction: Texture, Texturizer Canvas 50% Top TIP By the way, this texture works great when set as a pattern; just be sure not to make the individual shapes in the texture go beyond the edges of the image.That way, the texture will tile, somewhat seamlessly, around the pants or jacket of your favorite Hamburger Hill action model Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Clothing 417 Wrinkles (Using Displacement Maps) When you make a texture meant to be clothing for a character model, the cloth itself should almost never hang straight down like it’s made of cardboard The au natural look of clothing always has some sort of fold, crease, or seam somewhere It’s somewhat difficult to modify the character’s mesh so it physically wrinkles your texture map, aside from being a waste of polygons The logical thing is to put the wrinkles in the texture map, creating the illusion of the clothing hanging naturally (see Figure 10.28) Figure 10.28 The pants leg of a soldier mesh with the camouflage texture from the previous example It’s much more efficient to fake some wrinkles in the texture map than to model the mesh to so Plain texture Texture with displacement map Creating the illusion of wrinkles can seem like a pain if you haven’t much traditional artistic ability, but all it is, is a matter of dodging, burning, and cutting/pasting the texture in just the right places to get a good fold effect Alternatively, you can use a displacement channel, like so: With the camouflage texture you created in the previous section open (if you don’t have it, load the camo1.png file on the CD-ROM), start a new channel Click on the Airbrush tool, and select a large feathered brush like Soft Round 65 pixels, with about 30% pressure (You don’t want to spray anything heavy or too white or the folds in the texture will look too sharp and artificial.) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 418 10 Organic Texture Tutorials with Photoshop In the new channel, spray a sweeping pattern, similar in shape to a Christmas tree, as I have done in Figure 10.29 Figure 10.29 To create a displacement map for the cloth, lightly spray a sweeping pattern in a new channel To generate the wrinkles in the camo, select the camo layer itself and apply the Lighting Effects filter using the newly created Alpha channel as a displacement map In that filter I have the Texture Channel set to Mountainous (100) to bring out the bumps in the cloth to their fullest (see Figure 10.30) Figure 10.30 Render the wrinkles in the camouflage with the Lighting Effects filter, using the new Alpha channel as a displacement map Augment the wrinkles in the final rendering by using the Dodge and Burn tools With each tool’s setting cranked all the way down, and using the Soft Round 65 Pixels brush, darken the valleys and lighten the peaks of the texture Seeing this in action can give you a feel for how traditional artists create these illusions by hand Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Planetary Textures 419 This is a fairly effective technique to create folds and wrinkles in fabric There is, however, another technique I use for creating similar displacements in skin, without using the Lighting Effects filter—see Chapter 12, “Skinning the Slogre with Deep Paint 3D and Photoshop.” Planetary Textures This section is dedicated to a handful of textures that pertain primarily to any geometry belonging to a planet, be it Earth or another large oblate spheroid Some of these textures are meant to be tiled uniquely upon a single mesh or plane, while others can (and should) be grouped in a texture set of similarity, since the same image tiled dozens of times can be quite monotonous Earth This is a quick but effective tile that’s useful for stretching itself over mediumsized distances That is, if your level contains a ground mesh of around 50 meters square, you might be able to get away with tiling this texture just a few times in each direction Start a new 512×512-pixel RGB color image To create the dirt layer, set your foreground to a medium tan color, like hex# 978F36, and your background to a dark orange-brown, like hex# 7D5810 Choose Filter, Render Clouds Apply the Noise filter, about 10% Apply the Median filter, pixel Create a new layer; this will be the grass layer above the dirt Fill the new layer with the Clouds filter, using medium and dark green colors such as hex# 1F871A and hex# 144A0A Apply the Noise and Median filters Using the Channels palette, create a new channel 10 To the new alpha channel, apply the Clouds filter, and then apply the Difference Clouds filter Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 420 10 Organic Texture Tutorials with Photoshop 11 Adjust the levels until you significantly sharpen the white areas in the channel, but keeping a good bit of fuzziness to it (see Figure 10.31) Figure 10.31 Apply the Clouds and Difference Clouds filter, and adjust the levels 12 Add Noise to this channel, about 10%, and reapply the Difference Clouds filter 13 Adjust the levels again until the white areas are sharpened somewhat but still fuzzy, as I have done in Figure 10.32 Figure 10.32 Add noise and reapply the Difference Clouds filter Sharpen the image again with levels 14 Ctrl+click this channel to load a great, scatter-like selection, and go back to the Layers palette 15 Click on the top layer, which should be the grass layer Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Planetary Textures 421 16 With the selection on the grass layer active, press Delete to get the dirt layer to show through (see Figure 10.33); if you like, continue pressing Delete to make the dirt show through more and more 17 Adjust the levels for both layers to your liking Figure 10.33 Load the channel’s selection and use it to delete the colors from the grass layer The great thing about this texture is, because you used the Clouds filters, the texture will be inherently seamlessly tileable Try clicking Filter, Other, Offset, and entering a value of 256 pixels for both width and height to see what I mean In Figure 10.34, I shrank the texture to 256×256 pixels, and applied it by itself to a rocky terrain in the Torque editor Not too shabby, eh? In addition, you can use this texturing technique to create base textures for other landscapes—just change the colors! Figure 10.34 The grassy texture in action in the Torque editor Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 422 10 Organic Texture Tutorials with Photoshop Dry Lake Bed This texture makes use of the Stained Glass filter that I presented earlier in the section “Rhinoceros Skin.” Essentially this is a feeble attempt to mimic the dry lake beds in the Utah/Nevada area—you know, where they test those highly practical supersonic cars Anyway, there’s not much to this procedure, but it makes good use of an Alpha channel to get the job done: Start a new 512×512-pixel RGB color image Fill the background layer with the Clouds filter, using sandy colors like hex# AC9059 and hex# BEB85C Apply the Noise filter, about 10% Create a new channel To the new channel, apply the Clouds filter Choose Filter, Texture, Stained Glass Choose Filter, Stylize, Find Edges This will nix everything fuzzy and augment the cell definition of the pattern (see Figure 10.35) Figure 10.35 The Stained Glass and Find Edges filter combination makes for a good dry, cracked lake bed pattern Filter: Cell Size: Border Thickness: Light Intensity: Texture, Stained Glass 40 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Planetary Textures 423 Choose Filter, Brush Strokes, Spatter This will chop up the edges of the cell pattern Ctrl+click the channel to load its selection 10 Using the Layers palette, create a new layer 11 With the selection active in the new layer, choose Select, Inverse This will invert the selection so the cell pattern itself—not its contents—is what is selected 12 Press Alt+Backspace to fill this selection with the foreground color (see Figure 10.36) Figure 10.36 Spatter the cell pattern, and use it to create the same pattern on a new layer Filter: Brush Strokes, Spatter Spray Radius: Smoothness: Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark ... 9.59) Figure 9.59 Create two textures for the final output: one with all glows turned down or off and the red handle moved down, and one with the handle up and everything lit Please purchase PDF... vertical lines, and apply an inner bevel to both These serve as the rails for the on/off switch 45 Make a handle using the pipe technique described earlier Round the ends of the handle and paste it... Advanced Texturing Examples 52 Link and merge the handle’s layer and the metal binding’s layer You should now have only two layers: the bindings and drop handle on one layer, with the wooden