How to Create a “Worn Paper” Web Layout Using Photoshop
In this tutorial, you’ll learn how to create a textured "worn paper" web design theme using some basic Photoshop techniques. The design incorporates some free stock images to let you create a beautiful layout in a jiffy.
Final Result
Click on the image to view the full-scale final result.
Downloads
You can download the associated source files of this tutorial below.
- worn_paper_web_layout.zip (ZIP, 6.38 MB)
Setting up the Photoshop document
1 The first thing we want to do is create a new document with the dimensions of 1024px x 1050px.
Setting up the background
2 Next, choose your Paint Bucket Tool (G) from your Tools pallete and fill the Background layer with #F9E9BB.
3 Now we want to add a stock photo to our background. I found a great wrinkled paper image over at deviantArt called paper texture by akinna-stock. I resized it for this tutorial to the appropriate size, and you can get it in the source files where it is named worn_paper.jpg. Once you have it opened in Photoshop, move it onto your document and lower the opacity of the layer to 50%. It will look something like the following:
Creating the main navigation
4 Next, we’ll work on our navigation. Using your Rectangular Marquee Tool (M) make a selection similar to the following figure and fill it with #000000.
5 Now, this part is a bit tricky. Using your Polygonal Lasso Tool (L), make a ridged selection similar to the following across the bottom of your whole navigation. Then choose Edit > Clear to delete the selection, and you’ll have something that looks like this:
6 Lower the opacity of that layer to 85% so the background will fade through a bit.
7 Using the Horizontal Text Tool (T), add a few main links in the left section of your navigation. Use the font color #FFFFFF and use a simple font similar to Helvetica.
8 Let’s work on displaying the active/mouseover link. Using your Rectangular Marquee Tool (M), make a selection similar to the following and fill it with #FFFFFF on its own layer.
9 On your newly created layer, insert a couple Blending Options. To do so, right click on the layer and choose Blending Options… from the pop up menu and use the following Blending Options:
10 You will have something that looks like this:
Designing the RSS feed link
11 On the right side of our navigation, we will have a few links for our RSS feed.
12 Here are the colors for the links: "Subscribe" is #FAE4B3; "Post", "Comments", and, "Email" is #F48F32.
13 Download an RSS icon from Feed Icons.
14 This is what your navigation will look like when it’s done:
The Logo
15 For our logo, I used a great ‘Sketch’ style font. I used the font named Sketch Block with the color set to #323232 and this is what I came up with:
Creating the search box
16 Now it’s time to move onto our search box. We will be keeping it simple so it won’t take many steps to complete. Using your Rectangular Marquee Tool (M), make a selection similar to the following and fill it with #000000.
17 Lower the opacity of that layer to 80%, and then make a selection similar to the following (1px wide) to divide the search field from the submit button. Once you have it selected, choose Edit > Clear to delete the selected area.
18 For the search icon, all we will use is the default magnifying glass from the Photoshop Custom Shape Tool. Make sure your foreground is set to #FFFFFF and then place it in a similar fashion to the following figure. I also lowered the opacity of my layer to 40%.
19 Add some text inside the search box to let people know where the search field is. I used the color #FAF3CF for this.
Making the "Intro" box
20 Let’s make our "Intro" box. This can be a place for you to put a little description about your site. So again, let’s pull out the Rectangular Marquee Tool (M) and make a selection similar to the figure below. Fill the selection with #000000.
21 Lower the opacity of your layer somewhere around 80%. Then using a font with white color (#FFFFFF), put a descriptive sentence about your site.
22For the second group of text, use the color #C5AF6F. I just filled it in with some filler text to give you an idea of what it would look like. The font used in this box is Myriad Pro if you were wondering.
The content area
23 The next thing we want to do is work on our content area. For the background of our content area, we will be using a lined paper texture from deviantART, it’s called Textures: Paper by Dioma. You can find a modified version in the source files named lined-paper.jpg – open it up in Photoshop and place it under your intro box similar to the following figure:
24 Next, we’ll add a place for our category links. Use a font family like Helvetica and set the color to black (#000000). Add some links in a similar way to the following figure:
25 Using your Horizontal Text Tool (T), make a new layer and fill the text _ _ _ _ _ _. This is a nifty trick for quickly adding the dividers under the category links. Lower the opacity of your layer to 30% and you will have something that looks like this:
Designing the post teasers
26 Now it is time to work on how our posts are displayed. For my thumbnail, I used an image that is 224px x 79px in dimension and added the following Blending Options to its layer.
27 Your document will look something like the following figure (I just used a random thumbnail image which you can see on the left):
28 Next, make a selection with our Rectangular Marquee Tool (M) similar to the following figure, and fill it with #000000.
29 Once you have filled your layer, lower the opacity to 80%. Arrange your title, date, and other information in a similar fashion to the following figure. For links, I used the color #CCDDFB, and all other text is #FFFFFF. The background behind the date is #B6636D. Your final post teaser will look like this:
30 Repeats steps 24 through 27 for other post teasers.
Creating the sidebar
31 Now it is time to move onto our sidebar. We will be using a paper texture out of the same pack as our lined paper texture. I have made a modified version of it that you can find in the source files named green_paper.jpg. Open that up in Photoshop and drag it onto your document. Place it in a similar location to the following figure:
32 Insert the following Blending Options onto the green_paper.jpg layer:
33 Next, add some text to represent a title, and the links for your "Most Popular Posts" section. For the heading, I used the color #232323, and for the links I used #064E6F. I came up with something that looks like this:
34 Do the same for the Recent Comments box and your sidebar should look something like this:
Creating the footer
35 The last thing we’ll do is creating the footer. Go back to the navigation at the top of the site and find the layer that you made the cut edges on. Once you have found it and activated it, go to Layer > Duplicate Layer to make a copy of that layer.
36 Then choose Edit > Transform > Flip Vertical and place it at the bottom of your document in a similar way to the following:
37 Finally, add some copyright text at the bottom with the color #F7E1B0.
Congratulations, you’re done!
If you followed along with this tutorial, you have something the looks like this:
Comments and thoughts?
What did you think about this tutorial? Did you find any place that was confusing? Did you find a mistake? Please don’t hesitate to ask questions and we’ll help you figure out your issues.
Related content
- How to Create a Sleek and Textured Web Layout in Photoshop
- How to Create a Slick and Clean Button in Photoshop
- How to Auto Caption Images Using MooTools
- Related categories: Photoshop Tutorials and Tutorials
About the Author
.
31 Comments
Ben
May 12th, 2009
how do you then convert this to an actual webpage?
Matt B.
May 12th, 2009
A very good article; Matthew’s tutorials are well laid out and easy to follow. Glad to see him posting on Six Revisions.
I would love to see a series on one of these that articles that shows how to take one of these PS layouts, slice it up, code it and work out the CSS.
Tyler
May 12th, 2009
Very good solid tutorial, with a good result at the end. I’m currently working on my new site design, and this has given me inspiration, thanks.
Andrew Jackson
May 12th, 2009
Great tutorial, thanks!
One question though. Do you have to set the background as that entire paper texture? I can’t see a way to tile something like that. I suppose you’re only looking at 100-200kb though if you use the whole thing.
blitzie
May 12th, 2009
oh pls pls pls have a code tutorial for this beautiful design
AP
May 12th, 2009
Not surprised that you where the author of this tutorial when I scrolled down and saw your name there.
Another great one.
Will you be posting this to your website as well.
Roshan Bhattarai
May 12th, 2009
wow..lovely tutorial….thanks for such a lovely layout..
Daniel15
May 12th, 2009
Nice tutorial… Even a non-designer like myself can follow it :)
Matthew Heidenreich
May 12th, 2009
@AP
I’ll have it linked to on my site, but I won’t ave the article on there
Sean Feeney
May 12th, 2009
Nice layout but, rather than using textures already created by another person it would be really nice if you showed how to actually create the paper texture. It would make this post actually useful. This article is more copy/paste then an actual photoshop tutorial. Sorry but, this could be done in MS paint.
Jonas
May 12th, 2009
Very good tutorial. Thanks :D
Tim Smith
May 12th, 2009
Great tutorial!! The layout is really nice.
ed
May 12th, 2009
Like Ben, I, too, would love to see the next step… taking it live.
It may be a bit of a newbie question, but I’d love to start moving past DW for all my (amateur, obviously) websites.
Great post!
e
waterrose
May 12th, 2009
I found this tutorial from a person tweeting about it. How did you know I was getting ready to “try” and figure out how to make a page like this for a new website? Thanks for saving me so much pain.
kakasab
May 13th, 2009
Amazing tutorial mathew, can you post about how to convert PSD to Wordpress theme ?
paul
May 13th, 2009
thanks
I’ve been scouring the interwebs for a way to do the zigzag effect!
Jacob Gube
May 13th, 2009
There’s an astounding desire for Photoshop -> (X)HTML tutorials. All I can say is that we’re working on it; I’ll work with Matthew to do a more full, two-part Photoshop to (X)HTML web page. Tyler Denis, of Denis Designs, and I are already putting together a two-part series where he does the Photoshop work and I do the (X)HTML/JavaScript tutorial; I’m excited to finish that up and publish it soon!
keruchan
May 13th, 2009
nice tuts very well done!
CodeJoust
May 13th, 2009
Hi There! Great Layout/Tutorial.
I’m jousting this into code just for fun and I wanted to write a tutorial on it.
Would that be OK if I used the idea for your layout and some the the textures, writing the tutorial?
Also, wouldn’t it be a better idea to do the zigzag once or twice than just duplicate the selection all the way across?
Matthew Heidenreich
May 14th, 2009
@CodeJoust
I may actually have done that (the zigzags), but explained it a little differently in the tutorial. both ways work, but i’m sure that is easier.
CodeJoust
May 17th, 2009
Hi once again! I published the converted version and a part one tutorial on this great design, if anyone would like to see it — How To StyleIT.
bebopdesigner
May 18th, 2009
Simple and brilliant! thanks a million
tirath
May 24th, 2009
Awesome tutorial
paul
June 7th, 2009
For the zigzag bottom of the navigation, there is an easier way.
And this way, it will be available whenever you need it!
Check out Step 2 of the following tutorial
http://psd.tutsplus.com/tutorials/interface-tutorials/how-to-create-a-grunge-web-design-in-photoshop/
Zane
July 12th, 2009
Thanks for the tutorial, there’s some great tips and techniques here for novice Photoshoppers. Top notch.
Lance
September 22nd, 2009
I like this style a lot – gives me inspiration
zsgyuris
November 4th, 2009
It’s great post!
Emadz
November 23rd, 2009
Its really helpful tutorial.
Tony
February 5th, 2010
When I try to make the zig-zag pattern using the polygon lassoo tool, the result leaves the line edges quite jagged. Is there some setting for the lassoo tool to smooth the edges?
Faizee
February 20th, 2010
Thanks Lot for Nice Coverage of Paper Layout
Its really helpful tutorial.there’s some great tips and techniques
Sahus Pilwal
February 24th, 2010
Nice artwork and great tutorial on the use of paper in web design ;)
Leave a Comment