Internal USGS Access Only

Assignment Set 3

Graphics

Reminder: To download an image using Netscape, click on the image with the right mouse button, and select Save Image As
 
Note: To force Netscape to refresh images, hold down the shift key while clicking on "Reload".

To Open Gimp

1. Gimp has been installed on your machine. You can access Gimp through its desktop icon or through Start --> Programs --> Gimp --> Gimp.

2. Right-mouse click on the shortcut, select Properties, and change the Start in: setting to be your home directory with "\public_html" added.
   "X:\usgs.gov\user\userid\public_html"

Optimize a graphic for a web page

Start with Lorna in the Rocky Mountains.

Remember:

GIF

Best for line drawings

Reduce number of colors and interlace

JPEG

Best for photographs

Image should be progressive if possible.

NOTE: Most functions in gimp are accessed with a right click in the image!

We will compare a .gif, a .gif with a reduced number of colors, and a .jpeg file. So let's create them:

1. Using gimp, open the image and crop
   • Select File --> Open. If you have the image saved in a directory, move to that directory. Select the file, then click OK.
   • To activate the crop tool, right click with your mouse and select Tools --> Transform Tools --> Crop & Resize
     Note - move the Crop and Resize Information box to the side of the picture before selecting an area.
     • Left click and drag on the image to select the portion of the image to crop
     • You can re-size the crop area using the upper left and lower right box corners, or move it using the upper right and lower left box corners. If you click within the crop area, the image will be cropped.
     • When finished, select Crop from the Crop and Resize option palette. You can also select Close to cancel that crop, or right click on the image and select Edit --> Undo.
   • Save with a new name. (Right click on the image, then File --> Save As)

2. To reduce the number of colors:

   • Image--> Mode --> RGB
   • Image--> Colors --> Posterize and optimize the number of colors; selecting the smallest number of colors that gives you good photo quality.
   • Image--> Mode --> Indexed and select the same number of colors as above. The image may look different Indexed vs. Posterized.
   • Save with a new name.

3. Save file as a jpeg:
   • Image --> Mode --> RGB
   • Save as jpeg

   In gimp, to save a gif as a jpeg, the image must be "rgb"ed (Right-click menu option Image -> rgb).
   To save a jpeg as a gif, the image must be "index"ed (Right-click menu option Image -> Index).

4. Determine which image is best to use for the Web. This should include looking at the file sizes. File sizes are listed in the File Explorer; select View --> Detail.
5. Create a thumbnail of the image.
   • Image --> Scale Image
   • Modify values in the Pixel Dimensions section. Using the ratio section to keep the thumbnail correctly proportioned, shrink the height and width to under 100 pixels.
   • Save with a new name.
6. Create a link to the optimized graphic. Use the thumbnail as part of the link.

II. Make an image background transparent on a web page

Save your choice of these files to your images folder:
    bugs_bunny.gif
    marvin.gif
    opus.gif

To set transparency using gimp

1. Start gimp and bring up the image. If you still have gimp open, use File --> Open.
2. Image -> Alpha -> Add Alpha Channel. (The alpha channel is used for transparency.)
3. Select -> By Color.... A window will pop up.
4. Click with the left mouse button on the color that you want to make transparent in your image. The window that popped up should show the color you selected as white. You can close that window now.
5. Edit -> Clear.
6. Select -> None.
7. File -->Save and then OK in the pop-up that appears.
   Save the image; place it on your web page.

assignment 3

---

"Mastering a Website" online course Created and maintained by Lorna Schmid and David Boldt. Last modified: Fri Aug 22 19:33:48 Mountain Daylight Time 2003