Assignment Five

Creation of Images: Basics

Adobe Photoshop is a very high end software program that is designed to allow artists to manipulate images from all mediums. We only really need a very small portion of the power of this program. You should feel free to learn as much of the program as you like, but you're on your own. In this class we will consider just the simple tools and concepts necessary to get our Hulmer artworks on line.

The Hulmer Computer Lab Macintosh run two different versions of Adobe Photoshop: Machine 1 (nicholas) is installed with Adobe Photoshop 4.0; the Student Mac runs Photoshop 3.0. The later version of the software obviously contains more tools, but either version of the software will accomplish the basic operations needed for this project. Comments below refer to the Adobe Photoshop 4.0 User Guide, which is more sensitive to the issues of creating images for the web

Topics for this page include:

We will use various reproductive mediums in the process of creating images of the Hulmer artwork. Every intermediary step produces a result that is constrained by the technology. One rule to remember is that the quality of the final reproduction will be dependent upon the quality of each intermediary phase. Even though there are corrective measures possible, the medium with the lowest level of quality will be the ultimate determinant of the final outcome. A bad original photograph is going to end up in a lousy .GIF. And even the best HTML programming cannot redeem a vapid and uninteresting text. The old computer guys have a phrase for this: Garbage In, Garbage Out!

In our project, we are moving from a medium of very high quality (photography) to one of very low quality (the average computer screen). The low quality of the final display determines what goes into our image making.

SCANNING

Image size

Digital images are made up of pixels, measured in pixel height and pixel width. The total number of pixels determines the file size, or the amount of data in the image. Pixel dimensions, along with the size and setting of the monitor (something we cannot control) determine how large an image appears on-screen. A typical 13-inch monitor displays 640 pixels horizontally and 480 vertically. Larger monitors can usually be set to display a varying nmber of pixels. For example the AppleVision 1710AV Display screen on the PowerMac is set at 832 x 624, but couldgo up to 1280 x 1024, at which setting the pixels are small.

Because we're planning to display an image online, the maximum image size is determined by the lowest pixel dimensions of the monitors used to display the image. If our audience will view our image on a 13" monitor, we will probably want to limit the size of the image to 640 by 480 pixels. (Users Guide, p. 37)

Resolution

The number of pixels displayed per unit of length in an image is called the image resolution, usually measured in pixels per inch (ppi). An image with a high resolution contains more, and therefore smaller, pixels than in image of the same dimension with a low resolution. For example a 1-inch by 1-inch image with a resolution of 72 ppi contains a total of 5184 pixels (72 x 72). The same image with a resolution of 300 ppi would contain a total of 90,000 much smaller pixels. Because they use more pixels to represent each unit of area, higher-resolution images can usually reproduce more detail.

Using too low a resolution results in pixelation--large pixels that produce coarse output. Using too high a resolution increases the file size unnecessarily and may increase the time required to load the image. Look at the examples in the Users Guide, p. 40. The default resolution of a Macintosh monitor is typically 72 dpi; the default resolution of a PC monitor is typically 96 dpi.

File size and resolution

The file size of a digital image is measured in kilobytes (K) or megabytes (MB) and is proportional to the toal number of pixels n the image. Although images with more pixels may produce more detail at a given size, they also result in larger file sizes. A 1- inch-by-1 -inch 200 ppi image contains four times as many pixels as a1-inch- by-1- inch 100-ppi image and so is four times as large. Choosing an image resolution needs to be a compromise between capturing all the data you need to produce a good-quality image and keeping file size to a minimum.

Resampling

In Photoshop, when you decrease the dimensions of an image, or lower its resolution in an attempt to decrease file size, you downsample (decrease the number of pixels) and Photoshop deletes information from the image. When you resample up (or increase the number of pixels), Photoshop does not have the old deleted pixels, but creates new pixel information baed on color values of existing pixels, according to various methods. Downsampling and resampling up will therefore result in a deterioration in the quality of the image. You cannot increase size or raise the level of resolution in a given image. (User Guide p. 44) Similarly, once an image has been scanned or created at a given resolution, increasing the resolution in Photoshop will not usually iimprove the image quality because in this case, Photoshop must in effect spread the same pixel information across a greater number of pixels.

With the result that...

Our images will ultimately be displayed at 72 dpi, but we would like to start with a larger amount of digital information so that even after we manipulate the image, we will have enough data to play with. Photoshop estimates that a high quality image will be scanned at 2 times the final resolution. Scan at a higher resolution if you want, but 300 dpi will do just fine.

Back to the top of the page

COLOR

Computers use a RGB color mode, in which each element of Red Green and Blue is set at a level ranging from 0 to 255.. Think of how many colors you can get in permutations of those three elements--an RGB image can display 16.7 million colors! However, computer monitors are a different story. When you're working with a display sytem that supports 8-bit color (or fewer colors), the video card displays only 256 different colors at one time. When the system gets to the 257th color, it uses a technique called dithering to simulate the 257th color and each additional color thereafter. In dithering, adjustments are made to adjacent pixels of different colors to give the illusion of a third color.

In addition, browsers don't always begin with the same 256 colors. Lynda Weinman explains how she came up with a Browser Safe Palette, as follows:

The Browser Safe palette, as I so named it, is the actual palette that Mosaic, Netscape and Internet Explorer use within their browsers. The palettes used by these browsers are slightly different on Macs and PCs. This palette is based on math, not beauty. I didn't and wouldn't have picked the colors in this palette, but Netscape, Mosaic and Internet Explorer did, so...

The Browser Safe Palettes only contain 216 colors out of a possible 256. That is because the remaining 40 colors vary on Macs and PCs. By eliminating the 40 variable colors, this palette is optimized for cross-platform use.

The Browser Safe Palette should not be used to remap color photographs. It is better to use an adaptive palette (with no dithering,if possible) and let the end-browser do any additional dithering. The Browser Safe Palette is useful for flat-color illustrations, logos with flat-color, and areas in any image that have a lot of a single color. When a browser dithers flat colors it looks far more objectionable than when it dithers photographs.

Visit her website (Lynda's Homegurrrl Page) for her examples and additional discussions.

Following Lynda Weinman's advice, we should create our images in the indexed color mode, based on a palette of at most 256 colors. When we convert an image to indexed color, Photoshop builds a color lookup table, which stores and indexes the colors in the image. If a color in the original image does not appear in the table, the program matches the color to the closest color in the color table or simulates the color using the available color. (User Guide, p. 76)

Be careful! The same reduction in detail occurs when we move from an image using millions of colors to an allocated 256. An indexed image is flattened, and we cannot go back to the original color range of the image.

Reducing the Color Palette

We have two reasons to reduce our color palette: to reduce the size of the file AND to insure consistency of color across various browsers.

Laura LeMay reviews these problems of color allocation in Teach Yourself Web Publishing with HTML 3.2 in a Week. 3rd edition. Indianapolis: Sams net, 1996). In chapter 8, she suggests that :

There are two ways to work around color-allocation problems and increase your chances of getting the colors correct.

One way is to make sure that the total colors in all the combined images in your page do not go over 256 colors. She describes a procedure for reducing colors in an image that you might find useful (pp. 214 ff).

Alternatively, you can use a single color map for all the images on the page, using this procedure in Photoshop:

  1. Create one large document, including all the images from the page on one canvas.
  2. Convert the document to indexed color using as many as you need (up to 256)
  3. Choose Color Table from the Mode menu. The color map for the larger document is the combined color map for all the smaller images.
  4. Save that colormap.
  5. Open each individual image and convert the image to indexed color. (The number of individual colors isn't important).
  6. Choose Color Table from Mode menu and load saved global color table
  7. Save each image with the new global color map.
In addition to her useful book, have a look at Laura's Web Zone for more programming hints, and Laura Lemay's Home Page: Do Not Inhale.

With the results that...

For now, scan the most accurately colored image into the computer that you can, but remember that your image may be compressed and reduced into its final niche in our website.

JPEGS vs. GIFS

In what format should we ultimately reproduce our images? A much discussed question. Here are some sources and a few examples.

Some of the possibilities of Adobe Photoshop are demonstrated as follows:

With the results that...

Some of these decisions remain to be made. Don't limit your options! Be sure to keep your original scanned image file. As you experiment with these various possibilities in Photoshop, make a copy of the original file and work with it.

Back to the top of the page

Back to Hulmer Project Page

Return to Amelia Carr's Home Page

This page was last updated on March 3, 1997.

This page follows some of the design suggestions of David Siegel