Create a Wooden Background Website Layout in Photoshop

In this post we will show you how to create a website using splatter brush and few cool techniques. You can customize it for a company or own web site. Also, the PSD template is available for downloading.


Lets the the result first (Click for bigger size).


1. Tileable Wood Background

2. Mail and Phone Icons

3. Splatter Brushes

4. Tech and Screentone Patterns

We  are using 960 Grid for this tutorial. So open up the PSD template and  place the the wood background.  We are going to adjust the color setting for the background. Go to Images > Adjustments > Levels and then Images > Adjustments > Curves . Here are the settings for Levels and Curve :

You can play around with these setting as you like.  Here is how background looks like after these changes:

So, now it looks kind of grungy . We are going to add lighting effect to make the wood brighter. Go  to Filter > Render  > Lighting Effects. Keep it Default in the Style Menu. Here are the setting for the lighting effect:

Here is the result after applying the lighting effect:

Add thin gradient of #71644a on the both side of the wooden background. The reason for that if you are coding this layout, the background won’t look awkward on a big screen.

Now we are going to create the logo. Here is the hex color code #afc05b.  Using the following brush shown below draw one end of the logo.

Don’t worry about the excessive splatters. You can erase them by using the eraser . Use the same brush extend the logo’s background size.

Here is how it should look like:

After that use 5 px soft brush and fill out the areas that need fill color and erase the excessive splatters. I am using Cooper Std font for the logo.

Now, we will work with content area first and then add the menu.  Make the content 820 x 546 and add 1% noise from  Filter > Noise > Add Noise > . Here is how it looks with the grid.

We are going to add Pattern Overlay and Stroke to add more the depth to the content area. Here are the settings :

Now we add the menu. I am using Rockwell Font for the menu and content also. Fill the background with pure black and turn down the opactiy to 60%. Also, copy the same layer style from the content and paste it for each menu background.

We are going create a rotating image/slideshow area. Get any image and paste it on the left side of the content area. Mine is 335 x 225. We are going to add Drop Shadow and and Storke from Layer Styles. Here are the settings:

Here is how it looks:

We need to make the picture 3D-is by adding a corner drop show. Using pen tool draw a simple corner like following:

Now, fill the path by right clicking over it. Choose black for the fill.

Add a Gaussian Blur to filled area . Keep it between 4-6 pixels. See what works best. Here is my result:

Use the rounded rectangle tool and draw an rectangle on a new layer.  Select  Make selection option from the drop down menu by right clicking on the path. Fill it with the gradient . Drag the Gradient from top to bottom.

We are going to crop it  using shapes.

Use make selection again and delete the selection area. Now move that layer all the way to the end  of content area and add the text and icons.

Add the rest of the necessary text element, heading which are pretty simple and self explanatory. No special tricks.

Only one thing I added is the drop shadow for the “Testimonial” text shadow with this color #695a28. Here is the setting for that :

Now time for footer. It is almost the same process as header, but we are using a different brush.

Now repeat the same step with the third brush and erase the excessive splatter and make the it into a nice splatter shape.

Add the additional text and copy the same background for the other footer heading.

Thats it ! We have reached the end of this tutorial lets see again how the web layout looks. Feel free to ask any questions or suggest improvements

You can download the PSD template. It is organized into folders. Feel free edit and use it .


17 thoughts on “Create a Wooden Background Website Layout in Photoshop

  1. Andy Vlasveld says:


    Where can i download the PSD?

  2. moynul says:

    Thank you very much for nice post..

  3. Good collection of background.

  4. Graphic Design Firm says:

    Great posting of Wooden Background Website Layout in Photoshop.
    Really nice one.

  5. Anna says:

    Hi, Nice tut. I’ve a job for you if you are interested. Then mail me.

  6. Artis says:

    Great tutorial! :)

    i have one question what I’m not realy understand – how do you make this perfect guides? how to make them symmetrical and exactly were I want them?

    Best regards

  7. Naveed Ahmad says:

    This was such a wonderful tutorial I had been looking for long time. Thanks a lot for this one special for me.

  8. rt-designs says:

    Good tutorial, but shouldn’t it be “quote” instead of “qute”?

    1. Kawsar Ali | DT Admin says:

      what are you talking about?

      1. Martti Laine says:

        Get a qute -button.

        Nice article btw, I’ve always wanted to learn some wood-techniques with Photoshop!

  9. denbagus says:

    nice tutorial .. thank you

  10. Jenna Molby says:

    Great tutorial!

  11. Hermitbiker says:

    …. a great tutorial, I love the simple wooden background the best, even better the the “glamorous,bells and whistles type layouts I see regularly…. I love the “simple non-cluttered look” that’s easy to navigate around in, myself !!

  12. forex robot says:

    nice post. thanks.

  13. Lam Nguyen says:

    Nice tut and great design, dude!
    .-= Lam Nguyen´s last blog : Learning jQuery: Your First jQuery Plugin, “BubbleUP” =-.

  14. sriganesh says:

    Thanks for sharing a good tutorial as usual you do. keep up the good work

  15. Tirath says:

    Awesome tutorial with nice web layout
    Thanks so much for posting & sharing it
    Keep up good work
    God bless you :-)

Comments are closed.

Pin It on Pinterest

Share This
Sign up for our Newsletter

Signup today for free and receive all new free articles published at Web Design Views.