Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Realistic Wrinkled Paper In Photoshop

Realistic Wrinkled Paper In Photoshop


What We'll Be Creating

image 1

Preparation

Create a new (Ctrl + N) document 800 x 600 pixels with a white (#ffffff) colored background. Right click your background layer and select "Layer From Background" from the menu, doing this will unlock the layer. Once the layer is unlocked add the following "Gradient Overlay".

image 2

We need a good contrasting color for our background due to the paper being white.

Creating The Paper

Select the "Rectangle Tool" (U) then drag out an appropriately sized rectangle onto your canvas.

image 3

Select the "Ellipse Tool" then left click on the rectangles vector mask in the layers window. Once clicked select "Subtract From Shape Area" from the top menu.

image 4

Drag out a small ellipse at the top of the square, the ellipse should subtract itself from the rectangle leaving a simple hole.

image 5

Now select the "Rectangle Tool" (U) and drag out a small rectangle at the top of the ellipse, creating like a keyhole shape but upside down.

image 6

image 7

Repeat the steps above all long the top edge of the rectangle.

image 8

image 9

Label your layer "Paper" then add a layer mask. Now select the "Brush Tool" (B), use a medium sized brush of your choice then with the color black #000000 start to color in the edges of the paper.

image 10

were now going to warp our paper using the warp tool, make sure your "Paper" layer is selected in the layers window then go to "Edit - Transform - Warp". When the warp tool is applied to your paper, simply just make tweaks here and there be careful not to overly distort the paper.

image 11

Adding The Lines To The Paper

Incorporated in photoshop are some ready made patterns in which will fit perfectly for a paper. Double click your paper layer and select "Pattern Overlay" layer style. Once the "Pattern Overlay" has been selected open up the patterns window (2), then click the top right arrow in the corner (3). In the fly out menu select "Color Paper", then finally select the lined paper from the list of paper patterns (5).

image 12

image 13

Adding The Wrinkled Effect

Create a new document (Ctrl + N) 800 x 600 pixels with a transparent background. Reset your background and foreground colors to black and white then select the "Gradient Tool" (G) with the following settings.

image 14

Once you've applied the settings randomly drag numerous gradients over the canvas. You will have a completely different set of wrinkles everytime you do this so don't worry if your image looks nothing like mine.

image 15

Now go to "Filter - Stylize - Emboss".

image 16

image 17

Select your whole canvas (Ctrl + A) then copy the contents to the clipboard (Ctrl + C). Head back to your original canvas then load a selection around your paper layer.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

Once the selection has been loaded go to "Edit - Paste Into" if your using Photohop CS5 go to "Edit - Paste Special - Paste Into". Your wrinkles should now appear inside your paper.

image 18

Now load a selection around your "Layer Mask" on your "Paper Layer", once the selection has been loaded go to "Select - Inverse" then hit the delete key.

image 19

Finally set your wrinkles layers blend mode to "Hard Light", you should have something like this.

image 20

Creating The Paper Shadow

Right click the mask which was applied to your wrinkles layer and select "Apply Layer Mask". Now duplicate the layer and drag it underneath your paper layer, rename the layer "Shadow" then add a black #000000 "Color Overlay". To make the shadow abit more realistic were going to blur it a little, so go ahead and select "Filter - Blur - Guassian Blur", blur the shadow layer by around 2px.

image 21

Add a layer mask to your shadow layer then using the same technique as we did for our paper brush away parts of the shadow using the "Brush Tool" (B).

image 22

Adding The Pencil Writing

For the writing on the paper you need a decent font which is going to look like the text has been written, I'm using a font called "Segoe Script". Add a couple of lines of text to your paper using the color #abaaab.

image 23

Conclusion

That's how easy it is, you could take your paper further and add a few scribbles, doodles or even a cork board like my result. Have a play around and see what you can come up with, don't forget to share you results right here on photoshop plus.

image 24



About the Author:

Click to Visit Author's Website Hi! Im Richard Carpenter and Im a Freelance Web and Graphics Designer from England. I am also a Regular Blogger, Tutorial Writer, and owner of Photoshop Plus. Photoshop Plus is his 2nd personal blog about all things photoshop. On a weekly basis he write tutorials, articles and freebies.
Author's URL: photoshop.plus
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: