Mr. O'Connell's Technology Home Page
home courses credentials links

Screen Shot Tutorial

This tutorial shows you how to take a snapshot of any screen on your computer, and then prepare it for inclusion on a web page.

  1. Open the screen you wish to include on your website. It can be from any application whatsoever.
  2. Tap "Print Scrn" on your computer keyboard.
  3. Open Photoshop Elements.
  4. File>New>Blank File
    1. By an amazing coincidence, the new file will be the same size as your screen.
  5. A New dialog box opens. Name the file with a web-friendly name.
  6. Edit>Paste
  7. Crop as needed
  8. File>Save As
    1. Format>CompuServe GIF (*.GIF)
  9. Save the image to the image folder of your website
  10. Drag it onto the appropriate page.
  11. You're done

If the image is too large to fit on your computer screen:

  • Open the screen you wish to include on your website. It can be from any application whatsoever.
  • Tap "Print Scrn" on your computer keyboard.
  • Open Photoshop Elements.
  • File>New>Blank File
  • A New dialog box opens.
    • Double the number in the box next to height. For example, if 768 Pixels appears, replace it with a height of 1536 Pixels.
    • Name the file with a web-friendly name.
  • Edit>Paste
  • Go back to your original screen, and scroll down so you can see the remainder of the screen.
  • Tap "Print Scrn" on your computer keyboard.
  • Switch back to Photoshop Elements.
  • Edit>Paste
  • The second screen shot appears own it's own layer
  • Move, Edit and Crop as needed
  • File>Save As
    • Format>CompuServe GIF (*.GIF)
  • Save the image to the image folder of your website
  • Drag it onto the appropriate page.
  • You're done