Create a realistic torn paper effect with coffee stains in Photoshop
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 :)
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.
Using the Lasso Tool, create a selection as shown below:
Now, Press Delete to delete the selected part. The image should look something like this:
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 :
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:
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:
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:
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 :)
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)
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.
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:
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 :
- 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
Now, set the blending mode to ‘Multiply’
Now, let us add more detail. Download this Parchment texture from SXC and paste it on the document above all the other layers.
Now, Add a clipping mask by pressing ALT + Click between the parchment layer and the texture layer. Use the image below for reference.
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. I added an icon so that the final look becomes more comprehensible :)
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’.
Well, feel free to make your own icons. You can download the PSD i created and start adding your text/image.