Create A Wood Grain Texture
Tutorials | May 9th, 2008
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.
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.
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
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.
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.
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.
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.
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.
its amazing on how you use the illustrator tools to make this kind of effects!
the logo looks very nice!
thanks again
This was awesome! Thanks for sharing!
it is really awesome!
i like it so so so much!♥♥
It’s amazing how illustrator amazes me every day we these simple step by step tutorials!
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.
You are the illustrator GOD.
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.
I’m glad everyone likes the post! Brad, I’m glad you ventured into the site, but also glad you use the RSS.
PRETTY COOL.
thanks for the tip! <3
Another great tutorial!
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!
Is this effect compatible with eps 8.0? I would need it for stock.
Andrej
Yup, it is compatible. When you trace the effect, it is nothing but basic paths.
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/
iStockdiary also has a great post on realistic curtains that make a great texture.
http://www.istockdiary.com/illustrator/illustrator-tutorial-realistic-curtain/
This is so GREAT! It’s the most realistic vector wood grain effect that I’ve ever stumbled upon.
Woow very usefull ! thanx
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.
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).
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/
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.
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!
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.
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
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!
Ard,
Some people have been running into a problem when they forget to expand and trace the Graphic Pen Texture before they scale it.
hall0oooo thanks for ur tutorial for vector…..
good work….
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.
Thanks for help Devin! I had the same problem as Ard described. Now, after setting 300dpi, is result perfect.
Great tutorial! Thanks Rype!
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
interesting tutorial, need to try this at some point. thanks for sharing
Love it!!!
me too!!!!
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!!
nice one!!!
thanks
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?
Wow, just learn it this great technique. U really tech great stuff
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
Scott, Did you ever figure this out, I am wondering the same thing?
I just wrote a tut for Vectortuts with a similar effect. Let me know if that helps!
How to Create a Smokin’ Western Type Treatment in Illustrator
great tutorial!
Great work !!!
very good. thanks
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!
Hey Kati,
It might be the Document Color Mode Settings. Try going File > Document Color Mode > RGB Color. Let me know if that works.
that worked – changing to RGB
thanks! great tutorial
Wow, great work. Thanks a million for this.
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.
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.
Awsome, your a life saver!
I love you, man! Thanks a lot for this tutorial. I’ve been dying to make a wood texture for my artwork.
great! just great. Ill be checking this website more often.
Nice effects, and you make it sound ridiculously easy!
Thumbs up!
great tutorial!
u got one with how to make water texture
!
keep up the cool work!
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.
It is called Susa
Thanks for your reply and the link to the Susa font. How did you create the example with the house carved into the wood?
I just wrote a tut for Vectortuts with a similar effect. Let me know if that helps!
How to Create a Smokin’ Western Type Treatment in Illustrator
Thanks a million. That’s exactly what I’m trying to achieve. You are a charm. You should create a link in the Related Posts section on this tutorial to the Smokin’ Western tutorial. Thanks again. Great job!!!!
Curious about what effects you used to create the little house icon…..?
I am pretty interested as well on more details about the little house icon realization.
Thanks.
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.
Awesome tutorial and easy to do! I never thought about creating something like that in illustrator. Thanks for the technique.
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.
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!
Hi,
How do you make 3d effect on object like the house icon ?
Many thanks
I used a technique I wrote about in the How to Create a Smokin’ Western Type Treatment in Illustrator. Let me know if that helps
Ok
Actually I apologize, as you already answered the same question some months ago.
That will help. However, the house seems to have much more shadow effect.
Moreover did you use the same effect on the icon outline ?
Many thanx
I have been looking for an easy guide on how to create a wood grain texture Will any of these methods work in photoshop?
i learnt, i think i di the same so………
it was just amazing, n amazed later
That was really simple and helpful
nice work. this site really helps me a lot
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.
Very good tutorial. It really helped me. Thanks for posting!
Just what is need. Thanks for that.
is = i
Very good!!
Thanks dude, it’s really what i needed.
thank for give good tutorial ……………………….——>
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!
excelent thanks
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.
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!
Thanks for this post – I really like it!!
This is a fantastic tutorial! Thanks for sharing
Wonderful tutorial, i really liked it..
Thanks for posting it..
Thanks for this post – I really like it!!
Thanks for the great work.I really like it
Thanks so much! This was very helpful!
how do i create a stone tiles then?
Very good post.
You did a good job.
this technique is easy and applicable in logos, icons, interfaces or pretty much anything.
Thx so much for the technique!! It looks real!
Hi just what i was looking for. As commented above though, I have done this tut over and and over again down to the T but the grain looks nothing like yours.
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
Thanks for this post – I really like it!!
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
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!
. You just need to buy another Kindle.
VEry nice and simple!!!! thanx
I finished the tutorial. However, now what ? How do i get this wood looking picture in my text ?
Anyone got a tutorial for that ?
Thanks for this post–I really like it!!
Hi!
How can I save the texture, so I can use in other works?
Tks
Nice work, great tutorial. Hopefully be able to put this to good use
very well information you write it very clean. I am very lucky to get this information from you.
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
Really nice tutorial
Really like the end result. Thanks for sharing your knowledge.
How did you do the one with the home engraved in the square and the bevel look? It’s awesome!
Great informative tutorial! I tried it but your end graphics looks a lot better than mine. I need to practice more I guess
I always woundered the same thing. maybe someone on here can answer the question.
cool! how did u make the icon with the house cutout?
Thanks for this tuto ! Congratulations ! From France
“Trace” and “Expand”. That is amazing!
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
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.
Great tutorial!
Thanks for sharing your experience!
I think, I got it!
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.
How did you found this idea. How many hour do you spend to learn about design graphic
Thank you
Very Nice!!! Loved this Tutorial! Great looking Wood Texture! Mine came out great, enjoyed this Tutorial. Thanks for sharing.
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!
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?
This is just awesome!!! totally loved it…. easy to go
Great informative tutorial!
Loved this! Very simple ro follow. Did you just play around with the colors and opacity of th browns to achieve the wood floor? I really like that.
certainly like your web site but you have to check the spelling on several of your posts. A number of them are rife with spelling issues and I find it very bothersome to tell the reality on the other hand I will certainly come again again.
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.
thanks for your generosity
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!