Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

This year has seen a big increase in grungey / textured / hand-drawn styled website designs. By nature I tend to design a cleaner look myself, but I thought I'd try my hand at grunge today and write up a tutorial on creating a simple paper texture from scratch in Photoshop then marrying it with a web layout to create a neat design.

Then later this week we'll take this same web design and I'll show you how you can take remixing even further than just changing backgrounds and colour schemes, that in fact you can change the entire style of a design. But first let's make our paper texture site!

Author: Collis

Hello! I started Psdtuts+ because years ago reading Photoshop tutorials was how I got into design. You can find me on Twitter or on my blog theNetsetter.

Part 1 - Creating a Paper Texture

There are three different ways you can get a textured paper look:

Scan in your own paper
Check out Bittbox's Make an Awesome Grungy Paper Texture Tutorial
Use someone else's texture
There's heaps of sites that list textures around, check out these links: Bittbox | TextureKing | PSDTUTS Textures
Make it in Photoshop
This is what we're going to do!

Making a texture in Photoshop will generally result in a more stylized than realistic look, but it has its own charms. Also it means you don't need any external images.

Step 1

So first we'll start a new document, this canvas is 1200px wide x 900px high. Next we fill the background layer with a beige colour - #e8e8e2.

Step 2

Now create a new layer on top and make your foreground and background colours: #979a8f and #cfd1c5 which are variations of the original colour. Then go to Filter > Render > Clouds

Step 3

Now we run Filter > Artistic > Palette Knife with the settings shown in the image above. Palette knife turns our clouds into blobs ... sort of, eventually this will give a slight crumpled feel to the texture.

Step 4

Next we'll add some noise to the canvas by Filter > Noise > Add Noise using the setting shown. This should make our texture look rough.

Step 5

Now we take our noisy, crumply layer and set it to Multiply and 30%. This will tone it right back.

Step 6

Now create a new layer on top and make your foreground and background colours: #42433e and #cfd1c5 - which is a darker version of the last set so that we get more contrast this time. Then go to Filter > Render > Clouds

Step 7

Then we again run the Filter > Artistic > Palette Knife filter.

Step 8

And this time we set the new layer to Overlay and 60%. This should give our texture a bit more depth.

And that's it! This is our texture!

Step 9

For this tutorial the light texture is perfect, but you can easily make other variations just by messing about with blending tools. For example to make this dark brown paper texture:

Take the light version and press CTRL-U to alter the Hue/Saturation, set the sliders to -30, -10 and -5 respectively.
Duplicate the layer and press CTRL-SHIFT-U to make it black and white
Then still on the black and white layer, go to Edit > Adjustments > Brightness/Contrast and go to -30 and +30 respectively
Now set the black and white layer to Overlay
Then create another layer on top and fill it with #beac93 then change that layer to Multiply.
Duplicate the Multiplied layer
Then duplicate the black and white layer and pull it right to the top. Set it to Overlay and 20% and rotate it 90' to get a bit more depth to the texture.

Step 10

If colour variations aren't enough, you can also change the feel of the texture with the use of different filters. For example here we've made a more parchment-y feel by taking our light texture and:

Grab the first crumply/noise layer and run a Filter > Texture > Texturizer and use Canvas, 75% and 2 for your settings
Grab the second crumply/noise layer and run the same filter
Now duplicate the second layer and rotate it by 90', keeping it set to Overlay and 60%.
Create a new layer on top and fill it with white - #ffffff
Run a Filter > Texture > Texturizer and this time use Canvas, 200% and 16 then set this layer to Overlay and 20%
Now create another layer on top and again fill it with white, this time change the layer blending mode to Color and 53% to get our texture a bit whiter.

Final paper texture notes

Now that you have a texture you can of course turn it into a seamlessly tiled background.

For this tutorial we will be using the first texture we made - the one from step 8.

Part 2 - Creating the Website Layout

So now we're going to create a portfolio layout to go with our paper texture. Here is the approximate structure for the homepage. As you can see it's a bit more of a complicated structure than in the previous web layout tutorial because this time we have a layout inside the layout.

So our overall grid is a three column grid, then in the main panel, we've used that grid to break the area into two main spaces, one is the size of column 1 and the other spans over both the other columns.

Step 13

So first we're going to create a working area and lighten it up. So here I've dragged two guides on to the screen, one at 100px and one at 1100px - that makes the area I'm working in exactly 1000px which is perfect.

Then we create a new layer and draw a big white box as shown.

Step 14

Next we'll set the white box back to 25% opacity.

Then we're going to roughen it up. There are lots of great grunge brushes around, but for this step we'll just use one of Photoshop's standard brushes. You can see it in the screenshot above with the 60 underneath it.

If this brush isn't appearing for you, just click that little right arrow at the top of the brushes screen and choose Wet Media Brushes, then click Append to add them to your current set.

Step 15

So choose the Eraser Tool (E), select that brush we just mentioned and then go around the edges of our shape and just roughen it up however you feel. I've left the top edge intact as you can see.

Step 16

Next create a new layer just below the white box, and draw in a Radial Gradient (G) going from white to transparency. This is just going to highlight where we'll be placing our logo in a second. Set the layer to Overlay and 70%.

Step 17

Now we'll add a little "logo" - in our case just a word set in a nice typeface. The font I've chosen here is Egyptian710 BT which is quite a well known font and suitable for our purposes because it's very uneven looking - capital letters are thicker than the lowercase letters - and the slab serifs look kind of typewriter-ish which goes with our paper theme.

Step 18

Next we'll make a watermark just to add a bit more stuff in the background. Actually you can go crazy and add tons of stuff into the background texture, but we'll settle for a single watermark.

So here I've written out the word Folio in some random font (HumstSlab712 Blk) and I've set it in this colour - #c5c6ba.

Step 19

Now let's change the blending mode to Colour Burn and 70% and we'll add a 1px stroke as shown. Notice that for Fill Type I've used a Pattern and then chosen a texture I had hanging about. When combined with a low opacity (36%) and blending mode (Multiply) this makes our outline look like it's faded out in parts.

Step 20

Now we'll move our watermark to sit behind the logo.

Step 21

Next we're going to make a little horizontal separator element. So create a new layer and draw in a 1px line in the dark brown.

Step 22

Now grab that same old eraser brush and just go over the line erasing little pieces out of it so it looks distressed. Also get rid of the edges so that it starts at the same place as the white box.

Step 23

Next create a new layer below and draw in a brown box that is about 3-4px high as shown.

Step 24

Set the brown box to Multiply and 5%. This will be a kind of shadow to our separator.

Step 25

Next create a new layer and this time draw a white box about 20px high above the line.

Step 26

Set the white box to about 50% opacity and once again using our brush, just erase the top in a messy fashion.

Step 27

Now repeat the last three steps to draw a second white box, but this time when you erase it, erase more so that it's a thinner white strip.

When both white layers are combined they will give a messy sort of highlight.

Group these separator layers into a single layer group.

Step 28

Now we can duplicate our layer group to have three copies to form our horizontal grid area as shown.

Step 29

Here I've just placed some content in. As you can see I've mixed a little bit of the display typeface with a regular HTML typeface.

For the regular text I've actually used Cambria which is a Vista font. In the CSS you would have it default back to Georgia for people who don't have the Vista fonts. If you, yourself don't have the Vista fonts, you can get them freely & legally, just follow these instructions. There's a couple neat fonts, I quite like Calibri as well.

Step 30

Now we're going to add our main panel. So draw in a large rectangular box in the dark brown colour - #1e1a19 - and do so using the Rounded Rectangle Tool (U) with a Radius of 5px.

Step 31

Now zoom into the top left corner and grab a small square selection then fill it in with the same dark brown colour. We don't want a curve in this corner.

Step 32

Now zoom in on the top right corner and using the Polygonal Lasso Tool (L) while holding shift down make an angled selection like shown and then hit Delete.

Step 33

Now in a new layer above draw in a square of a lighter brown colour, say #352f2b, and then make another angled selection and delete away half the square so you are left with a triangle which is 1px away from the edge.

Step 34

Next create a new layer and zoom in to the top left corner again. We are now going to make our tab shape. We do this using the pen tool and a few very precise clicks. In the image above I've switched off all the background layers so you can see the shape exactly. Here's how you make it:

Start on the bottom left point and just click a single point in
Then hold down SHIFT so that you are getting a dead straight line and click the next point along the line, hold the mouse button down as you click so that the point has handles and drag upwards a little bit. This will mean the next point you click is going to have a curve going between.
Now click the third position and again hold the mouse button down and also hold SHIFT down to drag the handles out at a right angle. You should be able to get that perfect curve. Having shift held makes sure the angles are all nice and precise so it's just a matter of getting the size and positioning right. It may take you a few goes, but the good thing is you can just press CTRL-Z to undo if you don't get it right, and if you need to go back more than one step, just press CTRL-ALT-Z
Next while holding SHIFT down click the fourth point, again holding the mouse down and dragging right so that you get handles appearing. This handle you can see in the image above (because it's one of the last two points before I screenshot). As you can see the handle should be dead straight - this is ensured by holding shift down.
Finally, hold SHIFT down and click the fifth point and again drag right. This will give you that awesome final curve.

Step 35

After you make the fifth point, you can just fill in the remainder of the shape any old how, because we're going to just cut away the bottom edge to be perfectly straight anyway.

Once you have completed the shape, right click and choose Make Selection.

Step 36

Now you can fill in the shape with dark brown to match the main box. Then cut away the bottom extra bits so it's nice and flat and sits perfectly on top as shown.

Step 37

Next we'll duplicate our tab layer and move the new one below the old tab (so the brown one looks like it's in front). Then right-click on our new tab and choose Blending Options and give it a Colour Overlay of this nice reddish-orange colour - #cc5630. The reason we do a colour overlay and don't just fill in the tab with the new colour is that if you do the second method you will get a few left over brown pixels showing through.

Next hold down CTRL and click on the first tab then choose the Rectangular Marquee Tool and press the right arrow a few times until your selection has moved along to overlap with the orange tab. The reason I say you should choose the marquee tool in this step is that to move a selection you must have a select tool up. If instead you had the regular arrow tool selected you would actually move pixels around as well as the selection. Try both and you'll see what I mean.

Step 38

Now we create a new layer in between the two tabs and fill in our selection with a darker orange colour - #b44724. Then hold down CTRL and click on the orange tab layer, then click CTRL-SHIFT-I to invert the selection and click on the middle layer and hit Delete. This should leave you with only the darker orange part that overlaps the orange tab.

Step 39

As you can see we've created a sort of shadow on our second tab.

Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. Unfortunately this also makes them harder to work with in HTML. You can however do a variety of things with transparent PNGs, or alternately just make text change colours in rollovers and not worry about changing tab colours. Anyhow this is all a bit beyond the scope of this tutorial. Suffice to say the menu might be a bit tricky to build.

Step 40

So here's our layout so far. I've added a couple more tabs and given them some text.

Step 41

Now we'll draw in the featured work area. This will be a simple white rectangle where the work will go. Then behind that create another layer and use the Polygonal Lasso Tool (L) to draw a kind of wonky rectangle and fill it with a dark, dark brown colour - #0e0c0c.

Step 42

Next we'll add some descriptive text on the left and the item itself. Notice that with the text I've used a dark brown for the two descriptors (Project Title and Project Description) this makes them fade into the background which is good because they aren't that important. The title of the project and descriptive text on the other hand stand out. These last two items are set in a light beige colour picked from the background with the title being brighter than the text.

Also I've added a faint radial gradient to the work sample going from white to a light beige - just because I love radial gradients and can't get enough of them :-)

Step 43

Now finally I'll add a couple of little hand drawn doodles to finish off the design. For these I've used David Leggett of Tutorial9's excellent and free hand-drawn brushes. You can add brushes by opening the brush palette as shown, clicking on the little right arrow and choosing Load Brushes, then selecting the brush file you downloaded.

Because the brushes are much bigger than I want them it's important to sharpen the layer after you've resized it. So here I've shrunk the arrow down and then run a Filter > Sharpen > Unsharpen Mask to fix it up.

The Design

So there we go, the final design, with a couple of variations for different pages. The final PSD designs are of course up on ThemeForest for sale, and I'll add the homepage PSD to the Plus system.

Final Thoughts

So that's my take on a paper texture sort of layout. There are lots of designers who do this look much better than me, in particular check out Liam McKay's work at WeFunction and also take a look through design galleries like WebCreme and you'll find lots of neat grungy, papery designs.

Part of Web Design Week

This week our sister site ThemeForest launched a whole new category of items to sell that are particularly relevant to PSDTUTS readers - namely Photoshop Templates. The new category means you can now design and sell Photoshop designs, as well as regular Web Templates and WordPress themes to earn a side or even full income. And on the flip side if you're coming up short on inspiration, you can get a kickstart by grabbing a PSD design from ThemeForest. So to give the new category the launch it deserves, all this week I'll be bringing you articles and tutorials on web design as part of our PSDTUTS Web Design Week.

Keep reading with more great tutorials and articles!

Enjoy this Post?

We'd love your vote!

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

Frederik December 4th

Lovely to see something from you again Collis, hoping for more in the near future. Especially the last two text effects you promised!
( Reply )
BroOf December 4th

YEA! Thats a really nice theme!
( Reply )
lisa December 4th

Really nice. Great layout.
( Reply )
Joel December 4th

Awesome,
Now all we need is a site build over at nettuts
( Reply )
OpenSourceHunter December 4th

Another great tut this week on PSDTUTS……….
greetz
http://www.opensourcehunter.com
( Reply )
Nim December 4th

Wooooow
Is that cool or what!
I can not wait to start the tutorial.
Many Thanks Collis.
( Reply )
Ryan Hicks December 4th

nice design; i just don’t know if it really looks like paper that much heh.
( Reply )
BogDinamita December 4th

boy do you rock
( Reply )
M. December 4th

Great tutorial. It’s nice seeing a good-looking final outcome.
( Reply )
Craigsnedeker December 4th

Awesome!!!!!
( Reply )
Justin December 4th

@Frederik, he thinks we forgot about those. LOL!
( Reply )
Collis December 4th

hehe @Justin and @Fredrick – I haven’t forgotten! I’ll be finishing those ….. one day
But seriously I’m hoping to do them in January when i get back from holidays and work is quiet! I hope!
( Reply )
eMeRiKa December 4th

Really nice !!!
( Reply )
Bryan Grajales December 4th

Ummm Collis.. isnt this theme in themeforest too?
under the new category of psd?
Soo I guess it’s losing money because the files are downloable for Plus Members right?
So i guess it’s losing Money.. but well… if u can download it here… Mad cool! =]
( Reply )
Alvaro December 4th

I like the clean grungy style of this one, very inspirational…
( Reply )
Mabuc December 4th

Nice work again collis, I like grungy style website.
( Reply )
Evan Riley December 4th

Pretty darn good. nice job collis
( Reply )
b00m December 4th

I like the layout design
( Reply )
Liam McKay December 4th

Wow, I absolutely love this design, truly amazing work. A great addition to the web design week, thanks for the shout out.
( Reply )
Chris Robinson December 4th

diggin it!
( Reply )
Josh Drake December 4th

Nice template! You should name this tutorial YAGPTT (Yet Another Grunge Paper Template Tutorial).
( Reply )
Adrian December 4th

*whistles slowly. Impressive work man. I’m almost ready to sign up as a plus member…=)
( Reply )
Benn Wolfe December 4th

Amazing two tutorials in one. Each was fabulous but in combination I can barely explain how much I liked your post.
( Reply )
curtis allen December 4th

great job
( Reply )
Vincent December 4th

Wonderfully explained and beautiful result!
( Reply )
Dan December 4th

This design is great and the steps for the background were also good. I always love seeing how abstract filters create some great looking results.
( Reply )
fesh December 4th

Very high quality tutorial!
( Reply )
mike December 4th

what are the two effects that were promised? you’ve made me curious.
( Reply )
Jhay December 4th

Awesome!
( Reply )
Kuldar Kalvik December 4th

Oh, lovely week.. : )
( Reply )
insic December 4th

freakin awesome. i love it. you do a gob job as always collis
( Reply )
1. Dj xxx December 3rd
  
  yah it,s all good .
  and u also beautifull
  ( Reply )
brandonroach December 4th

Very nice
( Reply )
Steve Rynk December 4th

This week is the best in my life !
I love PSDTUTS, especially collis
( Reply )
Julien L December 4th

That is very impressive ! I like the final layout !
( Reply )
MiroARRR December 4th

Simple and efficient as usual Collis. Ty
( Reply )
Ernest Ojeh December 4th

wow!
( Reply )
Brendan December 4th

Great Layout!!
( Reply )
Dave December 4th

How do you keep putting out should quality Designs… Maybe i am Just too critical of my own . Great Tutorial
( Reply )
Ben van de Sande December 4th

This is absolute gold. You make it look so simple.
( Reply )
Jeroen December 4th

WOW! I love this grunge looky website! Good Job!
( Reply )
perde December 4th

What i most like was that the shadow effect on navigation buttons.
Thanks.
( Reply )
EdpeppeRs December 4th

GREAT JOB, man! congrats!
thx a lot! ^^
( Reply )
macias December 4th

yee.. a lot of good work !….i have to start to do this week-tuts finally
( Reply )
Hasanga Abeyaratne December 4th

Hi all this is my first comment here..
Nice tut Collis
All are Grate web sites! Lots of useful stuff.
That second blog post in the final PSD design, the image say’s “INSPIRE”…
Is that the next web site that envato gonna launch? seems like a css gallery Hahaha…
Thanks all
( Reply )
Rijalul Fikri December 5th

Love to see collis write tutorials again. I love all his tuts.
( Reply )
costermonger December 5th

pretty good, pretty quick
( Reply )
Collin Brady December 5th

That came together very nicely!
( Reply )
Ani December 5th

The demands for more tutorials seem to of been taken into account. Keep ‘em coming guys! Put the tuts back into PSDTUTS.
( Reply )
Thomas December 5th

so nice mm aplause
( Reply )
Zach LeBar December 5th

truly inspiring collis
( Reply )
Ariful Alam Khan December 5th

That’s great. Thank you collis
( Reply )
Wes D December 5th

Collis…I love your style and your insight. Thank you again for what you do!
( Reply )
puffgirl December 5th

thats fantastic!!!
( Reply )
Fabryz December 5th

Awesome =D
( Reply )
Kai December 5th

One of the best tutorial! Thanks a lot!
( Reply )
Dan December 5th

Crazy good, Collis.
One criticism: not enough exclamation points!
( Reply )
Danish Jalbani December 5th

Awsome
( Reply )
Dan December 5th

Really nice. Looks better than lots of the WOOD backgrounds that are popular. I love that theme.
( Reply )
custom web design December 5th

Custom Web design tutorial is awesome.
thank you.
sandy
Custom Web Design
( Reply )
Alex December 5th

looks awesome thanks for the tut
( Reply )
Joefrey Mahusay December 5th

Thanks a lot for this tut collis!…Love it! Surely, Im gonna by this at themeforest!
( Reply )
Ignas December 5th

Yeah! I like this one!
( Reply )
max December 5th

lovely tutorail collis – bookmarked it
as always – you rock !
( Reply )
Aaron December 5th

Simply yet so effective, thanks for the tutorial. I’m following your blog now, cheers!
( Reply )
ThinkSoJoE December 5th

thanks for this. That overlapping navbar was actually easier to figure out than I thought it would be. In fact, I went about it all wrong to begin with and realized how easy it was after trying all sorts of crazy things.
( Reply )
AFRIX December 5th

looks to simple for me
http://afrix99.deviantart.com/
( Reply )
Alec December 5th

Collis’ just great! Love your tuts!
( Reply )
doug December 6th

yeah this is great, really like the original structure/layout.
( Reply )
steph December 6th

awesome! I love the clean and grungy look.
( Reply )
Buzzness December 6th

Very Useful TUT!, I will use, Happy
( Reply )
JerOpp December 6th

love it…some useful ideas for my website!
Thank you very much Collin…your tutorials get better every time.
( Reply )
Matt December 6th

Awesome. Awesome!
( Reply )
Peter Schaefer December 7th

This is beautiful! I really enjoyed your paper textures. We have taken a slightly different approach with our website that also relies on paper texture. Take a look: http://www.lautusdesign.com.
Please let us know what you think!
( Reply )
psaddict December 8th

Added to http://www.psaddict.com
( Reply )
BizarreRod December 8th

cool… by the way, could you tell me the fonts you used please??
( Reply )
aleso December 8th

wow this is amazing man.
http://3dand2dmag.wordpress.com/
( Reply )
Chris Raymond December 9th

lovely work and good explanation of how to get the grunge look–but wonder how you would write html/css for that “torn paper” background so that it expands vertically to encompass long blocks of text. Assume you’d have to do “repeat-y” in some fashion, but wonder how repeating that edge vertically is going to look visually.
( Reply )
Corey Orama December 9th

I had a ton of fun working through this Tutorial! This is the cleanest grunge design I’ve seen so far. Most of the times they seem too “messy” for me. Going to be going through the rest of the tutorials shortly. Thanks Collis.
( Reply )
Brandon December 10th

Collis,
You do great work. Very inspirational, the best part is at the end you say, wow why didn’t I think of that.
I have one question, where do you get all your grid layouts? I want to make a repository for myself but I have searched and have not found a collection.
Thanks!
( Reply )
ali December 12th

had I a credit card,I would buy you a coffee .
thanks for your great work man
( Reply )
fropsware December 14th

smart tutorial, thanks
( Reply )
submyt.com December 14th

great stuff as my thinking for wordpress template designers
( Reply )
Catracho-B December 19th

Thank Your for the tutorial!!!! wanna do some web desings so this will help a lot!!
( Reply )
Jeff December 19th

Great design Collis! When you convert a non-patterned texture like this, what do you do for the far right-side and bottom when the browser window is expanded? Do you generally fade it to white, or do you take a piece of the texture and repeat it? I tried repeating the background texture, but it looked choppy because of the Clouds and Palette Knife.
Any help you can give me would be greatly appreciated.
Thanks!
Jeff.
( Reply )
Brad December 20th

I know it’s tough keeping up with people’s comments, but you really should make an attempt to communicate personally with your audience POST your posting. I hope to see something… fresh in the future from you. Good luck coming up with new and worthwhile content, and not re-inventing the wheel over and over (like this post). You’re a decent designer and I’m sure you’ll come up with something.
( Reply )
Oscar December 24th

This must be the best tutorial I ever followed. Great work.
( Reply )
IndarknesS December 28th

Oh! it’s a great tutorial
thx a lot !
( Reply )
tl7 December 28th

Great tutorial , i also liked the way you wrote it
( Reply )
Jason December 30th

I followed this tutorial step by step and learned some great tips in the process. Thanks for posting this and all your other tutorials! I use your site as my #1 resource for gaining new skills.
Thank you so very much!
( Reply )
kurrent January 3rd

great tutorial, one of the best of the year
( Reply )
dsignz media January 8th

Thanks for Very Good Tutorial!!!
( Reply )
chris January 13th

wow Sugoii
and its easy to follow thanks for posting
( Reply )
Juan Carlos January 16th

escelente tuto
( Reply )
brasiu January 19th

Really amazing tutorial..also if i need a little help on step 29..
( Reply )
Eric Thoolen January 20th

Nice one!
( Reply )
David January 22nd

Thanks for the tutorial, I just completed it and I am happy with the result. I will say, the tabs are hard, but other then that it was a breeze.
Now I have to cut it up and see if I can make a site out of it. On to NETTUTS.
Thanks
( Reply )
Colin January 27th

I’m completely new to CS4 (Came from Fireworks 8), and for the life of me I can’t figure out how to change the hexadecimal color-code inside Photoshop to do this tutorial! Can someone help me out? Thanks.
( Reply )
Nick January 28th

Colin:
You need to click on the foreground/background color in the left sidebar (which brings up the color mixer). Then at the bottom right hand side of the color mixer, you should see the hex code (which you can change).
ps the CSS menu isn’t that hard to code in…O.o
( Reply )
hm February 2nd

What the !@#^%@!#
at step 4 and 5
very very confusing it doesn’t work like you say
( Reply )
kiranbloger February 5th

Thanks for the Tutorial
( Reply )
Tanaka13 - Créations du Net February 8th

A great job, high quality final outcome! thanks for sharing.
( Reply )
Rosey February 10th

I cant get over just how much this site and this tutorial rocks!!!!!!! Thanks so much.
( Reply )
GazDenA February 11th

Great tutorial, very nice.
Any chance of a follow up on NETTUTS so we can get some on advice on converting to HTML/CSS??? Please? Pretty please?
( Reply )
prince pal February 12th

hey nice.. grungy template…
( Reply )
Web Mahsülleri Ofisi February 14th

good tutorial.thanks.
( Reply )
vsync February 15th

Sweeeet!!!
This is perfection
( Reply )
tasarhane February 17th

really nice theme. good tutorial..
( Reply )
suman February 23rd

hi there
really nice stuff and really like the concept. this really helps me to create my design in different way. i would also like to request if you can sliced this design for us specially in video tutorials or some same kind of design because sometime i always wonder how to start slice this kind of design. so this kind of tutorials really help designer like us to get more depth in slicing this kind of design.
many thanks
( Reply )
Amir February 24th

Great job, nicely explained.
Thanks a lot.
( Reply )
valid February 24th

I’m with you, suman. I’m stuck wondering how I’d slice out the navigation tabs in order to make a list menu appear properly.
Anyone?
( Reply )
HirenModi February 25th

Superb tut, thank u dude.
( Reply )
Jamie Allsop March 9th

Its really impressive how you managed to make a paper texture in Photoshop. Adding textures into your designs can really make a difference to the overall feel of the design. Normally I would scan in scrunched up paper, leaves or anything that has a texture and then using Photoshop, I would add filters and change the hue / saturation and by doing this you can get some really cool effects. I am going to try and make effects just by using Photoshop next time I am going to use textures in my design.
( Reply )
Shjavo March 9th

cool nice job …
for me too rsrsrs
( Reply )
ortak miras March 14th

very good, thanks
( Reply )
bob dobalina March 19th

I would love to see how to slice this up for html
( Reply )
gobley March 22nd

well, this is a great design tutorial but i can’t really use it because i don’t know how to slice it up and code it. it would be nice….
( Reply )
Behnam March 23rd

REally great! I-Enjoyed it indeed
Keep up the good work
( Reply )
R. Shawn April 4th

Thanks for the tutorial Collis. Definitely a big help to an up and comer in the web design game…..
( Reply )
Sankar April 9th

Nice one. I’m becoming a fan of PSD tuts
( Reply )
fboschman April 10th

Really great tutorial, I am a real fan!!!!
( Reply )
Brad April 14th

Dang it, you make it look so easy. Beautiful
( Reply )
Nat April 22nd

Do you have a tut to convert this to a wordpress theme?
or is it in TutsPlus?
( Reply )
Carl - Web Site Design Instructor April 23rd

I have not done a good Photoshop Tutorial for a while, been concentrating on getting up to speed with jQuery
This one was a pleasure to do however Thanks!
( Reply )
Anon April 27th

Wonderful! You really made it easy to do. A tutorial on how to put it into html/css would make it even better. someone take on the challenge!
( Reply )
sergi April 29th

very impressive! thanks.
( Reply )
photo retouching April 29th

I really like the super pro looking website you created-nice tut!
( Reply )
da da ツ April 29th

Thanks you very much for the great tutorial.
I have learn a lot.
Very Appreciate it
=)
keep up the good works
Two Thumbs for you
( Reply )
Nathan N May 13th

Wow this is really nice! I love how clean and light the colour of the paper texture is.
( Reply )
sanath May 18th

this is nice site,to learn. thank you very much..
( Reply )
Tomas Matejka May 21st

I love this one, thanks for a tip…
( Reply )
Sakis May 22nd

thank you for this great tutorial
( Reply )
nilesh May 29th

Great tutorials!!!! i learned a lot of things from this tutotials
Thanks a lot….
( Reply )
Alex xu May 29th

This is a useful tutorial!thank you!!!
( Reply )
Alex June 3rd

Yeah, perfect!
( Reply )
noelmcg June 8th

cheers, great tutorial
( Reply )
Tim June 9th

Awesome tutorial indeed, strange thing though, a couple of days ago I stumbled upon this website: http://www.flinmedia.com which is remarkable similar to this one, at first I though wow nice site, then I see this tutorial, maybe you should look this think up a bit, no signature or nothing and you can see it’s a total rip-off.
Sincerely yours, Tim.
( Reply )
yaper June 12th

I like the subtle details on the tabs and etc.
nice work.
( Reply )
Myck June 17th

Cool Design, I’ll try to make just like that design
( Reply )
RK June 18th

I clicked on the link just expecting to review another method for making a paper texture and got perhaps the best template walk through I’ve ever seen!
Simply amazing work – thanks for the detailed explanations!
Tim: It’s awfully hard to prevent people from copying the template when you give such a thorough step-by-step of exactly what was done to create it though.
I thought that trying the tutorial out for yourself was the point.
( Reply )
Glorious July 18th

Hi there,
I think it’s a very good tutorial to learn from.
But do someone knows how to slice this kind of designs? Or knows a tutorial for this?
I would appreciate that.
( Reply )
Diosanne July 20th

wow!…its very cool… i like the tab menu you did….and the body created from the paper texture.
( Reply )
PelFusion July 26th

yes 43 easy steps !
( Reply )
jsk July 28th

Thanx Collis, really useful, but me too, I wouldn’t know how to slice up this kind of design.
( Reply )
Sumeet Chawla August 1st

Very detailed tutorial! Anyone with 10% knowledge of photoshop could also easily follow it One would enjoy coding this design…. Thanks.. keep up the good work..
( Reply )
doruman August 5th

Great work, impressive tutorial, congratulations! And many thanks for so detailed explanations.
@doruman_
( Reply )
xerezajulia August 13th

i relly lyk this one., plus your tutorials rock.! :]]
thanks by the way.! kip ‘8 up.!
( Reply )
mushroom website design August 17th

Very impressive. Who needs to buy paper when you can make it yourself Great tutorial.
( Reply )
Phil August 20th

The nav tabs look awesome!
( Reply )
coco August 25th

Good luck, this is almost the best simple, good and looking tutorial for this kind of area i ever saw’d.
( Reply )
kalibrasyon August 26th

Thanks.! Really nice..
( Reply )
ingilizce kursu August 27th

Thanks for share
( Reply )
perde August 28th

a good site. Thank you.
( Reply )
perde August 31st

Amazing two tutorials in one. Eachh was fabulous but in combination I can barely explain how much I liked your post.
( Reply )
zhouheng September 5th

well done
( Reply )
Oscar September 7th

Wow! That’s impressive! I guess it just comes down to practice, because seeing the techniques really opens my eyes to designing a site in photoshop. I’ve been struggling with it for over a few days to get a decent comp going. I’m quite rusty with Photoshop so it’s taking longer than expected, but this is a great tutorial and a great source of inspiration.
Thanks for bringing up my hopes! Keep them coming!
( Reply )
Mike Croteau September 15th

Awesome! Thank you… helped me jumpstart a project that I have had designers block on. Thanks!
( Reply )
Yadav September 16th

Nice posting this is helpful for me, thanks
( Reply )
chriserge September 16th

Oh ohohoh!! You’re good, real good
( Reply )
tül perde September 23rd

Soo I guess it’s losing money because the files are downloable for Plus Members right?
( Reply )
中国家居设备网 September 25th

that’s really great thx
( Reply )
Jenbob September 26th

it’s very good,i like it very much.thank you for your design.
( Reply )
Danny September 30th

WOW! Impressive, that is really good. I knew this site had great resources, but didn’t know there were tutorials on ‘Web Design’ layouts.
Looks like I’ll be coming here to steal some tips…AHEM!! I mean to learn from the best ;D
CHEERS
( Reply )
Kuldeep September 30th

Great Work! Will Definitley try this!
Namaste!
( Reply )
iç mimarlık October 5th

thanks for article and share
( Reply )
masaj October 13th

Thanks for article and share. thank you..
( Reply )
Sumeet Chawla October 16th

Hi Collois,
In the tutorial, while creating the over lapping tabs you have mentioned that coding them into html would be a bit tricky.. So I tried it out and after succeeding I wrote a tutorial on how to code it May be you can take a look at it?
http://www.code-pal.com/how-to-code-an-overlapping-tabbed-main-menu/
( Reply )
haber October 23rd

its very nice projected.
( Reply )
pokkisam October 31st

Cool design…It’s not easy
( Reply )
perde modelleri November 4th

Ummm Collis.. isnt this theme in themeforest too?
( Reply )
Teknoloji November 8th

Thank for articles
( Reply )
Marc Mulvaney November 9th

Thanks you guys are awesome! I made a site out of it for a party coming up in a few weeks. http://www.i-love-rock.de
( Reply )
perde modelleri November 12th

I followed this tutorial step by step and learned some great tips in the process.
( Reply )
Xcellence IT November 14th

wow.. nice tutorial
I’m trying this.. to do it myself….
thanks for this great stuff….
( Reply )
Genduk November 20th

It’s so easy to follow this tutorial.
Thank you for taking the time to post it.
( Reply )
cam filmi November 21st

Gerçekten çok güzel bir paylaşım olmuş . Emeği geçenlerin ellerine sağlık.. ( Thansk for article and share )
( Reply )
poliüretan merdane kaplama November 21st

Thanks for share. – Emeği geçenlerin ellerine sağlık gerçekten çok güzel bir paylaşım olmus. Decamını bekleriz..
( Reply )
toefl kursu ankara November 23rd

Photshop dersleri için çok teşekkürler. Çok faydalı oldu benim için. Hazırlayan ve bizlere sunanlara çok teşekkür ederim. | very good. Photshop show
( Reply )
plastik kart November 29th

muhteşem bi anlatım olmuş. Diğer çalışmalarınıza sitenizde görmek isterim.(magnificent expression was bi. Others would like to see your work on your site. )
( Reply )
baozai November 29th

i like the design so much.AND thank you share the photoshop show!!!
( Reply )
senao December 1st

Thank you to those who labor in the article found. was very useful article for me. thank you
( Reply )
Adhir Pandit December 1st

Awesome…
Thanks a ton for posting this tutorial…
( Reply )
Perde Modelleri December 5th

This is beautiful! I really enjoyed your paper textures. We have taken a slightly different approach with our website that also relies on paper texture.
( Reply )
telesis December 8th

Was a very good expression. Thank you very much due to the information you provide. The expression was very enlightening picture.
( Reply )
Gustavo December 8th

very nice!!!!!
( Reply )
Web Design Company Chennai December 10th

I read your blog very impressed seen this kind of important information’s. Really am interested to back to your blog again to gather some more information’s.
Logo Designer Chennai
( Reply )
Kombi Arıza December 11th

very nice. Thanks for article and share.
( Reply )
perde December 17th

2010 curtain perde modelleri
( Reply )
Gregor Colnik December 23rd

Great tutorial, thanks for the lession
( Reply )
um osaama December 28th

its v gooooood ,
thanks for the lession
( Reply )
nisa January 12th

thank you..
( Reply )
bakerstreet January 19th

very gooooooooooooood- thank you
( Reply )
Daen January 24th

How do I turn the menu in a css menu using these 2 images for the tabs?
I want the active tab to stay dark gray but how do i get the proper ?
Pleas help me out
dean.lambaerts@gmail.com
( Reply )
Dean January 25th

How can I turn the menu in a working overlapping menu by using css?
Can some one help me…
I know I need 2 images fot he home button (1st tab)
and 2 images for the rest of the buttons wich have shadow (tab 2 – …)
Please help me
dean.lambaerts@gmail.com
( Reply )
afino January 27th

Simply and tastefully! Respect!
( Reply )
perde city February 1st

This design is great and the steps for the background were also good.
( Reply )
perde February 3rd

good tutorial tanks
( Reply )
Infographiste February 3rd

Gret Job thank you for taking doing this great and very helpful tuto, page bookmarked
( Reply )