How to convert Graphics for the WWW

Scanning

Scan your image at a good resolution (so the computer can correctly interpolate the colors). Set the scanner software to Scan at 300 dpi, and Millions of Colors. Save your archival image as a TIFF or PICT file.

After scanning and saving your file, you need to import your file into Photoshop. Here you will change the image into the formats that WWW browsers can use. These formats are called JPEG (higher quality) and GIF (lower quality).

If image corrections are necessary, such as adjusting brightness/contrast, tweaking the color, removing Moire pattern, or adding a mustache, etc., they must be made before converting your image to a JPEG or GIF. See Photoshop Quick Fix Techniques on how to do these easy steps.

If you are only making inline images without, high-quality image links, jump right to the GIF converting process. If, on the other hand, your low inline GIF is going to link to a higher quality JPEG, than follow all the instructions below in order. You will be making your lower quality GIF image from your JPEG.

The Converting Process

JPEG
Open your Archival image in Photoshop
  1. Under the Image Menu -->Image Size.
  2. Change inches to pixels (in the drop-down box).
  3. Key in your desired height or width measurement. Check the Constrain Proportions so it is Locked. Your file image will be reduced proportionally, meaning you only have to key in one number and the other will change too.
  4. Change the Resolution --> 72 pixels per inch.
  5. Click OK.
  6. Under the File Menu -->Save As
    Type in the name of your file. Be sure to have no spaces in the file name.
  7. In the Format drop box --> JPEG

GIF
Open your Archival or JPEG image in Photoshop.

  1. Under the Image Menu --> Image Size.
  2. Change inches to Pixels (in the drop down box)
  3. Key in your desired height or width measurement. Check the Constrain Proportions so it is Locked. Your file image will be reduced proportionally. Meaning you only have to key in one number and the other will change too.
  4. Change the Resolution --> 72 pixels per inch
  5. Click OK.
  6. Under Mode --> Indexed color.
    Choose 8 bits, Adaptive Palette, and Diffusion Dither.
    By sampling the image and using the best selection of colors available, this process drops the image's 16 million color palette down to 256 (8 bit) to create a new palette.
  7. Under the File Menu -->Save As
    Type in the name of your file. Be sure to have no spaces in the file name. Be sure to add (if the software does not) the .GIF extension so your browser can read it.
  8. In the Format drop box --> Compuserve GIF.
Your files are now ready to be linked to your HTML document.

Remember, 72 pixels equals 1 inch on most computer screens. Below are some examples of a few sizes that work well for anything from buttons through banners.

Here are some examples of what GIF image sizes look like.

36 high
x 26 wide		72 high
x 52 wide		144 high x 103 wide216 high x 155 wide

288 high x 208

A Word About File Transfer

If your files are completed and ready for Internet access, you should upload your images as Raw Data format.

If you are using a site scanner and would like to send these files over the campus network to be downloaded to your machine for later use or correction, the file must be sent as Binary format.

Find out how to get the best images possible.

A brief tutorial on using Photoshop to adjust brightness/contrast, color and remove Moire.
The Graphics Technology Cookbook text links
Digital cameras
desktop video
and sound		 Web pages Class handouts and
PDF instructions		 Images
scanning
and printing		 Slides and
presentations		 Multimedia
and Authoring		 NewMedia
User Web Site