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.
- Program: Photoshop CS4
- Difficulty: Intermediate
- Estimated Completion Time: 60 minutes
Take a look at the site design we'll be creating below.
- 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)
Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.
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.
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.
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.
Use the Rectangle Tool to create some vertical bars with different colors/
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.
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%.
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.
Be sure you have this layer selected and then apply a simple drop shadow. Layer > Layer styles > Drop Shadow.
Use the Rectangular Marquee Tool to make a selection as shown.
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+."
Change the blending mode for the text logo to Color Burn.
Use the same technique to cut some buttons and a footer. Here you can see the result.
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.
On the right side, create a white shape with the Rectangle Tool.
Use the Line Tool to create some thin lines and place them over the white shape. The color used for the lines is #d3d1d2.
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.
Now add the following layer styles.
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).
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.
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.
Place the image with the leaf on the right side of the layout under the white piece of paper.
Duplicate the layer with the leaf several times and place these multiple leafs in different positions as shown.
The last step is to place the red flower over the green leaves.
Here is the final result. Have fun creating your own highly-textured Photoshop site layouts.