How this page was developed

          Graphics

Photographs, Video and Clipart

Several days could be spent just describing and practicing the wide variety of activities that can be completed by using a good photo editor or graphics design package. The purpose of this presentation is not to provide that depth in a single subject area but rather to provide some quick insight into the use of graphics and graphic formats when developing web based instruction.

First Step: If you do not have a good graphics package, such as: Adobe Photoshop, Corel Draw Graphics Suite, Ulead Photoimpact, MS Photodraw, then now is the time to start looking at these specialized programs. The image editor that is included with MS Windows will provide you with basic editing and enhancing capabilities (On MS Windows press the start button, programs, and then accessories.)
It should be noted, that the more powerful the photo editor, often time the longer the learning curve. However, when needed, the effort will be worth the work.
 
 
Second Step: In order to capture the type of images that will be helpful to our presentations a good digital camera
is needed. The amount of stock "Fire" related photography that can be purchased on CD or otherwise obtained commercially is limited. As a personal preference I utilize my digital camera as a primary source of graphics and my secondary source is from my scanner, either my photograph or flatbed. In the event that only one of the above items can be obtained, then I would recommend the camera as once the initial expenditure is made, there is no additional investment in film and developing. While it sound very simple and cost effective, the digital camera selected should be chosen based on the type of photographs that will be taken and the conditions (bright light from a fire, dim light due to darkness, rain, cold, etc.) that will be present when the camera is used.
Third Step: Develop an organization system for storage so that the images can be found easily when needed.


Graphics, The Basics

The following will include a number of definitions and basic concepts for dealing with graphics in Web based presentations. Generally, once the basics are understood then the use of the images in the presentation will follow the same basic procedures and rules that are used in any other method of presentation.

If I could offer two "rules" concerning the use of graphics in a presentation it is important that the image, photograph or drawing, enhance the learning process. The selection is based on the audience keeping in mind the age, knowledge of the subject matter, and that extreme care be exercised to determine if the image might be offensive to the audience. As an example, using an image that depicts a fire scene that includes a burned body would not be appropriate for general use. It may (and I emphasize "may"), however, be useful for instruction that requires graphical depiction of the scene. The second "rule" would be to limit photographing people in a manner that they can be identified. People in a photograph will date the image and also limit the use of the photograph without permission in an online instructional program.

Resolution

aka "dots per inch" (dpi), "pixels per inch" (ppi)

Only bitmap graphics have a set resolution, the number of "dots" that make up one square inch of the bitmap grid. For example, Adobe Photoshop displays all images in the maximum resolution for the monitor, which is 72 dpi. This means that if you have an image that is 300 dpi, it will look much larger on the monitor than it actually is.

Resolution
DPI
Used By
Low
72
Monitor, WWW, Computer Presentations
Medium
300
Some Printers (e.g., Inkjets)
High
600
laser printers
Very High
1400
35mm slides
A graphic's resolution is determined at the time it is created, i.e., scanned, photographed, or drawn. A graphic's resolution can be lowered or raised at any time, but quality is sacrificed every time it is changed.

When scanning graphics for the web or a computer presentation you can scan the graphics at 72 dpi unless you will need to enlarge the graphic for final use. In this case, scan the graphic at 150 dpi, enlarge it in a graphics editor (like Photoshop, Photo-paint), and save it as 72 dpi for the final product.

Web File Formats

Generally, one of two formats are most common for use in web based presentations.

GIF Graphics Interchange Format: One of two common formats for image files associated with Web documents.

JPEG Joint Photographic Experts Group: An image compression standard for still photographs that is commonly used on the web. Of note with JPEG or JPG format it is a loosey format that affects editing and saving. Meaning, each time that a JPEG format image is opened, edited and saved the images quality will be affected. The mechanics are not what is important, but to remember that if you wish to edit a JPEG image, first open it and save to another file format that will maintain image quality, edit, then use the "save as" command or convert command and convert it back to JPEG. You will have maintained image quality while editing and then be afforded the compression capabilities of the JPEG image.

Anti-aliasing: The process of smoothing or blurring the jagged appearance of diagonal lines in a bitmapped image. The edge pixels become varying shades, producing more natural-looking lines.

Dithering: Varying dot patterns to create the illusion of more colors than a palette actually contains, making images appear much more realistic.

Image map: A Web graphic that is divided into regions. These regions, or hot spots, are hyperlinked to various URLs.

Layers: Different strata of image elements, maintained separately for enhanced editing and layout capabilities. Elements can be freely moved over and under each other without changing existing images.

Mask: A selection tool that conceals part of an image, isolating the area to be modified. Creating a mask of a particular area helps to isolate effects.

Optimization: The process of compressing images by decreasing the color palette and selecting the appropriate format. This facilitates faster downloads.

Raster Graphics: Image files that store information for each individual pixel; commonly known as bitmapped images.

Vector Graphics: Images that are made up of points, lines, and shapes rather than individual pixels. This results in small files that can be scaled without affecting image quality.
 

For additional terms and concepts, see your software users guide or a good after market "How To" book.

Also, there are a number of great photograph sites on the web, for example:

AGFA Photography has a website that will be of assistance when looking for information concerning image quality and resolution. Rather than re-write the information contained, why not take a few minutes and visit the site.

http://www.agfaphoto.com/library/digicourse/9912/index.html#1

Video

Clipart

Graphic Image Placement Techniques

The method of placing the graphic image will be based on the type of software that is used to generate the page. See "How this page was developed" for additional information.

 

Return to the Main Page

This page was developed using MSWord 97 using the standard text and editing tools. Once the text was entered and aligned, the file was saved in .html format. This task was completed by using the "File" command menu located at the top of the page and then using the "save as html" command. This converted the text into .html and the file was ready to continuing editing.

Now, once the page was saved, it was opened using Netscape by starting Netscape and then working off line (Down in the lower left hand corner of the screen  just above the start button is the online and off line link.)  Working off line, go back to the "File" menu located at the top of the page and pull down the menu and continue down to the edit page.

Then click on the edit page. A new window will open and the page is now ready to edit and the creation will continue. At this time the photographs and other items were added to the text page. Now, graphics and other styles could have been added in MS Word, but as a matter of preference for this presentation, I continued editing in Netscape.

As a note, while editing in Netscape, it does not indicate spelling errors on screen while entering text. You must run "Spell Check" to check spell. The graphic below, indicates where the check spelling icon is or you can use the pull down menu by selecting tools and clicking on the Check Spelling command.

To add the images, in the edit page window, across the top near the right side of the menu bar the insert image icon is found

click on the icon and the following pop-up window will appear.
 
 
 
 

And, for those that work with many windows open switching back and forth......... another key item to remember. Save Often! Recovering from a system crash..... I am now like many others that have neglected the "Save Often" warning attempting to put my work back together.

Ok, we have selected the insert image icon and a pop-up window will appear

and then go to the "Choose File" button and select the file. In an effort to organize information, I would recommend that all of the images that will be used in the presentation are placed in the working folder for the presentation. That will facilitate future editing and hopefully prevent loosing a link to an image. Once the image is selected, click on the apply button and the image will appear at the cursor location.

Once the image is placed, it is now time to continue editing the image for size and placement. Notice in the above graphic, in the center several different "Text Alignment" options are available for text wrap. Select the one that best suits your needs.

The next step is to adjust the size of the image, to fit the page and your layout desire. Notice down in the left hand portion of the graphic above. there is a dialog box that provides you with the ability to adjust the size of the image. In most situations, it is best to have the "Constrain" box checked. That will keep the images proportions while you adjust the size. Once a size is selected, then click on the "Apply" button.
 

Now...... when editing in Netscape, the edit window does not provide you with a WYSIWYG format, it is an edit format. To see what the image and text will look like, save the document by either using the ^S option or place the cursor on the "File" pull down menu located at the top of the page and scroll down and save.

Then, go to the bottom of the screen and click on the Netscape window and the browser and page will appear. Go to the top menu bar and click on "Reload" and the most recently saved version of the edited page will appear. Check the alignment, text orientation, image size and other features. If additional editing is required, then all you have to do is to switch back and forth between the page edit window and the browser. Remember each time that the page is edited, it must be saved and then when returning to the browser, hit the reload button.

 

Return to the Main Page

 

Page Design and Layout by Ron Hopkins

Copyright © September 2000 All Rights Reserved
TRACE
Fire Protection and Safety Consultants, Ltd
123 Redwood Drive
Richmond, KY 40475
859-624-1136 Voice
859-623-6893 FAX
rhopkins1@earthlink.net

Visit the Fire and Safety Engineering Technology Program website: www.fireandsafety.eku.edu