How to Create a Torn Paper Background for a Web Page in Photoshop

Ever want to change your traditional web page background to a custom one? How about a paper texture with torn edges? It’s a great option if you’re sharing a letter or note with readers on your web page. Use torn paper as a background of your web page.

You can specify the paper’s color and customize the tears around the edges of your page in Photoshop.


Step 1. Select “File” and “New” in Photoshop. In the New dialog box, choose the dimensions of your page and click “OK.”

Step 2. Click the “Create a new layer” button in the Layers palette to insert a new layer.

Step 3. Click the “Color Picker (Foreground Color)” button. Choose a foreground color for the paper in the dialog box. Click “OK.”

Change background fill setting to lighten paper.Step 4. Press “Alt” + “Backspace” to fill the canvas with the foreground color. If you want to lighten the paper a bit, select the layer in the Layers palette and reduce the “Fill” option.

Step 5. Select “Filter,” “Noise” and “Add Noise.” Change “Amount” to “15″ and “Distribution” to “Gaussian” to add texture to the paper. You can adjust these settings to customize the paper even more. Click “OK.”Add noise to change the texture of your paper.

Step 6. Select the “Eraser” tool from the Tools palette.

Step 7. Go to the Eraser options palette, located in the toolbar. Adjust the brush size to 50 or the setting you want to use.

Step 8. Click the “Brushes” tab, located in the upper right pane. This expands its options.

Step 9. Select the “Chalk 23 pixels” brush under “Brush Tip Shape.” Set “Diameter” to the brush size you want to use.

Checkmark “Shape Dynamics,” “Scattering” and “Texture” on the left.

Go to the Scattering tab. Checkmark “Both Axes” and set “Scatter” to 60%. Go to the Texture tab and checkmark “Invert” and set “Mode” to “Color Burn.”

Step 10. Go to the canvas and click around the paper to erase its edges.

4 Comments to “How to Create a Torn Paper Background for a Web Page in Photoshop”

  • Adrienne October 21, 2011 at 11:02 AM

    Hi Allyson,

    Wow, now that’s really cool. I did try to do a collage that you recommended in your last post but Elements isn’t set up the same way so it took me a lot longer to figure it out then I had hoped to spend on that project.

    I think in nature though a lot of it is the same. I’ve always wanted to know how to do this so I appreciate you taking us through the steps. Watch out, I might become a pro at this. Okay, maybe not a pro but at least understand how to create these now. I can’t wait to try this one out.

    Thanks again and have a great day!


    • allyson October 22, 2011 at 9:11 AM

      Thank you, Adrienne! Experimenting definitely helps. I’m so excited that you’re trying out the steps. Sorry it took more time than planned to complete the collage in Elements. Too bad Photoshop and Elements don’t work exactly the same. It’s wonderful that you figured out the steps although they were different. Hope the project turned out well for you.

      Thanks as always for stopping by…

      Hope you’re having an enjoyable weekend!!!

  • Rachel Lavern October 27, 2011 at 12:21 AM

    Thanks for these instructions Allyson. It should be fun to give this a try. I recently downloaded a trial of Photoshop so I have time to play with it to decide if it is user-friendly enough for me to purchase.

    • allyson October 28, 2011 at 1:21 AM

      Hi, Rachel. I appreciate you stopping by. I’m glad to hear you’ve downloaded a trial version of Photoshop. It’s a fun program to play with and has lots of amazing features! I’ll love to hear how everything goes when you get a chance to try out these instructions.

      See you soon and take care.


Post comment

CommentLuv badge