How to use Photoshop to make notepad sketches
Written by Verne on February 22nd, 2008A 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
Resize. Tilt. Duplicate. Position. Detail. Ta-da! You’ve got yourself some nicely designed notepad sketches.
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.
I hope you’ve enjoyed the tutorial and have found it useful!
If you enjoyed this post, subscribe to the free feed by RSS or Email.
This entry was posted on Friday, February 22nd, 2008 at 2:44 am and is filed under creative briefings, technically speaking. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Ben
February 22nd, 2008 at 8:27 amNice tutorial Verne! Very easy to follow and produces a nice result. Much better than just showing sketches scanned in directly.
Verne
February 22nd, 2008 at 1:13 pmThe same thought is actually what led me to produce this tutorial - my early attempts to simply scan in notepad sketches directly definitely didn’t have great results!
Glad you enjoyed the tutorial! :)
$5000 Prize Giveaway Graphic Design Group Writing Project
February 22nd, 2008 at 11:49 pm[...] How To Use Photoshop to make notepad sketches (tutorial) - Submitted by Verne Ho Share This submit_url = ‘http://justcreativedesign.com/2008/02/17/5000-dollar-prize-giveaway-graphic-design-group-writing-project/’; Related Articles: [...]
Eddie Stangler
February 23rd, 2008 at 3:39 amVery interesting note.Thanks.
Ptah Dunbar
February 23rd, 2008 at 10:37 amwell, I guess I’ll have to go this route then.. I thought people used brushes to create those sketchy layouts.. great tutorial though!
Verne
February 23rd, 2008 at 3:27 pm@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 briefing Blog « Anatomy, Bookmarked, Photoshop, Toronto-based, Verne, Creative, webdesign, link « Sharebrain
February 24th, 2008 at 11:47 am[...] 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 | [...]
n3
February 25th, 2008 at 1:16 am…. 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
Verne
February 25th, 2008 at 5:11 am@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.
Andrew
February 25th, 2008 at 5:29 amNice tutorial. I wish I had read this a few days ago before I used a camera to photograph mine.
LaurenMarie - Creative Curio
February 26th, 2008 at 12:43 amThanks 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
Verne
February 26th, 2008 at 1:17 amI 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!
Thanks for swinging by and leaving your thoughts! :)
LaurenMarie - Creative Curio
February 26th, 2008 at 1:35 amWell 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
Ross Hill
February 26th, 2008 at 10:37 pmGreat tutorial! I was wondering how you did that when I saw the design for the first time.
Verne
February 27th, 2008 at 1:31 am@Lauren - Thanks for the link to your Wacom review! You just may sway me into getting one just to try it out! :)
@Ross - Happy to hear you liked the tutorial! Thanks for checking it out.
Minty Ferret
February 27th, 2008 at 12:21 pmNICE combination of digital manipulation and good ol’ hand-drawn imagery. :) I love the final effect!
JONxBLAZE
February 27th, 2008 at 6:34 pmGreat tutorial, can’t wait to give this a try!
Ehab
March 1st, 2008 at 4:14 pmpure pwange buddy :D Super cool !
LearningNerd
March 4th, 2008 at 2:44 pmNice 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!
Graphic Design Articles
March 5th, 2008 at 2:25 am[...] How To Use Photoshop to make notepad sketches (tutorial) - Submitted by Verne Ho [...]
Jayar
March 5th, 2008 at 2:29 amreally? 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
March 5th, 2008 at 2:30 amOH WAIT. IMAGE COMPOSER COMES FREE WITH FRONT PAGE. GO FIGURE. ….
get it anyway..
Jayar will learn....
March 5th, 2008 at 4:45 amI’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.
A u d e e
March 5th, 2008 at 3:13 pmGreat tutorial and bookmarked already!
You know I’ve always wonder how to create such neat lines in easy way. Your tutorial just helping me out to create them faster than my crappy techniques :D
Thank you for sharing ;)
sir jorge
March 7th, 2008 at 7:35 pmor you can make real ones, and scan them in.
I like this approach better though.
petnos
March 10th, 2008 at 2:56 aminteresting, but tasty…
Anonymous
March 13th, 2008 at 9:49 pmthank you for this tutorial !
you should make more (:
Anonymous
March 18th, 2008 at 2:01 amHow to use Photoshop to make notepad sketches | creative briefing…
Here’s an easy Photoshop tutorial that will show you how to create notepad sketches just like the ones you see at the top of this site….
shpoe
March 18th, 2008 at 5:36 pmsuper :)
http://www.freestuff100.com/
March 20th, 2008 at 6:40 amwow thank you for such a nice lesson
MObiLESKINE » Blog Archive » Another Blog Find :: Outlaw Design Blog
April 17th, 2008 at 1:10 am[...] How to Use Photoshop to Make Notepad Sketches [...]
Notepad Sketches : Outlaw Design Blog
April 19th, 2008 at 11:01 pm[...] Creative Briefing - Notepad Sketches [...]
Creando hojas de bloc para bocetos con Photoshop | Isopixel
May 7th, 2008 at 12:18 pm[...] Breves Aprende a realizar bonitas imágenes de bosquejos en hojas de cloc, con este tutorial. [...]
Rajita- Logo Design
May 18th, 2008 at 11:49 pmThis is really interesting.I never thought of that.
Como crear notepad sketches con Photoshop | frogx.three
May 19th, 2008 at 2:00 pm[...] tutorial de photoshop para crear notepad sketches, un tutorial bien detallado directamente de creative briefing que nos enseña a crear hojas de rayadas de bloc de notas, si entran al sitio del tutorial podran [...]