How to Prepare Your Scans For the Web

Last How-To I talked about how I scan my sketchbook. Well, get ready for some more toil and tedium because this time around I'm going to talk about how I get those scans ready for the web!

Step 1. Setting Up The Image

First, we start with our completed scan from last time:

I copy and paste each page into a new Photoshop document and edit them individually. I know that I could just set up a batch script to run on all my images but I prefer to edit them one by one so that they can be tweaked selectively. My canvases are set to 6 x 8 inches and 800ppi. This means my files sizes are huge but that's okay, my art's worth the extra disk space. If you've got less resources than I do you're probably fine having anything over 300 ppi.

Before editing the scan I've imported I right click the layer it's in and convert it to a smart object. This lets you apply transformations and filters to your art non-destructively in case you want to go back and make changes later in the process. The first thing I do is rotate the image until it's straight. I find it's easier doing it this way rather than fussing over it while I'm scanning. Next, I scale and position the image to make sure it fits my page. Because of the way pages are displayed in my gallery I don't include any borders but I do like to nudge my images around so they feels balanced on the page.


This image got scaled down 98% and rotated 0.35 degrees which is fairly typical. You can also see where I included the page edges at the top and left to help me line my image up perpendicular to the sides of the document.

Step 2. Adjusting The Levels

Now, I am working with a sketchbook. The thing's filthy. It's been pawed through by more hands than I like to think about and my scanner's sensitive enough that it even picks up the grain of the paper. The black construction paper inserts I stuck behind the pages while scanning also tend to tint the image grey.


Computer screens are not nearly as forgiving of these defects as the hard copy is. Luckily, there's a tool designed to help us with all of these problems: Levels. Levels can be be applied non-destructively using an adjustment layer in case we want to adjust them again later. To make an adjustment layer click the half-black, half-white circle in the layer's dialogue and select Levels.

Ajustment Layer.jpg

The graph in the Levels dialogue is called a histogram. It tells us how many pixels we have at each brightness level and lets us make adjustments to it.

For instance, right now it's telling us that our darkest colours aren't even close to true black. Because my darkest color is supposed to be true black, what I do is drag the little black arrow up to the darkest color in the histogram.

As for my whites, you can see a huge peak towards the lightest colors on my graph. This represents the color of my paper. I like to drag the little white arrow up to about the center of the peak to bleach out most of the dirt, grain, and smudges that the scanner picked up and set it to true white. If the picture has a lot of light pencil crayon work I don't drag the white's up as high though because I risk losing some of the artwork.

Finally, I adjust the little grey arrow in the center representing my midtones. This lets me balance how light or dark the image as a whole looks.

Step 3. Spot Clean-up

Now, levels won't remove all the dirt and garbage that the scanner picked up. That just comes with sketchbook territory. What I do for the rest is take a white paint brush and draw over the dirt and the page edges and anything else that needs to be removed. Most of the time I use a brush with the hardness brought down to maybe 40% so that edges of my brush won't be as noticeable. I also make sure the edges of my document are true white so that I won't get any ugly seams showing up in my gallery.

Step 4: Saving the Image Out

To save the finished image out I go to File > Save for Web & Devices. This makes sure that the image will display correctly on a computer monitor. I save my sketchbook pages out as JPEGs at High Quality. While JPEG is a lossy compression format, it saves a lot of space over PNGs for the sort of images I'm doing. I also shrink my images down to 600 x 800 pixels using the Bicubic Sharper Quality setting. Bicubic Sharper is an image interpolation scheme recommended specifically for shrinking images.

Finally, I end up with my finished artwork. Now I'm just stuck doing it all over again a zillion times for every other page!