In the following tutorial, you will learn how to create a custom "wooden text" effect using the 3D Extrude and Bevel tool combined with some clever gradients and layer effects.
That being said, you can always expand your vector library by heading over to Envato Elements, where you'll find a great selection of graphics just waiting to be picked and used.
Follow along with us on our Envato Tuts+ YouTube Channel:
1. How to Set Up a New Document
As with any new project, we're going to start by setting up a new project file, so head over to File > New (or by using the Control-N keyboard shortcut). Then adjust it as follows:
- Type: Web
- Page Width: 700 px
- Page Height: 300 px
2. How to Add the Custom Text
Now that we've finished setting up our new document, we'll create our custom text, which we will gradually customize by adding effects to it.
Step 1
Select the Type Tool (T) and left click on the Artboard in order to add your text. I've used the New Facebook font, but you can use any font you like. Set the Font Size to 180 px and the Tracking to 20, and then fill your text with the color shown below (R=128 G=128 B=128).
Step 2
Expand the text by heading over to Object > Expand and then choosing both Object and Fill within the pop-up window.
3.How to Add Depth to Your Text
Now that we have our custom text, we're going to give it some depth using the 3D Extrude & Bevel effect.
Step 1
Start by selecting the resulting group of shapes, and then going to Effect > 3D > Extrude & Bevel and adjusting it as follows:
- X axis rotation: 14°
- Y axis rotation: 6°
- Z axis rotation: -1°
- Extrude Depth: 20 pt
Step 2
Expand the resulting effect by heading over to Object > Expand Appearance.
Step 3
Now, you should have a selection of shapes and groups. You need to organize these before moving on to the next step. For starters, let's focus on the "V". Select the top shapes (the ones filled with a lighter shade of gray), press Control-Shift-G to ungroup each shape separately, and then press Control-G to group them together.
Step 4
Once you've expanded the Extrude & Bevel effect, you might have noticed that some of your letters' sections (the ones filled with the darker shade of grey) ended up having multiple composing shapes. We're going to want to fix this, by selecting and then uniting them into a single larger shape using Pathfinder's Unite Shape Mode.
Step 5
Ungroup the rest of the shapes (the ones filled with a darker shade of grey) using the Shift-Control-G keyboard shortcut, and then select and group them together (Control-G).
Step 6
Let's continue with the "e". Individually select the highlighted darker sections that have multiple composing shapes (1), and then use Pathfinder's Unite Shape Mode to turn them into a single larger shape. Once you're done, you must take your time and create two groups, one with the lighter shapes (2) and one with the darker ones (3).
Step 7
Next is the "c". As we did with the previous letters, individually unite the sections that have multiple composing shapes (1), and then make the two groups (2 & 3).
Step 8
Now the "t". Individually unite the composing shapes of the indicated sections (1), and then create the groups (2 & 3).
Step 9
Move on to the "o". Individually unite the indicated sections' composing shapes (1), and then make the two groups (2 & 3).
Step 10
Do the same for the "r", individually uniting the composing shapes of the indicated sections (1), and then making the two groups (2 & 3).
Step 11
We are now down to the last letter, so as we did with all the other ones, individually unite the composing shapes of the indicated sections (1), and then make the two groups (2 & 3).
Step 12
Duplicate all the top shapes (the ones filled with a lighter shade of grey) using the Control-C > Control-F keyboard shortcuts. Select the copies, go to Object > Compound Path > Make, and name the resulting shape "vvv". You'll need this shape in several future steps, so make sure that you always have a copy.
4. How to Add Texture to Your Text
Now that we've finished adding depth to our letters, we're going to go through the process of gradually adding texture to them.
Step 1
Select a "vvv" copy, fill it with R=198 G=156 B=109, and then add the Texturizer effect by heading over to Effect > Texture > Texturizer, adjusting it using the following settings:
- Texture: Canvas
- Scaling: 80%
- Relief: 3
- Light: Right
Quick Tip: as you might have noticed, the Texturizer effect will produce some unwanted pixelated edges, which we will get rid of in the following step.
Step 2
Open up the Transparency panel. Select a "vvv" copy, fill it with white (#FFFFFF), and move it above the texturized shape. Now, with both shapes selected, click on the Make Mask button.
Step 3
Select a new "vvv" copy and bring it to the front using the Shift-Control-] keyboard shortcut. Fill it with white (#FFFFFF), and add an Inner Glow by heading over to Stylize > Effect > Inner Glow and adjusting it as follows:
- Mode: Normal
- Color: R: 66 G: 33 B: 11
- Opacity: 100%
- Blur: 10 px
Step 4
Expand the resulting effect by heading over to Object > Expand Appearance. Keep only the expanded Inner Glow (delete the other shape). Change its Blending Mode to Multiply and lower its Opacity to 30%.
Step 5
Create a new "vvv" copy and bring it to the front (Shift-Control-]). Fill it with the left linear gradient, and then add a new fill (from the fly-out menu of the Appearance panel) and use the right linear gradient.
Select the first fill (from the Appearance panel), change its Blending Mode to Overlay, and lower its Opacity to 10%. Select the second gradient, change its Blending Mode to Multiply, and lower its Opacity to 50%. Select the shapes made in steps #2, and #3 and group them. Name it "Wood" and make it invisible (for the moment).
5. How to Add the Highlights and Shadows
Since at this point we're pretty much done working on the texture, we can now start adding some of the smaller details such as the highlights and shadows.
Step 1
We're going to start by creating a series of thin shapes along the edge of the top shapes. First, go to Edit > Preferences > General and enter a 0.5px Keyboard Increment.
Now, let's focus on the "V" shapes. Select the shape shown in image #1 and make two copies (Control-C > Control-F twice). Select the top one, and then press the down arrow and the right arrow twice (to move it 1 px to the right and 1 px down). Reselect the two copies and use Pathfinder's Minus Front Shape Mode. Fill the resulting shapes with white and lower their Opacity to 40%. Repeat the same techniques for the other two shapes (image #3 and image #5).
Step 2
Duplicate the shape highlighted in image #1. Select the top one and press the left arrow and up arrow once (to move it 0.5px up and 0.5px to the left). Reselect both copies and then use Pathfinder's Minus Front Shape Mode. Fill the resulting shapes with black and lower their Opacity to 50%. Repeat the same techniques for the other two shapes (image #3 and image #5).
Step 3
Repeat the same techniques for the rest of the top shapes. Select all these thin shapes and group them together using the Control-G keyboard shortcut. Bring this new group to the front (Shift-Control-Right Square Bracket). Turn "Wood" back to visible, and lock both groups.
Step 4
Now, let's focus on the darker shapes. First, fill them all with R=66 G=33 B=11.
Step 5
Next, create four gradients using the indicated values and save them in the Swatches panel. Simply name them "1", "2", "3", and "4". You'll need them in the next step.
- Gradient "1": left color stop (R=0 G=0 B=0), right color stop (R=66 G=33 B=11 Opacity: 0%)
- Gradient "2": left color stop (R=50 G=25 B=25), right color stop (R=66 G=33 B=11 Opacity: 0%)
- Gradient "3": left color stop (R=96 G=56 B=19), right color stop (R=66 G=33 B=11 Opacity: 0%)
- Gradient "4": left color stop (R=66 G=33 B=11 Opacity: 0%), middle color stop (R=96 G=56 B=19), right color stop (R=66 G=33 B=11 Opacity: 0%)
Step 6
Now, you need to add some new fills for most of these shapes. Take a look at the images to understand exactly how many and which are the gradients that you need to use for each fill.
6. How to Add the Bottom Shadow
Once we've finished adding the gradients to the different sections of our letters, we can move on to the next step, where we will be creating the bottom shadows projected by the letters.
Step 1
Select a copy of "vvv" and go to Object > Path > Offset Path. Enter a 1 px Offset and press OK. Select the resulting shape, send it to the back (Shift-Control-[), and move it a few pixels down and to the right. Fill it with black, add a 0.5 Gaussian Blur, and lower its Opacity to 30%.
Duplicate the shape made in the previous step. Select this copy, move it below the original, and make it a little bigger (simply resize it). Leave it black but raise the Gaussian Blur to 5 px and the Opacity to 50%.
Step 2
Select another "vvv" copy and go to Object > Path > Offset Path. Enter a 6 px offset and click OK. Select the resulting shape, send it to the back (right click > Arrange > Send to Back), and move it a few pixels down and to the right. Fill it with black, add a 3 px Gaussian Blur, and lower its Opacity to 5%.
7. How to Add the Top Highlight
Next, we're going to be adding the top highlight covering the upper half of the letters.
Step 1
Select the Pen Tool (P) and create a shape like the red one shown in the reference image. Select it along with the "vvv" shape (it's the last time you'll need this shape) and use Pathfinder's Intersect Shape Mode.
Step 2
Select the resulting shapes and go to Object > Compound Path > Make. Bring the resulting shape to the front. Fill it with a white linear gradient and lower its Opacity to 10%.
8.How to Create the Background
We are now down to the last part of the tutorial, where we will learn how to create the background.
Step 1
Create a 700 x 300 px rectangle, send it to back (Shift-Control-[), and fill it with R=198 G=156 B=109. Add a new fill (from the fly-out menu of the Appearance panel), use R=199 G=178 B=153 as your color, and change its Blending Mode to Screen.
Step 2
Select this second fill (from the Appearance panel), and then add a Halftone Pattern (Effect > Sketch > Halftone Pattern) using the following settings:
- Size: 1
- Contrast: 0
- Pattern Type: Dot
Step 3
With the same Fill still selected, give the background a Reticulation effect (Effect > Sketch > Reticulation) with the following settings:
- Density: 40
- Foreground Level: 10
- Background Level: 10
Step 4
Add a third effect using a Diffuse Glow (Effect > Distort > Diffuse Glow), which we will adjust as follows:
- Graininess: 0
- Glow Amount: 10
- Clear Amount: 10
Step 5
Add a third fill and apply a vertical linear gradient (R=59 G=25 B=25 for the left and right color stops and R=255 G=255 B=255 for the middle one, setting its Opacity to 0%) to the middle of the shape. Select this final fill, change its Blending Mode to Multiply, and lower its Opacity to 10%.
Step 6
For a final effect, select the Rectangle Tool (M) and use it to create seven 700 by 20 px shapes, which we will vertically stack 20 px from one another, making sure to center align them to the Artboard. Select all seven rectangles and then go to Object > Compound Path > Make, filling the resulting shape with the linear gradient (R=199 G=178 B=153 for the left and right color stops, R=255 G=255 B=255 with a 0% Opacity for the middle one, setting the Location of the first stop to 70% and that of the right one to 30%).
Once you're done, make sure to change its Blending Mode to Color Burn and lower its Opacity to 50%.
Great Job!
There you have it, a wooden text effect. You can use the steps in this tutorial to make your own custom headings for web designs, or even to create some wood-style icon sets. Use your imagination and the skills you've learned, and you'll be surprised by what you can come up with.
Expand Your Adobe Illustrator Skills!
Are you just starting out using Adobe Illustrator but haven't quite gotten the hang of it? Well, if that's the case, we've hand-picked a few tutorials that should get you up to speed in no time!
