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 artworks on line.
The Computer Art Lab Macintosh machines run two different versions of Adobe Photoshop: most machines are installed with Photoshop 5.0; the new machine on Station G runs Photoshop 6.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 5.0 User Guide, but both manuals contain the same material about 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.
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. Higher quality monitors can usually be set to one of several settings for display . For example the monitor at Station B is usually set at 800 x 600, but could go lower, or as high as 1040 x 768, at which setting the pixels are noticeably smaller.
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. A significant portion of our audience will view our image on a 13" monitor, so we will probably want to limit the size of the image to 640 by 480 pixels. (User Guide, , p. 42)
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, or 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 User Guide, p. 44. The default resolution of a Macintosh monitor is typically 72 dpi; the default resolution of a PC monitor is typically 96 dpi.
The file size of a digital image is measured in kilobytes (K) or megabytes (MB) and is proportional to the total number of pixels in 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 a 1-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.
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 based 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. 48) Similarly, once an image has been scanned or created at a given resolution, increasing the resolution in Photoshop will not usually improve the image quality because in this case, Photoshop must in effect spread the same pixel information across a greater number of pixels.
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 should be scanned at 2 times the final resolution. (User Guide, p. 52) Scan at a higher resolution if you need a large number of pixels to manipulate (in a detail, for example), but usually 300 dpi will do just fine.
Also, when an image is saved into a certain format (for example, JPG or GIF), certain image information is discarded in order to compress the file. For best results, only save your image once in its final format. Keep a copy of the file in Adobe Photoshop PSD for changes.
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:
Visit her website (Lynda.com) for her examples and additional discussions.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.
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. 72)
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.
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:
- Create one large document, including all the images from the page on one canvas.
- Convert the document to indexed color using as many as you need (up to 256)
- Choose Color Table from the Mode menu. The color map for the larger document is the combined color map for all the smaller images.
- Save that colormap.
- Open each individual image and convert the image to indexed color. (The number of individual colors isn't important).
- Choose Color Table from Mode menu and load saved global color table.
- Save each image with the new global color map.
Laura LeMay is not currently writing about web graphics or supporting this textbook (old by internet standards), although she keeps up a personal website at Laura Lemay's Home Page: Do Not Inhale.
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.
In what format should save our images? How should we ultimately reproduce our images? A much discussed question. Our options include:
Here are some sources and a few examples.
Some of the possibilities of Adobe Photoshop are demonstrated as follows:
Nice images are nice, but fast loading pages count for a lot. The final product is always a compromise. Consider that:
Careful planning is required to prevent slow-loading pages.
Back to Green Allegheny Project Page
Return to Amelia Carr's Home Page
This page was last updated on February 27, 2001.
This page follows some of the design suggestions of David Siegel