Introduction: Image Literacy

Harvard PoliSci Dept.
"Much more than word processing, however, hypertext demands that writers pay careful attention to the non-verbal....We have, however, 'a generally naive understanding of graphics' (Carlson, 1992:87), which figure significantly in hypertext. Learning how to read, produce, and exploit graphics constitutes one of a number of new demands imposed on users by the new technology."
(Ilana Snyder,Hypertext: Electronic Labyrinth, p. 18)
"...a computer screen: the visual is there, and the possibilities even of producing written text focus on visual aspects--font-types and size, layout, visuals to accompany the linguistic text--much more so than did the former technology of typewriters and typesetting. Even when the major element, quantitatively speaking, is writing, its visual aspects are more in the foreground, and are much more easily controlled."
(Gunter Kress, "Visual and Verbal Modes of Representation", in Ilana Snyder, From Page to Screen, p. 56)

So we need to control basic graphics for the Net. Fancy($$$) programs are not necessary--in fact, many of the basic operations can be carried out with Microsoft PhotoEditor (included in the standard Win95 distribution). But a few of them take a bit more horsepower, and we will work on using PaintShop Pro. (For more advanced uses of PSP, see

Quick PSP4 Tutorial

This tutorial covers:

  1. Converting formats; advantages of .gif vs .jpg
  2. Reducing depth of .gif palette (when to use 16 colors)
  3. Cropping and re-sampling
  4. gamma and histogram adjustments
  5. banners and buttons with text
  6. transparent gifs
  7. screen capture with PSP4

First Law: Always begin editing an image by increasing the color depth to 16 million colors unless it is already there


I.

The standard Net image formats are GIF and JPG; they are compressed. BMPs (MS), PICTs (Mac), TIF(F)s are not used and not supported by the main browsers. No one uses uncompressed formats on the Net.

  1. GIFs. Basically, GIF is an 8-bit format, which means it supports a palette of not more than 256 different colors. There are plenty of video cards around that do not support more than 8-bit color, especially at resolutions greater than 640x480. (Check the setting on your monitor right now by clicking Start-Settings-Display-Settings.) 256 colors are plenty for charts, diagrams, and buttons, but the average photograph may have thousands of colors. Most of these will be lost if the photo image is saved as a GIF--they will be dithered in the process of reducing the palette. This is sometimes no great loss in the overall look of the image. The greatest damage is done to extended gradients of color. GIF is a compressed format, but not lossy.
  2. JPGs JP(E)Gs support 24(32) bit color (16+ million colors). They are highly compressed; the degree of compression can be selected; it is a "lossy" process (i.e., the image loses some information) and it tends to introduce artifacts looking like heat ripples near straight edges, but for pictures from the natural world and color gradients, it surpasses GIF by a wide margin.
II
  1. By default, GIFs support 256 colors, but GIFs can be made and saved as 4-bit (16 colors) files with signficant savings in size. Many buttons, charts, graphs, and banners look fine with 16 colors; the best thing to do is try and see for each image. NB--You can't do this with a transparent background--only 8-bit basic format (of a GIF 89) supports transparency.
III
  1. Cropping: To trim away bad edges and excess stuff, use the rectangle tool to select the area you want, then Pull down Image and select Crop. The stuff inside the rectangle will be saved. Also, you can Copy the selected material and paste it into another picture. Also, you can select the area with some other tool (freehand lasso or Magic Wand for example), and crop or copy and then paste. Also you can make the cut fuzzy with Feather.
  2. Resampling: In order to reduce the dimensions of an image (to make a thumbnail, for instance), select Resample rather than Resize under Image; you can select the dimensions you want to come out with, but be careful to keep the aspect ratio constant, unless you want to stretch or distort your image.
Exercise(s): check out info poster.
IV.
  1. Gamma Scanned images are often a little too dark for the Net. If so, try Colors/Adjust/Gamma with a setting of anywhere from 1.4 to 1.8. If you don't like it, Undo in Edit.
  2. Histogram stretching The histogram shows the amount of color at various degrees of luminance (on the horizontal axis) from 0 (dark) to full (bright). When an histogram is compressed (does not have much color at one end or the other) it will seem flat and lacking in contrast. Stretching will take care of that. NOTE: all of these adjustments can be made just to a selected area. So for example if you wanted to put a halo of light around someone's face...

Exercise:There is a fairly new site with images of various works of art mentioned by Yeats in his poetry. Many of these are pretty dark, as for example this one, which you should capture and fix.

Other pix:

This is already thorougly out of hand, but here is a link to Post-dogmatist-arts' International Museum of Collage, Assembly, and Construction

V

Pasting text into pix (for labeling, buttons, and banners). First, a course button:

  1. In PSP4, open a New file, dimensions 200 x 50 background=red.
  2. Pick a nice foreground color over in the color selector box and click on it with your left button to select it. This will be the color of text in the button.
  3. Select the A font tool,click in the pic to open the face selector, then select a font that pleases you, choosing bold, 18 point, anti-aliasing, left align, and floating--most of these are defaults.
  4. Enter some text in the window, say, TEI
  5. Place the cursor in the pic window and click once; the text should appear selected with marching ants and floating in the box.
  6. Align it to your satisfaction and right click on it--it should paste into place.
  7. (BTW, zoom the mag up to about 5:1 and notice how the antialiasing has made some transitional shades on the curves and edges to soften the "jaggies")
  8. Pull down Image-special effect-buttonize and accept the defaults and click
  9. violá--a button to link to the course page with
  10. NOW we get to the instructive part: Choose a dark color as the foreground color (left mouse click on it); choose the floodfill tool (the tipping paint bucket), and flood the background by clicking left mouse button in the background. You should have an (unpleasant) surprise. Why is the red fringe there? how can we prevent it?
VI Transparent gifs
  1. using the button, now with a dark background
  2. use the eyedropper to select the dark background, clicking with the right mouse button to make it the assigned background color (box lower and offset right in the color selector)
  3. open the Save as box; Choose Gif89a as the format
  4. click on options, and choose Set transparency value to background color
  5. Save with OK; if you now load this into Netscape, it should show white through the button. The background has become transparent. Note well, the no anti-aliasing is needed here too!
VII Screen capture
  1. Pull down the Capture button, click on Setup
  2. Select "Area" and note that the default hot button is Shift+F1
  3. Click "Capture now"; then click Shift+F1
    4. Click at the upper lefthand corner of an area you want to capture. A crosshairs should appear. Holding the button down, drag it down and to the right, making a box. When you click the left button again, it will capture the area in the box and you can commence to edit it. This takes a little practice to get the hang of.