Notes

Outline

Creating Graphics for the Web The Center for Instructional Delivery Wednesday, October 16, 2002

Overview

Specific objectives Types of images for the web. Managing images for the web. Your choice of any of the following: Finding images on the web. Getting images from "hard copy" (I.e., photos, pages of a book or magazine) Use a digital camera. Use of software to alter images for the web. Placement and adjustment of images in web pages. Other topics as suggested. Copyright issues

Types of images for the web. .GIF (gif images) 250 colors:  simple illustrations or charts, cartoons, icons. .JPG (jay-pegs) Thousands of colors:  photos, paintings, rich images. .SWF ("Flash" or "swiff" files) Interactive graphics that respond to user’s mouse actions.  Requires learning and use of advanced software (Macromedia Flash) to create rich media for the web.

Managing images for the web Perhaps the most important issue. In principle: Create a new folder to hold the web page and all of its images. Keep all images in the same folder as the web page. Move the entire folder to the web server (or have your web master do it for you).

Example

Example

You don’t have to learn html code But you should know that the web page and the image are separate files. The web page is an HTML file (.htm or .html). The image is a separate file (.gif, .jpg, or .swf).

Finding images on the web Google search (www.google.com) Use the search term "clip art" or "free clip art" Narrow your search by selecting categories.  Occasionally frustrating but mostly helpful (IMHO). Be aware:  More and more "clip art" services are turning to license-for-use policies, which you pay for. Alternate method.  Use google’s "image" search; enter a term specific to what you’re looking for. Caveat emptor!  You may get more than what you asked for!  (offensive content). Another good search engine:  www.alltheweb.com Tip:  Download and save the image to the folder that holds your web page.

Getting images from "hard copy" Photos, pages from a journal, magazine, or book. Use a "scanner" Typically, import from scanner and save as a .bmp file (bitmap) Convert bitmap to .jpg or .gif with other software.  (e.g., Lview Pro, Paint Shop Pro, Fireworks, Adobe Illustrator or Photoshop, Macromedia Freehand). Save to folder that holds the web page that will "call" the image file.

The process

Use a digital camera Spend the necessary amount of time to learn to use your digital camera. Become familiar with settings (sizes especially). Pixels:  a unit measurement. Screen sizes are typically 800 x 600 pixels. Quarter screen size is 400 x 300. A digital camera takes a "jpg" or "TIFF" image. Save jpgs into hard drive, to the folder that holds your web page.  Convert TIFFS to jpg. C.I.D. has a digital camera that uses 3.5 inch floppies.  Reserve in advance. A web site that offers general instruction on how to use a digital camera:  http://www.pcphotoreview.com/basic3040crx.aspx.

Using CID’s digital camera:

Use of software to alter images for the web. Software that opens existing images and saves for the web (GIF or JPG). Lview Pro:  Easy learning curve. Paint Shop Pro:  Easy learning curve. Snag-It:  Easy learning curve. Adobe Photoshop:  Easy to moderate. Macromedia Fireworks:  Moderate to hard learning curve. Macromedia Flash (swf):  Hard learning curve. Contact Information Services about acquiring any of these programs.  Contact C.I.D. for using any of these programs.

Placement and adjustment of images in web pages. In Netscape Composer Use the "Insert Image" icon (       ) located in the Toolbar. To resize, just click on the image and stretch it with your mouse. Format the image using "Image properties" (double click to open the "Image properties" window. In Dreamweaver, Use the "Insert Image" icon. (    ) located in the "Objects" panel. To resize, just click the image and stretch it with your mouse. Properties appear in a separate panel when you click on the image. For large images (such as maps), there are tools to create "hot spots" that the user may click and go to another web page. There are other tools in Dreamweaver to create "rollover" buttons that react when the user mouses over the image.

Other topics as suggested. What do you want to do? CID can help. (740-5080). www.stfrancis.edu/cid The CID home page leads you to other sources of information, such as tutorials and workshops about subjects discussed in this presentation (e.g., Using Netscape Composer, or Flash)

Copyright issues– guidelines (not legal advice) If you use images that belong to another owner, cite the source where you received it from. Be sure the availability of the image is for students only (e.g., in a WebCT course site). Use the minimum amount sufficient and necessary to achieve the instructional objective. For more information, consult Copyright Bay (http://www.stfrancis.edu/cid/copyrightbay.) If in doubt, ask permission to use.