Designing Images For the Web

Creating Images to Use on Web Pages

Designing images on the Worldwide Web can be as easy or complex as you would like it to be. With the equipment available here at SLC, particularly in the Mac Lab in Bates, images have to be processed through several steps to make them readable by the Netscape Browser (which is what will be needed to create and run your Web page).

The images that you use can come from a variety of sources. You can re-draw illustrations from books, periodicals and other resources using a graphics program, you can scan them in using the grayscale scanner (which produces black and white versions of color illustrations) in Academic Computing, or use images that are already available on the Web from a variety of sites that specialize in cute little graphics, readymade images of all sizes and shapes, and so on.

At the moment, all the computers in the Bates lab have several different graphics programs that allow you to generate any kind of image. These include a basic drawing program called Canvas (Canvas 3.0 is the version on most computers), more sophisticated graphics manipulation software called Adobe Photoshop, and some others. Most images that you see in these pages were designed by using one or both of these programs.

The actual process of designing and loading an image on to a Web page can be somewhat tedious. Most Web browsers only recognize a particular kind of format for images. The most common formats used are .GIF (pronounced "jif") and .JPEG (say "J-Peg"). Unfortunately, the vast majority of graphics programs do not automatically save images in either of these formats. Therefore, you have to do this yourself. While this may seem daunting, it is actually quite simple. However, the exact procedure varies a little depending on what program you use to make your graphics.
The table below briefly outlines the steps you need to take to convert images into .GIF files. It assumes that you are working on a Mac that has all the necessary software available (i.e. it is one of the Macs in the Bates lab). PC users and others should skim this section and then check with one of us. Send email to either of us by clicking on our names here:
Elizabeth Johnston or Shuba Gopal .

Steps If You Make Your Image in Canvas Steps if You Make Your Image in Photoshop

After you finish making your image, you need to save it as a special format which can later be converted to a .GIF file. In order to do this, you need to save your file as a PICT file. PICT files are a specialized kind of graphics file, used by Macs to save images. After designing or editing an image in Photoshop, you can directly save to .GIF file format.

To save images as PICT files, choose "Save" from the File Menu. In the save dialog box which appears, you will see a box near the bottom that reads "Save File as..." If you click and hold down the mouse over the box that reads "Canvas," you will be able to choose the file format you want. Select PICT from the myriad options and then press enter or click on "SAVE." This will save your file as a PICT document. Before you can save a file in .GIF format on Photoshop, you need to change the mode in which the colors are saved. In order to do this, go to the Mode Menu and select "Indexed color." Click OK when the Indexed Color dialog box appears. Once this is done, choose "Save" from the File Menu. In the save dialog box, there is a box near the bottom right corner that reads "Save File As..." Click and hold down the mouse to select the format you want. Since Photoshop directly offers .GIF formats, you can select this. The only odd thing is that the .GIF format you want is listed as "CompuserveGIF." This can be bewildering, but ignore the additional information; this is in fact the standard .GIF format you want. After having selected this as your file format, you can press enter or click on "Save" to save your file.

One thing to note: Canvas will try and prompt you to save the file again and again if you do not save it in the standard Canvas format. If you are certain you have saved your image in its final form at least once, there is no need to repeatedly save it; simply exit Canvas when you are done. One odd quirk with Photoshop is that it will not save a file that has more than one layer in it as anything other than its standard Photoshop format. Therefore, you have to merge layers before saving as a .GIF.

Once you've created and saved your image as a PICT file, exit Canvas. From the Apple Menu, open the program called Graphic Converter. This is a graphics manipulation program, that among other things, will convert PICT files into .GIF files. Once it is running, select "Convert more..." from the File menu. This opens a dialog box that will have two windows open in it. Use the first window to identify the file that you would like to convert to .GIF format. Then, use the second window to define where you want the file saved. Simply click the "Convert" button to have the program convert your image from PICT to .GIF.

Steps If You Make Your Image in Canvas	Steps if You Make Your Image in Photoshop
After you finish making your image, you need to save it as a special format which can later be converted to a .GIF file. In order to do this, you need to save your file as a PICT file. PICT files are a specialized kind of graphics file, used by Macs to save images.	After designing or editing an image in Photoshop, you can directly save to .GIF file format.
To save images as PICT files, choose "Save" from the File Menu. In the save dialog box which appears, you will see a box near the bottom that reads "Save File as..." If you click and hold down the mouse over the box that reads "Canvas," you will be able to choose the file format you want. Select PICT from the myriad options and then press enter or click on "SAVE." This will save your file as a PICT document.	Before you can save a file in .GIF format on Photoshop, you need to change the mode in which the colors are saved. In order to do this, go to the Mode Menu and select "Indexed color." Click OK when the Indexed Color dialog box appears. Once this is done, choose "Save" from the File Menu. In the save dialog box, there is a box near the bottom right corner that reads "Save File As..." Click and hold down the mouse to select the format you want. Since Photoshop directly offers .GIF formats, you can select this. The only odd thing is that the .GIF format you want is listed as "CompuserveGIF." This can be bewildering, but ignore the additional information; this is in fact the standard .GIF format you want. After having selected this as your file format, you can press enter or click on "Save" to save your file.
One thing to note: Canvas will try and prompt you to save the file again and again if you do not save it in the standard Canvas format. If you are certain you have saved your image in its final form at least once, there is no need to repeatedly save it; simply exit Canvas when you are done.	One odd quirk with Photoshop is that it will not save a file that has more than one layer in it as anything other than its standard Photoshop format. Therefore, you have to merge layers before saving as a .GIF.
Once you've created and saved your image as a PICT file, exit Canvas. From the Apple Menu, open the program called Graphic Converter. This is a graphics manipulation program, that among other things, will convert PICT files into .GIF files. Once it is running, select "Convert more..." from the File menu. This opens a dialog box that will have two windows open in it. Use the first window to identify the file that you would like to convert to .GIF format. Then, use the second window to define where you want the file saved. Simply click the "Convert" button to have the program convert your image from PICT to .GIF.

Now that your image is saved as a .GIF, you can use it in your web page. In order to let the web browser 'know' you want an image, you need to give it a certain HTML command. In the command, you include a path so that the browser knows where to retrieve the image from. Here's the actual code you need to write into an HTML document to set up the image:

img src=" path to your file here".

For example, suppose you have a .GIF file called MyImage.GIF and it's in a folder called MyImage. If your HTML document is in a different folder, you need to tell the browser where to look in order to find your image. So, you would enter something like this in the img src tag:

img src="MyImage/MyImage.GIF"

When the browser sees that instruction, it will open up the folder called MyImage, and attempt to open that .GIF file. If for some reason it is unable to open the image, Netscape creates this icon to let the reader know there was supposed to be an image there, but it can't be opened:

If this does happen, check to make sure that you listed the path and file name correctly. File names and paths are case sensitive; that is, you have to use the same combination of capital and lowercase letters. To go back to the earlier example, if you name your file MyImage and then refer to it in the img src tag as myimage, you will not be able to pull up the image. Make sure you also use the same number and combination of spaces between words. For example, if you called your file My_Image, but refer to it as MyImage, you will run into trouble.

Depending on your luck and choice of colors, images can look startlingly good or rather dull. It all depends on the kinds of colors and shapes you use. One thing to remember is that large, multi-colored images take up a lot of memory, so they will slow down the speed of the browser as it reads and puts up your image. What you want to try and do is find a happy medium between colorful, attractive images and minimal memory requirements.

Click here to find out about animating images .

You can also design images that are maps. These are images where the reader can click on portions of the image and be directed to other sites, pages, or information. To find out more about clickable image maps, click here.

There are a number of great sites to look up for further guidance, both in graphics design and for help with the basics of HTML.

One of the best places to start learning HTML is with the online HTML Tutorial . Read this before you attempt to design a Web page.

Graphics Style Manual This is a great site for information about graphics and designing images on the Web. You might want to stop here as you begin your journey into the world of Web design.

HAPPY DESIGNING!