Create A Wood Grain Texture

Wodd Texture Thumbnail

Last up for Vectip’s Texture Week is wood grain. The steps for this technique are very similar to the previous Brushed Metal Texture tutorial. It uses the same Graphic Pen effect but stretched a little more. It also uses the Warp Tool and Twirl Tool. Also like the other texture tutorials, this technique is easy and applicable in logos, icons, interfaces or pretty much anything.

Notes

This tutorial was created with Illustrator CS3.

Keyboard shortcuts are displayed in orange. ⌘ is displayed for the Command key (mac), with the Ctrl key being the Windows equivalent (not displayed).

Rectangles

Create a 5 inch by 5 inch rectangle with the Rectangle Tool (m). An easy way to draw an exact rectangle is to click on the artboard with the Rectangle Tool (m) to bring up the Rectangle dialog to enter dimensions. Fill the rectangle with a light brown and take off the stroke.

Rectangle

Next Copy (⌘c) the rectangle and Paste In Front (⌘f). With the copied rectangle selected, change the dimensions for the width to 2.5 inches and the height to .25 inches in the Transform Panel and fill the rectangle with a 40% black.

Copy, Paste, and Transform

Texture

Select the smaller rectangle and go Effect > Sketch > Graphic Pen. When the Graphic Pen Effect dialog comes up, change the following settings.

  • Stroke Length = 15
  • Light/Dark Balance = 2
  • Stroke Direction = Vertical

Texture

Trace and Expand

With the texture selected go Object > Expand Appearance. With the texture still selected, the Control Panel defaults to the Live Trace options. Click the arrow beside the Live Trace Button and select Tracing Options. Or you can go Object > Live Trace > Tracing Options. You don’t have to change all the options, just the ones below.

  • Mode: Black and White
  • Path Fitting: 1px
  • Minimum Area: 1px
  • Corner Angle: 1
  • Ignore White: Check this box

I like to save a preset in the Tracing Options. It makes it easy to recall these setting. If you have read previous tutorials, you will see I use these setting all the time for tracing. Next, press the Expand button on your tool bar.

Trace

Transform and Color

With the texture selected, change the width to 5 inches and the height to 5 inches from the Transform Panel. Next, change the color of the texture to a darker brown than the first rectangle.

Transform and Color

Warp Tool

Double click on the Warp Tool (shift r) in the Tools Panel to bring up the Warp Tools Options dialog. They are probably on the default settings, but if they are not, press the reset button on the right of the dialog. Once the settings are back to default, change the Intensity to 10% and click OK.

Select just the texture and click and drag with the Warp Tool (shift r). I like to go up and down and slightly back and forth. You can do as much or as little as you want.

Warp

Twirl Tool

Click and hold down on the Warp Tool (shift r) in the Tools Panel to bring up the other transform tools. Pick the second tool in the list called the Twirl Tool. With this tool you can add some knots to your wood texture if you want. Double click on the Twirl Tool in the Tools Panel to bring up the Twirl Tool Options dialog. Below are the settings I change.

  • Width =.69 (50pts)
  • Height =.97 (70pts)
  • Twirl Rate =10°
  • Simplify = 20

With the texture selected, click and hold on the texture until you are happy with the knot. The Twirl Rate is slow so it is easy to see when you need to let go.

Twirl

Experiment

You can experiment quite a bit with this technique. You can change the dimensions of the Warp Tool and Twirl Tool to create different wood grains and shapes of knots.

Below are some example uses of this texture.

Examples

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Facebook
  • Mixx
  • TwitThis

174 thoughts on “Create A Wood Grain Texture

  1. its amazing on how you use the illustrator tools to make this kind of effects!
    the logo looks very nice!
    thanks again ;)

  2. Whaou! Textures with Illustrator! That’s definitely interesting.

    I just discovered this site and I really love its design and its content. Great job, and thanks for sharing your experience. ;-)

  3. When I first saw this tut I thought, “Why would I want to do that?” But having an editable woodgrain in vector format opens a lot of possibilities. Thanks for the great work.

    Also, I usually read your posts in a RSS Reader, and am always pleasantly surprised when I venture to your actual site. Beautiful layout and coherence to your identity.

  4. I just stumbled upon your blog through Smashing Magazine, and I’m a fan already!
    This is a great tip, and something I have struggled to achieve in the past. You rock!

  5. I somehow get a very different result at the graphic pen step. This gives me a very strange effect when I resize it back to 5 by 5 inch. I’m not sure what I’m doing wrong.

  6. Hello,
    first of all I’d like to say a thank you for sharing your knowledge, very great site and perfectly designed in every pixel.
    Just one question remained after reading this tutorial: Is it possible with Illustrator to make the created texture ’tile-ready’ because this way nothing guarantee that the created texture part will fit together with itself.
    I’ve checked and it does not, the texture’s top and bottom borders do not match (neither the left and right borders but these can’t be observed).

  7. Pingback: Tutorial Machine
  8. Pingback: MyInkTrail
  9. I love how you use filtered effects and then Live Trace. I’ve seen you do this kind of technique before, but I still haven’t applied it to my work. I have to experiment more with that kind of technique. It’s a good workflow you demonstrate with great results. Thanks.

  10. ok, so i’m amazed at how easy this was to follow along with… i’ve seen other tutorials for wood grains, and none of them hold a candle to what you have here. thanks so much for making these tutorials, and keep up the fantastic work! :)

  11. Thanks for the great tutorial. I referenced this page in my recent post on the same topic. I got a couple of useful comments about using the wood grain effect to create a sort of wood flooring background. You can check them out at iphonelemurs.com/blog.

  12. hi i have problem i cant get result like you. i use graphis pen Expand Appearance trace and expand but my texture look very diffrent i do everything like you pls help
    sry dor english thx

  13. This tutorial is awesome!
    But, I’ve a little problem: my wood texture look very different from yours. The outcome of the graphic pen effect is totally different from yours. Your result has a lot of stripes (sorry, I don’t know the right word for it in english), but mine does have just a few broader stripes.
    I’ve no idea what I did wrong, because I followed everything you told to do.
    I hope you can help me out. Thanks in advance!

  14. Ard,
    Some people have been running into a problem when they forget to expand and trace the Graphic Pen Texture before they scale it.

  15. Pingback: OneDesign
  16. The reason some of you are running into problems I’m guessing is because your original illustrator needs to be 300dpi. I noticed when mine was coming into live trace after applying the effect it said it was only 72dpi so I created a new document and made sure it was 300 dpi. Hope this helps.

  17. Oh god. If i was a chick id find u and kiss u allover… since im not: Thanks mate, you obviously own!

    I am very grateful, cheers! <3

  18. Pingback: Beeex.net
  19. love your tutorials! but i have a problem applying the texture. cause the graphic pen effect won’t apply. it can’t be choosen (sorry,i don’t know the correct words for this).thanx before!!

  20. Hi! Great Work!!! Very helpfull Tutorial
    I would be very interessted to know how you did the second one in the final exemple!??
    that icone with a house inside? Can you help me?

  21. Hello,

    I just wondered how you made the example on the bottom of the page with the house that looks “burned” or inset into the wood-grain. I have been trying w/ little success. Thanks

  22. Pingback: Holz-Textur
  23. Hi Rype,
    I’m trying to make this but I have a problem. My texture effects are disabled, i have the rectangle selected, but can’t get texture available. don’t understand why. I’ve AI CS2 and have tried to make it work but I can’t. What can I do?
    Help me please.
    Thanks!

  24. Do you have a tutorial on how you did the icons on that you used the texture to make?

    I am trying to figure out how you did the indented look of the house and also the shading on the edges of that one too. Also trying to figure out how you did the shading on the letters too…

    Please let me know if you have a tutorial on that, or where to find one, or maybe create one … :)

    ps. thanks for your very helpful tutorials.

  25. I love you, man! Thanks a lot for this tutorial. I’ve been dying to make a wood texture for my artwork.

  26. How did you create the cut out of the house in the wood grain texture example. Was this done in Illustrator. Can this effect be used for text.

  27. Easy to follow and many thanks for sharing your knowledge. However, I tried the after expansion (CS2) the texture turned black, so I had to texturize again, expand, ungroup.

  28. Very impressive and useful tutorial. Thank you very much. I followed you instructions and it worked like a charm. I learned quite a bit and like screwing around with the settings. I am making a brochure for a horse farm and can now give it that “barn” look with a little wood grain.

  29. This is AWESOME!
    I was able to get really great results by using the circlewarp tool in a variety of different sizes for a variation of knots in the wood.
    Looks PRO.
    Finding decent wood textures is ALWAYS a pain, and now I can create my own anytime.
    Love it, thank you!

  30. I’m having some problems with just one step.. On the tracing options my AI CS2 on my PC doesn’t have the Ignore White check box.. Is there a work around for this? I’m coming up with strange results on my texture.

    • You can go ahead and trace and expand like in the tutorial, then use the Magic Wand to select all the white shapes and delete them. Let me know if that helps.

  31. Hi, great tutorial, but I have problem. How can I save this texture? I would like using this one like a textures in graphic styles. Similar like I see on your show under tutorial. Sorry for my English, I hope, you will understand me.

  32. I looked at the western font tutorial, but i’m not sure exactly which part of it is the technique used to make the embossed house button in this tutorial. It would be really great if you made a quick tutorial on how you achieved this effect because there don’t seem to be any. thanks!

  33. Hi.I find that this tutorial is great. but i’m a having a little problem. The problem is when i try to fill the texture with dark brown, it wont turn to dark brown. instead it will only turn into black or grey. could you help me. thx :)

    • Hi There,

      This same thing happened to me too.

      Have the object selected and on the control panel on the left hand side you will see a colour box. Mine was filled with grey and all I did was choose a colour from the box and it changed it for me.

      I hope this helps

  34. Bah I cannot get this to work, and i’d love to do it as I have some plans for a texture like this. The part i’m getting messed up on is when I apply the graphics pen effect it never comes out the same or similar as yours. Maybe it’s because i’m not doing it right but my options are the same. Also maybe i’m not familiar with the terms enough but what’s a 40% black? No matter how I do it my lines are always more sparse and chunky (as in i’ll have like 7 large lines instead of how you have many skinny lines)
    I just can’t seem to get the graphics pen tool to work for me. Also I’d love to get my hands on the source files anyway but i’d doubt that’d happen :P

    • You will have to play a pit with the tools . Mine didn’t come out the same either. i had to change them a bit!

      40% black is the plack color with opacity of 40%. I have it 0n 50% , works better for me!

    • I have the exact same issue. I’m wondering if it’s different versions of Illustrator? Doesn’t really make sense but that’s all I can think of. I don’t get near as many lines and no matter what settings I change I can’t get anywhere close. Quite frustrating but it’s an awesome tutorial.

  35. As I know about Adobe Illustrator a little bit and also I have been used it for some designing. The effects and drawing of Illustrator is more clear than the Adobe Photoshop, since it is a vector graphic software.

    Oat Roller

  36. I have tried this tut at least 5 times and I still get a very black line at the top and bottom of the rectangle….I have followed the tut word for word but still cant get the same effect that you do

    Please help

    very frustrated novice to Illustrator :)

  37. this didnt work at all for me. i tried multiple times trying different thing and following it step by step and it would not work. I am pretty good with illustrator so i dont know what is wrong.

  38. Great tutorial!
    Thanks for sharing your experience!
    I think, I got it! :D

    j0hnb0y,
    you might be selecting the bordered rectungle – it can be seen at the borrom of your toolbox. You should have a colour for the center of your rectungle and no colour for the border.

    Derek,
    1st time I tried, I got the wrong texture lines as I used the shown above settings for the sketch filter. Than I tryed to imitate the shown effect using my own settings. And one more thing – this texture looks much better when scaled to more little object at the end. If it doesn’t help, please show some screens to us.

  39. I really appreciate this tutorial. I needed to vectorize a comp I originally did in Photoshop. The wood grain image I used in PS did not like to be tamed by Illustrator’s tracing options. This tutorial provided a nice, consistent, realistic texture without over- or under-exposed areas. Thanks!

  40. Thank you, i have finished this texture it’s beautiful, but i have a question, i now i want apply this texture to another object how i can do it?…how i can save it as a texture?

  41. this is very over-the-top and silly. you can simply use the tool to create the texture(in black and white), then copy a brown layer on top of said layer and reduce its transparency. This method would also leave more leverage with tone.

  42. I feel ignorant… my graphic pen function seems to be disabled when I select the smaller rectangle to implement the third step. Any ideas why?! (I am inexperienced in Illustrator have never used this feature before) Thanks for any tips!!! I am anxious to follow through with this tutorial!

  43. Thank you so much for this helpful philanthropic post :)
    I’m a novice, so I’d like to ask a very silly question: after we create the wooden pattern, how do we fill our drawings with it? (for instance, the vectips writing you posted in the end). Thanks in advance!

  44. Thanks for the tutorial…this was really easy to follow and it came out great. I’m wondering how you applied this to your text sample. I tried a few different ways but am not happy with the results and your sample looks exactly like what I’m trying to accomplish…

  45. You just saved me $20, as I would have had to buy a wood texture online to match the quality of the one I just made using your tutorial. Thank you.

  46. I have Illustrator CS6 and I can’t to the tracing part no matter what. I have tried anything. If anyone know anything please tell me. Help… :/

  47. Hi dude,, your work so awesome and has a good taste.. is it work for the other program, such as photoshop and in Design..?? THanx

  48. Hi!

    Do you have a similar tutorial for CS6 instead? Because it looks different from what you have so I cant follow the tutorial.

    • I’m still trying to figure it out because I’m not getting the same result. However, the tracing options now have their own window. So basically go to “Window->Image Trace” in Illustrator CS6.

      The graphic pen effect however is not working for me. I do not get anything close to the result he gets and when I increase the size it completely loses the wood effect I’m trying to achieve.

      Must revise this tutorial for CS6.

      In any case, thank you very much for at least giving me an idea.

      • Fiddled with the settings in the Window->Image Trace box in CS6. What I did to get the closest equivalent was this:

        Threshold: 128
        (Click to expand ‘Advanced’ settings)
        Paths: 100%
        Corners: 100%
        Noise: 1px
        Snap Curves to Lines: Uncheck
        Ignore White: Check

        Hope this helps.

  49. hi, thanks for the tutorial, but i have a problem with this step

    Transform and Color

    With the texture selected, change the width to 5 inches and the height to 5 inches from the Transform Panel. Next, change the color of the texture to a darker brown than the first rectangle.

    when i try to change the colour to darker brown,it doesn’t work. is it because when in the tracing option, the mode is black and white? idk why i cant change the colour except with black-white color mode, does anyone know what i did wrong? thank you in advance.

  50. Hey just wanted to give you a quick heads up. The text in your post seem to be running off the screen in Internet explorer. I’m not sure if this is a formatting issue or something to do with browser compatibility but I figured I’d post to let you know. The design and style look great though! Hope you get the issue solved soon. Cheers

  51. You can choose Adobe Flash web designer yourself so as to get the best results.
    Before you begin to do any of your work in Photoshop, you’ll need to setup how it will handle
    the color of your images. Find out about action files, align,
    anchor points, alpha channels, and more. Adobe also has an online forum for its products, including
    Photoshop. There is an easy-to-use and self-explanatory organize panel to the right, where Albums,
    Smart Albums and more can be created. Despite some limitations, Adobe Photoshop Elements 9 is a good overall value for the cost.
    Kindly consult the product website or a vendor for latest
    prices. As a public relations or marketing practitioner, you will probably never have to design
    a billboard using 3D effects and lighting tools. Photo editing IS JUST expensive software, but
    that doesn’t mean you will be scavenging for a download free of photoshop.
    Does this scene or scenes work well for the rising action.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>