How to Create a “Worn Paper” Web Layout Using Photoshop

May 12 2009 by Matthew Heidenreich | 37 Comments

How to Create a Worn Paper Web Layout with 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.

Final Result.

Downloads

You can download the associated source files of this tutorial below.

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 document.

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:

Setting up the background.

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.

Creating the navigation.

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:

Creating the main navigation

6  Lower the opacity of that layer to 85% so the background will fade through a bit.

Creating the main navigation

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.

Creating the main navigation

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.

Creating the main navigation

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:

Creating the main navigation

Creating the main navigation

 

10  You will have something that looks like this:

Creating the main navigation

Designing the RSS feed link

11  On the right side of our navigation, we will have a few links for our RSS feed.

RSS feed link.

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:

RSS feed link.

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:

Logo

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.

Search box.

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.

Search box.

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%.

Search box.

19 Add some text inside the search box to let people know where the search field is.  I used the color #FAF3CF for this.

Search box.

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.

Intro Box.

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.

Intro Box.

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:

Intro Box.

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:

Content area.

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:

Content area.

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.

post teasers.

27  Your document will look something like the following figure (I just used a random thumbnail image which you can see on the left):

post teasers.

28  Next, make a selection with our Rectangular Marquee Tool (M) similar to the following figure, and fill it with #000000.

post teasers.

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:

post teasers.

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:

sidebar

32 Insert the following Blending Options onto the green_paper.jpg layer:

sidebar

sidebar

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:

sidebar

34 Do the same for the Recent Comments box and your sidebar should look something like this:

sidebar

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:

The footer.

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:

Final.

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

About the Author

Matthew Heidenreich is currently a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials on his blog called PSDVIBE. You can get in contact with Matthew by following him on Twitter: @Spicypepper.

37 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 ;)

Nelson Pacheco

August 9th, 2010

Excellent tut!! One of the few easy to follow tutorials on this subject in a long time.

Thanks!

Tirumal

August 18th, 2010

Nice Tutorial, you are a good teacher. Anyone can understand it.

marko recursos

August 28th, 2010

excellent tutorial, thanks … very good step by step

Carolina

November 22nd, 2010

Nice tutorial! Nice way of using old paper in a website. I also liked the use of the lined paper as well.

priya

December 30th, 2010

Thanks 4 such a beautiful & easy tutorial.

Robin

September 18th, 2011

What if you wanted to input a watermark design over the paper? How can you do that?

Leave a Comment

Subscribe to the comments on this article.