Scanning and Modifying Images for the Web

Note that every scanner works somewhat differently. The notes below apply to the scanners in Macmillan 101 and 110. Other scanners will follow the same principles but will look a little different. In this tutorial you will scan directly into Photoshop since you will need Photoshop for other purposes anyway, but it is also possible to access the scanning software that comes with each scanner directly.

  1. Place your image on the scanner face down in the upper right-hand corner.
  2. Start Photoshop.
  3. In Photoshop go to File | Import | HP PrecisionScan 1.01
  4. Make sure the Scan in Color box is checked and that the upper box is set to Scan to Photoshop, then press the Scan button.
  5. In the Precision Scan Viewer window click Accept.
  6. To crop the image to get just the part you want: make sure the square cropping tool (dotted rectangle) in the upper left-hand corner of the tools palette is highlighted, then place the crosshairs in one corner of the image you want, press the mouse button, and pull it to the opposite corner. When it forms a rectangle around the part of the image you desire, release the mouse button. You will see a dotted line around the portion you have selected for cropping. If you are not satisfied, click once anywhere in the photo and try again. If you are satisfied, go to Image | Crop and release the mouse button.
  7. To adjust color: go to Image | Adjust | Levels and move the slider bars on the two sides to the beginning and end of the color spectrum in your image.
  8. To adjust size: go to Image | Image Size and select the dimensions of the desired image in pixels (not inches). Note that you will enter either height or width, since the other dimension will adjust accordingly.
  9. It would be a good idea to save a large copy of the image first, since you can always go back to it and make smaller derivatives. You cannot go from a smaller copy to a larger one without losing image quality. Go to File | Save As, then browse to the location you want to save the file on your Zip disk or floppy. Make sure the Format box is set to JPEG (*JPG, JPE). Name the file with a short, contiguous filename with a .jpg extension (e.g. janedoe1.jpg). Using a number at the end of a filename makes it easy to name related derivatives such as janedoe1a.jpg, janedoe1_small.jpg, etc.
  10. In the JPEG Options window, make sure the Image Options box is set to High (not Maximum) and that Format Options is set to Baseline ("Standard"). Then press OK.
  11. Go to Windows Explorer, browse to the location where you saved the file, and take a look at is file size. You may need to go to View | Details to prod  Windows to show more than just the file name. Large files take a long time for users on dial-up connections to download. It is good practive to make sure that inline images (those located directly in a page, which appear every time the page is viewed) are not more than 40 kilobytes; images that are accessible as links, which the user chooses whether or not to view, may be considerably larger, but should not be over 100 kilobytes.
  12. To get an idea of what size your image will be when viewed in a Web browser, start Netscape and go to File | Open Page | Choose File, browse to the image you have just stored, and doubleclick on it.
  13. If the image is too large either in terms of display size in your browser or in terms of file size, return to Photoshop, once again go to Image | Image Size, and reduce the size of one of the dimensions.  For purposes of estimates: most images on the Wells Web site are about 220 pixels by 150 pixels. A "thumbnail" will be much smaller still (perhaps 85 x 85 pixels). When you have finished resizing your image, go to File | Save As and give the file a different file name (e.g. janedoe1a.jpg or janedoe1_small.jpg) so that it does not overwrite your larger original. That way, if you later want to use an image size that is in between the two, you can start with your large original.
  14. Check your new image in Windows Explorer for file size and in Netscape for display size. If you are happy, you're done. If you are not satisfied, go back to your original (largest) image and try yet another Image | Image Size operation. Each time use File | Save As to save the file with a different file name so that you do not overwrite the images you have already done (they may come in handy!). It is often nice to have both a relatively small image (c. 150 x 220 pixels) for inline display on your page and also a considerably larger one (c. 300 x 440 pixels or larger), which you can make available if someone wishes by clicking on your small image.


 
Prepared by Ken Larson, Professor of German, Manager: Computer and Network Operations, Webmaster
Wells College, Aurora, NY 13026
Voice: 315.364.3305; Fax: 315.364.3227; Email: klarson@wells.edu


This page belongs to Ken Larson, who is solely responsible for its content. Please see our statement of responsibility.
Revised: December 13, 2001