Scanning

The Different Elements of Scanning
Much like a photocopy machine, a scanner passes light over an object to scan it. As the light passes, it stores the individual changes as a digital file, thus creating an image on your computer that you can use on the Internet (or elsewhere of course, but this editorial covers scanning for the web).

It's important to know that this isn't a step-by-step tutorial for scanning. All scanners are different, and even if you use the same version of photoshop to scan your images every time, the scanning interface will be completely different as you use different scanners, so it's too difficult to make a step-by-step tutorial on scanning. Luckily, if your used to your program and computer, then scanning should be a walk in the park after reading this section.

Here's what you need to know about scanning, before you set out to scan:

What You Can Scan
There are two types of scannable material. "Reflective" and "Transparent". Reflective is anything that reflects light, such as a photograph, artwork, or physical objects. Transparent is anything that allows light to pass through, such as slides. Most scanners will only scan one or the other. Occasionally you will find a scanner that scans both.

Scans Are In RGB
If you are familiar with color modes, then you most likely know that your computer monitor uses "RGB", or "Red, Green, Blue". This means that the screen uses different levels of Red, Green, and Blue to display colors.

Most scanners are made to scan in RGB, since you are scanning the image onto a computer. These same scanners usually can scan in CMYK (color mode for print), but it's best to scan in RGB color mode, since the color won't be as reliable if scanned in CMYK. If you were ever working on a print project, you would convert the image to CMYK before putting into your page layout program, but once again this editorial is in regards to web design, and the only color mode a web designer needs to really know is RGB.

Bit-Depth & Resolution
The amount of color information a scanner can handle is the "bit-depth". 1-Bit scans line art, 8-bit scans grayscale, and 24-bit scans RGB. Naturally, the higher the bit-depth, the better the image quality. Professionals shouldn't use less then 30-36 bit. 24-bit is usually the most a web designer will need, since higher typically captures extra bits of color information that you won't really notice on screen.

The amount of detail a scanner can capture is determined by the optical resolution. This measurement will come in the form of two numbers, such as this: 600 x 1200. 600 is how many pixels per inch the scanner can capture horizontally, and 1200 is the number of steps the scanner head moves per inch.

When you see the resolution referred to as "interpolated" or "enhanced resolution", this is how much the scanner software is capable of enlarging the image without too much pixelation. When scanning something that has already been printed, the image already has a set number of pixels, and it's not really wise to enlarge that number; It's not wise to enlarge the number of pixels on anything. But, if a scanner has 600 x 1200 ppi capabilities, then it might have an interpolated resolution 9600 ppi, which means it can enlarge the true resolution of an image, with out sacrificing too much quality.

When scanning for the web, you'll find that interpolated resolution isn't much of a concern, but you should go with the highest optical resolution you can afford.

Different Types Of Scanners
When dealing with web design, the only type of scanner you'll likely need is a flat-bed. However, here are some descriptions of different scanners:

Flatbed
Flatbed desktop scanners are good for scanning all types of reflective material. Occasionally, you purchase an add-on for scanning transparent material, as well.

There are two main types of flatbed scanners: single-pass, and three-pass. Single pass captures all the RGB information at once, while three-pass makes a different pass for the red, green, and blue. Of course the single-pass is faster, but the three-pass yields a higher accuracy.

Hand-Held
As the name would imply, hand-held scanners are small and portable little devices that should only be used for scanning material that you want to trace, or for scanning something at a library, etc. The quality isn't the best, and therefore should be avoided for professional design work.

Sheet-Fed
Sheet-fed scanners are usually low quality, and should also be avoided for professional work. The paper is fed into the scanner, much like a fax machine.

Slide Scanners
These are the scanners that are made for transparent material. When dealing with slides, some only work with 35mm, while others can handle all types. When quality is a concern, you'll want an actual slide scanner, as opposed to a slide scanner attachment for a flatbed

Drum Scanners
As a web designer, you'll never need something this special, or expensive. Only large design firms and print companies need something this big of a deal. Basically, a drum scanner is the highest quality scanner you can find. Typically the art to be scanned is wrapped around a cylinder. The transparent cylinder then rotates as the light is placed on the image.

OCR Software
Okay, so this isn't a scanner, but it's like a scanner! Scanning software that is. OCR (Optical Character Recognition) software recognizes different text characters and can translate the text on an image into a text document. When you scan a body of text with your scanner, all you make is an image of text. You can't edit the text, or do anything else to it other then treat it like a normal image. If you wanted to edit or use the text, you would have to type it, or use OCR software to "read" it and convert it to text format.

Some scanners come with OCR software, but often you'll have to purchase it separately.

Before You Scan
When using a flatbed scanner, make sure you go through these steps to ensure a high-quality scan, and less editing time in your graphics program.

  1. Work with undamaged material. It's best to scan something that doesn't have a lot of dust, scratches, folds, etc. on it.
  2. Use glossy photos. Glossy paper scans better then matte. Matte surfaces have all types of indentions that will reduce the quality of the scan.
  3. Clean the glass. Make sure the glass is scratch, dust, and fingerprint free!
  4. Keep the image straight on the bed. Although you can usually rotate the image in your graphics program, it's best not to as this will cause the image to resample, and lose detail. Usually you won't notice this loss of detail when dealing with images for the web, but it's still good to scan straight regardless.
  5. Scan as close to the center of the bed as possible. The optical quality is better there.
  6. Keep the image flat on the glass. Keep the top of the scanner down while scanning. If scanning a single sheet of paper, put some weight on it, like a small stack of papers, or a thin paper back book.
  7. When scanning for the web, scan large, and reduce the size. If your computer can handle it, scan at 300 DPI (PPI), and then reduce the size to of the image to a resolution of 72 when you are ready to begin working on it. If your computer runs to slowly when you do this, then it will be okay if you scan at 150 - 200.
  8. Avoid bumping or moving the scanner while scanning.

Scan Settings
On the actual scanner, all you will see is an on/off switch, and maybe a "scan" button. What you want to use for the actual scanning is the software that came with your program, or preferably a graphics program like Photoshop (To get an image from a scanner in Photoshop, typically you can go to File > Import > Name of Scanner).

The dialog box that you will see will vary from program to program, but the following are some controls you will likely see, and what you want to do with them. Make sure to explore all the tabs, and buttons you may see at the top of the dialog box.

Mode or Color Mode
RGB is the mode you will most likely want to work with.

CMYK is a print mode used for commercial printing.

Bitmap has two colors: Black and white. There are no shades. A Bitmap is a 1-bit image.

Grayscale has 256 shades of gray. It is an 8-bit color mode. When scanning an image that you want to color on the computer, or just something you need to be shades of only black and white, be sure to use grayscale.

Index can have 2 - 256 colors. It is commonly used for .gif images.

When preparing for web output, be sure to set the color mode to RGB or Index.

Input or Resolution
Usually you'll see a drop down menu, or a text area that allows you to input what they will call PPI, DPI, or LPI. PPI and DPI are basically the same thing, one means "pixels per inch" and the other means "dots per inch". LPI means "Lines Per Inch". DPI = 2 x LPI, so if you wanted your scan to be 300 pixels per inch, then you need to scan at 150 LPI.

To get the best quality from your artwork and photography, scan at 150 - 300 DPI, and then reduce the size to 72 DPI when it's open in photoshop (or whatever program you have). To reduce the resolution in Photoshop, go to Image > Image Size, and type 72 in the box next to "resolution". Make sure the drop down menu says "pixels/inch".

To prove this, I scaned a picture out of the magazine twice, and saved it as a .jpg. In the first scan, I scanned at 300 resolution, and reduced it to 72 in Photoshop. In the second, I just scanned at 72.

14.8 KB
Scan Resolution: 300
Color: RGB
Final Res.: 72

Saved for web:
JPEG
optimized: yes
Max quality
0 compression
Progressive: yes
ICC: no
blur: 0
Matte: white
20.1 KB
Scan Resolution: 72
Color: RGB
Final Res.: 72

Saved for web:
JPEG
optimized: yes
Max quality
0 compression
Progressive: yes
ICC: no
blur: 0
Matte: white

In addition to the second one having poor quality, it has a larger file size, despite the fact that I compressed both images the same way!

Scale
It's best to stick with 100%, but in case you want to fool around with it, keep these points in mind:

Sharpness & Contrast
Although you can adjust things like "sharpness" and etc. in most graphics programs, it's best to do it when your scanning. If you have an image that is a bit blurry or fuzzy, you can use sharpness to accentuate and define the image a bit. You can't increase the detail in an image, but you can at least make what's there a bit more obvious.

Stay under 60% when sharpening, anything more tends to look bad.

You want to adjust as much of the image as possible while you scan. Typically the image that you work with has less information in each color channel when it's finally scanned, so it's best to work with the data you have when it's there.

Scanning Printed Material
When you scan for the web, you don't need to follow near as many rules as the print world, but here are a few print tips that might help even if you only want to scan for the web.

Line Art
If you have some printed line art, you may notice that the "shades" aren't shades of gray at all, their just black dots. Because of this, it's better to scan line art as 1-bit instead of grayscale. Grayscale will just make more dots!

You won't be able to mess with the size, however, because if you enlarge, the dots become more obvious, and if you shrink the dots will merge.

If scanning a pencil sketch, or something you made and want to color, grayscale may produce a better result. Always experiment, however.

Descreening Printed Art/Photos
When scanning something previously printed, you'll notice some of the pixels and dots if you get close to the image. These dots will still show when you scan, and that means that you may need to use descreen to reduce the appearance of them.

If you know what the output resolution was for an image, then scan using that resolution. Often you won't though, so try 300, 600, and 1200 DPI when you can. These are a few standard sizes.

That's all you really need to know about scanning for the web. Like with all things, don't forget to experiment. Trial and Error is a great way to learn.

Main?