Make a Seamless Wood Floor Pattern in Photoshop

Posted on October 10th, 2010 under Photoshop, Tutorial
Wood Pattern Teaser
This tutorial demonstrates an easy way to create a seamlessly tiling wood floor pattern out of a photo of wood grain. The resulting pattern can be used as a background for print or web.  There are many resources available for free wood grain textures, and this process will produce nice results with many different wood photos. I found the one I’m using here on Deviant Art courtesy of SweetSoulSister.

Final Image

The result of this tutorial will be an image that can be used as a tiling pattern that resembles a hard wood floor.

Step 1

Get a wood grain texture you like, the larger the resolution, the better. You can download the one used in this tutorial here: http://bit.ly/94JVd3 Thanks SweetSoulSister!

Step01

Step 2

Open the texture in Photoshop and do any prep work. Don’t forget to unlock the layer by double clicking it and clicking “OK”.

Step02

In this case, I made a small adjustment to the Levels (Image > Adjustments > Levels or ⌘+L). This makes the texture a bit darker and gives it a deeper red.

Step02b

Step 3

Use the Rectangular Marquee Tool to select the first plank. Use the Info Palette to make sure the proportions are nice round numbers. This example uses planks that are 100 x 800 pixels. I always like to make patterns as large as possible so that they can be used for both print and the web by scaling it down later to suite your needs.

Step03

Step 4

Make a second Photoshop document 600 x 1600px at 72 dpi, and pick a Black background.

Step04

Step 5

With the Ruler visible (⌘+R), make a grid by dragging guides out while holding down the shift key.

Dragging from the Side, place a guide at every 100px.

Dragging from the Top, place a guide at every 400px.

Step05

Step 6

Go back to the original photo and Copy (⌘+C) your selection, then Paste (⌘+P) that selection into the grid you just created.

6a

Make sure “Snap to Guides” is selected (View > Snap to > Guides) and position the plank in the top left.

6b
6c

Step 7

On the original, pick a new plank by moving the selection to a new spot on the photo. With the Rectangular Marquee Tool (M), and the “New Selection” box selected, just move the cursor over the selection and drag it to a new spot.

7

Step 8

Copy the new plank and Paste it directly below the first one in the grid document.

8

Step 9

In the wood grain photo, move the selection again to pick a New Plank. This time, position it in the second column so that only the bottom half is showing.

9a

Make a copy of this plank by dragging the layer down to the New Layer icon at the bottom of the Layers Palette. (Or Right Click/Control Click and select “Duplicate Layer”).

9b

Drag the copy straight down while holding the Shift button so that only the top half of the plank is showing.

9c

You probably can guess what’s next. Grab another plank to put in between them.

9d

Step 10

Continue to move the selection and fill in the grid with new planks using the process described in Steps 6-9. Every other column needs to use the same plank for the top half and bottom half! You can toggle the guides on and off by pressing command and semicolon ( + ; ).

10

Step 11

When the grid document is all filled up, add some subtle borders to your planks. Double-click one of the layers to open up the Layer Effects Palette. Add a dark brown Inner Shadow (I used #390202), 50% Opacity, 180 degree Angle, Distance: 3px, Choke: 0, and Size: 6px.

11

Step 12

Control-Click or Right-Click in the middle of the layer (not the thumbnail) and pick “Copy Layer Style” from the menu.

12

Step 13

Select ALL of your plank layers by clicking the topmost layer then holding down shift and clicking the bottom plank. Again, Control-Click or Right-Click in the middle of one of the layers, and this time select “Paste Layer Style”.

13

Step 14

This is a good time to Save. The document is now ready to use as a tiling pattern, but you might want to resize it to your liking. Be sure to Save a version of the original floor pattern before changing the size!

14

Step 15

Select the entire stage (Select > All or ⌘+A), then go to Edit > Define Pattern… Name your pattern and you’re all set.

15

Step 16

Create a document much larger than the pattern you selected and give it a transparent background.

16a

Fill the layer by selecting Edit > Fill ( or Shift and F5 ). When the pop up window appears, click the dropdown next to Use: and choose pattern. Now, click next to Custom Pattern: and select your new pattern from the bottom of the list and click “OK”.

16b

Note:

If you plan to use the pattern on the web, you will most likely want a smaller version of the pattern. Simply reduce the Image Size ( Image > Image Size ), Select All, and Define Pattern.. again. Photoshop will keep all of the patterns you define. Be sure to name them, especially if you are Defining the same pattern at multiple sizes. I hope this helps, thanks for reading!

Try it out!

For example, the image below uses this pattern to create a display box for the 3D Metal Type Pieces created in the Illustrator tutorial.

Leave a Reply

Subscribe to RSS Feed Follow on Twitter Connect on LinkedIn Link to Facabook