A few days ago, I wrote about the making of Creative Briefing and touched briefly on how the notepad sketches that you see on the top left of this site came to be. I’ll now go more in depth and offer a quick and easy tutorial on how I produced the image using Adobe Photoshop.

It should be noted that much of the work in this tutorial can be replaced by simply purchasing stock photos of notepads. However, if you’re not into spending money or aren’t able to find a stock photo that suits your needs, then this tutorial is for you.

The Goal

Here’s what this tutorial will help you achieve:

Let’s get started!

Step 1

First you begin by tearing a sheet out of the notepad of your choice. Don’t worry too much about the line pattern or color of the sheet, we’ll only be referencing its general shape and torn edges. Here’s the notepad I used.

Place the sheet on your scanner and place a cloth or large piece of paper with a strong contrasting color over it. This is so that you can ensure that the shape of the sheet you’re scanning doesn’t blend into the background. In my case, I simply placed a black tshirt over my notepad sheet and hit the Scan button.

Step 2

Once scanned, open up the file in Photoshop. It’s a good idea to save the file under a new filename so that you will always have the original scanned file in case you ever need to start over. Here’s what I ended up with.

The sheet I was scanning was quite thin so the black background actually came through a bit. But that doesn’t matter as I’m only going to be using the shape of the paper.

Make a copy of the layer so you can easily start again if necessary (hide the original layer by clicking the eye icon next in the Layers pane). Grab your Magic Wand Tool (W) and start selecting all the areas outside of the sheet by holding shift and clicking all the black areas. Once you have all the areas selected, hit Delete to give the sheet a transparent background.

Note: This isn’t necessarily the best way to crop something out, but since we’re just looking for the general shape, using the Magic Wand Tool is the quickest and easiest method.

If you find the edges to be a bit rough, grab your Blur tool (R) and go over the edges.

Step 3

Next, I need to shorten the height of the sheet to accomodate for the site design, so go ahead and grab the Rectangular Marquee Tool (M) and select the bottom half of the sheet. Cut and paste, and then move the bottom half up to get the desired height. Again, don’t worry if the the lines on the sheet aren’t spaced out evenly.

When done, merge the two layers together.

Step 4

Duplicate the layer with the shortened notepad sheet for backup and hide the old layer. On the new layer, go to Image > Adjustments > Hue/Saturation (Ctrl+U) and bring the Lightness to +100. This will make the entire sheet white.

It may be wise at this point to add a background layer with some color, as it will make it easier to see what you’re working with.

Step 5

Next we’ll create the line pattern that will show up on the notepad sheet. Create a new file that is 60×60 pixels with a transparent background. Draw a 1px black line along the top.

Select All (Ctrl+A) and go to Edit > Define Pattern. Give the pattern a name such as “Notepad Sheet Line Pattern”.

Return to the window with the notepad sheet. Grab the Rectangular Marquee Tool (M) and select the area on the sheet that needs to be filled in with the line pattern. Create a new layer (above all other layers) and go to Edit > Fill.

Select Pattern in the Use drop-down, and select the Custom Pattern that was created above.

After clicking OK you should have something similar to this:

Step 6

Lighten the line color by selecting its layer and going to Image > Adjustments > Hue/Saturation (Ctrl+U). Drag the Lightness bar to the right to get the desired shade.

Next, give the lines a bit of blur by going to Filter > Blur > Gaussian Blur and setting the Radius to something small like 0.5 pixels.

Just like that, you’ve got yourself a simple graphical rendering of a notepad sheet. To give it a little more realism and some depth, let’s style it a bit more.

Step 7

Create a new layer beneath the layer with the white notepad sheet. Select the shape of the notepad sheet by holding Ctrl and clicking the thumbnail of the notepad sheet layer (see right). Fill the selection with black. This layer will be for the shadow of the notepad sheet.

Next, while on the shadow layer, go to Edit > Transform > Distort. Now shape the shadow any way you’d like to get the desired effect.

You should end up with something like this:

Next, go to Filter > Blue > Gaussian Blur and set the radius between 2 and 5 pixels, depending on the effect you’re going for. The sketches I have on the top left of this site have cleaner, vector-looking shadows, so I kept the blur to a minimum.

Once you’re done blurring, drop the Opacity of the shadow layer down to 10% and you should have something that looks like this:

Step 8

Create a new layer above all other layers, and select the shape of the notepad sheet as you did Step 7. On the new layer, use the linear Gradient Tool (G) and drag a grey-to-transparent gradient diagonally up, starting from the lower right-hand corner.

Drop the opacity of the layer down to 20% and you’ve got yourself a blank digital notepad canvas!

Step 9

Scan in your sketches and position them on top of your notepad sheet. Set the blending mode to Multiply.

Step 10

The Final Product

For the final product, I added a second sheet complete with some more doodles. I also used some free coffee stain images to give them the roughed up and dirty look. This is a pretty accurate digital depiction of what my desk looks like… if you multiply the number of sketches and loose doodles by something close to a million.

Questions & Comments

This is my first Photoshop tutorial so go easy on me. I do invite questions and suggestions for improvements in the form of comments or emails via my Contact page.

@Ptag – There are infinite ways to achieve the same effect and look in Photoshop, and this tutorial just outlined one of the easier ways to do it. It works well for beginner to intermediate photoshoppers, but an advanced user probably won’t find this particular tutorial useful. Hope it helped you!

[...] creative marketing agency. You will find some really interesting tutorials there like “How to use Photoshop to male notepad sketches” or articles like “Anatomy of an agency website“. Bookmarked! 02.24.08 | [...]

…. if you had it scanned why not just run a filter over it to make it look like it was done in the computer
and wouldnt it be better to just used the scanned notepad image? i mean looks better, has better quality, gives texture and its cooler than taking a lot of time to make another one from it

@n3 – For the sake of consistency with this site’s design, I wanted to use notepad sketches that were clean and simple. The scanned image definitely didn’t fit into that description so that’s why it was necessary to clean it all up via the steps outlined in this tutorial. You can see the difference between the final product and the originally scanned image, so the extra work was well worth it.

Thanks for sharing this, Verne! It’s so great when designers share things learned from real world experiences. That’s what I try to do on my blog, too. I bet those sketches could be achieved with a Wacom tablet pretty nicely as well.

Ever think about doing more tutorials like this and submitting them to PSDtuts? :D

I agree whole-heartedly with you Lauren! I think the community thrives on knowledge and experiences that are passed on from one member to another and it’s great when everyone contributes their own perspective.

I would personally love to get my hands on a Wacom tablet! Unfortunatley they seem a bit beyond my financial capabilities at this time (I’m poor). If you have access to one I’d love to hear your thoughts on how it can add value to the design process.

As for PSDtuts – I love the site and I love Eden! But I totally underestimated the amount of time it takes to write one of these tutorials so I’m not sure how many more I can pump out. But who knows – if I come across another idea for a tutorial maybe I’ll give it a shot!

Well I did a review on Wacom tablets (the two I’ve used) recently, if that would help you. I don’t think it’s so much a help to the creative process as to the technical execution of those ideas.

I think people don’t realize how much work goes into good tutorials. Processing the pictures (taking screenshots, cropping, etc) and making the steps clear and easy to follow does take quite the effort. You did a great job! Looking forward to seeing you on PSDtuts one of these days! Hehe

Nice tutorial! I’d love to see some more general Photoshop tutorials, like how to make the most of different tools/effects or some skill that can be applied to many different projects.

Your site design looks great, by the way. Very clean and simple, and though the large font size is just a question of personal taste, it does make your site stand out. I like it. :) Good luck in the group writing project, and thanks so much for the link!

really? that was your tutorial? to scan in a sheet of a tiny notebook, put a shadow on it, and put another sketch on it? wow. completely uncreative. if anyone needs this tutorial, they shouldn’t be using photoshop. Go buy Microsoft Image Composer.

Jayar will learn....

I’ll give everyone a perfectly good reason to use this tutorial… PORTFOLIO. When you show clients (or potential employers) your portfolio, it just can’t have your finished work in it, especially if you’ve done corporate or layout work. People need to see your creative process, and you can bet that the top-end employers (all that I’ve talked to or worked with in Los Angeles) will specifically ask about it. (HINT: Blizzard for example will dismiss you if you say you go to the computer. Their designers submit hand sketches even if they can’t draw LONG before they touch a keyboard).

So… scanning a notepad page in at print resolution (300-600dpi) and touching it up, so you can then overlay it on a portfolio page is GENIUS. I just redid mine, and I have 11×17 pages in it. I used this technique on facing pages, showing my creative thought process, and it looks amazing.