CSc 050: Pictures-Part 2: Graphics from othe sources
This tutorial will show you how to create web page graphics from a variety
of sources including scanned images, clip art, and your own drawings.
It assumes prior knowledge of the <img> tag. You should go through our
first image tutorial if you are unclear about
using the <img> tag.
Graphical formats
Pictures can be stored on a computer in many different ways. These different
ways are called formats and have not-so-memorable names like GIF,
JPEG, BMP, TIFF, PICT, and many others. The trouble is that web browsers can't
read pictures of all formats. Netscape, for example, can only understand pictures
in GIF and JPEG format. When we take pictures from the Web, as we did in the
first tutorial, this wasn't a problem since
pictures from the web are already in a compatible format. But pictures from
any other source may need to be converted into a compatible format before they
are browser-ready.
Scanning
We will demonstrate converting a graphic into a browser-ready format in the
context of scanning an image. Scanning allows you to take a non-computer
image like a photograph or magazine picture and turn it into a computer picture.
In the Union public multimedia lab in Steinmetz Hall room 100, there are several PCs
and Macintoshes connected to scanners. Just place your picture face down in
the upper-right corner of the
scanner, and then launch the appropriate program. Complete
instructions about how to scan are given in a guide that can be found in the
lab, so we won't repeat them here.
Converting
Once a picture has been scanned, you're ready to convert it into a
browser-ready format. This conversion process also works with clip art or
drawn pictures. Any good graphics program will allow you to convert a picture
into GIF or JPEG format. The Union labs are equipped with Adobe Photoshop
Elements which will do the job nicely. Once your image is in Photoshop,
just click on Save for Web under the File menu and
follow the instructions. I recommend saving the image as either GIF or JPEG
since these will produce small(ish) file sizes.
What if you want to do this at home, and you don't have Photoshop? No
problem: there are many programs available on the Internet that will do the job.
For PCs, Lview Pro is a shareware program that will convert files to
other formats.
Mac users can use a small program called GIFConverter which will do the
same thing. You can get Lview Pro by going to the
Lview Pro Web Page right now. Mac users can
download GIFconverter.
Once your picture has been converted to GIF or JPEG, it is now web-ready.
Place the file name into the <img> tag
in your HTML file, and your picture should appear.
Back to Tutorial Index