A Scrap Of Notebook Paper

A Scrap Of Notebook Paper

In this Photoshop tutorial we'll be creating a scrap of notepad paper like the ones you've probably seen used in popular websites and blogs. Throughout the lesson I'll also be discussing the things I take into consideration when preparing a graphic like this for the web.

Step 1

Lets begin by opening a new document in Photoshop by selecting File>New from the Main Menu. My file size is 540x300px at 72ppi for those of you following along at home. Because our notepad paper will be white, lets begin by changing the document’s background color.

With the new document open, click on the foreground swatch in the Tools palette to bring up the color picker. Pick a background color that you like and that will be easy to see the white paper against (I chose #e9dfb8, which you can type in the box at the bottom of the color picker). Now simply press Option-Delete (PC: Alt-Backspace) to fill the Background layer with this new color.

Step 2

Lets go ahead and assume that we’re going to use this scrap paper to hold a note to our readers in the sidebar of our imaginary blog. The most important thing we’ll need to know is the actual width of the sidebar in question. Since I’m a fan of running ads in my sidebar and my ad size of choice is 250px wide, and lets say that we want to have 10px on each side of that ad worth of padding, our sidebar width is going to be a total of 270px. Lets also say that we’re going to want to add a nice little drop shadow to our paper that will be a maximum of 5px… this means that our actual paper will need to be 265px wide. Whew… math lesson complete.

Create a new layer by clicking the Create New Layer icon at the bottom of your layers palette. (If the Layers palette isn’t visible, choose Window>Layers from the Main Menu.) Then double-click on the new layer’s name in the Layers palette and rename it Paper.

Step 3

Now it’s time to create the initial shape of the paper. If your Info palette isn’t visible, bring it up now by choosing Window>Info from the main menu (we’ll be using this in just a second)

Choose the Rectangular Marquee tool from the Tools palette by pressing the M key, then drag out a rectangular selection onto the stage. Watch the Info palette we just opened as you create the selection to make sure your selection is exactly 265px wide. The height of the selection just needs to be tall enough for the note, so make your own decision here (mine is 250px tall).

Step 4

Press the D key to reset the foreground and background colors to black and white respectively, then simply press Command-Delete (PC: Ctrl-Backspace) to fill the selection with the background color (white). Press Command-D (PC: Ctrl-D) to deselect.

Step 5

Now we’re going to create the holes and tear-lines at the top of the paper using a combination of a circular and rectangular selection at the same time. I’ll try to go slowly here so even the noobs will get this.

You should still have the Rectangular Marquee tool selected, but we want to start by creating a circle, not a square, so you can either click and hold your mouse on the Rectangular Marquee tool to reveal the fly out menu where you can choose the Elliptical Marquee tool, or you can simply press the keyboard shortcut Shift-M (this shortcut toggles between the Rectangular and Elliptical Marquee tools when you have the Marquee tool selected in the Tools bar).

Step 6

Again watching the Info palette to make sure your selection size is correct, click and drag a 12x12px selection onto the stage. Remember that by holding down the Shift key while you drag will constrain the proportions to a perfect circle. Once the selection is made, drag it into position where you think the line of holes should live on the top of your paper. As a rough guide, it should be about as far from the edge as it is around (approximately 12 px from the edge).

At this point in the process it may will help to zoom in on your selection by pressing Command-+ (PC: Ctrl-+).

Step 7

Now that you’ve got the hole selection made, it’s time to add a rectangular selection to the top of it to represent the line where the paper tore through at the edge.

Switch back to the Rectangular Marquee tool (remember Shift-M), hold down the Shift key (this lets Photoshop know you wish to add to the current selection) and click and drag a tall narrow selection from the top of the circle upward.

If you need to move your rectangle around after you begin to create it, simply press down the space bar which will allow you to move the selection around while you’ve still got your mouse button pressed.

Step 8

All that’s left now is to remove the area inside the selection, move it to the right a few spaces and do it again.

Start by pressing the Delete (PC: Backspace) key to delete the white area inside the selection, then move the selection to the right 20px by holding down the Shift key and pressing the Right Arrow key twice. Holding the shift key allows you to move the selection 10px at a time instead of just 1. Press Delete (PC: Backspace) again, and repeat the process until all the holes are made, then press Command-D (PC: Ctrl-D) to deselect.

Step 9

Before we go any further, lets add a small shadow to the paper to give the document a bit of depth. Control-Click (PC: Right-Click) on the Paper layer in the Layers palette and choose Blending Options from the menu to bring up the Layer Styles dialog box.

From the list of styles on the left, click on the words Drop Shadow (be sure to click on the words and not just the checkbox, otherwise you won’t see the options for the Drop Shadow layer style, it will just apply the default settings). Set the Drop Shadow to match my example below and click OK to commit the style to the layer.

Step 10

Now we’re ready to add some lines to the paper. Create a new layer (just like we did in Step 2) and name it Blue Lines. Click on the foreground color swatch in the Tools palette and change the color to a nice blue like #97c7df.

From the Rectangular Marquee tool fly out menu, choose the Single Row Marquee tool (the one that looks like a 1px horizontal selection). Click anywhere on the stage to create a full width 1px horizontal selection, use your up and down arrow keys to get it into position for the top line and press Option-Delete (PC: Alt-Backspace) to fill it with blue. Hold down the Shift key (again so we can move the selection 10px at a time) and press the Down Arrow 3 times to move the selection down 30px then fill it with blue again and repeat until you get to the bottom of the paper. Press Command-D (PC: Ctrl-D) to deselect.

Step 11

Instead of selecting and deleting the lines that extend past the edge of the paper, we’re going to create a clipping mask that will mask the Blue Lines layer to the Paper layer.

Control-Click (PC: Right-Click) on the Blue Lines layer and choose Create Clipping Mask from the menu. You’ll know that the layer is clipped to the one below because it will now be indented with a little down-pointing arrow on it.

Step 12

Many notebooks also include a set of red lines on the left of each page, so lets add those as well. Create a new layer called Red Lines. This time we’ll be grabbing the Single Column Marquee tool from the Marquee tool fly out menu. Change your foreground color to #c74f4f and just like we did before, click on the stage to create a selection, move it into place and press Option-Delete (PC: Alt-Backspace) to fill the selection with red. Using the arrow keys (without Shift this time) move the selection 3 pixels to the left and fill it with red again, then deselect.

And just like we did with the blue lines, create a Clipping Mask for this layer as well (this will clip the layer with the Blue Lines layer to the Paper layer). Lets also lower the layer’s Opacity to around 30% to make the lines fit in a little better.

Step 13

Next we’re going to add some wrinkled paper texture to our paper by using the Brush tool. I have included the brush I’m using in the download at the end of the lesson, so if you’re playing along at home you might want to go ahead and download that now. The brush set is called WrinkledPaper.abr and once you’ve downloaded and unzipped the lesson you’ll need to install the brush by doing the following:

1) Press the B key to switch to the Brush Tool.
2) Click on the Brush thumbnail in the options bar at the top of Photoshop to open the Brushes Picker.
3) Click the little arrow at the top of the Brush Picker and choose Load Brushes from the menu.
4) Navigate to wherever you put the unzipped lesson download and select the WrinkledPaper.abr file.
5) Click OK to load the selected brush set into the brushes palette.
6) When the add/replace dialog box pops up, choose Append.

That’s it. The wrinkled paper brush is now loaded into your brushes palette and is ready to use, so continue to Step 14.

Step 14

Create a new layer in the Layers palette called Texture and add a Clipping mask to the Paper layer just like we did with the Red and Blue Lines layers.

Click on the Brush thumbnail in the Brush Options bar at the top of Photoshop (just like you did in Step 13), but this time scroll to the bottom of the brushes window and choose the last brush (which should look like a tiny rectangular piece of wrinkled paper).

Step 15

Make sure your foreground color is set to black by pressing the D key, then align the brush over the paper so that the upper left corner of the brush covers the paper as shown below.

Step 16

Click the mouse once to paint the texture onto the paper. Obviously we don’t want to see the full weight of the brush on the paper because it looks like a big black mess, so lets lower the Texture layer’s Fill opacity to 10%.

Step 17

Things are starting to look pretty nice, and we could just leave things the way they are, but lets go a little further and distress our paper even further.

Click on the Paper layer in the Layers palette to make it the working layer, then add a Layer Mask to the layer by clicking the Add Layer Mask icon at the bottom of the Layers palette (it’s the one that looks like a little circle inside a gray rectangle). By adding this layer mask, it will allow us to distress the Paper layer without actually erasing any of it’s pixels. If you’re not familiar with Layer Masks, you’ll see what I mean as we go along.

Notice that the Layer Mask is selected by default on the Paper layer (denoted by the small black brackets around it).

Step 18

You should still have the Brush tool selected, so lets go back to the Brush Picker and choose the one called Chalk 60px. Make sure you’re foreground color is still set to black. By painting on the mask with black, we can effectively hide areas of the layer without actually deleting them, which is great if you screw up because all you have to do is paint over those areas with white to bring them back.

Paint a jaggy edge along the bottom of the paper to make it look like it’s been torn. Notice that you can see the black area you painted appear in the Layer Mask thumbnail.

Step 19

You may also want to paint away little chunks of the top edge to make it look like they were torn off when the page was removed from the notebook. You can increase or decrease the size of your brush using the bracket keys [ and ]. You may want to switch to another brush if this one doesn’t suit your needs.

Step 20

The last bit of distressing we’ll do is to add a little depth to the bottom edge with a little white paint. Create a new layer at the top of the layer stack called Torn White Edges and clip it to the rest of the layers attached to the Paper layer.

Press the X key to switch white to the foreground color and using the same Chalk 60px brush, lightly brush along the bottom torn edge of the paper to give the torn edge a little more flavor. A little goes a long way here so don’t overdo it.

Step 21

Now, if I wanted to put this paper into my sidebar and use HTML to add the text, I’d simply write my CSS with a line height of 30px (since that’s how far apart the lines on the paper are), and I’d have a nice dynamic note in my sidebar. But since we’re playing with Photoshop, and since this isn’t a CSS tutorial website, lets go ahead and add some text right here in Photoshop using the Type tool.

Click on the Red Lines layer in the Layers palette so that the new text layer will appear just above it in the layer stack and it will by default be clipped with the other layers to the Paper layer. Press the T key to switch to the type tool and in the Characters palette (Window>Characters from the main menu), choose a font that you like. I chose a font called Violation which you can download for free from DaFont.com. By setting the Leading (line spacing) to 30px, the font is placed on each of the little blue lines perfectly.

Click on the canvas to set the start point for your text (don’t worry if the placement isn’t exact, you can adjust it with the Move tool when you’re done typing if needed). I also lowered the opacity of my text layer to around 75% which seemed to make it fit a little better.

Step 22

We’ve come to the end of the lesson. I hope you learned something useful along the way.

For my final image, I also added a lifted edge and custom shadow effect, you can learn how do to each of those here to!

To learn how to pull the corner off the paper, visit my Sticker Edge Peel tutorial.
To learn how to create custom shadows that add depth to your images check out the Adding Depth With Shadows tutorial.

Lesson Files + Additional Resources

Download the free .PSD file and other lesson files Right Here.

Tell Your Friends

More in Graphic Design


Support A Hero

You've always been my favorite!

106 Responses to A Scrap Of Notebook Paper

  1. Dual77

    May 25th, 2009 at 5:17 am

    Very nice tutorial! thanks :-)

  2. Edward Palomo

    June 7th, 2009 at 6:22 am

    Thank you for such a nice tutorial! I made it as the main design scheme of my website! Keep it up!

  3. Ahmed Sabry

    June 14th, 2009 at 9:00 am

    excellent tutorial

  4. lei

    June 20th, 2009 at 8:21 am

    haha,this effect great!

  5. deepika

    June 22nd, 2009 at 5:39 am

    excellent attention to the detail in this tutorial.

    Thank you so much! :)

  6. Norma

    July 16th, 2009 at 3:54 pm

    Increible me gust?? mucho
    Increible I liked so much. Thanks!!!

  7. Luci

    July 18th, 2009 at 6:50 am

    Brilliant tutorial. you have a great style of writing and that is sometimes one of the hardest skills to come by.
    thanks a lot for this tutorial (and the handy brush =D )

  8. Jen_D

    July 21st, 2009 at 6:02 pm

    Incredible, dude!! I love the realism you acheive – you’re aces!

  9. Guo

    July 25th, 2009 at 3:20 am

    Thank you

  10. Derrick

    July 25th, 2009 at 10:49 am

    Nice tutorial. Thanks … I was looking to buy a photo for my website. But this is much better! Keep up the good work!

  11. Sara

    August 3rd, 2009 at 10:55 am

    That was Very helpful, but wehre is the brush tool?

  12. HERO

    August 3rd, 2009 at 3:18 pm

    SARA, The Brush tool is in your Tools palette and can be accessed by simply pressing the B key on your keyboard. If your Tools palette isn’t visible, choose Window>Tools from the main Photoshop menu.

  13. Rosalyn

    August 11th, 2009 at 1:16 pm

    I am a digital scrapbook enthusiast and I find your tuts VERY VERY helpful! I often come and visit. Thank you so much!

  14. Fii

    August 27th, 2009 at 12:53 am

    Thank you so much for this tutorial! I needed a destroyed piece of notebook paper for a flyer I’m making and the ones on google images were not cutting it! My flyer looks fantastic!

  15. kate

    September 8th, 2009 at 8:45 am

    Thanks a lot for your useful tutorial.

  16. Steven

    September 15th, 2009 at 9:13 am

    This was just what I was looking for. Thank you so much for taking to time to share!

  17. mukesh

    September 16th, 2009 at 6:39 am

    Thanks Hero
    I hope we all will learn a lot from your lessons. Keep writing.

  18. Alexx

    October 3rd, 2009 at 7:09 am

    Wonderful tutorial ^^ Helped me a lot with doing my page,even tho i’m new in this stuff XD Keep up the great work ;D Thanks ^^

  19. Elena

    October 12th, 2009 at 9:11 am

    great tut! easy, fast and well connected to the others ;) great job

  20. xuegar

    October 14th, 2009 at 1:08 am

    ..its so cool.. .
    i love it!

  21. Matt

    October 26th, 2009 at 12:14 pm

    I’m only half way through this tut, but as an absolute doofus with this sort of thing I have to say I’m loving the instructions, finally a tutor that takes the time to give detailed explanations of every step. Thanks a mil

  22. health directory

    November 18th, 2009 at 2:28 pm

    YES! Score! I’ve been trying to figure out how to make something like this. Thanks for the tutorial. Thanks so much.

  23. leif

    November 30th, 2009 at 2:59 am

    Nice job!

  24. hale

    December 8th, 2009 at 11:26 am

    hi guys I also find similar brushes http://inobscuro.com/brushes/view/51/ check this out

  25. hale

    December 8th, 2009 at 11:27 am

    Dear hero .Its nice job thanks for sharing the tips

  26. Ren?©e

    January 24th, 2010 at 5:17 pm

    woho! I did it ^^

  27. Jorge

    January 25th, 2010 at 8:27 pm

    I can’t find the brush download. I feel dumb ):

  28. Ambreen

    January 25th, 2010 at 9:08 pm

    thanks hero thats nice tut,, waiting for ur next tuts..

  29. Onir

    January 26th, 2010 at 4:15 pm

    Great tutorial. Another great work Hero. Will the pushpin tutorial be available soon, I really could use it. Keep up the good work!!

  30. Dima

    January 31st, 2010 at 3:33 am

    Thanks a lot… it is a very nice tutorial =)

  31. Webdesign Rosenheim

    January 31st, 2010 at 11:53 pm

    Really cool tut!
    Very good explanations on howto do this!
    Thanks a lot!

  32. HERO

    February 2nd, 2010 at 6:41 pm

    JORGE, The brush is bundled with the .psd file in the .zip download at the end of the lesson.

  33. Ayu

    February 12th, 2010 at 9:35 pm

    Thank you so much for your tutorial! Your explanations are extremely clear, make it easier to use photoshop!

  34. di

    February 24th, 2010 at 2:42 pm

    Just notice the posting about the download. You know when you look so hard for something and its right in front of your face. I really have got to chill. Not crazy PS but love this tutorial. Its really good.

  35. tj

    February 26th, 2010 at 9:51 am

    I did this in Illustrator for the basic shapes, then I brought into PS for the texture. To make the holes, I used the blend and align tools, then I used the pathfinder to punch out the paper. The blend tool was great for getting the blue lines exactly 30px apart. Great tutorial that can be modified. I thought having a vector file might be handy at some point or another. Your tutorials are awesome, thanks!

  36. snailbob

    March 21st, 2010 at 4:57 am

    really amazing.. very nice tutorial!! great job!!

  37. Pine

    March 28th, 2010 at 4:54 pm

    This was GREAT and easy to understand! THANK YOU!

  38. Ann R

    April 17th, 2010 at 4:42 am

    Great tutorial with many tips added! Loved it! Ann

  39. Tina K

    May 5th, 2010 at 9:36 am

    THANKS! Great help!

  40. simo-harri

    June 9th, 2010 at 1:29 am

    Here is a smooth push pin tutorial:


  41. Nicolle

    June 24th, 2010 at 8:42 pm

    hii i cant add the violation font! :(
    like i dowloaded but i cant add the font to the font menu! :( pleease help?

  42. HERO

    June 28th, 2010 at 10:37 am

    NICOLLE, Depending on your operating system, you may have to restart Photoshop after adding the font to your system. Occasionally Photoshop won’t update the font-list without a restart.

  43. Carson Kahn

    July 7th, 2010 at 10:53 am

    Great tutorial Hero! Here’s my take on it— what if we splash a little water on the scene? :) http://cl.ly/1aRu

  44. pictureladyj

    July 14th, 2010 at 10:04 am

    Wow that was fun! Very easy to follow and it is exactly what I was looking for!

  45. Reba

    September 11th, 2010 at 8:10 am

    Thank you so so much!! So helpful and easy! You saved me heaps of time!

  46. osama

    October 1st, 2010 at 1:12 pm

    thank you so helpful !

  47. Sodaubai

    October 7th, 2010 at 12:49 pm

    Simple and useful. Thanks

  48. Merc

    October 24th, 2010 at 5:13 pm

    Exactly what I needed, when I needed it. Thank you so much. I’m looking forward to more great tuts.

  49. LDx

    November 20th, 2010 at 9:26 am

    HERO! 1000 10x! :)

  50. Cecilie Frölich

    December 7th, 2010 at 1:34 pm

    Thanks from Denmark, too! really awesome tutorial. But… I can’t find the Chalk brush anywhere. Where is it? hugs