Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts

    Wooden plank tutorial

    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.

    thanks,

    -trigger

  • #2
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Tutorial

    Hi, I like this site for tutorials and some inspiration.

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

    http://www.biorust.com/downloads/browse/7/added/desc/3/

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

    http://www.photoshopcafe.com/tutorials/wood/wood.htm

    Good luck and let us see what you come up with!
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #3
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    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
    -Andrew

    (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)
    Last edited by mindlessLemming; 12-12-2006 at 07:40 AM. Reason: added more detail

    I take no responsibility for the above nonsense.


    Left Justified

  • #4
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Are you the Biorust guru? Small world!

    Go ahead, release the new design... go on...
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #5
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Karen S. Garvin View Post
    Are you the Biorust guru? Small world!
    Nope, I'm the owner of the site mentioned in the original post

    I take no responsibility for the above nonsense.


    Left Justified

  • #6
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...me weeps that Andrew is more interested in Python than Photoshop these days

    Gary

  • #7
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ...or Ruby, or JavaScript or PL/SQL or even SmallTalk
    That said, Photoshop CS3 looks HAWT!

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •