We have prepared another great and quality photoshop tutorial. In this tutorial you are going to learn how to create a nice wooden navigation design. This tutorial is useful for web designers so that you can learn new ways of designing a great layout. If you have any questions or any other kind of needs please don’t hesitate and contact us. We will provide more photoshop tutorials so you can expect a lot more tutorials to come.
Preview:
Wooden Navigation Interface Design.

Step 1:
Let’s start out by creating a new file. I used a 1000×260 pixels canvas set at 72dpi, and I filled my background with #838383 color shade. Now create a new layer then draw a large rounded rectangle with #050505 color shade and 781 x 105 px dimensions.

Step 2:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Gradient Overlay and Pattern Overlay blending options to your long brown rectangle layer.





Result:

Step 3:
Duplicate your long wooden rectangle layer and merge it with a blank layer so the layer styles become permanent. Then resize the height of the copy by a couple of pixels and position it at the bottom of the original.

Step 4:
In a new layer draw a small brown circle with #200900 color shade on the left end of your wooden navigation interface. Then use the Ellipse Tool and create small thick lines on the sides of your circle.

Step 5:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your brown circle layer.



Result:

Step 6:
In a new layer draw a thin brown rectangle with #C46B22 color shade and 194 x 9 px dimensions.

Step 7:
Select the Horizontal Type Tool then set the font family to Arial, regular, 12 pt, smooth and white color shade. In a new text layer type your navigation links on the wooden rectangle design. Then under Layer Style(Layer > Layer Style) add an Outer Glow blending option.

Result:

Step 8:
In a new layer draw a very small gray circle with #747474 color shade, this will be the nail design.

Step 9:
Under Layer Style(Layer > Layer Style) add an Outer Glow, Inner Glow, Gradient Overlay and Stroke blending options to your small gray circle layer.




Result:

Step 10:
Now add a nail between each your navigation links.

Step 11:
In a new layer draw a brown rounded rectangle with #671300 color shade and 229 x 45 px dimensions on the right end of your wooden navigation interface. Then cut the bottom corners of the brown rounded rectangle.

Step 12:
Under Layer Style(Layer > Layer Style) add an Inner Shadow Inner Glow and Gradient Overlay blending options to your brown rounded rectangle layer.



Result:

Step 13:

Select the Horizontal Type Tool then set the font family to Arial, regular, 10 pt, none and #FFD800 color shade. In a new text layer type your sub navigation links on the brown rounded rectangle design. Then add your search box with a circle go bottom from step 4 and 5. Now add two more nails design as shown below.
Results:
Wooden Navigation Interface Design.
