Mr. O'Connell's Technology Home Page
home web design business and personal finance biography links2

Tutorial: How to take a Screen Shot

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.
  4. File>New (or Ctrl+n)
    1. The New dialog box opens. Name the file with a web-friendly name.
    2. By an amazing coincidence, the new file will be the same size as your screen.
  5. Edit>Paste(Ctrl+V)
  6. Resize as needed
    1. Ctrl+Alt+I
    2. width: 700 pixels
    3. Click okay
  7. File>Save As (Ctrl+Shift+S)
    1. Format>CompuServe GIF (*.GIF) or jpeg.
  8. Save the image to the image folder of your website
  9. Drag it onto the appropriate page
  10. Add an Alt tag
  11. You're done
Blackboard

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.
  • Edit>Paste (Ctrl+V)
  • 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.
  • Add an Alt tag
  • You're done