What is a 'screen shot'?

A ‘screen shot’ refers to an image of the computer’s desktop that is created when you press the Print Screen key. There are times when you may want to take a screen shot so that you may select a portion of the desktop image and use it in a web site. For example, if you wanted to have an image linked to a movie you could play the movie, take a screen shot and then crop the image so that only the movie image remained. That image could be saved and placed in your web site.

To use an image from a screen shot follow these steps:

1. Open on your computer the item that you want included in the finished image.
2. Press the Print Screen key.
3. Open a graphic editing program such as Photoshop.
4. Open a new file and then choose Paste from the Edit menu.
5. Use the Crop tool to select the part of the image you want to keep.
6. From the File menu select Save for Web. Optimize the image for web use. (see Class Lessons/Graphics/Optimizing Graphics for details)
7. Save the image file in the images folder of your web site. 

A screen shot of my desktop with two monitors taken while working on this tutorial.

Taking images from the internet and using them in your site is acceptable practice when you are building the site for a class such as this. If you are building a site that will be available to the general public then using images, without permission would violate copyright law and you could be charged with a crime.

To use an image found on the internet:

1. Right-click on the image.
2. Choose Save Image As…(Firefox) or Save Picture As…(Internet Explorer).
3. Save the image in the images folder of your web site.

Or, even better:

1. Right-click on the image.
2. Choose Copy Image (Firefox) or Copy (Internet Explorer)
3. Open Photoshop. Open a new file and paste the image.
4. Edit the image to suit your requirements.
5. From the File menu select Save for Web. Optimize the image for web use. (see Class Lessons/Graphics/Optimizing Images (below) for details)
6. Save the image file in the images folder of your web site.

Every image that appears in a web browser must be copied from the web server and written on the user’s computer. The larger the file the longer it takes to copy, or download to the user’s computer.

Optimizing an image is a method used to minimize the size of the image file so that it will load quickly in the user’s browser. If an image from a digital camera was placed on a web page without regard to its file size it would likely take a very long tome to appear on a web page. When a digital camera takes a picture it does so at a very high resolution, around 300dpi (dots per inch) or greater so that when the image is printed it will have very good detail. By contrast, images on a web site are presented on a monitor that can only display images at 72dpi. In general there is no need for a 300dpi image on a web site.

Steps to optimize an image using Photoshop:

1. Open the image in Photoshop
2. Edit the image if necessary.
3. From the Image menu select Image Size…
4. Set the Resolution to 72 pixels/inch.
5. Set either the width or height to the value needed to fit in the space available on the web page where it will be placed.
6. Press OK
7. From the File menu select Save for Web…
8. From the Settings area on the right side of the Save For Web window choose the JPEG (Joint Photographic Experts Group) format if the image is a photograph or has photographic qualities. Choose the GIF (Graphics Interchange Format) format if the image is flat and cartoon-like.
   • For JPEG Images:
     • Adjust the quality by selecting from the dropdown Low, Medium, High or Maximum. As you change the quality you will see the image change. If you look at the bottom left corner of the window you will see the file size and time needed for the image to appear on a user’s browser. The intent is to find a quality level where the image still looks nice but is not taking too long to download.
     • After you are finished optimizing the image press Save. Save the image in the images folder of your web site.
   • For GIF Images:
     • From the colors dropdown select the number of colors that gives the image a decent appearance with a short download time.
     • After you are finished optimizing the image press Save. Save the image in the images folder of your web site.