View Full Version : Wooden plank tutorial

12-05-2006, 11:20 PM
Hello all and thanks in advance,

I have a site I am working on and have been trying hard to develope realistic wooden planks as borders.

I recently visited a site that personal I find to be amazing looking from a design standpoint. The wooden plank designs are very similar in shape and texture (not color) to what I have been unsuccessfully trying to develope.

The link to the site is http://leftjustified.net/

I was curious if anyone can find a tutorial on this or knows what properties he might be using to accomplies these wonderful looking wooden planks.

Oh, and yes I googled this for an hour and after following about 50+ plus links of late 90's style wooden textures I gave up.



Karen S. Garvin
12-07-2006, 07:12 PM
Hi, I like this site for tutorials and some inspiration. :thumbsup:

You might want to see if any of these links fits what you're trying to do:


alternatively, if you have Photoshop you can try making your own wood texture:


Good luck and let us see what you come up with!

12-12-2006, 07:34 AM
Thanks for your kind comments about my site :)

Ok, that design was made nearly 3 years ago, so I'll do my best to remember the steps involved :)
The wooden panels were made by taking a photo of the wooden floor at a house I used to live in--all the wood pieces on the site are actually made from one piece, flipped around to vary it a little.
I stood up on a chair and tried to get a shot looking straight down so that the edges of the wood would be parallel. I then opened the shot in photoshop and cut out one floorboard.
The next step was to increase the contrast and saturation, as well as boosting the red to give it more of a cartoon feel. I remember that I used the Adobe RGB colorspace when doing that design as it is quite bright and heavily saturated.
Next came the edges, which were made by erasing some of the end of the plank and adding highlights+shadows with the dodge and burn tools. I think the shading was the most important part in making it look realistic -- try to work with the existing woodgrain in the photo rather than drawing in your own.
The nails are all the same nail; just a little grey circle with some shading and a hand drawn drop shadow. Actually, that reminds me -- all the drop shadows were created by duplicating the layer, making it very dark (Image>Adjustments>Levels), applying a 3 step Gaussian Blur (6px, 3px, 1px) and setting the mode of the layer to Multiply. I much prefer this method to the existing drop-shadow effect as you get better control over colour.
Any parts that repeat, such as the vetical planks and the paper were done using the stamp tool and the Offset filter. Offset a little, stamp a little. Offset a little, stamp a little... and so on ;)

Also, I strongly recommend using photos as texture source rather than generated textures -- generated ones always look so fake! As well as taking a photo of my floor for the wooden planks, I stained a page from my drawing book with heavily watered down coffee and scanned that to make the paper backgrounds.

Hope that helps :thumbsup:

(p.s It's comments like the above that make me too nervous to release the redesign that's been on the backburner for over 18 months... heh)

Karen S. Garvin
12-12-2006, 01:59 PM
Are you the Biorust guru? Small world! ;)

Go ahead, release the new design... go on... :D

12-15-2006, 02:38 AM
Are you the Biorust guru? Small world! ;)

Nope, I'm the owner of the site mentioned in the original post :)

12-16-2006, 12:29 AM
...me weeps that Andrew is more interested in Python than Photoshop these days ;)


12-18-2006, 06:09 AM
...or Ruby, or JavaScript or PL/SQL or even SmallTalk ;)
That said, Photoshop CS3 looks HAWT!