Wednesday 12 November 2008

Cutting type into wood

The first thing we think about in such a scenario is the old-fashioned tradition of carving your girlfriend's name, or your initials into a tree. This technique is fine for the effect, however for buttons at a web site, they would be much more legible if you simply nail sign boards to the tree. Tilt and cock them to look home made, and even have a bent nail here and there to drive home the concept.

[*]FIRST: For this effect you need a chunky, poorly designed font because most of these kinds of signs are routed into wood either by hand, or using lettering patterns made for router use. I'll approve the use of the world's most stupid font -- just this once -- "Comic Sans" because it's a uniform thickness font, and it does look like an amateur wrote the letters with a router.

If you have a lot of signs to do, I recommend stepping the wood background enough times, in a file large enough to accommodate all the buttons you'll be needing. This way you only have to do the processes once.

The wood we selected has a nice dark, aged look to it, much like one might find in the Ozarks lodges.

Once we have our lettering, we'll keep that layer for safety -- but we won't actually be using that layer. Now we'll make a selection of the type, move to the wood grain layer and then pick up a copy of the wood grain into the selection and move or "float" it to its own layer. Then we'll adjust the color so it's lighter -- like freshly cut wood.

Float a copy to work on

[*] 1) Select the Type: Command (Ctrl) Click the type layer
Then turn it off by clicking its "Eye" icon
[*] 2) Select the Wood Layer by clicking it in the Layer Palette
[*] 3) "Float" a copy: Command (Ctrl) J copies to a new layer
[*] 4) Image > Adjustments > Levels (Command or Ctrl L)
now pull the right-hand slider toward the center and watch carefully as the type lightens.

Bevel

[*] Making the Cut

Now we make the cut by using the Bevel & Emboss layer style.

[*] At the bottom of the layers palette, with the floated layer selected, choose the "f" button, pull-out menu and select Bevel & Emboss
[*] Style: Inner Bevel
[*] Technique: Chisel Hard
[*] Direction: Down
Here's the way my Bevel & Emboss Settings turned out

All the other settings, depend on the size of the type and the finished art desired. For Depth, you want the edges of the cut to almost meet in the center of the letter. You'll also want to back off a bit on the opacity of the shadow areas do they're not so black, and a bit of the wood shows through.

finished

To complete the effect, make sure the sign board has some dimensionality as well. These nailed to a tree could be quite nice.

If you want to see the lettering cut into the side of a tree, let us know, or send the tree we're to use. But for the sake of web site buttons -- the roughness of the bark will cause the lettering to be difficult to read.

There are lots of other ways to do this technique. In Photoshop CS, CS2 and CS3, using the Type Mask tool directly on the wood plank would do the same in a single step.

However, this method allows us to keep editable type, and to adjust the "floated" layer color-wise until we had the effect perfect. This method works in virtually ALL image editing programs on ALL platforms which support layered art.

No comments: