Create A Wood Grain Texture

Tutorials | May 9th, 2008

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

104 Responses to “Create A Wood Grain Texture”

  1. lex says:

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

  2. bbx says:

    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. hfng says:

    You are the illustrator GOD.

  4. brad says:

    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.

  5. Rype says:

    I’m glad everyone likes the post! Brad, I’m glad you ventured into the site, but also glad you use the RSS.

  6. danni says:

    PRETTY COOL.
    thanks for the tip! <3

  7. Another great tutorial!

  8. Natalie says:

    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!

  9. Andrej says:

    Is this effect compatible with eps 8.0? I would need it for stock.

  10. Rype says:

    Andrej
    Yup, it is compatible. When you trace the effect, it is nothing but basic paths.

  11. iStockdiary says:

    Another good texture tutorial from Rype. The wood seems to have a rougher grain. Here is another different method on creating a smooth wood texture.
    http://www.istockdiary.com/illustrator/illustrator-tutorial-wood-grain/

  12. Rype says:

    iStockdiary also has a great post on realistic curtains that make a great texture.

    http://www.istockdiary.com/illustrator/illustrator-tutorial-realistic-curtain/

  13. Lore says:

    This is so GREAT! It’s the most realistic vector wood grain effect that I’ve ever stumbled upon.

  14. Arnaud Alves says:

    Woow very usefull ! thanx

  15. Edwin van Olst says:

    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.

  16. oxid says:

    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).

  17. Rype says:

    Oxid,

    There is no quick way to create a tile from the texture, but it can be done. It is painstaking process. I will put a tut soon with some tips, and tricks for seamless tiles. In the meantime check Veerle’s on the subject.

    http://veerle.duoh.com/blog/comments/creating_seamless_patterns_in_illustrator/

  18. Sean Hodge says:

    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.

  19. LadyAngora says:

    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! :)

  20. 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.

  21. Filipsvk says:

    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

  22. Ard says:

    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!

  23. Rype says:

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

  24. Brerro says:

    hall0oooo thanks for ur tutorial for vector…..
    good work….

  25. Devin says:

    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.

    • Peruginni says:

      Thanks for help Devin! I had the same problem as Ard described. Now, after setting 300dpi, is result perfect.

      Great tutorial! Thanks Rype!

  26. wutevah says:

    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

  27. Grafiko says:

    interesting tutorial, need to try this at some point. thanks for sharing

  28. ashley says:

    Love it!!!

  29. ede says:

    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!!

  30. majestic says:

    nice one!!!
    thanks

  31. Chicaloca says:

    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?

  32. devlim.com says:

    Wow, just learn it this great technique. U really tech great stuff

  33. Scott says:

    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

  34. Tina says:

    great tutorial!

  35. Eduardo says:

    Great work !!!

  36. Kati says:

    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!

  37. Sean Smyth says:

    Wow, great work. Thanks a million for this.

  38. Rob says:

    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.

  39. This is a great tutorial. Once the texture is created how are you using it in type and other shapes. Are you using a mask? I’ve tried that but it says there are too many elements and then ultimately doesn’t work.

  40. xcretion says:

    Awsome, your a life saver!

  41. Xianli says:

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

  42. great! just great. Ill be checking this website more often.

  43. Olivier C. says:

    Nice effects, and you make it sound ridiculously easy!

    Thumbs up!

  44. azdark says:

    great tutorial!

    u got one with how to make water texture :-) !

    keep up the cool work!

  45. Sher says:

    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.

  46. Curious about what effects you used to create the little house icon…..?

  47. odette says:

    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.

  48. Justin says:

    Awesome tutorial and easy to do! I never thought about creating something like that in illustrator. Thanks for the technique.

  49. Jim O says:

    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.

  50. holly says:

    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!

  51. Robin says:

    Hi,

    How do you make 3d effect on object like the house icon ?

    Many thanks

  52. Gatlinburg says:

    I have been looking for an easy guide on how to create a wood grain texture Will any of these methods work in photoshop?

  53. deen's says:

    i learnt, i think i di the same so………
    it was just amazing, n amazed later

  54. That was really simple and helpful

  55. ryan says:

    nice work. this site really helps me a lot

  56. MissRisa says:

    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.

    • Rype says:

      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.

  57. Leandro R says:

    Very good tutorial. It really helped me. Thanks for posting!

  58. Jam says:

    Just what is need. Thanks for that.

  59. Camilo Moraes says:

    Very good!!

    Thanks dude, it’s really what i needed.

  60. virat says:

    thank for give good tutorial ……………………….——>

  61. Hey I really like this site – thanks a lot for letting me know about to make this. I’ve been looking for this vector for a long time!

  62. Alfredo says:

    excelent thanks

  63. Martin says:

    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.

  64. kaitlyn says:

    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!

  65. Thanks for this post – I really like it!!

  66. Tania says:

    This is a fantastic tutorial! Thanks for sharing :)

  67. Rathi says:

    Wonderful tutorial, i really liked it..
    Thanks for posting it..
    :D

  68. Thanks for this post – I really like it!!

  69. Thanks for the great work.I really like it

  70. seafox says:

    Thanks so much! This was very helpful!

  71. JunJieToo says:

    how do i create a stone tiles then?

Trackbacks/Pingbacks

  1. [...] the Archives: Create a Wood Grain Texture, Creating Halftone [...]

  2. MyInkTrail says:

    [...] Create a Wood Grain Texture This tutorial examines how to design a realistic wood grain using Adobe Illustrator. You will learn about graphic pen effect, the warp tool and the twirl tool. This is just one of three tutorials on creating textures in Illustrator by Vectips. The other two cover creating a water texture and creating brushed metal. [...]

  3. [...] Create a wood grain texture [...]

  4. [...] addition a tutorial on How to Create A Wood Grain Texture from [...]

  5. OneDesign says:

    [...] Un tutorial foarte reusit despre cum poti crea obiecte cu textura din lemn. [...]

  6. Beeex.net says:

    [...] This is some decent metal for your favorite vector art application, Adobe Illustrator. The advantages of vector art (Illustrator graphics) over raster graphics (Photoshop psd) is that you can scale the former indefinitely. A virtue any graphic designer should value. Check out this great brushed metal texture tutorial right here. [...]

  7. Holz-Textur says:

    [...] eher flächig daher kommen, können Strukturen für mehr Tiefe sorgen. In dem Tutorial Create A Wood Grain Texture wird beschrieben, wie eine Holztextur entsteht und wie man diese einsetzen könnte: Für [...]

  8. [...] Create A Wood Grain Texture In Illustrator | Vectips – Tutorial: Holztextur mit Illustrator erstellen. [...]

Leave a Reply