Wood Grain Pattern

No Pain No Grain (How to Create a Seamless Vector Wood Grain Pattern)

May 30th, 2014 By Category: Tagged:
30 May

If you’ve ever found yourself slack–jawed and glassy–eyed whilst ogling that perfect wood grain in someone’s illustration, then listen carefully because you’re gon’ learn today. In this tutorial were are going to sketch, scan, trace, tweak and proudly display our very own seamless wood grain texture. You’ll need the following:

  • Paper & pencil
  • Scanner or camera(phone)
  • Illustrator
    • Pen Tool
    • Pattern Options Tab
  • Photoshop
  • Lettering/photo/illustration to compliment your grain

Here’s what we’ll be creating:

Fig. 01

Fig. 01

Getting started

Ok, to Google! Let’s first get a refresher on what wood grain actually looks like. Make sure you swing by Dribbble too (designers like Nick Slater, Lydia Nichols, Glenn Thomas, Ryan Putnam, Michael Spitz, This Paper Ship and David M. Smith are all well worth checking out.) Have a good look around and get a feel for the style of grain you want to produce.

Putting pencil to paper

Now it’s time to start sketching. Make sure your stack of paper is ample, your lead is keen and go ahead and fire out some lines. Wood grain is a delicate mix of clean, gently wavy vertical lines and knots of various sizes and complexities, so bear this in mind as you draw. Remember, our final product will be a repeatable pattern, so make sure your details don’t vary too wildly, as they may distract the eye, breaking the flow of the pattern.

Here’s what we came up with:

Fig. 02

Fig. 02 – Don’t feel you need to make it perfect at this stage, just get some good shapes down. We can tweak later in Illustrator.

Wood grain is a delicate mix of clean, gently wavy vertical lines and knots of various sizes and complexities, so bear this in mind as you draw.

Once you’re happy with your sketch, scan/photograph it and bring it into Ps. We want to remove the white background, leaving only the grain (follow the steps outlined in our Isolating Type tutorial if you need a hand with this step). Now your sketch is ready to go!

Heading into Illustrator

Open up a nice roomy canvas in Ai. Place in your sketch, and start duplicating and arranging it to create a rough coverage over your artboard. Try to align knots with other knots, and lines with other lines; this will be the basis for our pattern.

Fig. 03

Fig. 03 – Again, this doesn’t have to be perfect; the idea is just to lay down a guide to ‘ink’ over.

Name your current layer ‘Sketch’, ensure your Transparency tab is open ( ⇧⌘F10 ) and reduce the layer opacity to 20%. Our sketch is now acting as a guide, over which we can start drawing our grain. Lock your sketch layer, create a new layer, name it ‘Wood grain’, select the Pen Tool, pick a point on your sketch and begin laying down some knots.

Fig. 04

Fig. 04

Concentrating on knots first really helps with getting used to drawing wood grain shapes with the Pen Tool. You can start with a simple ellipse ( L ) and tweak the handles from there, or simply draw out the shapes from scratch. Whatever feels more comfortable—we switched between both methods. Here’s an assortment of knotty shapes to get you going:

Fig. 05

Fig. 05 – Bear in mind there’s nothing wrong with taking a knot you’ve already constructed, flipping/rotating it and tweaking it to blend in. This will save you some time.

Concentrating on some knots first really helps with getting used to drawing wood grain shapes with the Pen Tool.

Now begin to fill in the gaps with some long spindly lines weaving between the knots. Keep the shapes flowy; no corners or jarring kinks. This said, wood comes in countless variations, so do feel free to experiment and create something completely different to what you see here. Essentially, you should end up with something like this:

Fig. 06

Fig. 06 – You may find, as we did, that you stray from your sketch somewhat, which is totally fine.

Looking good! Now onto…

Making it into a pattern

This is where it gets real. It’s been a breeze getting those lovely smooth shapes down, but it’s time to make them repeat seamlessly! Once you are happy with how your wood grain is looking, you can hide your sketch layer, select all your shapes ( ⌘A ) and Group them ( ⌘G ). Go to Window > Pattern Options, pull down the little arrow (Dropdown arrow) in the top right of the tab that appears and select Make Pattern. You’ll be greeted with something that looks like the following:

Fig. 07

Fig. 07

It may look like there’s a lot going on, but as we tackle the Pattern Editor piece by piece, it will all make a whole lot of sense. Let’s start by getting a feel for where our shapes are that we just made, and how we can edit them.

Fig. 08

Fig. 08 – Press ⌘A to Select All; this will reveal your editable paths, as shown highlighted in yellow.

It may look like there’s a lot going on, but as we tackle the Pattern Editor piece by piece, it will all make a whole lot of sense.

So, you can probably see what’s happening. The Pattern Editor produces a 3×3 grid around your design, so you can see what it would look like stitched together. At this point I would suggest dimming the copies down to around 20% (third option from the bottom), so your working paths in the middle are easier to see.

Feel free to name your pattern, then we’ll focus on the Width and Height fields. These determine the width and height of your pattern’s bounding box, which by extension determines the surrounding copy’s proximity to the original. Go ahead and adjust these settings by placing your cursor within one of the fields, holding Shift and pressing your up/down arrow keys. Our aim here is to draw the surrounding copies closer, for a tighter fit, in preparation for making things seamless.

Fig. 09

Fig. 09 – Initially there will be unsightly overlaps and gaps, as shown. We will work to make these vanish in the steps to come!

Now our task is to fill in gaps and shave away lines where appropriate. The beauty of working with something like wood grain is that it’s meant to be organic and random, so there is lots of wiggle room as we shoe-horn our design into the confines of a repeatable pattern.

First concentrate on deleting superfluous paths. When one path crosses over another, decide which is more ‘structurally’ important, preserve it and remove the other.

Fig. 10

Fig. 10

The beauty of working with something like wood grain is that it’s meant to be organic and random, so there is lots of wiggle room as we shoe-horn our design into the confines of a repeatable pattern.

Once you have removed all intersecting paths, you’ll find your artwork has become quite gappy. Now we will work to fill up those empty spaces with carefully placed lines and perhaps even some more knots, it they fit. The most important part of this step is to ensure that the ends of all your lines meet up with their mates above and below them. For this pattern to really flow, we want all our path endings accounted for.

Fig. 11

Fig. 11

You’re doing a wonderful job! (I can only assume). What we should have now is your wood grain all joined up and repeating perfectly. Now is a good time to zoom out and take stock; maybe even get up and take a walk, grab a coffee, come back, and with fresh eyes gaze over your pattern and determine if it’s all looking even and well spaced (it may help to ‘un-dim’ your copies at this point).

Fig. 12

Fig. 12

Once you’re happy with everything, hit Fig. 12 in the top left. Pattern nailed.

Onto the finishing touches

Before we move on, give yourself a high five; you’ve achieved exactly what it says on the tin! Now we’re going to go a little further and give our grain a hand drawn, illustrated feel by adding some texture.

Pull up a relatively sizable Ps document (around 3000x2000px) and bring in your pattern as a Linked Smart Object (as we’ve mentioned before, there’s a workflow tutorial coming soon. Subscribe to keep updated). It should fill the canvas thusly:

Fig. 13

Fig. 13

Now we’re going to follow a process very similar to the one described in our Stamp Effect tutorial. I’ll be brief here, read up on that tut for more info.

First go back into your wood grain .ai file and drag out a rectangle with a white fill, underneath the grain layer. Save that, and it will update in your .psd. Now, back in Ps, with your grain smart object selected, go to Filter > Filter Gallery..., pull down Brush Strokes and select Spatter. We used a Spray Radius of 1, and set the Smoothness to 1. Play around with these to taste and hit OK.

Fig. 14

Fig. 14 – This step lends our lines some roughness, and in the next step we’ll tone it down some.

That’s a tad gritty, so head back up to the Filter menu and this time visit Blur > Gaussian Blur.... We set our radius to 1.3px.

Now, obviously, our grain is too blurry, so the finishing touch will be to add a Brightness & Contrast adjustment layer above the grain, tick Use Legacy, and get your sliders sitting around -45 and 96 for brightness and contrast respectively.

Fig. 15

Fig. 15 – Sure, it’s still clearly a digital production, but it’s a little shoutout to pen and ink.

Readying your files for use

In the simple guide we’ll be publishing soon, we’ll outline some workflow tips that will get you moving speedily between Ai and Ps, and using Actions to do it even quicker. It will be geared towards projects just like the one we’ve produced together here; working on designs in vector, moving to raster for effects, saving out final output files etc.

In the meantime, here’s a brief guide to saving out your grain file, without that white background and adjustment layers and such. Simply hit ⌘A to Select All, ⌘⇧C to Copy Merged, ⌘N to create a new document (this dialogue will be pre-filled with your copied canvas’ dimensions, just hit Enter), in your new document press ⌘V to Paste, then do as we did for our sketch and follow the steps outlined in our Isolating Type tutorial to remove the white background. Save this document and you’re done! Additionally you could convert the grain back to vector, just visit our tutorial on that subject.

You’re all done!

Hope you enjoyed that one. The wood grain we created for this tutorial is available from our Shop for $4—go check out Retro Grain! We’ve also updated the Shop with another new item, Sparse. It’s a really lovely texture, perfect for almost anything needing a bit of subtle crunch. You can see it (plus Retro Grain, General Texture and Harsh Fade) in action in the examples below.

Fig. 16

Fig. 16

Fig. 17

Fig. 17

We’d love to see how you use your wood grain patterns! Tweet us @TheAGSC, and tag your posts #nopainnograin. Looking forward to seeing what you come up with. If you found this tut helpful, please tell other people and share it around on your socials.

Peace,

Dave & Laura.

Introducing: Ryan Brady Rish
Simple Stamp Effect
Go to top