SEARCH
  Tutorials Photoshop Web Layout Layout with Wood Background

Layout with Wood Background

amitk Web Layout Dec 17, 2009

Step 1

First, open a new document in Photoshop with the size 960px by 1100px.

image 1

Step 2

Download this texture,open it in Photoshop and move it in your document using the Move Tool (V). Name this layer "wood background" and move it at the bottom of your canvas.

image 2

Step 3

Go to Layer > New Adjustment Layer > Brightness/Contrast, check the "Use Previous Layer to Create Clipping Mask" option and use the settings from the next image.

image 3

Step 4

Now we are going to create the header. Create a new layer, select the Rectangular Marquee Tool, and create a selection with the fixed size 960px by 40px. Then use the Paint Bucket Tool (G) to fill that selection with the color #1c130b.

image 4

Step 5

Create a new layer, select the Rectangular Marquee Tool (M) and create a new selection with the fixed size 960px by 200px. Fill the selection with the color #dbf9f9. Then double-click on the layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.

image 5

Step 6

Again, create a new layer, select the Rectangular Marquee Tool (M) and create a selection with the fixed size 960px by 95px. Fill the selection with the color #e4ee6f. Then open the Layer Style window and use the settings from the next image for Drop Shadow and Gradient Overlay.

image 6

Step 7

Select the layers which you have created at the previous three steps and use the shortcut Ctrl+G to group them. Then name the group "header".

image 7

Step 8

Now we are going to create some buttons. First, select the Rectangle Tool (U), and draw a rectangle using the color #d5de68. Then open the Layer Style window and use the settings from the following image. Name this layer "button 1".

image 8

Step 9

Duplicate the "button 1" layer using the shortcut Ctrl+J, right-click on this layer and select Convert to Smart Object. Name this layer "reflection", and then go to Edit > Transform > Flip Vertical. Move this layer at the bottom of the original button using the Move Tool (V).

image 9

Step 10

With the "reflection" layer still selected, go to Layer > Layer Mask > Reveal All. Then select the Gradient Tool (G), select a black to transparent gradient and drag a line from the bottom to the top. Set the opacity for the "reflection" layer to 50%.

image 10

Step 11

Now we are going to add a shadow to the button. Create a new layer, select the Brush Tool (B), select a hard brush with the diameter of 15px and draw a black circle like I did. Name this layer "shadow."

image 11

Step 12

Right-click on the "shadow" layer and select Convert to Smart Object. Then go to Edit > Free Transform and stretch the layer like I did.

image 12

Step 13

Now go to Filter > Blur > Gaussian Blur and use a radius of 3px.

image 13

Step 14

Set the opacity of the "shadow" layer layer to 20% and move it beneath the "button 1" layer.

image 14

Step 15

Now, group the "reflection", "button 1" and "shadow" layers. Name the group "button 1."

image 15

Step 16

Now duplicate the "button 1" group three times (to duplicate a group, drag it above the "Create a new layer" button from the Layers pallete). Arrange all the buttons using the Move Tool and name each group and layer like I did.

image 16

Step 17

Select the Rectangle Tool (U) and draw a white rectangle like I did. Then open the Layer Style window and use the settings from the next image.

image 17

Step 18

Now we are going to create the sidebar. Select again the Rectangle Tool (U) and draw a rectangle using the color #d2dc63. Then copy the layer style from the white rectangle layer (right-click on the layer and select Copy Layer Style) and paste it on this one (right-click on the layer and select Paste Layer Style).

image 18

Step 19

Now we are going to create a logo using a vector from the Vector badges pack. Open the vectors in Illustrator, and then copy and paste one of them into your Photoshop document as a smart object.

image 19

Step 20

Double-click on the layer created at the previous step to open the Layer Style window and use the settings from the following image.

image 20

Step 21

Now we are going to create an user login form at the bottom of our layout. Select the Rectangle Tool (U) and create a rectangle using the color #281c10. Then open the Layer Style window and add a stroke with the settings from the following image.

image 21

Step 22

Duplicate the rectangle created at the previous step using the shortcut Ctrl+J. Then create an arrow using the Custom Shape Tool (U).

Select the Type Tool (T) and write the text for the login form. I have used the font Trajan Pro and the color #d4b9a1. I have also created a separator using the Line Tool (U) with the weight of 1px and the color #463b31.

image 22

Step 23

Now all you have to do is grab the Type Tool (T) and add the content. I have used two fonts: Trajan Pro and Helvetica Neue. You can use any other fonts you like. I have also created a search bar using the Rectangle Tool (U).

Layout with Wood Background

subscribe to newsletter