Web Graphics

Scientific web pages benefit greatly from illustrations. This article describes how I prepare graphics for my own pages. It is very concrete and specific, but some of the methods may be of use for the reader. I have made no attempt to be general or comprehensive. The results can be examined extensively on this website.

The two kinds of illustrations that I use are the computer equivalents of line drawings and photographs. Although a rare illustration may best occur as a .BMP file, I use the compressed formats .GIF and .JPG almost exclusively. These are easily understood and displayed by Internet Explorer, and apparently by other browsers as well. I do not use frames for illustrations, but allow the browser to place them as it thinks best with the hints I give. Illustrations may also be placed in tables, but this is seldom appropriate. I also rarely use drawings with hot spots, but this is always a possibility when this is appropriate. The <IMG tag allows placement left, right or center, which is sufficient. Similar alternatives are possible when the image is in a line of text, such as a heading. See your HTML manual for the many alternatives.

Until recently I used the Paintbrush program that came with Windows 3.1 to make line drawings. It was easy to get into and return from the pixel-drawing display showing grid lines. I have now read the Help that accompanies the more recent Paint program, and discovered that I can draw in pixels with it as well, though it takes an extra step to get to and from the grid. Use View/Zoom/Large Size to get the grid (the first time, check Show Grid in the Zoom box), and View/Zoom/Normal Size to get back. The magnification can be selected as 400%, 600% and 800%. Lettering is also not quite as easy. However, there are many added conveniences in Paint, so I now use it. In particular, the various tools can be used with the grid display, which they could not with Paintbrush. One can easily copy and move, for example. It is also possible to save directly to .GIF or .JPG formats, and avoid the extra use of PStudio. I use an 800 x 600 screen, which is good for general purposes, and an 8 pt. Arial font.

Paint uses the Windows API drawing functions, which are very limited. The abilities to copy and move, and reflect about a horizontal or vertical axis, are very powerful and should be used as much as possible. The cursor position can be used to avoid the tedious and error-prone pixel counting. However, if spacing must be done repeatedly, a template can be drawn and used like a ruler. For graphs, template files with axes and dots at the coordinate intersections can be prepared and called up when needed. Using horizontal and vertical lines to square out a graph is too dense; the dots at intersections guide the eye just as well. The plotting of curves is difficult and tedious; the spline facility included in Paint is much too hard to use. It is best to plot points and connect them by eye, pixel by pixel. For demonstrative purposes, curves can often be "fudged" with the ellipse drawing tool. An ellipse is drawn, and parts of it are cut out and fitted.

The facility most users of drafting programs will find annoyingly absent is the ability to draw circles by center and radius. This can be worked around as shown in the diagram. By holding down SHIFT, a square can be drawn while moving the cursor along one edge. The circle will be inscribed in this square. To draw the circle, the cursor is moved from corner to diagonal corner until it is exactly one pixel outside the square. Then the circle will be tangent to the square on four sides. Tangencies can be made by moving the circle until it is tangent by eye to the tangent.

Angles with the horizontal or vertical can be laid out by tangents. Several useful possibilities from 8° to 45° are shown. The angle, the tangent of the angle as a fraction, and the pixel pattern, are shown for each line. These are not difficult to draw when needed. A portion can then be copied and moved to extend the line without more pixel punching. This method is necessary only when some exact angle, such as 30°, is required.

The output of Paintbrush is a .BMP file. Save the file as either a black-and-white bitmap, or a 16-color bitmap, so it can be converted to a .GIF file. To convert the file, I use Arc Soft Photo Studio 2.0. This edition is much easier to use than later, "improved" editions, but any similar program will do. Read in the .BMP file and crop it as you would like. Then save the file as a .GIF. Paint can also save directly in .GIF and .JPG.

GIF files can be animated. That is, a sequence of images can be shown for specified times, and the sequence can be looped forever. The program to make animated files is Microsoft GIF Animator, available for free on the Microsoft website. It is a simple program, and easy to use. Simply open a file with the last image in the sequence, then add preceding images successively. Choose the looping option and the time of display for each image, and preview the action to see how it looks. Then save the file with a name that tells you that it is animated. Although this option is mainly used for aggravating advertising and things that wiggle and blink, it is wonderful when some sequence is to be illustrated, and something that cannot be done in books. I have used it, for example, to illustrate the stages in a geyser eruption. Just put it in the HTML file, and the browser will know what to do with it. I generally use a resolution of 72-100 dpi for web illustrations, though originals are stored to 300 dpi.

A few illustrations have been made with AutoCAD, which can produce a .BMP file that can be converted to a .GIF by Photo Studio. This is much more involved, so it is not done unless necessary. AutoCAD is, of course, a much more flexible drawing tool, and can rotate. The animated gears in the Tech homepage were produced with AutoCAD. For simple illustrations, however, AutoCAD is much less convenient than pixel drawing.

I have three ways of creating .JPG files for web use. The first, and older, way uses a Pentax ZX-5 35mm SLR camera and Kodachrome 25 (or the professional Fujichrome, whose name I have forgotten) reversal film. Slides are better quality and much more enduring than color prints. The slides are scanned with an Olympus ES-10 film scanner with a SCSI Ver. 2.0 interface. It was extremely difficult to even locate a good scanner, and ticklish to install the SCSI. Nevertheless, excellent images are obtained, again using Photo Studio 2.02SE to crop, resample and enhance. The IBM scanner can also make files from halftone illustrations, using a high resolution followed by 3-pixel averaging to remove the dots, and perhaps image enhancement by changing brightness, contrast, and level adjustment. Making good line drawings with a scanner seems to be impossible; only halftones are good originals.

The third and most successful way to make .JPG files is with a Kyocera (Yashica) Finecam S3 digital camera. This is a 3.34 megapixel camera with 2.0x optical zoom, and Macro mode, purchased at an excellent price. The Macro mode is essential because many illustrations are of rather small objects. There is no manual control of aperture and shutter speed, unfortunately, so flexibility is limited. However, in normal light there have been no problems, and the camera does all the thinking. Recording is done on SD memory cards, which seem to be a widely-available standard. The camera came with a SD card reader that plugs directly into the USB port. The driver had to be downloaded from the Yashica website (the CD was faulty), but this at least got the latest version, and it was very easy to install. The card can be moved from camera to reader as desired. The reader appears as Drive E:, and can be accessed the usual way. This is so easy and convenient it makes you feel happy. With this system, I can make an exposure and have it as a .JPG file in about five minutes. If it is not right, I can do it again!

The core application in preparing illustrations is Photo Studio 2.0, which manages the file formats and does necessary editing, such as rotating images that are a little out of kilter. It takes a while to become familiar with the possibilites of such a program, but it's worth it. It seems that "improvement" often makes a program worse, usually by adapting it for idiots. Photo Impression 3.0 has layers and other improvments, but does not seem to be as easy and straightforward as Photo Studio 2.0. Incidentally, I use Photo Studio in preference to the Microsoft and Kodak photo editors, which seem much less useful. I use the Kodak editor to access file formats that cannot be read by Photo Studio--there seem to be versions of .JPG like this, that are probably later than Photo Studio.

Return to Miscellaneous Index

Composed by J. B. Calvert
Created 18 February 2003
Last revised 9 July 2004