Once I posted this tutorial on my old site, I immediately started getting emails asking how I designed it. My best designs were created when I just had time to push buttons and try things I had never seen before.

boxedindesign wood carving web design tutorial

 

 

boxedindesign wood carving web design tutorial

Step 1 – Get a nice wood background. Nice place to start is cgtextures.com. Wood background I used is in this section (last one).

 

 

boxedindesign wood carving web design tutorial

Step 2 – Make a new layer. Use a plain round brush setting at 3px, color #ffffff and draw out your text in square shapes moving your entire arm. Don’t make the lines clean – you are going for an effect with this. After doing some of text, go back over it with a round brush set to 1px to get the skinny lines.

Note – I took an old junk computer mouse, the type with the ball in it. Threw some small pieces of ripped paper down and rolled the mouse over it. It makes an interesting visual. You can use other small things that might make the mouse ball skip around when drawing your text.

If you want to use this same effect on regular text that you typed out for your project, then you will need to rasterize the text. Right click (control+click on Mac) on the layer with text and choose Rasterize.

 

 

boxedindesign wood carving web design tutorial

Step 3 – This part is important for getting the right effect. Select the color #785f44. Double click on the same layer that you just created the white text. This will bring up the blending options. Check “Inner Shadow” and Blend Mode on Linear Burn. Set Angle to 49 degrees, Distance 5 and Size 2 – Make sure that Use global light is checked. Under Quality look to see if you contour matches the image above.

 

 

boxedindesign wood carving web design tutorial

Ok. We’re getting there! Does your image look similar to the one above? Great! Let’s continue then.

Step 4 – Take a break. Look around your room. Do you have any toys? Make your figurines battle other figurines. Take a picture of this website. Change that song in your ipod. Ok now continue to Step 5.

 

 

boxedindesign wood carving web design tutorial

Step 5 – If you closed the blending option for the text layer – reopen it. Now choose Inner Glow and Screen Opacity of 75%, which should already be set. There’s a yellow color shown which should automatically show too. If not, choose a light yellow color similar to the one in the image. Set Technique to Softer with a Size of 5. Contour should be uphill slope with a Range of 50.

 

 

boxedindesign wood carving web design tutorial

We’re getting closer!

 

 

boxedindesign wood carving web design tutorial

Step 6 – Choose Color Overlay with Opacity at 100% and color #4c3821.

 

 

boxedindesign wood carving web design tutorial

Oops! It’s ok. It will only look bad for 3 minutes more. This is where we clean it up and add some realism to it.

 

 

boxedindesign wood carving web design tutorial

Step 7 – Lighten up the Opacity from the Color Overlay section until it makes a nice, real wood carving effect. I went for 32% opacity on mine but yours may differ. Once you have it looking right, you should have a finished design!

Note – If you have any strange looking white areas poking through and want to hide or fix them, just go back and lighten the Opacity on the Step 2 text layer. It should look right but it might depend on the wood texture you used.

If you enjoyed this tutorial or got stuck anywhere in the steps, just comment and I will get an email to come back and respond.