CNIT 135A Bowne HW 6

Graphics

25 Points Maximum

Overview

You need two images to work with -- a JPEG image and a GIF. The effects here work best if the JPEG is a detailed painting or photograph, and the GIF is a cartoon or line drawing.

You can use images you created, or find new images on the Web. Save both images in a floppy disk or anywhere else you can find them. Make a note of the names of both images, their file sizes, and the URLs you got them from (if they are not your own property).

In my examples below, I will use the filenames ship.jpg and bird.gif for the original images. Your images may have any name you like. In this homework, you will make seven images by modifying those two images, and make a web page with all seven images on it.

Downloading Irfanview

You need a graphics program to modify the images. For PCs, the easiest one is Irfanview. To get it:
  1. Open a browser and go to irfanview.com

  2. On the left, click Download

  3. Click the upper link, labelled TUCOWS Worldwide Network - Download Irfanview

  4. A TUCOWS window opens. On the right, under the Download title, find your operating system and click on it.

  5. A page opens with a Software Library banner. In the United States section, select California.

  6. A page showing one or more MIRROR NAMES appears. Click on one of the MIRROR NAMES.

  7. If you have Service Pack 2, an Information Bar window pops up, because Service Pack 2 blocks the download. Click OK to close the Information Bar window. Click the yellow Information Bar near the top of the browser window, and select Download File.

  8. If a File Download - Security Warning box opens, click the Save button. Save the file on your desktop. It is not big -- smaller than 1 MB, so it can easily be downloaded even with a dial-up connection.

  9. Close all windows and double-click the iview392.exe file on your desktop. If a new version has been released since I wrote these instructions, the number may be larger than 392.

  10. If a Security Warning box pops up, click Run.

  11. An Irfanview Setup window opens. Click the Next button four times. When you see an Installation Successful! message, click the Done button.
Irfanview Save As dialog

JPEG Compression

  1. Click Start, All Programs, Irfanview, Irfanview 3.92 to launch Irfanview.

  2. Click File, Open, and open your original JPEG image.

  3. Click File, Save As... to open the Save Picture As... box as shown to the right on this page. In the Save as type: drop-down list box at the bottom, select JPG - JPEG Files.


    4. JPEG/GIF Save Options box
  4. In the JPEG/GIF Save Options box, drag the Save quality slider to 15, as shown to the right on this page.

  5. In the Save Picture As... box, navigate to your floppy disk, or to the folder you are using, change the filename by adding "_comp" to it (to indicate that this is a compressed file), and click Save.


    6. Folder with compressed image
  6. Open My Computer and open the Floppy Disk (or the other folder you are using). Click View, Details to show file sizes. Find the original JPEG and the compressed version, as shown to the right on this page. The compressed version should be much smaller -- half as large or smaller. If it is not, repeat the process above, but drag the Save quality slider to a lower value.


  7. Close Irfanview.

Shrinking an Image

  1. Click Start, All Programs, Irfanview, Irfanview 3.92 to launch Irfanview.

  2. Click File, Open, and open your original JPEG image.

  3. Click Image, Resize/Resample. In the Resize/Resample image box, click the Half button, and then click the OK button. You should see your image shrink.

  4. Click File, Save As... to open the Save Picture As... box. In the Save as type: drop-down list box at the bottom, select JPG - JPEG Files.

  5. In the JPEG/GIF Save Options box, drag the Save quality slider to 50.

  6. In the Save Picture As... box, navigate to your floppy disk, or to the folder you are using, change the filename by adding "_half" to it, and click Save.

  7. Close Irfanview.

Cropping an Image

Irfanview with part of an image selected
  1. Click Start, All Programs, Irfanview, Irfanview 3.92 to launch Irfanview.

  2. Click File, Open, and open your original JPEG image.

  3. Click on your image and drag to select a portion of the image, as shown to the right on this page.

  4. Press Ctrl+X on the keyboard to cut out the selected portion of the image, and Ctrl+V to paste it in as a new image. You should see only the selected part in the Irfanview window.

  5. Click File, Save As... to open the Save Picture As... box. In the Save as type: drop-down list box at the bottom, select JPG - JPEG Files.

  6. In the JPEG/GIF Save Options box, drag the Save quality slider to 50.

  7. In the Save Picture As... box, navigate to your floppy disk, or to the folder you are using, change the filename with the same name as your original JPEG image, with a "_detail" added to it, and click Save.

  8. Close Irfanview.

Transparent GIF

JPEG/GIF Save Options
  1. Click Start, All Programs, Irfanview, Irfanview 3.92 to launch Irfanview.

  2. Click File, Open, and open your original GIF image.

  3. Click File, Save As... to open the Save Picture As... box. In the Save as type: drop-down list box at the bottom, select GIF - Compuserve GIF.

  4. In the JPEG/GIF Save Options box, check the Save transparent color box and verify that the Choose transparent color during saving option is selected, as shown to the right on this page.

  5. In the Save Picture As... box, navigate to your floppy disk, or to the folder you are using, change the filename with the same name as your original GIF image, with a "_tr" added to it, and click Save.

    6. Selecting the transparent color
  6. A Choose transparent color box appears with your image in it. Click on the image, on a portion of it with the color you want to make transparent.


  7. Close Irfanview.
NOTE: Some GIFs on the Internet are already transparent. If you want to remove transparency information from an image, unckeck the the Save transparent color box and save it as a GIF.


Use NotePad to make a Web page in HTML named hw6.html. Your web page must have the following

Required Elements

  1. Your Name and HW6 in the title bar of the browser window

  2. Your statement must include a background color, or a background image, or both, so that the transparency of the Transparent GIF is easy to see. To use a background color, use the bgcolor attribute in the BODY statement like this (you can use any of many colors, not just blue):

    <body bgcolor="blue">
    To use a background image, use the background attribute in the BODY statement like this (you will have to get a background image and upload it to the server along with your page):

    <body background="image.gif">
  3. These 6 images, labelled as shown below, including the file size in bytes or KB:

    • Original JPEG (file size)
    • Compressed JPEG (file size)
    • Shrunken JPEG (file size)
    • Detail of JPEG (file size)
    • Original GIF (file size)
    • Transparent GIF (file size)

  4. You must cite the sources of both of your images. If they are your own creations, say that.

  5. Put your Web page on the hills server, using SSH Secure File Transfer Client.

  6. Send the URL of your Web page to me at
    sbowne@ccsf.edu
    with the subject
    CNIT 131 TR 9:30 am HW6 from YOUR NAME.



Grading (partial)

-25 URL does not work
-1 each     Citation, File size, or label missing or incorrect
-3 each     Image missing or incorrect
-3 Late
Last modified 9-26-04