Home | Week1 | Week2 | Week3 | Week4 | Week5 | Week6 | Week7 | Week8 | Week9 | Week10

Developing Educational Materials for the World Wide Web

Week 7- Using Graphics in Your Website

Although many website beginners will "borrow" existing clipart from commercial clipart libraries or off Internet sites, eventually the beginning web author may want to develop his or her own graphic images, whether scanned snapshots or created in a graphic imaging program. Computer graphics is a wide open field, something that takes patience and a steady hand, but it can prove absorbing and entertaining to those who try it.

Digital imaging is one of tne of the largest growing segments of the computer industry. Whether you use a scanner, a digital camera, or develop your own illustrations using illustration software, there are a number of ways to add excitement and interest to your website.

There are several things that must be remembered when you are preparing graphic images for the web:

File Formats

Jpg is the format most often used by digital cameras and scanners. It has millions of colors so is generally used for photographic images. Its high compression rate makes file sizes smaller, but removing color information may degrade the quality of the image.

Gif formats are commonly used with flat areas of color, such as in cartoons and animations. Colors are limited to 256, which decreases file size. Gifs can also have areas that are transparent, so when it is inserted on a web page, the transparent parts will not appear.

Two other formats that can appear on the web are Bmp (bitmap) and Png (portable network graphic). Bitmaps are generally used in paint programs and for desktop backgrounds because they use little system resources. Png is a newer file type that has not quite caught on yet.

Scanners

Scanners are coming down in price at such a rate that they are within range for just about everyone. They are very useful for those who use non-computer programs to create photographs and artwork. You can scan at various resolutions for higher image quality, and some programs allow you to adjust for

before the scan is made. Some scanners include adapters for making high-quality images using photographic negatives.

Digital Cameras

With a digital camera, you pay for high resolution. Digital cameras range in price from under $100 to over $2000, based on the number of megapixels the camera is capable of, whether 1.3 to the current 5.1 megapixel high-end cameras (or higher, for professional quality cameras). The higher the megapixel, the larger the file size will be, and the longer it takes to save the picture to the memory card. The larger file size means that there is more color and image information that can be utilized when adjusting the photo in a photo editing program. The larger file size also translates to higher resolution when the pictures are printed.

Digital cameras use floppy disks, CD burners, or flash memory cards or smart cards to store photographic information. This information can then be downloaded, usually using USB transfer devices, to the hard drive of your computer, or in some cases, directly into a printer which will then print out the pictures. Digital cameras are becoming both more complex and easier to use, borrowing some of the features of regular 35mm cameras, including f-stops and shutter speed.

One of the benefits of using a digital camera is that pictures can be immediately viewed and deleted, leaving room for more pictures.

Graphic Image Editing Programs

For many years the industry standard photo editing program has been Adobe Photoshop. Photoshop is a powerful, complex program that can take years to master. It is widely used in the magazine advertising, news reporting, and publishing business. It not only can vastly improve and retouch digital images, it can be used to completely change, combine, and create graphic images. Photoshop retails for $600, but can be purchased through an academic discount through Oregon Educational Technology Consortium (make sure your school district belongs to the consortium; OETC has some of the best software prices around), and commercial academic resellers such as Journeyed, K12 Connected, SmartSoft, and Campus Tech, which ask for proof of school ID.

Photo Editing, or bitmap programs, are different from illustration, or vector drawing programs such as Adobe Illustrator and CorelDraw. Photo editors change existing pixels, which are also called bitmaps. Illustration programs create shapes using mathematical formulas called vectors, which can be resized without losing the line quality. When vector images (True Type fonts are vector images) are edited, they change their attributes and become bitmap images, losing their ability to change sizes without losing line quality.

Other photo editing programs you might look at:

Photo Retouching

Although photo editing programs are capable of many things, one basic function is to retouch digital images. This is done by editing individual pixels, by changing image size or cropping, enhancing brightness or darkness, changing color value, or removing color information. An image in need of photo retouching may go through one or more of these processes:

For examples of some of these, look at my web page Photo Editing which I created in Microsoft Publisher for an Intel workshop!

Assignment/Activity:

Look at the website mentioned above (Photo Editing). Try some of the Resources links, or use a search engine to look up Photo Editing or Photoshop tutorials. There are a lot of them out there! If you have any of the programs listed above, or any other type of photo editor, experiment with brightness and contrast, color correction, cropping, image size, sharpening, and filters. Pay attention to resolution, file format, and experiment with layers.

 

Developing Educational Materials for the World Wide Web

EOU Malheur County Center (541) 889-7468 or (541) 889-6222

kenningtons@fmtc.com

Return to Top