How to make GIF files

Towards a picturesque Internet.

by David Porthouse


First let us introduce the chessboard. Here is a representation of the King's Gambit, a well-known opening position which the author has often used:

rnbqkbnrpppp0ppp000000000000p0000000PP0000000000PPPP00PPRNBQKBNR

where the meaning of this code should be self-evident. Considering this representation as data, it shows the chessboard in 'bitmap' format. There are 64 cells in which to hold the data, and each cell has a code to show what is in that cell.

This is not all that efficient. An obvious modification would render the above as

rnbqkbnrpppp1ppp84p34PP28PPPP2PPRNBQKBNR

and we have compressed the data somewhat. There are still more efficient methods of data compression which we will not bore you with. The point is that graphics files may be held in bitmap format, or in compressed format. Bitmap files often end with .BMP and one well-known compressed format is the GIF format, introduced by CompuServe, with GIF files ending in .GIF .

Another significant format is JPG. What's the difference? Well GIF format is ideal for diagrams, while JPG is best for photographs. Technically, GIF compression is isentropic: no information is lost during compression, while JPG throws information away, but this doesn't matter with a photograph.

You can make a GIF file in several ways. In Windows 95, you can write a program which draws a picture on the screen. This program could be in QBasic, or in any other favourite language. The responsibility is with you to produce what you want. When you are happy with the result, press the Print Screen button. This saves whatever is on your screen into the clipboard. Exit your program, and run the Paint program supplied as standard with Windows 95. Then retrieve the picture from the clipboard with Edit and Paste. Save the picture as a bitmap file with File and Save and call it something like NAME.BMP. You have now captured the picture. Relax a bit.

You could of course draw the picture with Windows Paint and save it as a BMP file. This is just a matter of preference. If you are running a program such as a relativistic flight simulator, our way of doing things allows you to capture selected frames from the program animation. Also, if your graphics is a flag or a tartan or anything with a pattern, you might prefer to generate it with a program. This flag was generated with a QBasic program and then reduced in scale by 50% :-



You will need to find some software to convert the BMP file to a GIF file. Cheap software should be available off the shelf in your local computer shop. CompuServe subscribers will find that ImageView can do the job. Typically you load in your NAME.BMP file with the File command, and save it as NAME.GIF, and the conversion is done automatically. A program like ImageView also allows you to clip or rescale the picture. You can experiment with this, and if the results are disastrous then just reload NAME.BMP and start again. You may wish to produce shrunken versions of your picture for reasons which we explain below. Always work from the original bitmap file when you do this.

You can also draw a picture on paper and scan it using a peripheral device known as a scanner. There are both handheld scanners and flat-bed scanners, the former being cheaper, and cheap enough for many people to buy for themselves. Your scanner software should be able to produce a GIF file. You may also scan a photograph of course.

The author used to draw cartoons for a student newspaper. Typically these were drawn in pencil, redrawn with an ink pen, and then the pencil lines were rubbed out. The drawing was then photographed and reduced. It was found from experience that about 60% reduction enhanced the appearance of detail, but then further reduction tended to belittle the overall picture. If you draw pictures for scanning, draw them about 60% larger than the size they will appear on a 15 inch monitor screen at 640x480 resolution, scan them and then reduce them using the scanner software. Experiment with this to find the best oversize to draw your originals, not too large and not too small.

Your local chemist may offer a service where old photographs can be transferred to CD-ROM, so consider doing this once or twice if you require a photograph of yourself, for example. A digital camera can also produce computer-ready files, but you may prefer first to buy a cheap scanner which can deal with both diagrams and photographs. From then on, get your photographs printed by the chemist in the largest available format, typically 5 x 7 inches, and scan them in. Perhaps you may also find a chemist with a machine which turns photographic negatives into GIF files on floppy disk, but that particular service appears to be hard to locate. Watch this space.

Remember that diagrams need to end up as GIF files, and photographs as JPG files. Once you have your pictures in these formats, they are ready for the Internet. Individual GIF files can be offered to the viewer as small pictures which you click on to enlarge, and you can find plenty of these on the author's website. You click on the enlarged picture to jump back to the small picture. Animations can be offered as sequences of GIF frames which you click on to see the next frame, and an example may be viewed here. This is definitely poor man's animation, but it gives a quick and dirty view of your program and does not require expensive or special equipment. By expensive we also mean software that takes ages to download. Big GIF and JPG files may also take ages to download, so it makes sense to offer the viewer a small version of them first and perhaps warn about the size of the fullscreen version.

You can cue for the third dimension with one of those red/cyan displays where you need special glasses, and an example is the Van Allen belt program on the author's website. At some time in the future, this program will be upgraded so that when you hit the space bar, you see a view from a bit higher up, and when you hit the space bar again, you see the original view again. You might recognise this as a description of a blink comparator.

If you look at the source code for this page, you will see that the picture of the flag above has been specified with the attributes

width=320 height=240

Let us make a plea that these attributes should never be omitted. If you leave them out, then your text can jump about all over the place as your page is being downloaded and someone is trying to read it, and it looks horrible. Even if you happen not to know the exact size of your picture, a decent guess is better than nothing.

Notice also that the flag has been placed in the centre, using the CENTER instruction. Some people will view this at 640x480 resolution, and some at 800x600 resolution. When images are centred it looks better at different resolutions.

We ask for a picturesque Internet, but please don't start your website by downloading monster files without warning. Have lots of little GIF files, which you might generate from QBasic, to make your website look attractive. Check your site with different browsers and at different resolutions. There is a lot you can do just with text, bold face and italics and the HR instruction to give your site some visual variety. Make your title a hotlink to itself, and your name an e-mail link, and you will automatically introduce the colours red and blue at the top of your page, as we have done here. Do not change these standard colours, because some people have poor colour vision and may wish to specify their own variant colours which you should not over-ride.

return to GATEWAY TO PHYSICS