Note: I've added brief descriptions of how to resize and crop an image under 4 and 5 below, in case you weren't in class the day we discussed this or have forgotten.
This lab will require you to do some fairly simple graphics manipulation with Paint Shop Pro, then place the results in a web page for easy viewing. You can place the web page (with the linked images) in a folder with "Your Name - Lab 12" as the folder name in our class folder -- no need to add it to your web site unless you want to.
The lab involves doing the following:
1. Open a window (any window!) and capture an image of the window. You can do this by pressing <ALT><Print Screen> on your keyboard. (<PrintScreen> without the <ALT> will capture the entire desktop.) This copies the image to the clipboard. It will not print the image or save it as a file without further work!
2. Open Paint Shop Pro. Under the Edit menu, select "paste as new image." You will see the image in a window in Paint Shop Pro. (Since it is an image of a window, this will look like a window inside a window!) (If the image is displayed at half size, you can choose "Normal Viewing" under the View menu to change it to full size.)
3. Save the image in three different formats: .bmp, .gif, and .jpg. (Do this by using the Save As . . . command under the File menu. The JPEG format will appear where you expect it in the list. GIF will be under "CompuServe Graphics Interchange." .bmp will be under "Windows or OS/2 Bitmap." (The easiest thing would probably be to create a directory called "Your Name - Lab 12" and save the images to this directory. Then when you're finished you can simply copy this directory to the class folder.)
4. Resize one of the images at least once and save it under a different name. (E.g. if your gif image is named "window.gif" and you resize the gif image to make it half as large, you might call the new image "window50%.gif".)
(How? With the image open in Paint Shop Pro, select "Resize" under the Image menu, and choose the size you want, either in pixels or as a percentage of the original image. Then select "Save As . . ." under the File menu, and give the revised file a different name, so as not to obliterate your original file.)
5. Crop one of the images and save it under a different name (e.g. "window_cropped.gif").
(How? Select the Crop tool from the toolbar at the left of the window. (Each tool will display a label if you leave the mouse arrow over it for a moment.) Use the tool to select the area you want to preserve from the original image. Then under the Image menu select "Crop". The areas of the image that you didn't select will disappear. Use the "Save As . . ." command under the File menu to save the revised file under a different name, since you want to leave the original file as is.)
6. Now use Netscape Composer (or another HTML editor of your choice) and construct a web page. Include all your images in the web page in the following order: .bmp, .gif, .jpg, resized image, cropped image. Under each image include the following information: which image it is, how large the image file is (in kilobytes -- find this by right-clicking on the file in Windows and selecting Properties), how large the image is (in pixels, e.g. 150 X 200 pixels -- you can find this out by selecting Image Information under the View menu), and how many distinct colors are used in the image (you can find this last information by selecting "Count Colors Used" under the Colors menu), and what the possible number of colors is (Image information again -- the second number listed after "Pixel Depth/Colors). (Note that if the number of colors actually used is significantly less than the number your bitmap file is capable of holding, you can significantly reduce the size of the bitmap file by selecting "decrease color depth" under the Colors menu and picking the smallest depth capable of holding the number of colors the image actually uses. This isn't part of the assignment, but you might want to play with it just for fun!)
7. In your web page, answer the following questions: Which compressed image looks better, the GIF or the JPEG? Why do you suppose this is?
8. In your web page, discuss the reasons for the relative size of the images. (E.g. which is largest? Why? Why are the others so much smaller?) Explain the size of the bitmap file by calculating the total number of pixels and multiplying by the bit depth (number of bits/pixel).
9. Save the web page to the same directory as the images. Make sure the links to the images are relative links! Copy the whole directory to the "lab12" subdirectory of the class folder. (The easiest way to do this is to have open both a window for our class folder and a window for your own folder which contains the folder with your assignment; then just drag the folder with the assignment to the lab12 subdirectory of the class folder.)
That's it!
Due: Thursday, November 12.