There are three ways to get graphics and backgrounds for your web pages.  These include 1. downloading graphics from the internet, 2. using existing graphics from Clip Art Libraries on disk, and 3. making them yourself.

 
Downloading Graphics from the Internet
First of all, taking something that does belong to you, without asking, is known as stealing.  Stealing is not a nice thing to do, and it is illegal.  Although I have never heard of a lawsuit where someone was accused of stealing graphics from another on the internet, I'm sure it will happen or already has happened at some point.  For more information on stealing on the net, read more about Copyright Law.  So when you find an image, background, photograph, or button on the internet that you would like to use, first find out about the use policy of that website.  There are lots of graphics and clip art and backgrounds available on the internet for FREE. Clip art libraries are popular, and one of my favorite archives of clip art libraries can be found at clipart.com or at Yahoo's Gif Page.  The clip art available on these pages are available to you free of charge, although some of the creators would like for you to give them "credit". Credit usually includes a citation of sorts, where you include the name and address of the place where you collected the artwork. For an American Psychology Association (APA) style guide for internet citations, take a look at the Yale Style Manual.

So how do you get those graphics?  On a Macintosh:
Step one: Drag the mouse to the graphic you want to "take".
Step two: Place the cursor on top of the graphic, then Click AND HOLD. A menu will pop up, select SAVE THIS IMAGE AS... for the menu
Step three: In the dialog box that appears, choose a location to save the image, and be sure the remember the NAME of the file.  You CAN change the name of the image if you like, this will not effect the look of the image.

On a Windows 3.1 or Windows 95 Computer:
Step one: Drag the mouse to the graphic you want to "take".
Step two: Place the cursor on top of the graphic, then click the RIGHT mouse button (instead of left button, which you use most of the time). A menu will pop up, select SAVE THIS IMAGE AS... for the menu
Step three: In the dialog box that appears, choose a location to save the image, and be sure the remember the NAME of the file.  You CAN change the name of the image if you like, this will not effect the look of the image.

That's it!

Using existing graphics from Clip Art Libraries on disk
If you've tried to download images from other web pages, you noticed that the extension (the three letters following the "." in the name of the file) were either .gif or .jpg. This is because the format of images on web pages are either Graphical Image Format (gif) or Joint Photographic Experts Group standard (jpg).  These two formats of images can be seen on the web as "in-line" images, or right on the web page itself.  That doesn't mean that you can't send an image in Picture format (.pic or .pict) to your grandma via you email, but it would not show up on a web page.

Most clip art is saved in .pic or .pict format, or in a format specially designed for that Clip Art program. For example, any clip art in WordPerfect is saved as a WordPerfect Graphic (or .wpg).  So you have to convert that format into .gif or .jpg.  The difference between .gif and .jpg is really that a jpg file is compressed so that more detail or depth is still included in the file.  A gif file has even greater compression, but less detail is retained.   However, gif is the most commonly used format, because it works on EVERY web browser, and you can create transparent images (so you don't see the background in the image). Use jpg if you want to picture to look more like the original and gif if you are more concerned about compatibility, saving disk space, and download time.

There are program available on the web to convert graphics into .gif or .jpg formats.  An example is Gif Converter. Gif Converter is a shareware application, and if you download it, you are asked to pay the registration fee of $40. You can download the Gif Converter for Mac or use the evaluation version available on this CD. A popular program for Windows and Windows 95 is MagicViewer, which is available for free. With any conversion program, open the file you want to convert and then choose Save As... and select the format you want (gif or jpg). Be sure to change the name to add the extension you used, for example mypict.pic now is mypict.gif.

Making your own graphics
Sometimes, you know EXACTLY what you want in a picture, and you can't find it on the web or in a clip art library. Other time, there is only one picture that will do. For example, you REALLY need to use that picture you took in the winter of 1996 during the big blizzard. You can scan in that picture, save it as a .gif or .jpg, and you are all ready to go.  You could Draw a picture (with crayons, markers, charcoals, etc.), and then scan that too!  You can also use a painting or drawing program to create you images.

Scanning
To scan a picture, you need three things. 1. The Picture, 2. A Scanner, and 3. Software to operate the scanner.
The most popular type of scanner to use for scanning images and graphics is a flatbed scanner.  This scanner has a large flat surface where you lay your image, and then a light sensitive charged coupled device (CCD) converts light reflected from a scanned image into an electronic signal.  The signal is then digitized and stored on a hard drive or disk.  Flatbed scanners are more versatile than sheet feed scanners (where you place one sheet of paper in at a time), photo scanners, and handheld scanners.  Also, flatbed scanners are more accurate at replicating the original image.
The software used to operate a scanner include two types.  Optical Character Recognition software or OCR is used to read typewritten pages and convert text to a word processor with a certain level of errors.  To scan images, you will use Image Editing software, the most popular being Adobe Photoshop or Adobe PhotoDeluxe.

An important element in scanning is the optical resolution of the image, measured in dots-per-inch (dpi).  The high the resolution, the larger the file size (measured in kilobytes and megabytes). As a standard, most images on the internet are at 72 dpi.

The Steps to Complete a Scan at American University
 

Animated Images
There are many more things you can do with an image.  Animated images allow your website to have a little action right on the page, and are surprisingly easy to make. I created the animated image below using Gif Builder (for the macintosh), MagicViewer can be used for Windows.
Image Maps
An image map is can also be a valuable tool on a website, you can turn one image into a menu of sorts.  For windows, use MapEdit, for windows 95 use MapThis, and for macintosh, use WebMap.
 
The above example of an image map will allow you to move around on this page.  Click on "make my own" and you will go to the section of this page about making your own graphics for the web. Along with an image map format, this example uses "targets" where you can move to a particular place on a web page. To create an image map, there are four steps.  1. You first need to create your image that you will then map. Place the image on your web page as you would any other image.  2. Using one of the above mapping programs, you create the "clickable areas" by drawing squares, rectangles, circles, or other shapes around the spaces that you want to do to other web addresses. For example, below you can see the rectangles that make up the clickable areas in the image map above.

4. Once you have created the clickable areas, you have to add this information to your website.  From the Image Mapping software you are using, choose "Export as Text" from the the file menu.  This will save the code that makes up the map, which looks like this: 

# Created by WebMap 2.0b9
# Friday, January 30, 1998 at 9:48 PM
# Format: NCSA
rect http://www.cas.american.edu/~spud/spr98/graphics.html#down 216,48 320,130
rect http://www.cas.american.edu/~spud/spr98/graphics.html#clipart 133,1 246,65
rect http://www.cas.american.edu/~spud/spr98/graphics.html#make 2,17 130,111
This code indicates where the user will go when they click on that part of the image.  You will notice the numbers after the web addresses, this is actually the coordinates that are clickable on that map.  Save this text with the same name as your .gif image, but with the .map extension.  In this example, the gif is called "clippy.gif" and the map that indicates the clickable coordinates is called "clippy.map".  Be sure to save in NCSA format (rather than CERN). This is the format of image map read by most web browsers.

4. You must indicate within you web page, that an image is a map. This requires a little bit of html coding.  Using a text editor, look at your web page. Find the image that is to be a map, and add a link (using the <a href="..."> command linking the image to the image map you created (yourmap.map). Then add the code ISMAP to the name of the image between the IMG and the SRC.  You code will something look like this: 

<a href="clippy.map"> <IMG ISMAP SRC="clippy.gif"></a>
Once you have added the code, your map will not "work" until it is uploaded to the internet. Unfortunately, current versions of html editors cannot read image maps.

Now that you have created some interesting images, you are probably ready to use a search engine to help you find content for you web pages. 

On to What is a Search Engine? or go back Home.

If you have any problems with this CD (or ideas for changes), click on the   icon or send email to sirvine@american.edu.