Producing graphics

School of Geography, University of Leeds

There are a large number of formats that you can use for images

However, the two formats that are most likely to be supported by browsers are JPEG(.jpg) (used for photos) and GIF(.gif) (used for block graphics). If you want greater accuracy or to provide interactive graphics you can do this and should seek out Andy Evans for advice.

First you need to scan or make pictures

You can draw images in any package that will export GIFs/JPGs (Corel Draw, for example). If you have photos you can scan them in using a colour scanner. Of course, if you have a digital camera, it's even easier to capture your beauty...

Digital cameras are becoming increasing cheap, and if you just want them for the web you only need a low resolution one (PC screens are ~72 dots per inch, so anything much more is wasted). You can pick up suitable webcams for 40 quid.

There is a history of nicking images

You can download other people's graphics from image storehouses or other webpages. Most browsers have a way of saving images (for example, in Internet Explorer you place the cursor over the image, click the right hand mouse button and choose 'Save picture as...'). The response of image designers to this used to be fairly relaxed, but professionals are becoming increasingly unpleasant about this, so check you have the right to copy stuff before you do. In any case, the practice is discouraged for the simple reason that it usually results in a site in which the elements don't really look like they fit together very well.

You can always make your own

You can use almost any graphics package. If you don't have any graphics software at all, and want one for your own PC, a popular one is the free package GIMP, which has developed with the web, and provides many useful features. If you are thinking of buying software, the main abilities a package needs are...

• The ability to produce GIF 'interlaced' images. Sometimes with very large images you may want to save them as 'interlaced'. This allows browsers to put up a low resolution version of the image while the rest is loading into the browser.

• The ability to gain red-green-blue levels for any colour in hexadecimal code (these start with a # then have 3 2-digit hex numbers for the red, green and blue levels on the colour respectively. #000000 is black, #FFFFFF is white and #FF0000 is red, if that helps!)

• The ability to pick a colour in GIF pictures that will be 'transparent' so that anything the picture is displayed over shows through.

You can take screenshots and make linked images.

If you press the 'Print Screen' button on your keyboard, the computer saves a copy of your screen until you 'copy' something else. You can use the 'Paste' facility of most graphics packages to dump this Screenshot out as an image.

If you want to produce images people can click on to go to several other places (imagemaps), you may want to also get software like MapEdit which make defining areas which are associated with links much easier than doing it by hand.

If you want to experiment with graphics software, you should be able to find Microsoft Photo Editor on your machines if Office is installed. This has all the features suggested above, as does Corel Draw. To pick a transparent colour in Photo Editor, select the Transparency tool and click on the colour you want transparent in the image. This only works if you save as a GIF. Here's one of Japanese artist Hiroshige's Mt.Fujis in daylight and transparent night.