Create a realistic torn paper effect with coffee stains in Photoshop

Richie

Torn paper can be a key element in accomplishing a authentic collage look. With the help of Photoshop’s Brush tool, we can practically achieve anything. There are not much tutorials on the web which tells you how to create the torn paper effect. A important aspect in creating elements in design is to add realism into them. There are so many instances while in web designing where there is a need to create a torn paper effect. This maybe in icons, comment section or anything like that. In this tutorial, I will show you exactly how to create such an effect with nothing but a simple knowledge in Photoshop and a couple of stock images. We will try to make it more realistic by adding shadows and coffee stains. So, let us move on :)

Step 1:

Create a new document with a slightly larger dimensions than the normal ones. I used a 500 x 500px. Using a Rectangular Shape tool, create a square as shown below. It can be of any color. I used a chocolate brown color.

Step 2:

Using the Lasso Tool, create a selection as shown below:

Step 3:

Now, Press Delete to delete the selected part. The image should look something like this:

Step 4:

Now, using the Lasso Tool, follow the two previous steps on the other 3 sides as well.

The final image after all the 4 sides having been cut, will look something like this :

Step 5:

Now, Select the Brush Tool and press F5 on the keyboard to bring up the Brush Options. Use the brush numbered ’17′ and apply the following settings:

Step 6:

Now, we have a perfect brush. Create a New layer, by either clicking on the New layer icon in the layer’s palette or pressing CTRL + SHIFT + N.

Now, using this brush and the foreground color set to the initial ‘brown’ color. Brush along the edges continuously as described below:

Step 7:

Now, Use the same technique to create the edges (torn effect) on all the other sides as well. The final image should look something like this:

Step 8 :

Now, Merge the two layers, (the square layer and the recently brushed layer), Name it ‘Paper’ and double click on the layer and apply pattern overlay with the following settings:

Step 9:

Now, Duplicate the ‘paper’ layer and apply a color overlay of Black and name it ‘Shadow’. Use the image below for reference: I added a wooden floor stock image just to give a better effect :)

Step 10:

Now, Place the ‘Shadow’ Layer below the ‘Paper’ Layer and Go to Edit>Transform>Warp (this is for the ‘Shadow’ layer and not the ‘paper’ layer)

Step 11:

Now, Apply a warp effect at the bottom edge as shown below. This is to give the effect of a folding/curling for the paper.

Step 12 :

Let us apply a Blur effect. Go to Filter>Blur>Guassian Blur with settings as shown below. You can vary it as desired to get a pleasant effect.

Step 13:

As you can see, the shadow appears irregularly. So, we need to remove them. Using the Warp tool, we can bend it however we want. So, I did a little twisting to the image to make sure, the shadow appeared where it is supposed to. This is to bring more realism to the image.

This is how the image looks at this point of time:

Step 14:

Now, we need some paper texture to create the crumpled effect. Grab this texture from SXC : paper texture Download it and paste it on the document above all the other layers :

Step 15:

Now, CTRL + Click on the ‘Paper’ Layer to make the boundary selection visible.
Select the texture layer and press SHIFT + CTRL + I to invert the selection.
Press Delete to delete the unwanted area.

Follow the images below for reference

Step 16:

Now, set the blending mode to ‘Multiply’

Step 17:

Now, let us add more detail. Download this Parchment texture from SXC and paste it on the document above all the other layers.

Step 18:

Now, Add a clipping mask by pressing ALT + Click between the parchment layer and the texture layer. Use the image below for reference.

Step 19:

Let us now add some coffee stains. Use a dark brown color as foreground. Download the COFFEE STAIN Brushes here and Create a New layer and add a few brush strokes.

The image should look somewhat similar to this. Delete the part of the brush stokes which do not belong to the paper area.

Thats it folks. We learned how to create a realistic torn paper effect and added a few coffee stains on it. Now, you can make yourself icons by just placing them on the paper and setting the mode to ‘Hard Light’ I used the Sketchy Icons created by the talented illustrator and one of my favorite designers, Chris Spooner. You can get them here

Here is the end result:

Well, feel free to make your own icons. You can download the PSD i created and start adding your text/image.

If you think, the article was good, why don’t you subscribe to them and get them whenever it is ready :) RSS Feed or you can follow me on twitter : @richbugger