Jan04
2012

By: admin                Categories: General

Today we offer an excerpt from Luke Ahearn’s 3D Game Textures, Edition 3.  Luke discusses creating wood textures for an Urban Warehouse setting in Photoshop.

Textures traditionally come in sets: base, wall, floor, and ceiling variants as well as fill, trim, and so on.This chapter focuses on breaking out the materials that need to be created for a scene and then the details that also need textures created for them. Even though this approach is changing somewhat with technological advances, it is still a skill that is applicable to many games and applications and a good skill to have when you are required to work with more advanced technology. We always start with the basics to build a material (shape, color, texture) and build detail on top of that. What you end up with is a full texture set that is easily altered and built on. By the end of the chapter, you will have created all the textures needed for the urban environment concept sketch on the facing page. We will use the standard urban environment so popular in many military, sci-fi, driving, and other game genres in this chapter, since it offers a good variety of materials and objects. (This excerpt only discusses wood textures)

Wood
Our next material is wood. There are several places where wood is used in this warehouse, so we will start with a wood grain and create various versions of wood from there. One of the new features of Photoshop CS is the Fibers filter, and that comes in handy when making wood grain.

Basic Wood Fill
1. Open a new file and make it 512X512. Name it Wood_Fill_001 (you might want to create more than one version, so using a number helps).
2. Create a new layer and name it Wood Grain.
3. Fill the layer with a brownish color (RGB: 85,80,70). I chose this washed-out brown, since this is older wood. Normally I would have made a more saturated version and simply copied it to a new layer, then desaturated it. This way I would begin building up different versions of the wood grain.
4. Make sure your foreground color is the brownish color and the background color is just a darker version of it (RGB: 61,58,50).
5. Filter>Render>Fibers: Variance 16, Strength 4.
6. This filter doesn’t create a tiling image, so you need to copy this layer and offset it by 256 in both directions.
7. Use a big, soft brush and erase most of the top layer except for the edges. Keep an eye open for any hotspots you might want to remove.
8. Use the Offset Filter again (Ctrl+F) and look for any seams or corners you might have missed and hit them with the Clone brush.

Figure 6.20: Basic wood fill. Subtle, understated, and oh-so-useful.

You should have an image like Figure 6.20. This is a basic wood fill. As you use it in various places, you might need to desaturate it, make it smaller and tile it, blur it—whatever works in the context where you are using the texture. Our first variation of this basic wood grain will be to create the wooden panels that compose the ceiling of the warehouse.

Wooden Planks
The ceiling of this warehouse is composed of dark wooden planks. The steps to create planks are easy.
1. Open a copy of the wood fill and name it Wood_Planks_001. Create a new layer and name it seams.
2. Set your grid to 128.
3. Use a small medium brush (5 pixels) and draw vertical lines along the gridlines using the darker background color from the last exercise. Remember to get the edges of the image, too, or you will have one wide plank when you tile this image.
4. Use the Bevel and Emboss layer style with the following settings:
Style: Outer Bevel
Depth: 50%
Size: 6 px
Highlight Mode: Vivid Light
Opacity: 100%
Shadow Mode: Overlay
Opacity: 87%
5. Make a copy of the Wood Grain layer and link it to the seams layer. Merge them (Ctrl+E).
6. When you merge these layers, the formerly adjustable layer styles are now permanent and the image is fixed. As a result, there are pixels outside the canvas area, so you need to use the Crop tool to remove them. Simply drag the tool completely across the image and press Enter. Check your image size and make sure it is still 512X512.
7. N ow you can use the Offset Filter and offset the image by 256 both ways.

You might have some small edge imperfections, so you can fix those now. Your image should look like Figure 6.21.

Figure 6.21: Basic wood planks. I can’t think of anything else to say, but they’re cool.

Figure 6.22: Some quick adjustments and our wood planks are ready for the office structure. Here they are on the office structure.

Wooden Planks, Office
The small office is also made of wooden planks. These are nothing more than a copy of your current planks altered.
1. Copy and paste the plank layer and name the new resulting layer
Office Planks.
2. Desaturate this layer.
3. Take both the Brightness/Contrast settings up +30.
4. Set your foreground color to RGB: 120,118,131. This is the washed-out blue of the office boards.
5. Use Hue/Saturation (Ctrl+U) and check the Colorize box. The saturation will be way too high, so take it all the way down to 3.

Wood, Crate
The crates are yet another variation, only this time we need to give the wood grain more detail, add knotholes, build the frame around the crate, and create seams.
1. Open and duplicate the Wood Grain image. Name it Crates_Wood_001.
2. We will first add knots and detail to the wood that would be undesirable for a tiling texture, but for the face of a crate they will look great. Use the Liquify tool (Ctrl+Shift+X).
3. Start with the Bloat tool with a large brush between 100 and 200 pixels and drag it a little in a few places to create the knots.
4. Then use the Forward Nudge tool with a 200 brush and subtly push the grain around. You don’t have to do too much here. You can maybe make the grain contour to the knotholes. Your image should look similar to Figure 6.23.

Figure 6.23: Wood grain made in minutes with the Liquify and Bloat tools.

5. Set the grid to 128. Before we start making planks, we are going to flip and rotate sections of the wood around so that the planks look like they are cut from different boards. Turn on the grid, then select the first and third columns of wood. Use the Free Transform tool (Ctrl+T) and right-click and flip this selection vertically and horizontally. You can select and flip or rotate the boards more later as well.
6. Add seams just as you did for the wooden planks by creating a new layer named seams and drawing lines down the grid-lines. This time use a 3-pixel brush and change the following settings in the Bevel and Emboss layer style:
Style: Outer Bevel
Depth: 97%
Size: 1 px
Highlight Mode: Vivid Light
Opacity: 75%
Shadow Mode: Overlay
Opacity: 75%
7. The wood needs to be colorized as well to match the crates. Set your foreground color to RGB: 167,140,82. Use the Hue/Saturation tool and Ctrl+U to move the saturation up to 37 and the brightness to 17.
8. Now we can make the frame. Set the grid to 64.
9. Use the Polygonal Lasso tool and make a selection like the one in Figure 6.24. These sections are simply copied and pasted into their own layer and can be copied from any section of the wood grain. A vertical selection tends to work best.

Figure 6.24: The shape you need to make with the Polygon Lasso for the crate edges.

10. Make four different sections and arrange them like a picture frame by flipping or rotating them.
11. Make sure that the frame layer is above the seams layer. Turn the background wood layer off so that you can see the four pieces. If there are small gaps, it’s okay. Link the four layers and merge them together.
12. Zoom in with the grid on and use a 1-pixel brush to erase a small gap between the corners of the image and the inner corner where the boards meet. Remember that you can click once in the corner to start a line and hold Shift and click where you want the line to end. This will give a quick and perfectly straight line.
13. Add the Layer Style Outer Glow with the following settings:
Blend Mode: Normal
Opacity: 40%
Size: 35
14. Add the Layer Style Bevel and Emboss with the following
settings:
Style: Inner Bevel
Technique: Chisel Soft
Depth: 90%
Size: 1 px.
At this point your image should look like Figure 6.25.

Figure 6.25: The crate base is a starting place for many variations.

Figure 6.26: These crate variations were made quickly from the base.

You can add a lot of detail to crates in addition to variations of the wood (Figure 6.26). You can weather them and add decals and even a stencil, as in the concept sketch. The stenciled letters fragile across some of the boxes are simply a text layer. Add a text layer, size and position it using the Free Transform tool, rasterize it (right-click), and add a little noise. Set your background color to black and run the Spatter Filter. Zoom in and select the black splotches on the edge of the letters (then right-click and select similar) and delete them. Set the Blending Mode to Color Burn and take the opacity down a bit. Now they look painted on.

These crate textures are the one texture in this scene that would benefit the most from the use of a reference photo of real wood either to build the texture or use as an overlay. Here are the versions of the crates I did using a real wood photo. The steps are the same as this exercise, only you don’t spend your time making the wood grain; you spend your time cleaning and preparing the wood grain.

Figure 6.27: Sometimes there’s nothing like the real thing. Woodbased textures like these crate textures often benefit the most from the use of a reference photo, either to build the texture or to use as an overlay.

Luke Ahearn

Luke Ahearn has over fifteen years of professional game development experience as designer, producer, and art director on seven published game titles including Dead Reckoning and Americas’ Army and worked as a background artist at EA. He has authored six books on game development.
No Comments

No Comments

Tell us what you think!