Download Source Files
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
Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/month. 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.
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.
Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Razvan
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
great tutorial!!! that’s what i am talking about!!
Thank you. I am glad you like it
Clean, simple, great!
I liked! A little bit simple .. but beautiful.
b-e-a-uuutifull but that’s going to be a pain to get it into CSS and HTML(at least for me XD).
Yeah def going to be a PITA to code up…
wew really Cool! this is really beautiful! I’ll go to your member area. and take a look at this tutorial! rally nice one!
Really nice little tutorial, enjoyed it! Yet I think the more complicated part here is really getting such a screendesign coded to a somehow maintainable HTML structure with less than 400kB of images…
I agree Kristof – the design is nice but to translate this to web would be a VERY kB heavy – a total nightmare.
I hardly think that anything less than a single megabyte to be too overwhelming. Sites with megabytes of images will still load in less than a second. The size of the images here aren’t the problem, it’s how to lay them out.
I could get it into semantic/valid xhtml using less than a combined 400kb of images I think. It would require some creative use of png compression and png IE fixes like belated_png for IE6.
The main thing would be to slightly alter the design (if needed) to make it mostly repeating background slices. Might have to ditch that flower too.
why would you need to make it with less than 400kb? that number is quite small, and if you need to make it that small in order to have it load quickly, then you probably should find a better host.
or just throw out images and only use hexadecimal background colors haha
Dude I like your gravatar. Did you make it?
This is a real good tutorial for beginers
i d love to see how you put the code to this layout))
Agreed.
Something tells me this would be difficult to code. and to make expandable.
I think it’s a bit odd that there’s no light direction to give the shadows context. You’ve got shadows falling in all directions which makes the effort towards depth less convincing.
Brilliant! This is an awesome tutorial, very helpful. Better than some other recent tuts anyway…
I bet this would be solid to put into code, however :(
Would probably take an age to load too!
Anyway…
Thankyou!
Nice tutorial.
This wouldn’t be hard to code at all. Also, loading time shouldn’t be too bad.
You can turn the content textured area into a repeating pattern as well as the wood background, so that should solve most of the loading concerns.
:)
Exactly. And to be honest nowadays the internet speed and loading time is not an issue anymore.
Guys I don’t think people are only talking about user experience load time when they talk about file sizes.
More likely it is about bandwidth transfer allowance from the hosting site.
400kb x large number of users = significant amount of bandwidth required from host before you even consider any embedded videos, downloadable files etc.
I agree. Very easy to code and loading time would be fine thanks to grunge theme (low image optimization).
Repeating the content area and wood texture on the sides would be a must or different content length would look funny.
I don’t really like the flower, it’s too much shadow. But other than that a truly beautiful outcome and you can see the power of simplicity again.
Awesome tut! Can’t wait to try!
Thanks! Great tutorial, I’m working on it right now ;)
Niiiiice!
A lot of tutorials lately have been very bare-bone and uninspiring.
This is a nice change up from the usual.
how can i download this video tutorial ? this perfect …
Beautiful
I love that you put the color bar. Details like that really awaken the design.
sorry, but I think this is an ugly design. I can’t stand seeing these floorboard backgrounds anymore!
being cliche and ugly are two very different things as are being ugly and not your taste
Very nice, very simple!!!
I Like!!
Good post Raz, video is always a nice touch. Seems Graf is really picking up the pace.
A little simple but nice. Would have been great if you produced the background pattern yourself.
Thanks anyway.
Great tutorial,and the flower is so beautiful,If add a animals in the site,maybe more nature.:)
amzing
great tutorial, I will share it :)
very nice tutorial!
thanks for this tutorial!
Very nice design.
and shut up people with yours CSS comments. If you wanna talk about it go to @NETTUTS. here’s for Photoshop! =]
Pretty neat stuff, thanks :)
thanks for sharing this, really impressibe Tuts!
Hey, I was wondering… Is there a reason why a lot of PS & AE users have an “Apple” laptop/computer? Is Apple stronger/better/faster than Windows?
(I’m really not an expert in this sort of things)
Nice tutorial but I’ve seen something very similar somewhere else. I thought psd.tuts checked for similar tutorials on the web before they posted them.
great tut, thanks!
Good turorials
great tutorial
Thank you
Good tutorial
cheers
wonderful
its a great tutorial for web page design to start with up !!!!
Great tutorial, and NIIIICEEE end result. You have so many good tutorials on this site – you are the best ;-) Thank you
Wonderful, a tutorial resulting in a markup headache, and the massively underused wooden background, its nice to see that being used here as it just hasn’t quite had the exposure or usage it deserves around the internet in the last 5 years.
And then there’s the completely out of context flower, how does that fit in with a wooden floor and some old paper?
Honestly. Good design is about context, content and thought, not about how many textures and drop shadows you can do in photoshop.
new start people for great tutorial thank you razvan
Pretty Detailed!!!!!
Hi! This tutorial really inspired me to make my own designs :)
Here is my take on this tutorial: http://www.flickr.com/photos/angelfish2222/4484359972/
Very helpful, although probably not for beginners as it didn’t go into too much detail, but I like the look and its inspirational, quick to create and good for some quick skill renewal :) well done.
I would like to see a followup tutorial on how to use Fireworks to slice up and export this as a standards compliant CSS/XHTML website without any tables!
Done perfectly! The wooden effect of it looks really good. Especially the wooden planks with the striation marks. I’m leaning towards having a web design looking like this as well with some variations here and there. I tried to design a cool logo to incorporate into the said web but it turned out all wrong. Haha. Finally, decided to use the professional services of an online logo design site instead (http://www.logodesignplanet.com) and got the logo I wanted at an affordable price and fast too, within 24 hours. I did provide this link for reference and inspiration to my designer as I wanted the color/look of your design. Thanks for posting this, by the way!
are these 2 textures (paper and wood) free to use on commercial websites?
wow..I used to be on the lookout for this and finally got it from this post. Thank you for making it easier.
It’s very beautiful design!