How to Create Repeatable Wood-grain Backgrounds

With the popularity of textured web sites still going strong, you may find yourself attempting to ride the texture train. In which case, you may also find yourself trying to find a way to make a nice repeatable wood-grain background. In this tutorial I will be showing you just that in a quick and easy way that you can apply to more than just wood-grains! Taking after the great Lee Brimelow, I’ll be posting this with PC shortcuts instead of Apple shortcuts. So there.

Choosing a wood-grain

When choosing a wood-grain here are a few things to keep in mind:

  • Use free or royalty-free stock photos or take your own!
  • The bigger the better, try finding something that is at least 2,000 pixels wide.
  • Try to find something that does not have too many distinctive marks (i.e. knots in the grain).
  • For the purpose of this tutorial: something that is not planked because you can quite easily repeat that on your own.

For this tutorial we will be using maidu_color.jpg, which you download at: http://www.defcon-x.de/texturen/holz/maidu_color.jpg

The Steps

  1. Open maidu_color.jpg in Photoshop. Then Create a new document which is 5000×5000 pixels at 72dpi. It is important to work big and size down later for your needs. Note: If you have not noticed, our stock image is 720dpi. If you are going to potentially use this for print then I suggest you make the new document at least 300dpi (print standard resolution) but for the purpose of this tutorial I will be working in 72dpi (web standard resolution). Save As (Ctrl+Shift+S) RepeatableWoodgrain.psd Remember to Save throughout the tutorial, I won’t be reminding you!
  2. Select all (Ctrl+A) on the maidu_color.jpg document, Copy (Ctrl+C), and Paste (Ctrl+V) into the RepeatableWoodgrain.psd document. Your screen should look something like this:
  3. Rotate the image 90 degrees clockwise. You can do this in one of two ways: Select the free-transform tool (Edit > Free-transform or Ctrl+T). Holding Shift, Click and Drag the corners of the texture 90 degrees clockwise and Commit Transform (Return or Ctrl+Enter) or Select Edit > Transform > Rotate 90º CW. Whichever you decide to use your document should now look like this:
  4. Now we are going to balance out the shadows on the texture. The right side of the texture is a tad darker than the left. We will want to lighten that up because when repeating shadows and highlights can stand out and look tiled. You can do this any way you wish but in this tutorial we are just going to use the Dodge tool. Select the Dodge Tool (O). With the settings on default (Range: Midtones, Exposure: 50%), increase your brush size to around 1800px and a Hardness of 0. With your cursor over the right side, Click once until the shade evens out. You may want to lighten the whole texture, this is entirely up to your eye and taste. When you are satisfied you will have something like this:
  5. Before we continue, let’s take a moment to see what our texture looks like repeated. Ctrl + Click on the texture layer (Layer 1). Select Edit > Define Pattern. A dialogue box will pop up, type in TextureTest1 Click OK. Hit Ctrl-D to Deselect our selection. Hide Layer 1 then Create a new layer and Select Edit > Fill. If it is not already selected, Set Use: to Pattern and Click on the arrow box next to Custom Pattern. Select our new pattern and Click OK. You’ll find that it already looks good repeating vertically but horizontally it needs some work.

    Delete Layer 2.
  6. Now let’s tile our texture. Un-hide Layer 1. With the Marquee tool (Ctrl+M), Select about 1/3 of the left side of the texture:

    Cut
    (Ctrl+X) and Paste (Ctrl+V). Photoshop will automatically paste onto a new layer for you. Select Layer 1 and, using the Move Tool (V), Move the remaining texture to the left of the document. Select Layer 2 and, using the Move Tool (V), Move the smaller texture over the large one, over lapping it about half as wide as the small texture:

    Using the Move Tool (V), Move the small texture up or down vertically, aligning the two textures.

    Almost there!
  7. Now we want to blend the textures so you cannot see the left edge of the small texture over the large texture. With Layer 2 selected, Select the Erase Tool (E). Make sure the settings are set to: Mode: Brush,  Opacity and Flow: 100%. Right-click and set your diameter to around 900px, Hardness 0. Now, Click and Drag up and down along the seam until the textures are blended. You will need your cursor only about this far over the small texture so you don’t blend too far and erase too much of the small texture:

    Your texture should now look like this:
  8. One last thing before we finish. We’re going to crop the edges of the texture because many times stock photos don’t have straight edges and this will show up in our repeatable background. First, Select Layer 2 then Ctrl + Click Layer 1. Now both layers are selected, Hit Ctrl + E, merging the layers into one. Then, Ctrl + Click what is now called Layer 2 and Select Image > Crop. Hit Ctrl + Alt + C to open Canvas Size. Type In for Width: 2806 and Height: 2205 then Hit OK and Proceed.
  9. And that’s it! From here you’ll want to edit the image according to your needs. You will probably want to size it down to use it as a web site background. I suggest no smaller than 800 pixels wide to have a nice repeating effect. You can repeat step 5 to test your texture. Here’s an example of what the repeatable texture will look like on a web page:
Inspiredology

@inspiredology

  • Inspiredology
  • Inspiredology

    @chadmueller

  • Inspiredology
  • Inspiredology

    @andrewdertinger

  • Inspiredology
  • Inspiredology

    @MikePuglielli

  • Inspiredology


  • Join the discussion

    • January 29, 2011 at 12:29 pm

      Just came across this Googling how to make a repeating wood grain pattern, and I wanted to tell you this site is great! I’m finding a lot of useful info and inspiration here – so thanks very much!

    • September 21, 2010 at 7:49 pm

      You have a lot of wonderful choices here!!!!!

    • April 20, 2010 at 3:34 pm

      Nice tut.. Thanks for this well written tutorial.

    • April 20, 2010 at 2:35 am

      Great tutorial.. I use this technique all the time for website backgrounds.

    • April 19, 2010 at 7:36 pm

      Nice tutorial! This could come in handy.

    • April 19, 2010 at 4:46 pm

      Useful and thorough tutorial. Thanks for the post and all the advice.

    Post a Comment

    Your email is never shared. Required fields are marked *

    *
    *