Gary L. Simmons  rev 06/17/03  webwonks.org/WebBuilding/ScanBasics.html
Home  Marathon  Joke OT Weak  Web Building  Resumé  Lynx  Hobbies  Extra  Site Map Resume Joke of the Weak Go to next department

Gary's Web Building

Scanning Basics

A fun way to add personal or other graphics to your web site is to scan something. I used a scanner on this web site to provide photos from my family album and some really stupid childhood art I had squirreled away, all of which is fun to ridicule. You should really make fun of yourself on your web pages, everybody else does. Heck, even I make fun of you and I am your friend. Kind of. I will never forget you finked on me for pants-ing the new kid in 3rd grade though. And that time you punched   me in the head while I was making fun of Susie Farkmire. Where the hell did that come from? ANYWAY, scanning isn't hard. You only need to know a few basic things to get started. I was helping a friend use a scanner and after just half as much information than is presented here, he was off and scanning. I realized then that I should put this information in the web building section of my web site. So buckle up, wear protection, and have a look at some scanning basics.

  • TWAIN?

    The way most new scanners work these days is through regular graphics programs using TWAIN. What is TWAIN? TWAIN is a protocol developed by leading imaging hardware and software companies and is now an industry standard. Depending of who you hear it from, TWAIN was an acronym developed playfully from "technology without an important name." However, the TWAIN Working Group says that, after the name originally chosen turned out to be already trademarked, the group came up with TWAIN at the last minute, deriving it from the saying "Ne'er the twain shall meet," because the program sits between the driver and the application. The name is not intended to be an acronym.

    Lots of graphics programs use TWAIN, even GraphicConverter 3.8 can nab graphics off of scanners. Look under the "File/Acquire" and do a "TWAIN Acquire". Or in Photoshop do a "File/Import" and do a "TWAIN Acquire" or do a "TWAIN select" from the same menus in either graphics programs and select which of the scanner programs you want if you have several scanning programs    .

  • In general

    In general, when you get your scanner software running and you want to scan a graphic or a photo, make sure you scan with your scanner set to Flatbed reflective, color RGB, 300 DPI (Dots Per Inch), no descreen, and the size should be 100% if you have that option. You can mess with these settings when you get a chance. The descreen functions allow for better looking scans from newspapers and magazines.

  • Descreen?!?

    Eek! Now, what is "descreening"? Descreening is a way to optimize your scan by altering the LPI (Lines Per Inch) at which you scan. There are 3 main descreening settings. These are only guidelines, use your scanning software to tweak these settings. Experiment, have fun, make your own rules.

    Here are the settings:

    1. Magazines - should should be scanned at 133 lines per inch. This smoothes the dot pattern found in glossy magazines.
    2. Newspaper photos - should be scanned at 85 lines per inch, This smoothes the coarse grain pattern commonly found in newspaper images.
    3. Art prints - are scanned at 175 lines per inch. This smoothes the fine dot pattern found in high quality art prints.

  • Resolution revolution

    One more thing, I do all my tweaking and cleaning and touching up while the image is 300 DPI. Why 300 DPI? Well, it is best to start with a high DPI and reduce it to a lower DPI for 2 reasons.

    1. The graphics program has more information to work with, your filters and other changes will look better when worked with at a high resolution.
    2. File size. A 300 DPI file that is 20 Megabytes can reduce down to 800K when it is converted to 72 DPI.

    Why 72 DPI? That is the resolution of your computer monitor and we are talking about graphics that will only be seen on a CRT. A 300 DPI image looks huge on a 72 DPI monitor. 4.166 times as big as a matter of fact. Here is a trick you should learn, take your lower DPI and divide it by your higher DPI and you will have the percentage that you need to tell Photoshop to reduce your image by. EX: 72 divided by 300 equals 0.24 which gives you the percent, 24%. Now hold that thought. Your eyes are starting to glaze, be patient, you will see where I am going with that.

  • OK ready?

    Here is how I use Photoshop to scan. I scan at 300 DPI and RGB colors, these settings are on your scanner software, not Photoshop, although Photoshop will import these settings automatically when you scan. In Photoshop use your square selection tool or crop tool to select which part of the scan you want to keep then select "Crop" from the "Image" menu.

    Next, if the image is black and white I can save a lot of file size by going to the "Image" menu and selecting, "Mode", "Grayscale". Otherwise if it is going to be a color JPEG leave it at "RGB Color", if it is to be a GIF then select "Indexed Color" See Optimize Your Graphics to determine if you want to make a GIF or JPEG file.

    After I have touched up the scan and I have what I want and I am ready to save to disk, I reduce the DPI and image size like we talked about above. In Photoshop, select "Image" and "Image Size..." and you will go to a dialog box. Do this in THIS order: (order is important)
    1. click the constrain proportions check box so that it is on.
    2. Set the print size width to "percent"
    3. Set the print size width percent to 24
    4. Print size height percent is set automatically by Photoshop.
    5. Set resolution to 72.
    6. Click OK.

    Pixel dimensions are set automatically by Photoshop. You will have to reset your view to 100 percent down in the bottom left corner of the window your graphic is in in order to see how it looks full size. Save your work. If you can do this in Photoshop, you can do it in GraphicConverter or other graphics program, the concept is the same.

    If you want it to be a JPEG or GIF then you would do much better setting it up in ImageReady or Fireworks. Fireworks does it best. In Photoshop when you do a "Save As..." you can specify it to be a JPEG and you have an options button to set the amount of compression but you cannot see the results of your compression until after you have already done the deed. Image Ready is better at making jpegs and Fireworks rules at it. To make a GIF out of your graphic, make sure it "Indexed Color" as shown above and then you use the "Export" command from your "File" menu. Here is more information about optimizing your graphics for presentation on your web pages.

  • See that spider below?
    That was scanned out of a book I use to identify spiders. I used the techniques outlined here. In addition, to grab just the spider and not the leaf he is on, use your magic wand tool with the tolerance set so that it grabs just the spider and not the leaf. putting it onto a color that matches the web page background it will appear on does the rest of the blending. When I converted it to GIF format, I made the background color of the GIF transparent. Why? It makes the outlines of the image blend into the background it appears on. You can avoid the tacky look of an outline or halo of colors or "sparkly whites" around your image. It makes it look like it is sitting on your web page very cleanly and professionally. Try it out.
Top of page

back to Web Building