Make a Seamless Wood Floor Pattern in PhotoshopPosted on October 10th, 2010 under Photoshop, Tutorial
The result of this tutorial will be an image that can be used as a tiling pattern that resembles a hard wood floor.
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!
Open the texture in Photoshop and do any prep work. Don’t forget to unlock the layer by double clicking it and clicking “OK”.
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.
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.
Make a second Photoshop document 600 x 1600px at 72 dpi, and pick a Black background.
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.
Go back to the original photo and Copy (⌘+C) your selection, then Paste (⌘+P) that selection into the grid you just created.
Make sure “Snap to Guides” is selected (View > Snap to > Guides) and position the plank in the top left.
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.
Copy the new plank and Paste it directly below the first one in the grid document.
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.
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”).
Drag the copy straight down while holding the Shift button so that only the top half of the plank is showing.
You probably can guess what’s next. Grab another plank to put in between them.
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 ( ⌘ + ; ).
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.
Control-Click or Right-Click in the middle of the layer (not the thumbnail) and pick “Copy Layer Style” from the menu.
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”.
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!
Select the entire stage (Select > All or ⌘+A), then go to Edit > Define Pattern… Name your pattern and you’re all set.
Create a document much larger than the pattern you selected and give it a transparent background.
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”.
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.