stylizedwoodtexturepscs3

Creating a Stylized Wood Texture and Bump Effect Using Adobe Photoshop CS3 by Travis Vroman 2008

Travis Vroman | 0BCreating a Stylized Wood Texture and Bump Effect Using Adobe Photoshop CS3 1



Creating a Stylized Wood Texture and Bump Effect Using Adobe Photoshop CS3

Introduction In this tutorial, we will go over the basics of creating a simple wood texture using Adobe Photoshop CS3 using filters and other various tools. We will then use Photoshop to “bake” in a bump effect, making the texture look like it is using a bump map even though it is only a diffuse map.

Tools you will need:

• Adobe Photoshop CS3

• Your brain

• About 15 minutes.

Setting Up Create a new image file, 512x512 pixels. (NOT inches!) I prefer to work on a white surface, so I choose White for the Background Contents. Also, be sure the Color Mode is set to RGB, or the filters will not work! Here is a reference image with all of the appropriate settings:

I work at a resolution of 72 pixels per inch, since it is the standard resolution for most monitors. I also make it a habit to name the file right away. Click OK when finished.



Laying out the base First off, we need to choose foreground and background color. Using the Color Picker, set the foreground color to R: 40 G: 25 B: 8. Next, set the background color to R: 60 G: 42 B: 20.

Next, go to Filter > Render > Fibers…



The Fibers dialog box will appear. Set Variance to 20 and Strength to 64, then press OK. Refer to the screen capture below:

You should have an image now that looks like this:



Tiling the Base Image Nothing all too fancy yet, but at least now it resembles wood somewhat. One thing to keep in mind is that the Fibers filter makes the image so that tiles horizontally automatically. However, it does not tile vertically. For this, we will need to do a few touch ups.

First, use the Marquee Selection Tool to grab a portion of the bottom of the image. About a quarter of the image from the bottom(128 pixels) is enough.

With the Marquee Selection Tool still activated, right click the selection and choose Layer via Copy from the context menu.

This should create a second layer named Layer 1 in the Layers tab.



This is what will be used to create our vertical tile.

With Layer 1 still selected, press CTRL + T on the keyboard. This is the shortcut for Transform. Using the Move Tool (Keyboard shortcut V) move the selection to the very top of the image. It should snap into place. If it doesn’t, enable snapping by going to View > Snap.

Once this is done, right‐click the selection and choose Flip Vertical. Okay, we’re done with the Transform tool, press Enter to lock in your changes.

You should get an image that looks something like this:

Essentially what we’ve done here is taken the bottom of the image and copied it to the top so that we get a matching edge. Granted, this creates a new seam, but this can be made to disappear using the

Eraser Tool. To smooth out this line, begin with a soft brush (something like this ) I used a 40 pixel brush. Start at one side or the other. Press down on the Left Mouse Button, press and hold the Shift key, then drag the mouse to the other side of the screen. This will allow for a straight line all the way across.

Next, we need to merge the top layer to the layer below it. To do this, press CTRL + E or go to Layer > Merge Down. There should now only be one layer.



Next, we need to offset the image so that we can see the seam of our texture. To do this, choose Filter > Other > Offset. A dialog like this will appear:

Set Horizontal to zero, Vertical to +256 (half the image size) and confirm that Undefined Areas is set to Wrap Around before continuing. Press OK.

The image should now look something like this:

Note the area outlined in red as this is where the seam is located. Because we basically mirrored the image at the top, the seam shows up as a mirror. While it does tile, it’s not pleasing once the mirror

effect it noticed. To break this up, use the Clone Stamp Tool by going to one area of an image and



pressing ALT + Left Mouse Button to get a source, and Pressing only the Left Mouse Button to clone the source section. Do this over the whole seam to get rid of the mirror effect.

Now the seam should look this way:

The image now needs to be offset again in order to put it back in its original position. Since Offset was the last filter we used, we can repeat the last filter by pressing CTRL + F, which will repeat the last filter used with the exact same settings.

The image now tiles in all directions! The hard part is done. Now we can move on to make our texture a bit more wood‐like.



Making It More Wood Like One thing that wood has as part of its texture is knots. The easiest way to do this is to use the Liquify

Filter by going to Filter > Liquify. Once inside that tool, use the Bloat Tool on some darker sections of the image to emulate knots. Stay away from the edges so the tile does not get ruined. Once finished, click OK and your image should look something like this:

It’s looking more like wood! Okay, this base layer is finished. If you haven’t up to this point, SAVE YOUR WORK!



The “Baked Bump Map” effect Before continuing, the question might come up – why would you bake a bump map instead of just using one in‐game? The answer is simple. Sometimes system resources are limited and you have to “fake” effects for a game. Also, there is also the fact that if this is to be used on something that’s in the background, or that the player cannot look at closely, what’s the point of loading up normal or bump maps for that texture? This method can be used to fake the effect and save on system resources.

It should also be mentioned that this technique isn’t necessarily creating 100% accurate bump maps, and this technique will not work with normal maps as they contain multiple colors.

However, if one were to create a specular map and use this technique, it can look as if it is normal‐mapped from a distance.

However, this is one way the effect can be achieved. This technique only involves a few steps. First, duplicate the background layer by going to Layer > Duplicate…

The following dialog box will appear:

Be sure to name the layer as to avoid confusion. I named mine Bump Layer.

With the new layer selected, go to Filter > Stylize > Emboss.

Set the Height to 1 and Amount to 500%. Press OK.



The layer should look like this:

Next, on the Layers tab, change the Blending Mode to Overlay. This will make the effect set in.



Finishing Touches

Now the texture looks decent, with one major flaw. It’s far too clean. In order to have a little realism, it needs to be dirtied up some.

To do this, first create a new layer using the appropriate button at the bottom of the Layers section.

First, reset your color palette by pressing D on the keyboard.

Then go to Filter > Render > Clouds. Set the Blending Mode for that layer to “Multiply” and bring the Fill for that layer down to 60%. This will automatically tile in all directions, so there is no need to worry about the new layer messing up our beautiful tiling job.


Travis Vroman | 0BCreating a Stylized Wood Texture and Bump Effect Using Adobe Photoshop CS3

Here is the final image:

I would not suggest leaving the texture here and calling it done though. Sure, this is a fine base texture, but perhaps you can add some scratches, paint, or lettering to it. Perhaps you can draw some lines on it to turn it into a series of planks. Let your imagination take this further.

Thanks for viewing this tutorial! It has been a lot of fun to write, and hopefully you’ve gained a thing or two by following it. If you have any questions, comments or suggestions, you may contact me via email at [email protected]. This tutorial, along with many others, is posted on www.fireslinger.com for your convenience.

13

mailto:[email protected]

http://www.fireslinger.com/

stylizedwoodtexturepscs3

Documents