Sign up for my weekly newsletter and get the Photoshop Layer Tricks & Shortcuts PDF.I want that! x

Create a wood texture in Illustrator

22 Sep 2014

As promised, here is a follow-up on my tutorial about using Illustrator's Pathfinder to create symmetrical birds, which was based on these fabulous "Re-turned"-birds. This time we'll give the birds their wooden texture, and we'll keep it all vector-based. We'll create 2 types of wood textures: one wood grain texture which we will apply on the darker brown, and one wood texture that has these typical curvy lines, which we'll apply on the lighter colors. Both will be turned into seamless patterns in no time, thanks to Illustrator's Pattern Maker feature.

Re-turned birds by Discipline (designed by Lars Beller Fjetland).

When I write a tutorial, I usually just replicate my process step-by-step. This time however I didn't have a scenario in my head. Instead, I did some research first to see if I could find any good examples. It's not that I haven't created wood textures before though. The few times I did, I just drew things, line by line really from scratch using the Pen tool. For instance the wood of the cabinet illustration on my archives' pages is drawn like that. It's not even a pattern or anything. I'm just so fast with the Pen tool, and drawing it this way also gives me complete control over every detail or anchor point. Since this technique isn't useful tutorial material, I searched the web for ideas… but the thing is, it's really hard to find any good tutorials on the subject, especially if you want it to look 'real', and have all the details in there that are typical for wood. The best one I could found was this tutorial called A Wood Grain Texture on Vectips.

Wood grain texture

Since I couldn't really improve this technique, I'm using as good as the exact same steps of this tutorial with the exception of the last part where these swirly effects are added, because they don't feel real enough to me, and they're also not needed in my creation. What I want is only a subtle wood grain texture.

Draw a brown square

Start by drawing a brown square. I'm using 400 x 400 pixels.

Add a rectangle

Hit Cmd/Ctrl + C and Cmd/Ctrl + F to paste the square in front. In the Transform panel, make sure the reference point is in the center position first, then enter 200 px for the width and 20 px for height. Make sure the lock icon is in the unlocked state.

Apply Graphic Pen effect

With the rectangle selected, go to the Effects menu and choose the Graphic Pen from the Sketch Photoshop Effects. In the window that appears I didn't change the default settings:

  • Stroke Length: 15
  • Light/Dark Balance: 25
  • and Stroke Direction: Vertical
Expand appearances

With the object still selected, go to Object > Expand Appearances

Image Trace

Go to Window > Image Trace

In the Image Trace panel enter 50% for the Corners option and 1 px for Noise. Make sure Ignore White is checked and check the Preview option to see the result. Feel free to play around with other values if you like.

When you're finished click the Expand button in the topbar to convert the tracing object into paths.

Resize

Now go to the Transform panel and enter 400 px in the Width and Height fields to have the object stretched over the entire square.

Apply color & copy rotate

Give the object a dark brown color. Now copy the object and paste it in front by hitting Cmd/Ctrl + C and Cmd/Ctrl + F. Grab one of the corner handles, hold down the Shift key and rotate the object 180°.

Now apply a lighter brown color.

Turn into a pattern

Since I want to apply this wood texture I'm creating on top of different colors of brown, I'm going to create a pattern from only the vertical lines and not the brown square box. So delete the brown square, and select the texture lines. Go to Object > Pattern > Make. Illustrator will give you a warning message saying that a new pattern file has been added into the Swatches panel, and that any changes made while being in Pattern Edit Mode will be applied to this swatch when you exit this mode. Just click OK to go into Pattern Edit Mode.

We'll be using a simple square pattern tile. So you can keep the default settings, using a Grid Type Tile. You can create other types of pattern tiles, for instance in the shape of a hexagon or use a brick structure. The great thing about this feature is that you can move elements around going outside the pattern tile, thanks to the Overlap functions. This way Illustrator will take care of keeping things seamless at all times. With the white arrow or Direct Selection Tool tweak where needed until you don't see the tiling anymore. Give the pattern a name in the Pattern Maker panel and click the Done link at the top of your window. I named mine 'Dark wood texture', because the other texture I'll be creating will be a light wood texture.

Wood texture

As you've probably noticed in the final illustration at the top of my article, I've also applied a slightly different wood texture on the lighter wood. For this texture I decided to start from a photo image of wood. After some searching I found this (free) wood texture image which is just perfect, since it's already seamless. This is really great, because this means the hardest part is actually already been taken care of.

Image Trace

The creation of this type of pattern is a faster and easier process than the previous one, but to have an absolute perfect tile the tweaking in the last step might be a little work. After downloading, I placed this image into my Illustrator document via File > Place.

In the Image Trace panel (Window > Image Trace), I applied the follow settings and made sure Ignore White is checked, together with the Preview option:

  • Mode: Color
  • Palette: Limited
  • Colors: 5
  • Paths: 28% (under the Advanced options)
  • Corners: 28%
  • Noise: 25%
  • Ignore White checked

When finished, I click the Expand button at the top, so the object is converted into editable paths. Then I rotated the object 90°, and reduced the object to 300 x 300 pixels.

Make Pattern

Next, go into Pattern Mode via Object > Pattern > Make, and turn the object into a seamless pattern. This step needs a bit of pixel perfection tweaking, as you most likely end up with some imperfections, like a tiny white line and lines of wood that don't connect well. Zoom in and tweak where needed.

If you end up with a tiny white line, click the Pattern Tile Tool button to edit this blue line that is the border of our pattern tile. I simply dragged the line down a bit to close the gap. Once you're finished cleaning things up, give your pattern a name, and click the Done link at the top.

Applying subtle patterns

Now that we have our patterns, we're ready to apply them to our Re-turned birds. To me this is the most fun part, because it needs a bit of experimenting and trying out what works best.

Add a pattern fill on top of a color fill

Use the Direct Selection tool (white arrow) to select a single part of the bird. Then go to the Appearance panel and select the Add Fill icon at the bottom of the panel to add a fill on top of the current (color) fill. We're going to add this texture as a transparent layer on top of our color fill. For each part we'll try out a couple of layer modes and transparency values and see what works best. Here are a couple of things I tried out:

I applied the dark wood texture pattern on top of the dark brown, but only at 30% opacity to keep it very subtle.

For his belly, which is a brighter brown I added the lighter wood texture also at 30% opacity, but here I tried out Luminosity as blending mode. As you might have noticed, I created a 2nd light wood texture, which is basically a copy of my original light wood texture, but where I made the colors a little bit more bright. While trying out different options using my original light wood texture, I couldn't achieve the result I was after. The brown got a little bit too dull. I wanted a brighter result, so in the process I copied the pattern, by dragging the swatch from the Swatches panel onto the desktop and tweaked the (5) colors one by one (using the Select Similar Objects feature in the Control bar at the top) making them all a bit brighter. Then I made it a new pattern swatch by going into pattern mode etc.

Here I added the light wood texture at 50% opacity, in Overlay blending mode, but I also added a slightly darker color fill below at 30% opacity. All the different fills are stored on top of each other. To change the stacking order you just have to drag a fill into the place you want. Pretty flexible if you ask me.

For this bird I added the other light wood texture at 30%, in Luminosity blending mode.

For the body of the owl I used the light wood texture in Overlay mode at 100% opacity to get this extra light result. So as you can see the options on how you apply these textures are pretty endless and things are also very flexible too. Just the way I love it :)

It's not finished yet!

There is just one small detail we should add to finish these birds off. Maybe you've noticed the subtle shadow effect on their bellies? We can easily add this to give them a bit more volume, and make them look more real. Good that our file is well organised, because adding details like these at the end of our process will be easy. As you remember, for this illustration I only used a few layers: one layer for the entire illustration and also a layer for my guides, and a template layer for the photo. I organised my layers by grouping different paths into one Group Object per bird, which I named 'BIRD1', 'BIRD2', and so on. This way it's easy to select and move one bird with only one click. In case you need to edit a bird, you just double click the bird and go into Isolation Mode. In a last step I'll explain how I created this subtle shadow effect.

Comments

  1. 1 Keola 02 Oct 2014

    Lovely! Thanks for sharing.