Create a Wood Textured Web Layout in Photoshop Part 1: Header and Navigation

Alt Text


Here are the resources used in this tutorial:
Wood Floor Texture by gnrbishop
Dark Wood Wallpaper by zygat3r
Paintbrush Vector by Dragonartz
Feed Me Animals RSS Icons by Mirjami Manninen
Twitter Bird Illustrations by Pasquale D’Silva

Step 1: Create the Document

Create a new document with the dimensions 1265px wide and 1000px high. This layout uses the full width of the browser so the width can be varied to your liking and borders can be added to make a smooth transition to wider screens.

Step 2: Create the Body of the Header

The Wood Floor Texture by gnrbishop is the main texture for most of the wood elements in this layout.
First make some image adjustments to the brightness, contrast, and levels to give it a more golden look:

Then use the free transform tool to resize it to about half the page, then duplicate the wood and make it look like one continuous block of wood. Duplicate this again and save it for later because this is the base texture of most of the wood elements.

With this block of wood cut out a curved shape like this using the pen tool and converting it to a selection. How wide the protruding bottom of the shape depends on how big you want your navigation because the buttons will be placed to the right of the protruding end.

Step 3: Style the Header Body

Add these layer styles to the header:

Step 4: Create the Navigation Buttons

Using the same texture used for the header, rotate it until the grain of the wood is horizontal. Then shrink it down so the grain becomes smaller and more condensed. Use these image adjustments to make the wood darker. These adjustments are experimental and will affect how the navigation looks. Please change them according to your liking.

Then add these layer styles to give it a darker mahogany look that contrasts well with the light wood of the header.

Here is the result so far:

Step 5: Create the Logo

I used the font Danube bold and the name Tutorial Nation because I had envisioned this layout to be a tutorial site. I also used the Paintbrush Vector by Dragonartz to separate the words. Apply these layer styles to give the letters a burned letterpress effect.

And use these styles for the Paintbrush.

Step 6: Create the Search Bar

Take the modified wood texture you used for the navigation and cut out a curved button. Then apply these layer styles to give it a button look. Use the same text effect as the logo to put text on the search button.

Cut out a much longer rounded rectangle for the search bar then apply these layer styles.

Step 7: Create the Ribbon

Create a green rectangle with a half circle curve. Then use the burn tool to make it look like it is curving in. Then apply these layer styles to give it a nice ribbon look. To make the ribbon curl, create the second half of the curve and make the color a darker green. Use the burn tool to give it shadow and make it look realistic.

Use the Feed Me Animals RSS Icons by Mirjami Manninen and the Twitter Bird Illustrations by Pasquale D’Silva and shrink them to button size. The text uses the same layer style as the logo.


Use the Dark Wood Wallpaper by zygat3r as the background and the header of this layout is done.

Here is the final result again.

Click to see in full size.

In the next Part of the tutorial we will make the main content area and sidebar. Please leave your opinions and critiques in the comments.