How to Make a Highly-Textured Site Layout in Photoshop

In this tutorial, we'll create a textured site layout by layering multiple images. Creating highly-textured web design layouts is easier than you may think. You can learn to build image intensive designs rapidly. For intermediate Photoshop designers creating this design will take less than an hour, and you'll learn some professional tips along the way. Let's get started!

Final Image Preview

You can view the final image preview below.

Tutorial Details

Program: Photoshop CS4
Difficulty: Intermediate
Estimated Completion Time: 60 minutes

Take a look at the site design we'll be creating below.

Materials Needed

Download grunge texture
Download wood seamless texture
Flower stock image (included in the Psd Plus source files)
Leaf stock image: (included in the Psd Plus source files)

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

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.