How to Make a Highly-Textured Site Layout in Photoshop

Step 1

In this tutorial we’ll use some stock images to create a highly-textured web layout. Let’s start by creating a new document with the following size: 1000 pixels by 1000 pixels.

Step 2

Now go ahead and download the seamless wood texture from Grafplus.com. Here you can find the download link: Download wood seamless texture. Open the “texture-small.jpg” in Photoshop and then go to Edit > Define pattern. Choose a name for your pattern and click OK. You can now close the image with the wood texture.

Step 3

Select the “background” layer and press on Command + J. This shortcut will duplicate the “background” layer. Select this new layer and from the top menu select Layer > Layer Style > Pattern Overlay… Use the pattern you created a few seconds ago.

Step 4

Use the Rectangle Tool to create some vertical bars with different colors/

Step 5

Select all these shapes in the layer palette by holding down the Command key and with your mouse click on each layer). In this way you will select all the shapes.

Step 6

When you have all shapes selected press on Command + E (this shortcut will merge all the layers into a single one). Change the blending mode to Color Dodge, and the Opacity value to between 40% and 50%.

Step 7

Now it is time to add another great stock image. Visit grafplus one more time and download the following image: grunge texture. Place this image in your document at the top. Go to File > Place, and select this nice grunge texture.

Step 8

Be sure you have this layer selected and then apply a simple drop shadow. Layer > Layer styles > Drop Shadow.

Step 9

Use the Rectangular Marquee Tool to make a selection as shown.

Step 10

Be sure you have the layer with the grunge texture selected, and then press Command + J (this shortcut will create a new layer via cut). Select the new layer and rotate the layer 180 Degrees (Edit > Transform > Rotate 180. Place this new layer on top of the layout with the Move tool. Go ahead and add your logo now as well. For this tutorial I’m using the text: “PSDtuts+.”

Step 11

Change the blending mode for the text logo to Color Burn.

Step 12

Use the same technique to cut some buttons and a footer. Here you can see the result.

Step 13

If you want to create a distinct button with another color you have to select the layer with the button you want to make it unique, and then press Command + U to bring up the Hue/ Saturation settings. Check the Colorize checkbox, and move the sliders to the right or left until you’re happy with the result.

Step 14

On the right side, create a white shape with the Rectangle Tool.

Step 15

Use the Line Tool to create some thin lines and place them over the white shape. The color used for the lines is #d3d1d2.

Step 16

Select the white shape and the lines in your layer palette, and then press Command + E to merge down all the layers. Select the Eraser Tool and with a small, round brush delete some parts of the layer until you have a realistic piece of paper.

Step 17

Now add the following layer styles.

Step 18

Use the Horizontal Type Tool to add some text. I used the Myriad Pro font (you will find the font in windows 7 and vista).

Step 19

Now add another image in the middle of the layout, and on the right side of the image add two arrows. The arrows you will find under the Custom Shape Tool.

Step 20

Together with the PSD file you will find two stock images in the Psd Plus source files for this tutorial. Of course, if you’re not a Plus Member then you can search for equivalent images on the web. The first one is a leaf, and the second one is a red flower. Open both images in Photoshop and remove the background. Both photos are very high quality at around 4000 pixels, and you can remove the background with the Magic Eraser Tool, or use your preferred method.

Step 21

Place the image with the leaf on the right side of the layout under the white piece of paper.

Step 22

Duplicate the layer with the leaf several times and place these multiple leafs in different positions as shown.

Step 23

The last step is to place the red flower over the green leaves.

Final Result

Here is the final result. Have fun creating your own highly-textured Photoshop site layouts.