Style: Bevel and Emboss
Style: Inner Bevel
Technique: Chisel Hard
Depth: 50%
Direction: Down
Size: 5 pixels
Soften: 5 pixels
Now the texture is ready for finalization for your game’s level. Reduce the image to
256 × 256 pixels, set it as a pattern, and fill a large blank canvas with it. The end
result is a nice, even texture that has a more realistic look to it. In Figure 8.42, I
made a simple room with a long wall and slapped this texture on it. The wall is 512
pixels high by 2048 pixels wide.
Try using the beveling technique to create other patterns like I’ve done in Figure
8.43. The first one shows simple holes, called form ties, commonly seen in large
buildings. These holes are the byproduct of the cement formers holding the form
itself together, but architects and designers decided to keep the holes since it gives
a bit style to the walls. The others have fancy patterns that might look good in a
spaceship or something. Have fun.
224
8.
Inorganic Texture Tutorials with Photoshop
Figure 8.42 The
finalized texture tiled
on the wall of a sim-
ple room.
TEAMFLY
Team-Fly
®
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Creating Randomly Tileable Sets
Many game engines allow you to create and import a sequence of textures that the
game will randomly tile on the wall, floor, or whatever object of your choice. This
can greatly improve upon the monotony of a wall that has the same texture tiled all
over it, as well as speeding up the process of skinning large walls at the same time.
For instance, if you applied the texture from Figure 8.38 onto a large wall and
stood back to view it entirely, you’d easily notice that it is a single tileable texture
repeated in all directions (see Figure 8.44). To avoid this, you can create a ran-
Cement from an Image
Using digital images of real-world items to create textures of those items for your
game is usually the way to go if you’re trying to make your environment realistic.
There are, however, advantages to making textures completely from scratch. For
one, you have complete control of the texture’s constitution—that is, the texture
will be thoroughly uniform, the lighting will be the way you want it, and so on.
226
8.
Inorganic Texture Tutorials with Photoshop
Figure 8.45
A randomly tileable
set of textures
applied to a wall is
more realistic than
using a single texture.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
When you take a picture of something in the real world, however, you have to work
around your environment. Maybe the sun wasn’t splashing evenly on your brick
wall, and you got weird shadows all over the place. Or maybe the flash from your
camera made a lovely but unwanted halo smack in the middle of the stop sign you
were snapping. The point is, there are ups and downs to both ways of accomplish-
ing texture creation, which is why I’m trying to show you both.
For this section, I used a digital image (cement_pic.jpg on the CD-ROM) of an area
of cement that had a bit of personality, thinking it might look nice when adjusted
and offset for tiling:
1. Isolate an area that seems rela-
tively uniform (I’m eyeballing an
area in the upper-right portion of
the image).
2. Select the Rectangular Marquee
adjusted before you continue. Press Ctrl+L to open the Levels dialog box,
and slide the Midtones slider to the right a bit, and click OK. Now it looks a
bit more like cement (see Figure 8.47).
5. Set the texture as a pattern and fill a blank image with it to see how it looks.
Even without the Offset filter applied, it looks pretty good! Still, it’s a good
idea to offset it to make sure the colors blend smoothly. Click Filter, Other,
Offset, and enter one-half the amount of the length and width of the image
(64 × 64 pixels).
6. Use the Clone Stamp tool to copy homogenous areas of the texture over any
internal seams, areas that contain blemishes, or other items that stand out.
(As you make adjustments, preview your work by making it a pattern again
and again and filling a large canvas with it.) Figure 8.48 shows a before and
after of this step.
228
8.
Inorganic Texture Tutorials with Photoshop
Figure 8.47
Adjust the midtones
of the image with
the Levels dialog box.
Figure 8.48 Offset
the texture and use
the Clone Stamp tool
to get rid of things
that stand out.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Now you have a good tileable base texture of cement to work with. Try adding
bevel effects and whatnot, and creating tileable sets to add to your collection. Also
try making a cinderblock pattern using the brick technique you practiced at the
beginning of this chapter.
Foreground: hex# 751C00
Background: hex# 4C2901
4. Using the Channels palette, start a new channel.
5. Choose Filter, Render, Difference Clouds, and then press Ctrl+F a few times
to repeat this action. Do this until the black and white mix is somewhat even
(see Figure 8.50). This will be your displacement map when you render the
mineral layer—that is, the whiter areas will represent the high spots on the
texture, while the blacker areas will represent the low spots.
230
8.
Inorganic Texture Tutorials with Photoshop
Figure 8.49
Apply the Clouds
filter with an earth-
colored foreground
and background.
Figure 8.50 Start
a new channel and
apply the Difference
Clouds filter several
times.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
6. In the Layers palette, click on the background layer to make it is the current
working selection.
7. Click Filter, Render, Lighting Effects, and
adjust the settings as I have in Figure 8.51
(make sure the directional light is positioned
as mine is). Also, make sure Alpha 1 is
selected in the Texture Channel list—this is
the black and white alpha channel you just
markers over to the left a little. This will enhance and sharpen the white
areas and subsequently will make the resulting texture much more moun-
tainous (see Figure 8.53).
11. Select the background layer in the Layers palette, and apply the Lighting
Effects filter as you did in step 7. Figure 8.54 shows the updated results with
respect to the new alpha map.
232
8.
Inorganic Texture Tutorials with Photoshop
Figure 8.54 Apply
the Lighting Effects
filter once more using
the new Alpha 1
map.
Figure 8.53 Adjust
the levels of the
alpha channel to
enhance the white
areas.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
These textures aren’t the best for making walls and whatnot, but work well when
wrapped around boulders and such. For more on U-V mapping and skinning
objects, see Part II, “Unwrapping the U-Vs With DeepUV,” and Chapters 11 and 12,
where I show you how to create skin textures for a weapon and character model.
Granite
This texture uses the same displacement technique as the last, only you’ll apply a
few other filters to bring out the quartz-like sparkles you see in granite.
1. Start a new 512×512-pixel RGB image. (These dimensions aren’t cast in
stone, no pun intended. It’s just convenient to start things off big, square,
and divisible by 16.)
Figure 8.57 Apply
the Grain filter to the
Alpha channel.
TEAMFLY
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
8. In the Layers palette, click on the background layer to select it (alternatively,
remain in the Channels palette and click on the RGB channel—this will do
the same thing).
9. Click Filter, Render, Lighting Effects, making sure Alpha 1 is selected in the
Texture Channel list (see Figure 8.58). My settings are attached to the image;
try playing around to get different effects. I also cranked down the height of
the map to make the rock smoother.
Filter: Render, Lighting Effects
Light Type: Directional
Intensity: 35
Focus: 69
Gloss: −25
Material: 0
Exposure: 0
Ambience: −18
Texture Channel: Alpha 1
Height: 35
I think granite has a gazillion variations, and is usually more black and white, but
this could suffice. Try doing a final levels adjustment to enhance the texture.
235
Rock and Stone Textures
Figure 8.58 Apply
the Lighting Effects
filter to the back-
ground layer, using
the Alpha 1 map for
displacement.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Sandstone
Filter: Noise, Add Noise
Amount: 5%
Distribution: Gaussian
Monochromatic: (checked)
8. In the Layers palette, click on the background layer to select it. Then apply
the Lighting Effects filter using Alpha 1 as a texture channel (see Figure
8.62).
237
Rock and Stone Textures
Figure 8.61 Apply
the Gaussian Blur
and Noise filters to
the Alpha channel.
Figure 8.62 Apply
the Lighting Effects
filter to the back-
ground layer.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Filter: Render, Lighting Effects
Light Type: Directional
Intensity: 21
Focus: 69
Gloss: −25
Material: 0
Exposure: 0
Ambience: 0
Texture Channel: Alpha 1
Height: 21
Sandstone with a Pattern
Now let’s make a worthwhile pattern out of this base texture. You’ll need to have
ground color as I have in the top-left quadrant of the image (see Figure 8.64).
7. Make a copy of this layer.
239
Rock and Stone Textures
Figure 8.64 Use
the Rectangular
Marquee tool to cre-
ate and fill the first
quarter of the pat-
tern.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
8. Click Edit, Transform, Flip Horizontal, and move the copy over to the right
to complete the top half of the pattern (see Figure 8.65).
9. Press Ctrl+E to merge the two pattern layers.
10. Make a duplicate of the top pattern.
11. Click Edit, Transform, Flip Vertical, and then move the duplicate to the bot-
tom to complete the pattern (see Figure 8.66).
12. Merge the two pattern layers again so just one layer exists above the back-
ground layer.
240
8.
Inorganic Texture Tutorials with Photoshop
Figure 8.65
Duplicate the pattern
layer, flip it, and move
it to the right.
Figure 8.66
Complete the pattern
by duplicating the
top, flipping it, and
Angle: 90 degrees
Style: Contour
Contour: Cone - Inverted
Range: 50%
I think this is quite nice now. Just reduce the image to suit your needs and tile it. I
used this pattern along the walls in the room in Figure 8.69.
242
8.
Inorganic Texture Tutorials with Photoshop
Figure 8.69 The
final texture, reduced
and tiled on walls in
a room.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Hot Lava
I invented this texture by accident; here’s how it’s done:
1. Fill a new 512 × 512-pixel RGB canvas with pure black.
2. In the Channels palette, start a new channel.
3. Press D to reset the foreground and background col-
ors to white and black, respectively.
4. Click Filter, Render, Clouds.
5. Click Filter, Render, Difference Clouds. Press Ctrl+F several times to reapply
this filter until you get a nice mix of black and white (see Figure 8.70).
6. Click Image, Adjust, Levels.
7. Slide the Shadows marker to the right a bit to flood out the black areas (you
want a nice, thick filling of black, which you’ll fill with molten-hot colors (see
Figure 8.71).
243
Rock and Stone Textures
TIP