Saving an Image as a Graphics File

Figure 1: NotePad screen copied to the IrfanView image viewer
Figure 2: The "Image" menu in IrfanView; note the Resize/Resample option
Figure 3: Resize/Resample image in IrfanView
Figure 4: "Save as type" options in IrfanView
Figure 5: "File, Save As" in IrfanView with "Options" selected

Hints and Suggestions

Copy the active window to the clipboard using Alt + Print Screen, or copy the entire desktop to the clipboard with Print Screen. Images you want to include in a web page (HTML document) can be pasted directly from the clipboard into a graphics editing/viewing application such as Photo Editor, IrfavView, etc. I will use IrfanView in the examples here and in class. See the Resources page for a link to download the free graphic viewer IrfanView

Open the application you want to paste the image into. In this example I saved an image of a NotePad window and copied it to the IrfanView image viewer. After capturing the Notepad window with Alt + Print Screen I went to IrfanView and pasted the clipboard with the Ctrl+V key combination; you could also use the Edit | Paste menu combination.

Figure 1
NotePad screen copied to the IrfanView image viewer.

After the image has been copied to the clipboard and pasted into a graphic editing or viewing program you can make any changes to the image that the graphic program is capable of, then save the image in a format suitable for inclusion in an HTML document. The main alterations you will probably want to make are cropping, resizing, and "save quality."

Most Windows screens save well using the GIF format. You can also try the JPEG format (.JPG ) with a relatively low "save quality." Unless you specifically need to show output details of a screen you can usually resize the image up to half the original to minimize final file size. Resizing does not work very well with GIF format; in fact it is not uncommon the end up with a greater file size and worse quality!

Figure 2
The "Image" menu in IrfanView; note the Resize/Resample option.

Figure 3
Resize/Resample image in IrfanView.

Figure 4
"Save as type" options in IrfanView.

Figure 5
"File, Save As" in IrfanView with "Options" selected.
Note the "Save Quality" option.

If you already have images in a Word or Wordpad document that you want to use:

• Open the document in Word or Wordpad
• Copy the window to the clipboard using Alt + Print Screen
• Paste it into IrfanView (or another graphics editing tool)
• Crop your desired image out of the word processor image

Pressing the Alt key while a menu is open will close the menu, therefore you cannot use Alt + Print Screen to copy the current window. If you want to show a menu or nested menu item you must copy the entire screen and then crop the area you want. To show the IrfanView "Image" menu in Figure 2 above I had to press Print Screen by itself to copy the entire screen to the clipboard. I then pasted it directly into IrfanView and cropped the area I wanted to show. Notice that since all I wanted to show was the Image menu I also cropped out most of the irrelevant IrfanView window as well.

Watch your image file sizes and total amount of images:

• Do not show great detail unless necessary: shrink images and lower the save quality as applicable.
   
• Crop out areas of blank screen that do not add content or clarity to your example or illustration.
   
• Make your own illustration with the Paint program and reduce the colors to just black and white where possible.
   
• Try to get as much "illustrative mileage" as possible out of each image.