Revised 3/16/98

Now fortified with images!!

You can effectively use a common flatbed scanner to make photographic images of pens or other small items for inclusion on web pages & auction sites, for printing out in hard copy, sending on e-mail, etc. This note describes how to do it.

NOTE: I know this violates the sacred web desgners' rule not to make viewers change their browsers or computers, but to get the most out of the image comparisons below I recommend you set your system to show "thousands of colors" or better.

This method is based on that which I have used to create the scanned images that appear on my Penoply fountain pen website (http://www.io.com/~tyrbiter). At first, when I wanted to make fountain pen images for my website, I figured I had to take photographs with a conventional camera and then have these photos scanned. I burned a couple of rolls of film trying this, with the result that I learned how poor a photographer I was. Then, in the front matter of Glen Bowen's book (where he solicits pens for appraisal), I read where he suggests "shooting" the pens on a Xerox machine as a quick-and-dirty means of getting images with reasonable detail (which an amateur snapshot cannot deliver). I put two and two together and decided to try scanning the pens directly on the scanner without first photographing them. The method worked beautifully, and I reveal it to you here.

WHAT YOU WILL NEED

A scanner

Currently, you can get very good high-resolution color flatbed scanners for under US$150. The specs you want to look for include

  1. at least 300 dpi OPTICAL resolution in both directions (most scanners can "interpolate" to provide virtual resolution of up to 4800 dpi or some such, but have a raw optical resolution of much less than this)
  2. reasonable color depth (30 bits is common, as few as 16 bits is OK).
  3. the correct hardware interface for your computer: SCSI port for Macintosh, parallel port for DOS/Windows machines. You can use a SCSI scanner on a DOS machine if the scanner comes with a SCSI card to install in your computer (most do nowadays).

Installation of the scanner should be straightforward if you follow the directions provided with the scanner. I have no experience in setting up scanners for DOS systems; for Macs (and SCSI PCs), I can suggest that most problems in installation arise from having duplicate SCSI IDs in your device chain, and in not using a proper SCSI terminator block.

Some software

The scanner usually comes with the following software (at a minimum):

  1. software drivers to operate your scanner, including a minimal application that will fetch a scan and save it to disk.
  2. image editing program (such as Photoshop LE, ColorIt!, PhotoDeluxe, and many others). You can also use more sophisticated programs like Photoshop (non-LE) or Painter, but the basic programs work just fine.
  3. other software for doing things with the image once you've saved it, such as e-mail or file transfer (FTP) programs.

In addition, if you are preparing a web page, you will want a text editor (for preparing the HTML code) or a WYSIWYG HTML editor (such as PageMill), and a web browser for viewing the results of your handiwork (you can open HTML files from your disk using the "open file" command of your browser).

Your computer

Fortunately, as long as you work mainly with website or computer-screen graphics, you do not need a very powerful computer. The majority of scans on my website were processed efficiently on a Mac Quadra 605 with a poky 25 MHz CPU and no floating point unit. You do need enough memory (the more the merrier) and free disk space to hold the images, which can quickly become pretty big. Usually, the software or scanner will tell you what your baseline computer configuration should be.

A place to put web files

If you are reading this file from home, you probably use an internet service provider (ISP). In this case, it is also highly likely that your ISP gives you a few megabytes of publicly-accessible web space as part of your service. This is where you will put images and HTML files that you want others to view. The instructions for using this space vary, so check with your ISP's webmaster (the person in charge of WWW services at the ISP).

If you are reading this in the office, get back to work!

Scanning on the cheap

Although scanners are now much cheaper than when they were first introduced (when they cost thousands of dollars), they may still not fit within everyone's budgets. If you would rather not buy your own scanner, there are alternatives:

  • Use a friend's scanner
  • Use a scanner in the office (outside work hours, of course!)
  • Find a public library or copy center (e.g., Kinko's) that has walk-up scanners and computers you can use.
  • Buy the scanner, use it once, then pack it up and take it back to the store for a refund (no, we don't really want to do that, do we?)

Whichever of these alternatives you use, the instructions below still apply. You'll want to keep the images small enough so you can take them home on diskettes.

SETTING UP THE SCAN

Open the lid of the scanner and place the pen (or other item to be scanned) on the glass. You may, if you wish, put a neutral looking backdrop on top (such as a white cloth); you may even put some other interesting "background" behind it such as a drawing or an open book.

There are a couple of knotty problems you may encounter in getting the pens to pose properly for their scans.

First, it is difficult to get a pen cap to stand up on its clip. Just about any aids you might use to help (paper wedges, wire, transparent plastic sheets, etc.) will be visible on the scan. Here's where you can exercise your ingenuity. Possibly the best way to prop the cap in position would be to attach it with a narrow strip of double-sided tape to the scanner lid. Or, you can just do what I usually do, give up and let the cap rest with the clip to the side.

Second, getting the pen to sit so that the point faces down also requires similar fiddling, although this is usually easier than with the cap. If you have the right kind of pen, you can "cheat" by twisting or unscrewing the section, or lining it up with the lever or other features of interest on the barrel. You can also contrive a way to fix the pen in the spine of a book so that it stays in the proper position.

The orientation of the pen on the glass makes a difference in how the pen is lighted. I generally find that the best highlights and colors are obtained with the pen pointing toward the wide side of the glass (parallel to the scanner's lamp). You can experiment for yourself; there are very visible differences.

Where you place the pen on the glass can also make a difference if you do not use a cloth or other backdrop. By placing the pen close to the front of the scanner (farthest from the hinge of the lid), you will allow the lid to rest at a shallower angle, and the differences in background color between top and bottom of the scan will be minimized. This will be of slight assistance to you in removing the background later. If the scanner lid permits, insert objects (bottle caps, CD cases, paperback books, etc. under each corner of the lid, or on the glass (but outside the image area) to make the lid sit evenly above the pen.

Lower the scanner lid very carefully, so as not to disturb your setup. Now, you're ready to scan.

CAPTURING THE SCAN

Most of the image editing programs that come with scanners can operate the scanner themselves, so it is most convenient to capture the scan directly into the program. We'll assume that this is your setup. (If it isn't, then you can use other software that came with your scanner to capture the scan and save it as a TIFF or other file that your image editor can read. Then, simply open the saved file with your image editor and follow the rest of the directions.)

Run the image editor and select its "capture image" command. You should see a dialog that will contain a preview window and a number of controls for scanner settings (a small screen shot of mine is shown below). This is where we'll work for the next few minutes.

Notice that this particular driver also gives us the inch size of the scan we will get (which is the pixel dimension, divided by the resolution, times the scale factor), as well as the (uncompressed) file size.

First, get a preview of the scan (usually there's a "preview" button for this). Use the cropping function to select only the portion of the scan containing the pen (you can make the selection a bit bigger on all sides to give you some room to work later). This is important so you don't waste time and memory scanning the 90% of the page that contains nothing of interest.

Make the appropriate settings in the scan dialog:

  • Resolution: This is probably the most important setting you can make. For web page graphics, or other pictures intended to be viewed only on the screen, choose a resolution near 72 dpi (which will correspond to the spacing of pixels on most computer screens). For pictures that you intend to print, use a resolution that fits with your printer (usually 300 or 360 dpi works well). Note that a 72dpi scan will print tolerably well on a higher-resolution printer, although if you want the image to look its best on a printer, you have to go for higher resolutions.

WARNING: high resolution scans result in very large files that will choke your computer, resulting in very long delays to refresh or update the image whenever you modify it. These scans also take up lots of "scratch" space on disk (several megabytes or more in extreme cases). Don't use any higher resolution than you need.

  • Color mode: Pick "RGB", "Color photo", or a similar setting. If you want a black-and-white scan for "artistic" purposes, or if you will be printing to a non-color printer, you can pick "grayscale" or "B&W photo" to reduce the file size by a bit. "B&W Line Art" will turn the whole thing to a simple black-white bitmap, which will probably look pretty ugly.
  • Scale: If you want an "actual size" picture, pick 100% scale. If you are zooming in on a particular feature (such as the point), pick a higher magnification, up to, say, 800%.

TIP: If your computer doesn't choke on high resolution scans, you can scan the image at several times the final scale (say, 400%), and use the image editor to scale it back down. This will help the image processing software wring the maximum image detail from the scan.

  • Other settings: Many scanner drivers support other settings, such as automatic contrast levels or variable color curves. You can experiment with these, but most of these changes can also be made (reversibly) from within the image editing program, so they aren't critical here.

After you've made all the settings, press the "scan" button to begin the scan. Now, you can get up and get a drink or take a stretch for a minute or two while the scanner does its work. When you come back, the new scan should appear in a window within your image editor.

PROCESSING THE SCAN

Typical transformations & filters

Using the image editor, you will do some touching up of the image before you save it. As you make these changes, it is best to do them one at a time, using the "undo" command to cancel changes you don't like.

  • Contrast. I find that most pictures will benefit from a 20% or so increase in contrast (even increase for all colors). This is a matter of judgment; don't overdo it, or the image may look too dark on some folks' monitors. Your image program or scanner driver may have an adjustment for "gamma" or midrange contrast; you can experiment with this to see what happens.
  • Sharpness. Most image editors have a sharpness filter that you can apply repeatedly to the image to bring out small details and improve the focus. This again is a matter of judgment; too much sharpness makes the image look jagged and "noisy" (harsh). You can see the effect below in these scans of a Sheaffer Lifetime point.

before sharpening
...after first application
...after second application

  • Resizing. The image editor can scale the image up or down to any desired size, specified either by percent reduction or by final size (in pixels or inches). Sizing down usually produces better results than sizing up, since the editor has to "stretch" a limited resolution image in order to make it bigger, resulting in noise or aliasing (for the same reason, you don't want to size up an image that you have already sized down...remember to save that original scan!). You can resize the image by different amounts on each axis, resulting in a "squished" appearance, although you wouldn't want to do so except for "artistic" reasons.
  • Cropping. Crop (trim) the image as closely as possible to keep the file size down.
  • Other filters and settings. Most image processing programs offer lots of other built-in alterations (such as color table reduction/resorting, color balance alteration), and plug-in filters for many artistic effects. Have fun with these, but always make sure you retain the original image so you can undo the damage. Typically, none of these features will improve the fidelity of the image.

Background removal

For my Penoply pages, I favor a pure white background (set by an HTML tag option). Then, I use the Photoshop LE magic wand (select-by-similar-color) tool to remove the gray background and replace it with pure white. In this way, the pen seems to "float" on the page.

Most image editors have some variation of the magic wand tool. You select this tool, then move it to an area of the picture containing the color you want to zap. Then, click, and all adjacent portions of the picture will be selected. You can then use the paint bucket tool to fill the selected area with white color.

I get good results with the default tolerance of the tool, but sometimes I reduce or increase this value to select a greater or lesser area to remove.

Scanners weren't designed to scan 3-D objects. Due to parallax between the lamp and the sensor, 3-D objects will always cast a consistent shadow onto the background of the scan. Generally, you cannot eliminate all shadow, since in doing so you might end up taking out part of the pen image as well. Fortunately, a small shadow adds to the image (in my opinion). Always do background removal AFTER sharpening the image, so that you don't sharpen the edges of the shadow (which looks kinda fakey).
before...
after...

SAVING THE SCAN

You can save your scan in many different formats, from TIFF to PCX to PICT or EPSF. For WWW work, however, you want to use either GIF or JPEG, because of the compression these formats offer (plus, they're the only ones that most WWW browsers and servers will accept).

A typical 1x7 inch pen-sized image scanned at 72 dpi and 24-bit color, in its raw uncompressed form, would take up more than 108kb on disk and would take over thirty seconds to download using a 28.8kbps modem. Put more than one of these images on a web page, and the load time can get objectionably long. Fortunately, GIF and JPEG compression can reduce the file size to a fraction of this value and thereby drastically cut load times.

TIP: Give your image files long, descriptive names. MacOS, UNIX, and now Windows 95 all allow very long names, so you needn't be restricted to a cryptic 8+3 characters. Months later, when you redo the site, it will be easier for you to guess the contents of a file named "parker.75.sterling.pointdetail.jpeg" than one named simply "P75AGPTD.JPG"

JPEG

The Joint Photographers' Expert Group (JPEG) compression scheme, published by the ISO, allows file compression as small as 20:1 or better, and is the way to go for photographic images like scans. Since JPEG is a "lossy" scheme, some detail is discarded from the picture in exchange for these drastic reductions in file size. Generally, for web graphics, you can reduce the quality quite a bit before making a visible difference in the image. If you decide to go with JPEG, you might first like to save a copy of the image in a true lossless form (such as TIFF or Photoshop Native, but not GIF) for future use. When you save a JPEG, be sure to add ".jpeg", ".jpg", or ".jpe" to the end of the file name so the servers and browsers will know how to handle it.

Below are three complex images showing the effect of JPEG compression on image quality and file size (the image is taken from the back cover of Glen Bowen's Collectible Fountain Pens, L-W Book Sales, 1995 edition). I started with a TIFF file of size 71k (160x120x32 bits) and saved the image at each of three quality settings (the percentages aren't mathematically significant, they are just quality ratings used by this particular image editor). The first image is very faithful to the original, but a bit large; the second is probably OK for a non-critical image (such as decoration) and retains very good detail and color accuracy, while the third isn't much good except as op art.

"100% quality"
(20.7kbytes, 3.4 : 1 compression)

Light compression, indistinguishable from original TIFF.

"50% quality"
(6.2 kbytes, 11.5 : 1 compression)

Note slight mosaic effect in background

"0% quality"
(1.5kbytes, 46 : 1 compression)

Heavy blurring and mosaic effect, poor color fidelity.

TRIVIA: the actual name of the JPEG format is JFIF, for "JPEG file interchange format", although the JPEG specification recommends that the filenames of images end in "jpeg" or "jpg".

GIF

The CompuServe Graphics Interchange Format, or GIF, is one of the oldest techniques for exchanging color pixelmap graphics. It works best for simple hand drawn bitmap graphics (such as buttons, labels, etc.) where the limited number of colors allows the color map (number of bits per pixel) to be made very small, resulting in small file sizes. The results are less good with photographic images.

GIF is sometimes called a "lossless" compression method, but this is not strictly correct. For example, if you start with a 24- or 32-bit color scan (common with most scanners), GIF may (probably will) remove some information from the image when it reduces the color table to 8 bits.

GIF images can be further reduced in size by reducing the color table below 8 bits, but the compression isn't nearly as dramatic as JPEG, and the image quality suffers greatly as shown in the examples below. In each case, I let the image program pick the colors for the color table automatically. As you can see, the 2-bit (4 color) rendering is esthetically unacceptable (other than as a "special effect"), yet the file is larger than the reasonably-faithful medium quality JPEG above.

8-bit GIF (256 colors)
(33.5 kbytes, 2.1 : 1 compression)

Very close to original 30-bit TIFF image.

4-bit GIF (16 colors)
(15.5 kbytes, 4.6 : 1 compression)

Some "flattening" of colors and textures, some "white spots"

2-bit GIF (4 colors)
(8.8 kbytes, 8.0 : 1 compression)

Most non-brown colors lost, image is grainy & spotted

Before you can save a scan as a GIF, your image editor (like Photoshop LE) may require you to convert your file explicitly from "RGB" or "True Color" to "indexed color"). When you save the file, be sure to add ".gif" to the end so that the various programs that have to handle it can know what kind of file it is.

GIF can do one trick that JPEG (as yet) cannot: you can use the image editor to designate one (and only one) of the colors in the image's color table as "transparent"; when the web browser or other image viewer renders the file, it will replace this color with whatever is in the background. You may find this useful when you want to place one image on top of another (e.g., a pen scan on top of your web page's background image). The title of this article was executed as a transparent GIF with a 4-bit color table, and it is a svelte 10k in size.

USING THE SCAN

Web pages

Assuming you use the standard SLIP or PPP modem link to your ISP, you will have to do two things to make your image available to the waiting world via WWW:

  1. You must physically move the file (using an FTP program such as Fetch or CuteFTP) to a location given to you by your ISP for your web pages and data. In conjunction with this, you may also have to set file access permissions (particularly if the image is to be a link or image map). Consult your ISP's webmaster for details on this.
  2. You must type an HTML file, and include an image tag at the place on the page where you want the image to appear. (If you're using a WYSIWYG page editor, use its image insertion command). Assuming that you put your images and HTML files in the same directory or location on the web server (the simplest case), the basic image tag for a file called foo.jpeg would look like <IMG SRC="foo.jpeg">. There are many options and variations for the IMG tag, consult an HTML reference for details.

TIP: It is difficult to overemphasize the importance of small image file size, particularly when working on the world-wide web. When a visitor links to your web page with his browser, the remote web server transfers all your page's HTML code and image files in full to his computer for the browser to display (the files get stored in the browser's local cache directory). Obviously, then, the smaller the image files, the quicker the page will finish loading. Since most of us are rather impatient when browsing, it is in your interest to make those files as small as you possibly can if you want us to wait around to view your site.

eBay auction pages

Selling fountain pens has become very popular on the eBay auction website, and sellers have found that they get higher prices when they include pictures with thier descriptions. This page was originally prepared as a primer to help propsective e-sellers, so let's spend a minute or so on how you can include images in eBay descriptions.

When you place an ad with eBay, you can specify that one or more images be included in the ad. You don't send the images to eBay; instead, you post them yourself to some location under your control (such as your personal web space provided by your ISP), and embed an HTML image tag in the description. In other words, you follow step #1 under "Web pages" above, then type an image tag as part of the description in the form that eBay provides for listing your articles for sale. When typing the SRC field of the tag, use a fully-qualified HTTP link (get this from your ISP's webmaster if you don't know it). For example, here's a simple description you might type right into the form to show a centered image just below a bit of text:

    This pen is in near mint condition except that it has a huge crack up the cap and has no original parts. I also spilled nail polish remover on it while I was trying to clean off the paint, so it is a little melted.

    <CENTER>

    <IMG SRC="http://www.myisp.com/~mysite/lousypen.gif">

    </CENTER>

Obviously, you want to retain that image on your web space until after the item is sold.

You can also include other HTML tags in your description for other "special effects" such as animated GIFs (although I beg you in the name of decency not to do so) or even page counters (so you can see how many people have checked the ad).

It stands to reason that bidders will be more likely to bid on merchandise they can see, so including pictures in an eBay ad is obviously worth the effort if you have the tools to do so. On the other hand, slow-loading or poor-quality images may not necessarily inspire much trust in the seller's competence, or interest in his offerings. So, it is up to you to make sure you provide an attractive graphic with a very small file size.

Common problems with eBay graphics include:

  • Gigantic images where the seller chose a high "default" resolution of 300dpi rather than a more sensible 72dpi. Not only do they seem to take days to load, they also require the viewer to scroll around; you can't see the whole image on one screen.
  • Too much "grayspace" (seller did not crop unimportant background out of the picture).
  • Fuzzy, poorly-dithered, indistinct, and low-contrast images (which can easily be fixed by good original scanning and elementary image manipulation).
  • Redundant images (e.g., more than one side view of the pen) Why make people load two nearly-identical views when waiting for one is painful enough?
  • Slow loading from certain servers (there's not much you can do about this, except to make sure that your file is nice and small so it will not be as drastically affected by poor network performance)

You can avoid these errors by following the directions in this article.

e-mail

Compared to making web pages, sending images by e-mail is very easy. All you have to do is compose and address an e-mail message, then use your e-mail program's "attach file" command to locate and attach the image file. When the recipient gets the message, he or she can save the file to disk separately for viewing (some mail clients may allow the image to be viewed directly using a "helper" program).

Normally, the binary file transfer process is completely transparent to both sender and recipient, although misconfiguration of servers on either side can result in "encoded" attachments that may have to be decoded by the recipient using a MIME or UU converter (assuming the attachment hasn't also been mangled in the transmission process). can be converted by hand back to a binary form. If you are going to be sending lots of files to someone via e-mail, it makes sense to test the process first using a small but representative image file.

It is proper netiquette to send such attachments only when you are sure that all recpients want to (and are able to) see them. Many people get angry about having to download large image files they didn't ask for. So, don't post images to mailing lists, non-binary usenet groups, or other "public" forums.

You can attach any kind of file to an e-mail message, but if you stick to JPEG and GIF, the recipient will always be able to open them using the "open file" command of his or her web browser.

If you don't want to attach files to e-mails, you can put them in your web space or in your ISP's anonymous FTP space, and tell the recipient where to download them using a web browser or FTP client.

SUMMARY

Here's a step-by-step bare bones procedure you can use to scan an image.

  1. Get a preview scan
  2. Crop the preview down to the area of interest
  3. Choose 72dpi resolution
  4. Choose RGB or True Color or Color Photograph setting
  5. Choose 100% scale (for "actual" size) or higher (for details).
  6. Capture the scan to your image editor.
  7. Increase contrast
  8. Sharpen image
  9. Crop picture to smallest possible size.
  10. Save as a JPEG at "medium" quality.

To put the image on a web page

  1. Use FTP to more the image file to your web space.
  2. Type an HTML file with an image tag identifying the image file.
  3. Move the HTML file to your web space.
  4. Set necessary file access permissions, and make sure your image file and HTML file are in the proper directory relationship.

To use the image in an e-bay auction ad:

  1. Use FTP to move the image file to your personal web space. Set the necessary file access permissions.
  2. When typing the e-bay form, include an HTML image tag identifying the image file. Be sure to use a complete URL in the SRC field of this tag.

 

visitor count: [an error occurred while processing this directive]

This file last posted on:
2005-Jan-20 17:50:26 CST
MCMVIII, the red network
Contact: