Chapter 5: Multimedia Building
Why Are Graphics Important in Multimedia Development?
“A picture is worth a thousand words.”
--Confucius
Graphics are key building blocks for multimedia applications. Even though multimedia applications are designed as multi-sensory experiences, multimedia presentations are predominantly graphic.
Integrating Graphics into Multimedia Applications
In the production of a multimedia application, the content specialist provides the production team with graphics, photos, logos, and colors that illustrate the content of the application. The content specialist gives all these elements to the production team, who then make decisions about composition, balance, and integration of the interface design with graphic content.
Here are some uses of graphics and images in a multimedia application:
A Illustrations to explain concepts
A Charts to illustrate and summarize numerical data
A Uniform colors, graphic concepts, backgrounds, and graphic navigational tools (icons) to provide continuity throughout the application
A Integration of text, photographs, and graphics to express concepts, information, or moods
A Communication of corporate image and culture
A Simulations of environments
A Descriptions of processes
A Descriptions of organizational structures
A Illustrations of site locations
New technologies have produced a wealth of graphics and images for multimedia projects. The content specialist can select photos, slides, clip art, textures, colors and graphics of many kinds and from many sources. This wide selection is possible because of the availability of scanners, slide scanners, video capture boards, digital still cameras, CDs with collections of stock photographs, graphics available through the Internet, and other resources
Moreover, once images are digitized, they can be edited or manipulated with software like Adobe Photoshop. Thus, you can create new compositions by integrating different images and text. Technology for editing images opens the door for virtually unlimited possibilities in multimedia production.
Content specialists identify and select graphic elements to be used in the multimedia application. The graphic elements can come from a multitude of sources. Once the graphic elements are created, digitized, or edited by the computer graphic artist, the multimedia authoring specialist integrates them into the authoring applications.
Understanding Kinds of Graphics
People often learn and retain more information from pictures than from other forms of information. The integration of graphics into a multimedia application includes, among others, the following elements:
A Backgrounds
A Photos
A Three-dimensional graphics
A Charts (graphs)
A Flow charts
A Organizational charts
A Buttons
To understand the role of each element, explore their roles in relation to the overall structure of the multimedia application.
Backgrounds
The background is one of the most important graphic elements of a multimedia application. In a way, the background establishes the tone and the theme of your application. In some instances, the background also determines the complexity of the production---especially when you are using 3-D graphics.
The choice of background design, complexity, and richness depends on a number of factors, such as:
A Theme of the application
A Color-display capacity of the projector or monitor to be used in the playback of the application
A Storage capacity of the medium to be used for distribution purposes
A Amount of text to be placed over the background
For instance, if you have a text-heavy production, you should not use a busy background. In other instances, if the application is intended to be delivered via the Internet, a complex background will increase the downloading time of the page.
Backgrounds vary from solid colors to highly complex graphics, such as photographs, maps, corporate logos, and textured with borders.
Creating 2-D Graphics
Creating 2-D images requires two main types of applications: paint applications and draw applications. Once images are developed, they can be edited or manipulated with applications such as Adobe Photoshop that have editing and paint tools. In general, the editing and paint tools fall into five categories:
A Painting tools. Pencil, Airbrush, Paintbrush, Line, Bucket, Gradient, Rubber Stamp
A Draw tools. Line, Rectangle, Circle, Curve, Freeform, and Polygon
A Editing tools. Eraser, Cropping, Marquee, Magic Wand, Lasso, Eyedropper, Smudge, Focus, and Toning
A Type tool. Considered a category by itself. It is used to integrate text and manipulate fonts.
A Selection tools. Magic Wand, Lasso, Move, and Rectangular and Elliptical Marquees.
A variety of drawing, painting, and editing tools is available through different graphics software programs. The use and combination of these tools and their variations (such as brush styles, gradients, textures and blurs, and so on) will help you create and edit images.
Paint, Draw, and Graphics Editing Application Tools
To use any tools described, point to and select the tool; then move the pointer into the document area. When you move the pointer into the document area, the pointer turns into the shape of the selected tool.
Airbrush tool. This tool emulates an airbrush by laying down a diffused spray in the foreground of the document. You can change the diameter of the spray spots and the opacity of the selected color.
Circle tool. Select this tool and position the cross-hair pointer in the desired area; click and drag to the desired dimension of the circle or oval.
Copy tool. This tool is a shortcut for selecting, copying, and pasting graphic elements. Use the pointer to select the element to be copied and then point to and click the Copy tool.
Eraser tool. To delete pixels in an image or graphic developed using any other tool, use the Eraser tool as you drag through them
Eyedropper tool. When you want to use or sample a color already used in an image, use the Eyedropper tool. Select the tool an move the pointer to the desired area; the pointer turns into an eyedropper. Select the color and click to sample the color. After you select the color, you can apply it with any drawing or paint tool.
Gradient tool. Use this tool to fill an area with a gradient fill. Gradients are gradual color transitions. You define colors in a gradient fill by using background and foreground colors. Usually, the default background color is white. Gradient fills are usually used in 2-D graphics to give them a 3-D look, indicating shades and sources and direction of lights. This feature is available only in some programs.
Hand tool. Use the Hand tool to drag sections of the image into view.
Lasso tool. Use this tool to draw a freehand outline around an area. The Lasso tool is a selection tool.
Magic Wand tool. Positioned over a pixel, this tool selects adjacent pixels based on their color similarities. The Magic Wand is a selection tool.
Marquee tool. This tool enables you to select rectangular or elliptical areas by dragging a selection marquee in the image. The Marquee is a selection tool.
Paint Bucket tool. Use the Paint Bucket tool to fill a selected area on the image with a color.
Paintbrush tool. The Paintbrush tool emulates soft-edge brush strokes to paint while you drag the tool through an area. You can change the thickness and pressure of the stroke.
Pencil tool. Use the Pencil tool to draw and paint by dragging it across the work area. You can change line thickness by defining the pixels. It is also possible to draw a straight line with the pencil tool line by holding down the Shift key as you draw. As in many draw and paint tools, you can change the color assigned to the tool; look for the Color palette in the application and select a different color.
Rectangle tool. After you select this tool and position the cross-hair pointer in the desired area, click and drag the pointer from one corner to the diagonally opposite corner to achieve the desired dimension of the rectangle or square.
Rubber Stamp tool. The Rubber Stamp tool samples or picks up an area of the image and then clones that area as you drag the pointer (Rubber Stamp) through the work area.
Smudge tool. The Smudge tool simulates the action for dragging a finger through wet paint. The tool works by picking up color from the starting point of the stroke and pushing it in the direction of the drag.
Text tool. When this tool is selected and the pointer is moved into the document, the pointer changes into a cursor. Select the insertion point and start typing text. The word processing capabilities in a draw or paint application are very limited; the Text tool is not intended for developing extensive and highly formatted text.
Zoom tool. Use this to zoom in or out and to view a selected portion or area of an image.
.
Sources of Graphics
As you see in Figure 5.1, the graphics for your multimedia application come from different sources; one of these is clip art. Clip-art collections are available commercially; they include digitized graphics and photographs. These collections are available on floppy disks, CD-ROM, and from on-line networks. Depending on the supplier and the intended use for the art, it may be non-copyrighted or you may have to pay to use the art, especially if you use it commercially. Check with the clip-art supplier before you use these images.
Using Photo CDs
Photo CDs are an extraordinary source for professional-quality photos. These photos, usually available on CD-ROM, are classified by topics and can be used as backgrounds or icons, for example. Access to these images is usually through browser software that comes as part of the CD-ROM (see Figure 5.9). Once you select the photos, decide whether you need to edit or manipulate the images. You can work with images effectively with Adobe Photoshop, Aldus Photostyler, or Corel Photopaint as well as other programs.
Figure 5.9. Kodak Photo CD thumbnails and photo browser.
Using Clip Art
Clip art consists of collections of drawings, usually available as black-and-white or 4-bit (16 colors) images. The files are available in EPS (encapsulated post script format), PIC (Macintosh pictures), and BMP (bitmapped graphics) formats. These collections are usually organized by category – animals, plants, office equipment, computer equipment, and business people, for instance
Finding Graphics On the Internet
INTERNET Learn about graphics resources in multimedia by using the Web address listed through the home page of Multimedia: An Introduction, Chapter 5 (http://www.queet.com/multimedia/intro). To update this list, use an Internet search engine with the following search string: +graphics, +multimedia
Graphics Acquisition: Scanning Basics
Before you start scanning an image, you should make a series of decisions that will affect the quality and usefulness of the resulting digitized file. Among the decisions you need to make are these:
A Determine whether the image will be printed or displayed in a monitor or projector.
A Select the area to scan
A Decide the scanning resolution of the resulting digitized file
A Decide the amount of light and contrast desired for the resulting image.
A Determine the colors casts you want to eliminate during the scan.
Determining the appropriate scanning depends on a number of factors, including the amount of storage space in the computer designated for scanning; the use for the digitized image; and how much manipulation or editing the image needs to reach the desired size, quality, and effect.
When you determine scanning resolution, you must understand some important properties of digitized images; among these are bit resolution, device resolution, screen resolution or frequency, and image resolution. Now examine these properties:
A Bit resolution or color resolution. Measures the number of bits of stored information per pixel. This measurement of resolution determines how many colors can be displayed at one time on-screen. The measurements are 1-bit (1 color, black), 2-bit (4 colors), 4-bit (16 colors), 8-bit (256 colors), 16-bit (65,536 colors), 24-bit (16.7 million colors).
A Device resolution or output resolution. Refers to the number of dots per inch (dpi) that the output device - such as a monitor, an LCD panel, or a video/data projector – can produce. If you plan to display your multimedia application on a typical monitor, the display resolution is 72 dpi.
A Screen resolution (screen frequency). Refers to the number of dots per inch in the halftone screen used to print a gray0scale image or color separation. Screen resolution is measured in lines per inch (lpi). In multimedia development, you rarely have to deal with this resolution parameter.
A Image resolution. Refers to the amount of information stored for an image; it is typically measured in pixels per inch (ppi). The combined effect of image dimension (physical) and image resolution (that is, 640 x 480, 800 x 600) determines the file size as well as the quality of the resulting image. Keep in mind that the higher the image resolution, the more disk space the image requires, the more time it takes to be displayed, and the longer it takes to print.
Storage space on the hard drive or the storage media of the computer connected to the scanner is important. If storage space is severely limited, you will not be able to scan at high resolution. Image resolution affects file size in a proportional way; the size of a file is proportional to the square of its resolution. For example, if you increase the resolution of an image from 72 ppi to 144 ppi and maintain its dimensions, the file size increases by four times.
When you scan images to be incorporated into a multimedia application, scan using a resolution between 300 to 600 dpi. The scanning resolution should not be greater than the resolution of the display unit, usually 640 pixels x 480 pixels. Before you export the scanned image into a multimedia application, change its resolution to 72 dpi. There are three reasons for lowering the resolution:
1) The display resolution is 72 dpi
2) Authoring languages handle only 72 dpi images
3) The file size of the multimedia application is kept at its minimum.
Saving and Exporting Graphics: File Format
Historically, file formats are determined by software developers. The Apple Macintosh environment uses the PICT format as the image format for all Macintosh applications. This uniformity is one reason for the ease in transferring image files from one Apple application to another. In the world of PCs, the story is different. Graphics software development was initiated under the DOS operating system, and about a dozen different image files were developed . Relatively recently, the Windows operating system standardized on the BMP file format, which has been adopted by most graphics programs. Table 5.1 summarizes the image file formats used by different programs.
Table 5.1
| Format Name | File Extension | Type of Image File |
| Windows Bitmap | .bmp | Bitmap |
| Drawing Exchange File | .dxp | Vector |
| Encapsulated Post Script | .eps, epsf | Vector |
| GIF | .gif | Bitmap |
| GEM File | .img | Bitmap |
| Initial Graphic Exchange | .img, iges | Vector |
| JPEG | .jpg, jpeg | Compressed Bitmap |
| MPEG | .mpg, mpeg | Compressed Bitmap |
| Auto CAD | .plt | Vector |
| Photo CD | .pcd | Bitmap |
| PICT/PICT2 | .pct, pict | Bitmap |
| Targa | .tga | Bitmap |
| MS Word Metafile | .wmf | Bitmap |
| Word Perfect Graphics | .wpg | Bitmap |
| TIFF | .tif | Bitmap |
When you work with graphics in a Windows environment, you may need file converter software. This software enables you to import and export image files from one application to another by changing file formats.
Working with Digital Still Photos
Photographs provide realism and drama in multimedia applications. Because of technological developments in digital video, it is possible to acquire digital still video or digital photographs by different methods. Here you explore two possibilities:
B stills captured from digital still cameras, and
B still cameras and stills captured from video
Photos from Digital Still Cameras
If you need a photograph that is not available commercially or you need to take a photo of people, facilities, or activities and if professional quality is not an issue, the answer is a digital still camera. Among the cameras on the market are Apple Quick Take, Casio LCD Digital Camera, and Kodak Digital Camera; all are Macintosh and Windows compatible.
INTERNET To learn more about the capabilities and features of these cameras, use your Internet browser and open the Web pages of the following companies: Apple, Casio and Kodak.
These cameras are portable, small, and lightweight with an integrated flash for shots in areas with low light. These cameras can take photos in 16- and 32-bit resolution. The number of shots that can be stored in the camera depends on the desired resolution and whether the images are stored in “RAM” or conventional memory.
Digital photography has evolved to the point of making these cameras affordable and easy to use without additional hardware. In the past, cameras needed to be connected to a digitizing board installed in the computer. Today transferring images is as simple as connecting the camera to one of the serial ports of the computer with a cable and downloading files to the computer. The software transfers the image files.
Once photos are digitized and loaded into memory in the CPU, you can edit the image with the software included with the camera or with image-editing software such as Adobe Photoshop, Aldus Photostyler, and Corel Photopaint, among others.
Digital Still Video
On a number of occasions, you may have shot some video footage and while editing identified one or more frames that would fit nicely as still art in your multimedia application. But how do you make those video frames into still digital photos? The answer is simple but relatively costly.
To accomplish this task, you need an appropriate video player, a computer with a high-speed processor, and a video capture board. Watch the target video on the computer screen, select the desired frame, and then capture it. Finally, you save and then edit the frame with image editing software.
Using Charts
In business and training-related multimedia applications, charts (or graphs) are the best way to present facts and figures. You can develop charts with electronic spreadsheets, statistical programs, or integrated applications; and some presentation programs integrate chart making capabilities into their programs.
When you present data or numerical information in charts, make sure that you select the chart type that best represents your information.
Avoiding Problems with Graphics
Warning: Our multimedia development experience has taught us these basic pointers for avoiding problems with graphics in multimedia applications.
Caution: Do not lower image resolution only to increase it later. Decreasing resolution deletes some original color resolution information, and the resulting image is not as sharp as the original
Remember that background design must give the user a sense of the theme or goal of the application. For example, the background in a business presentation should reflect the image of the organization.
When you design graphics, consider how you will address cognitive load. Managing cognitive load is critical: If you bombard your audience with too much information at once, the surplus of simultaneous information itself becomes an obstacle in learning. As a result, the multimedia application will not meet its goals.
Multimedia technology gives us the possibility of integrating a large number of resources, including video, audio, text, animations, images, rich graphics, and more. You may be tempted to showcase all your creative abilities by using everything you can on a single screen, but refrain from doing so. Don’t overload the user. Keep the screen simple, clear, user-friendly, and elegant.
Use color, arrows, shading, and sound sparingly to direct the learner’s attention to important parts of the message.
0 comments:
Post a Comment