Pin It

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.

Preview

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

Resources

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 .


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • Andy Vlasveld

    Hello,

    Where can i download the PSD?

  • moynul

    Thank you very much for nice post..

  • http://www.product-shot.co.uk/ Product Photography

    Good collection of background.

  • Graphic Design Firm

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

  • Anna

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

  • Artis

    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

  • Naveed Ahmad

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

  • http://www.rt-designs.de rt-designs

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

    • http://desizntech.info Kawsar Ali | DT Admin

      what are you talking about?

      • http://marttilaine.com Martti Laine

        Get a qute -button.

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

  • http://www.denbagus.net denbagus

    nice tutorial .. thank you

  • http://www.jennamolby.com Jenna Molby

    Great tutorial!

  • Hermitbiker

    …. 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 !!

  • http://www.article-elf.com/ forex robot

    nice post. thanks.

  • http://aext.net Lam Nguyen

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

  • http://www.animhut.com/ sriganesh

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

  • Tirath

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