68

CHAPTER 3

Images

In this chapter, you

will learn how to:
M ultimedia on a computer screen is a composite of
elements: text, symbols, photograph-like bitmaps, vector-drawn graphics,
three-dimensional renderings, distinctive buttons to click, and windows
■■ Work out your graphical
of motion video. Some parts of this image may even twitch or move so
approach by planning your that the screen never seems still and tempts your eye. It may be a very
approach, organizing your colorful screen with gentle pastel washes of mauve and puce, or it may
tools, and configuring your be brutally primary with splashes of Crayola red and blue and yellow and
computer workspace green. It might be stark black and white, full of sharp angles, or softened
■■ Differentiate among bitmap, with gray-scale blends and anti-aliasing. It may be elegant or, by design,
vector, and 3-D images and not. The computer screen is where the action is, and it contains much more
describe the capabilities than your message; it is also the viewer’s primary connection to all of your
and limitations of all three project’s content.
■■ Describe the use of colors
This chapter will help you understand the visual elements that make
and palettes in multimedia up a multimedia presentation. Graphic elements can usually be scaled
to different sizes, colorized or patterned or made transparent, placed
■■ Cite the various image file
in front of or behind other objects, or be made visible or invisible on
types used in multimedia
command. How you blend these elements, how you choose your colors
and fonts, the tricks that you use to catch the eye, how adept you are at
using your tools—these are the hallmarks of your skill, talent, knowledge,
and creativity coalesced into the all-important visual connection to your
viewers.

Before You Start to Create

At the beginning of a project, the screen is a blank canvas, ready for you,
the multimedia designer, to express your craft. The screen will change again
and again during the course of your project as you experiment, as you
stretch and reshape elements, draw new objects and throw out old ones,
and test various colors and effects—creating the vehicle for your message.
Indeed, many multimedia designers are known to experience a mild shiver
when they pull down the New menu and draw their first colors onto a
fresh screen. Just so; this screen represents a powerful and seductive avenue
for channeling creativity.
 Chapter 3 Images 69

WARNING Multimedia designers are regularly lured into agonizingly steep

learning curves, long nights of cerebral problem solving, and the pursuit of perfor-
The organizing and creative
mance perfection. If you are fundamentally creative, multimedia may become a
process begins with drawings
calling, not a profession.
in pen or pencil on paper.
Too many times we are
enthused about the color and
Plan Your Approach the computer graphics tools,
but they can overwhelm the
Whether you use templates and ready-made screens provided by your
creative design process.
authoring system, clip art or objects crafted by others, or even if you simply
clone the look and feel of another project—there will always be a starting Dennis Woytek, Assistant
point where your page is “clean.” But even before reaching this starting Professor, Duquesne University
point, be sure you have given your project a good deal of thought and
planning. Work out your graphic approach, either in your head or during
creative sessions with your client or colleagues. There are strong arguments
against drawing on a fresh screen without such foresight and preparation.
To get a handle on any multimedia project, you start with pencil, eraser,
and paper. Outline your project and your graphic ideas first: make a flow-
chart; storyboard the project using stick figures; use three-by-five index
cards and shuffle them until you get it right.
You may not “nail it” with the first design you submit to a client. Get a
few examples from them or have them look at templates from a site such
as [Link]. When you have a clear idea what they want,
submit a few variations—different visual designs, color palettes, and layouts.

Organize Your Tools I like “do-overs,” where

Most authoring systems provide the tools with which you can create the you make quick and dirty
graphic objects of multimedia (text, interactive buttons, vector-drawn buttons now, or live text now,
objects, and bitmaps) directly on your screen. If one of these tools is not but go back later and replace
included, the authoring system usually offers a mechanism for importing those placeholders with more
the object you need from another application. When you are working with refined images or pretty
animated objects or motion video, most authoring systems include a feature bitmapped text. This do-over
for activating these elements, such as a programming language or special approach lets you work two
functions for embedding them. Likely, too, your tools will offer a library of ends against the middle—
special effects—including zooms, wipes, and dissolves. Many multimedia you can get right into
designers do not limit their toolkits to the features of a single authoring designing navigation and
platform, but employ a variety of applications and tools to accomplish animation, but know that
many specialized tasks. you will put in the “good”
images later.
Configure Your Computer Workspace Sherry Hutson, Lecturer,
When developing multimedia, it is helpful to have more than one monitor University of Illinois at
to provide lots of screen real estate (viewing area). In this way, you can Springfield
70 Multimedia: Making It Work

display the full-screen working area of your project or presentation and

still have space to put your tools and other menus. This is particularly
important in an authoring system such as Flash or Director, where the
edits and changes you make in one window are immediately visible in the
presentation window—provided the presentation window is not obscured
by your editing tool! During development there is a lot of cutting and
pasting among windows and among various applications, and with an extra
monitor, you can open many windows at once and spread them out. Both
Macintosh and Windows operating systems support this extra hardware.

NOTE A few weeks of having to repeatedly bring windows to the front, and
then hide them again to see the results of your editing, will probably convince you
to invest in a second monitor.

TIP Your operating system has keyboard shortcuts for moving among win-
dows and applications, accessing your desktop, and for standard commands such
as cut, copy, paste, and undo. Learning to use these commands—and using them
consistently—will enable you to work efficiently.

Making Still Images

Still images may be small or large, or even full screen. They may be colored,
placed at random on the screen, evenly geometric, or oddly shaped. Still
images may be a single tree on a wintry hillside; stacked boxes of text against
a gray, tartan, or Italian marble background; an engineering drawing; a
snapshot of your department manager’s new BMW. Whatever their form,
still images are generated by the computer in two ways: as bitmaps (or
paint graphics) and as vector-drawn (or just plain “drawn”) graphics.
Bitmaps may also be called “raster” images. Likewise, bitmap editors are
sometimes called “painting” programs. And vector editors are sometimes
called “drawing” programs.
Bitmaps are used for photo-realistic images and for complex drawings
requiring fine detail. Vector-drawn objects are used for lines, boxes, circles,
polygons, and other graphic shapes that can be mathematically expressed
in angles, coordinates, and distances. A drawn object can be filled with
color and patterns, and you can select it as a single object. The appearance
of both types of images depends on the display resolution and capabilities
of your computer’s graphics hardware and monitor. Both types of images
are stored in various file formats and can be translated from one applica-
tion to another or from one computer platform to another. Typically, image
files are compressed to save memory and disk space; many bitmap image
 Chapter 3 Images 71

file formats already use compression within the file itself—for example,
GIF, JPEG, and PNG.
Still images may be the most important element of your multime-
dia project or web site. If you are designing multimedia by yourself, put
yourself in the role of graphic artist and layout designer. Take the time
necessary to discover all the tricks you can learn about your drawing soft-
ware. Competent, computer-literate skills in graphic art and design are
vital to the success of your project. Remember—more than anything else,
the user’s judgment of your work will be heavily influenced by the work’s
visual impact.

Bitmaps
A bit is the simplest element in the digital world, an electronic digit that
is either on or off, black or white, or true (1) or false (0). This is referred to
as binary, since only two states (on or off ) are available. A map is a two-
dimensional matrix of these bits. A bitmap, then, is a simple matrix of the
tiny dots that form an image and are displayed on a computer screen or
printed.

First Person
A few years ago a large corpo- that had a built-in projector and follow-up phone call, we were told
ration asked us and one other sound system with mixers and light by our potential clients that the
multimedia developer to bid on a dimmers—a place where we could competition’s “incredible artwork”
long-term contract for computer- knock the socks off anybody. But had won out over our “excellent
based training. Though busy within 30 seconds, the disaster bells technology demonstration.”
with other active projects, we started tinkling: most of our pre-
To cover our disappointment, we
didn’t want this possibly lucrative sentation was going way over their
mumbled something to ourselves
opportunity to slip by, so we spent heads. Afterward, there were one
about not wanting to work with
a few days hastily putting together or two vague questions and some
computer illiterates, anyway—
a demonstration of our technical thank-you’s.
people who could be taken to the
skills for building nifty databases,
Our competitor’s presentation, on cleaners by fresh paint. But we
designing tricky telecommunica-
the other hand, provided a slick knew we’d missed a hefty piece of
tions systems, and integrating live
series of finely rendered bitmapped contract work because we hadn’t
video. We even “wire-framed” a bit
screen images and elegant visuals. It invested serious graphic art talent
of a working multimedia database
was heavy on pretty menu screens in our demonstration. We decided
with real data we got from the
and very light on how-it-is-done that’s why the real peas in the can
corporation.
technology. We later learned that are never the same bright green as
We showed our demo to about a one of their graphic artists had the ones on the label. So we learned
dozen management and training worked for two solid weeks on the a marketing lesson.
executives, in a fancy boardroom color bitmaps for that demo. In the
72 Multimedia: Making It Work

A one-dimensional matrix (1-bit depth) is used to display mono-

chrome images—a bitmap where each bit is most commonly set to black
or white. Depending upon your software, any two colors that represent
the on and off (1 or 0) states may be used. More information is required
to describe shades of gray or the more than 16 million colors that each
picture element might have in a color image, as illustrated in Figure 3-1.
These picture elements (known as pels or, more commonly, pixels) can be
either on or off, as in the 1-bit bitmap, or, by using more bits to describe
them, can represent varying shades of color (4 bits for 16 colors; 8 bits for
256 colors; 15 bits for 32,768 colors; 16 bits for 65,536 colors; 24 bits for
16,772,216 colors). Thus, with 2 bits, for example, the available zeros and
ones can be combined in only four possible ways and can, then, describe
only four possible colors:

Bit Depth Number of Available Binary Combinations for

­Colors Possible Describing a Color
1-bit 2 0, 1
2-bit 4 00, 01, 10, 11
4-bit 16 0000, 0001, 0011, 0111, 1111, 0010, 0100,
1000, 0110, 1100, 1010, 0101, 1110, 1101,
1001, 1011

Figure 3-1 A bitmap is a data matrix

that describes the characteristics of all
the pixels making up an image. Here,
each cube represents the data required
to display a 4 × 4–pixel image (the face
of the cube) at various color depths
(with each cube extending behind the
face indicating the number of bits—
zeros or ones—used to represent the
color for that pixel).

Together, the state of all the pixels on a computer screen make up the
image seen by the viewer, whether in combinations of black and white or
colored pixels in a line of text, a photograph-like picture, or a simple back-
ground pattern. Figure 3-2 demonstrates various color depths and com-
pression formats. Image 1 is 24 bits deep (millions of colors); Image 2 is
dithered to 8 bits using an adaptive palette (the best 256 colors to represent
the image); Image 3 is also dithered to 8 bits, but uses the Macintosh system
palette (an optimized standard mix of 256 colors). Image 4 is dithered to 4
bits (any 16 colors); Image 5 is dithered to 8-bit gray-scale (256 shades of
gray); Image 6 is dithered to 4-bit gray-scale (16 shades of gray); and Image
7 is dithered to 1 bit (two colors—in this case, black and white).
 Chapter 3 Images 73

Is there a colour scheme

that will appear coloured or
at least solid black for the
colour-impaired?
If you’re gathering empirical
evidence, I have some-
thing called red-green
colour blindness (it is quite
1 2
common in males). It
doesn’t mean that you don’t
know which traffic light is
showing! What it means
mainly is that the tone of
red-type colours doesn’t seem
so different to the tone of
greens—the obvious case
is a poppy field. I can see
3 4 the poppies as red OK if I
look carefully or they are
pointed out to me, but other
people see them kind of
exploding out of the green...
For people like me, a vibrant
yellow always works. I read
somewhere that black on
yellow is a reliable “strong”
5 6 combination. Certainly it is
used by one of the motoring
organisations in the UK for
special diversion notices and
the like.

Graham Samuel, Educational

Software Developer, The Living
Fossil Co., London

Figure 3-2 These images show the color depth of bitmaps as described in Figure 3-1.
Note that Images 4 and 6 require the same memory (same file size), but the gray-scale
image is superior. If file size (download time) is important, you can dither GIF bitmap files
to the lowest color depth that will still provide an acceptable image.
74 Multimedia: Making It Work

Bitmap Sources
Where do bitmaps come from? How are they made? You can do the
following:
■■ Make a bitmap from scratch with a paint or drawing program.
■■ Grab a bitmap from an active computer screen with a screen capture
program, and then paste it into a paint program or your application.
■■ Capture a bitmap from a photo or other artwork using a scanner to
digitize the image.
■■ Once made, a bitmap can be copied, altered, e-mailed, and otherwise
used in many creative ways.
If you do not want to make your own, you can get bitmaps from suppliers
of clip art, and from photograph suppliers who have already digitized the
images for you. Libraries of clip art are available on CD-ROMs and down-
loadable through online services. Many graphics applications are shipped
with clip art and useful graphics. A clip art collection may contain a random
assortment of images, or it may contain a series of graphics, photographs,
sound, and video related to a single topic. Some 3-D modeling programs
incorporate libraries of pre-made 3-D models into the application, allowing
you to drag and drop common objects into a scene.
You can also download an image bitmap from a web site: in most
browsers right-click over the image to see a menu of options. Choose
“Download image to disk,” “Copy Image,” or “Save picture as….” Regard-
less of the source of the image, you should be aware of who owns the
copyright to the image you wish to use and what is required to reproduce
the image legally.

WARNING To avoid legal problems, always assume that an image on the

Web is protected by copyright, even if there is no copyright notice shown. Just
because you can easily download an image from a web site, doesn’t mean that
you can reuse that image in your own work without permission or paying a
license fee. See Chapter 11 for more about copyright protection.

Legal rights protecting use of images from clip libraries fall into three
basic groupings. Public domain images were either never protected by a
copyright or their copyright protection has ended. Generally these can be
freely used without obtaining permission or paying a license fee, though
there still may be an ownership issue for a particular work of art (such as a
painting owned by an art gallery). Royalty-free images are purchased and
then used without paying additional license fees. Rights-managed images
require that you negotiate with the rights holder regarding terms for using
the image and how much you will pay for that use.
Figure 3-3 shows a page of thumbnails describing a commercially
available resource of royalty-free images called Photodisc, a part of Getty
 Chapter 3 Images 75

Images ([Link]). The Photodisc collections contain high-

resolution bitmaps with a license for their “unlimited use.” But you should
note that “unlimited use” often contains caveats: in many cases there is an
upper limit to the number of “units” of your own product that you may
distribute without paying more, so you need to read the fine print. These
additional fees are usually reasonable, however, and affect only commercial
multimedia publishers.

Figure 3-3 A page of thumbnails

showing the content of various royalty-
free Photodisc collections from Getty
Images

Regardless of the source, once you have a bitmap, you can manipulate
and adjust many of its properties (such as brightness, contrast, color depth,
hue, and size). You can also cut and paste among many bitmaps using an
image-editing program. If the clip art image is high resolution (aimed at
300 or 600 dpi printers, not 72 dpi monitors), you may discover that you
can grab just a tiny portion of the high-res image—say, a sheep in the far
corner of a farmyard or a car in a parking lot—and it will look great when
displayed at monitor resolution.
76 Multimedia: Making It Work

Bitmap Software
The abilities and features of painting and image-editing programs range
from simple to complex. The best programs are available in versions that
work the same on both Windows and Mac platforms, and the graphics
files you make can be saved in many formats, readable across platforms.
Macintosh computers do not ship with a painting tool, and Windows
provides only a rudimentary Paint program, so you will need to acquire this
very important software separately. Many multimedia authoring tools offer
built-in bitmap editing features. Director, for example, includes a pow-
erful image editor that provides advanced tools such as “onion-skinning”
and image filtering using common plug-ins. Adobe’s Photoshop, however,
remains the most widely used image-editing tool among designers world-
wide; it is available without some bells and whistles in a less-expensive
version, Photoshop Elements, which may have all the features you need
for your projects.
Many designers also use a vector-based drawing program such as
Adobe’s Illustrator, CorelDRAW, or InDesign to create curvy and com-
plicated looks that they then convert to a bitmap. You can use your image-
editing software to create original images, such as cartoons, symbols,
buttons, bitmapped text, and abstract images that have a refined “graphic”
look, but it is virtually impossible to create a realistic-looking photo
from scratch using an image-editing program. The artistic painting tools
offered by Corel’s Painter ([Link]/painter) include hundreds of
brushes, sprays, watercolors, inks, and textures to mimic the output of
natural media in a bitmap (see Figure 3-4). There are also many open
source and free bitmap editors available—just type “graphics editors” in
a search engine. Regardless of your program of choice, learning to use a
high-powered paint program and image editor is a necessary investment
in your multimedia future.

Figure 3-4 Painter is used for

creating original artwork; for book,
medical, and architectural illustration;
to transform photographs into realistic-
looking paintings; to build seamless
patterns for fabrics; and for story-
boarding scene concepts and costumes
for movies and theater.
 Chapter 3 Images 77

Capturing and Editing Images The image you see on your monitor is a
digital bitmap stored in video memory, updated about every 1/60 of a sec-
ond. As you assemble images for your multimedia project, you may often
need to capture and store an image directly from your screen. The simplest
way to capture what you see on the screen at any given moment is to press
the proper keys on your computer keyboard. This causes a conversion from
the screen buffer to a format that you can use.
■■ Both the Macintosh and Windows environments have a clipboard—
an area of memory where data such as text and images is temporarily
stored when you cut or copy them within an application. In Windows,
when you press print screen, a copy of your screen’s image goes to the
clipboard. From the clipboard, you can then paste the captured bitmap
into an application (such as Paint, which comes with Windows).
■■ On the Macintosh, the keystroke combination command-shift-3
creates a readable PNG-format file named Picture and places it on
your desktop. You can then import this file’s image into your multime-
dia authoring system or paint program. You can also press command-
control-shift-4 to drag a rectangle on your screen and capture what
is inside the rectangle onto the clipboard, ready for pasting.
The way to get more creative power when manipulating
bitmaps is to use an image-editing program, likely one of the
programs named previously. These are the king-of-the-moun-
tain programs that let you not only retouch the blemishes
and details of photo images, but also do tricks like placing an
image of your own face at the helm of a square-rigger or right
on the sideline at last year’s Super Bowl. ­Figure 3-5 shows
just such a composite image, made from two photographs.
It was created by graphic artist Frank Zurbano and shows
his fiancée, Brandy Rowell, chasing after wedding gifts on
the lawn where they will be married. Isolating and extracting
parts of an image is an essential skill in multimedia produc-
tion. Most bitmap editors have “lasso” type tools that select
areas by drawing a path. This selection can be “feathered,”
or made to include partially transparent pixels outside the
selected area.
In addition to letting you enhance and make compos-
ite images, image-editing tools allow you to alter and distort
images. A color photograph of a red rose can be changed into
a purple rose, or blue if you prefer. A small child standing
next to her older brother can be “stretched” to tower over him.
Morphing is another effect that can be used to manipulate Figure 3-5 Image-editing programs let you add and
still images or to create interesting and often bizarre animated delete elements in layers.
78 Multimedia: Making It Work

transformations. Morphing (see Figure 3-6) allows you to smoothly blend

two images so that one image seems to melt into the next, often producing
some amusing results.

Figure 3-6 Morphing software was used to seamlessly transform the images of 16
kindergartners. When a sound track of music and voices was added to the four-minute
piece, it made a compelling video about how similar children are to each other.
We have to keep satura-
tion in mind all the time Image-editing programs may, indeed, represent the single most signif-
when doing our web pages... icant advance in computer image processing during the late 1980s, bring-
viewing the graphics on both ing truly amazing power to PC desktops. Such tools are indispensable for
Macs and PCs before actu- excellent multimedia production.
ally using them. For instance,
when doing our Halloween NOTE When you import a color or gray-scale bitmap from the Macintosh to
pages, we used a very cool Windows, the colors will seem darker and richer, even though they have precisely
pumpkin background that the same red, green, and blue (RGB) values. In some cases, this may improve the
was beautifully saturated on look of your image, but in other cases you will want to first lighten (increase the
the Mac side. On Windows, brightness and possibly lower the contrast) of the Macintosh bitmap before bring-
though, it was way too dark, ing it into Windows.
and you couldn’t read the
overlying text. We had to
Scanning Images After poring through countless clip art collections,
lighten the GIF on the Mac
you still haven’t found the unusual background you want for a screen about
side a few times before using
gardening. Sometimes when you search for something too hard, you don’t
it cross-platform.
realize that it’s right in front of you. Everyday objects can be scanned and
Rich Santalesa, Editor, manipulated using image-editing tools, such as those described in the pre-
NetGuide Magazine ceding section, to create unusual, attention-getting effects. For example, to
 Chapter 3 Images 79

enliven a screen with a gardening motif, scan a mixture of seeds, some fall
foliage, or grass-stained garden gloves. Open the scan in an image-editing
program and experiment with different filters, the contrast, and various
special effects. Be creative, and don’t be afraid to try strange combina-
tions—sometimes mistakes yield the most intriguing results.
Another alternative to computer-generated graphics is to create art-
work using traditional methods: watercolors, pastels, and even crayons. You
can then scan the image, make necessary alterations, and tweak pixels on
the computer. Too many designers have fallen into the trap of trying to
draw detailed sketches using a mouse or drawing tablet, when a pencil or
pen on paper would have produced better results quicker. In Chapter 10,
Figure 10-7 shows a web page that uses a large image map of a seacoast
village for navigation. The picture of the village was drawn on a large sheet
of paper by artist Carolyn Brown using a fine pen. Then it was digitized
in sections because the original drawing was too large for the scanner top.
Four scans were stitched together into a single image using Photoshop
layers, and the image was resized to fit the web page. Finally, it was color-
ized to look “old” and reduced in color depth to 4 bits so that it would load
quickly on the Internet as a GIF.
Powerful filters and plug-ins are offered by most image-editing pro-
grams (see illustration to right) to manipulate bitmaps in many different
ways. Experiment with your filters and plug-ins. Alien Skin’s Exposure,
for example, brings the creative tools of film photography to the world
of digital editing with presets for many looks: discontinued films, dark-
room tricks, lo-fi camera quirks like Holga and Lomo, vintage looks like
Technicolor movie film and old Kodachrome that are distressed with dust,
scratches, and lens blur, warped vignettes, and funky colors from cross-
processing (see Figure 3-7).

Figure 3-7 Exposure from Alien Skin, offering photography effects, is one of
hundreds of commercial plug-ins and filters available for manipulating bitmapped
images. Here a digital color image has been processed to look like it came from a
photographer’s darkroom.
80 Multimedia: Making It Work

Vector Drawing
Most multimedia authoring systems provide for use of vector-drawn
objects such as lines, rectangles, ovals, polygons, complex drawings created
from those objects, and text.
■■ Computer-aided design (CAD) programs have traditionally used
vector-drawn object systems for creating the highly complex and
geometric renderings needed by architects and engineers.
■■ Graphic artists designing for print media use vector-drawn objects
because the same mathematics that put a rectangle on your screen can
also place that rectangle (or the fancy curves of a good line-art illus-
tration) on paper without jaggies. This requires the higher resolution
of the printer, using a page description format such as Portable Docu-
ment Format (PDF).
■■ Programs for 3-D animation also use vector-drawn graphics. For
example, the various changes of position, rotation, and shading of light
required to spin an extruded corporate logo must be calculated math-
ematically. (Animation is discussed in Chapter 5.)

How Vector Drawing Works

A vector is a line that is described by the location of its two endpoints.
Vector drawing uses Cartesian coordinates where a pair of numbers
describes a point in two-dimensional space as the intersection of hori-
zontal and vertical lines (the x and y axes). The numbers are always listed
in the order x,y. In three-dimensional space, a third dimension—depth—
is described by a z axis (x,y,z). This coordinate system is named for the
French philosopher and mathematician, René Descartes. So a line might
be simply
<line x1="0" y1="0" x2="200" y2="100">

where x1 and y1 define the starting point (in the upper-left corner of the
viewing box) and x2 and y2 define the end point.
A simple rectangle is computed from starting point and size: your
software will draw a rectangle (rect) starting at the upper-left corner of
your viewing area (0,0) and going 200 pixels horizontally to the right and
100 pixels downward to mark the opposite corner. Add color informa-
tion like

<rect x="0" y="0" width="200" height="100" fill="#FFFFFF" stroke="#FF0000"/>

and your software will draw the rectangle with a red boundary line and fill
it with the color white. You can, of course, add other parameters to describe
a fill pattern or the width of the boundary line. Circles are defined by a
location and a radius:
 Chapter 3 Images 81

<circle cx="50" cy="50" r="10" fill="none" stroke="#000000" />

Type the following code into a text editor and save it as plain text with
a .svg extension. This is a Scalable Vector Graphics file. Open it in an
HTML5-capable browser (File:Open File…) and you will see:
SVG
<svg xmlns="[Link]
xmlns:xlink="[Link]
width="200"
height="200"
viewBox="-100 -100 300 300">
<rect x="0" y="0" fill="yellow" stroke="red" width="200" height="100"/>
<text transform="matrix(1 0 0 1 60 60)" font-family="'TimesNewRomanPS-BoldMT'" font-size="36">SVG</text>
</svg>

Because these SVG files can be saved in

a small amount of memory and because
they are scalable without distortion (try
changing the width and height of the
view box in the preceding code), SVG
(Tiny) is supported by browsers on
most mobile phones and PDAs. The
SVG specification also includes time-
based changes or animations that can
be embedded within the image code
(see [Link]/TR/SVG11/animate.
html#AnimationElements). Figure 3-8
shows Adobe Illustrator saving a file
in SVG format. Vector drawing tools
use Bézier curves or paths to math-
ematically represent a curve. In prac-
tical terms, editing software shows you
points on the path, each point having a
“handle.” Changing the location of the
handle changes the shape of the curve. Figure 3-8 Drawing software such as Adobe Illustrator can save vector
Mastering Bézier curves is an impor- graphics in SVG format.
tant skill: these curves not only create
graphic shapes but represent motion paths when creating animations.

Vector-Drawn Objects vs. Bitmaps

Vector-drawn objects are described and drawn to the computer screen
using a fraction of the memory space required to describe and store the
same object in bitmap form. The file containing the vector-drawn colored
82 Multimedia: Making It Work

rectangle described in the preceding section is less than 698 bytes of alpha-
numeric data (even less—468 bytes—when the description is tokenized or
compressed as .svgz). On the other hand, the same rectangle saved as a .gif
image with a 64-color palette takes 1,100 bytes.
Because of this file size advantage, web pages that use vector graphics
as SVG files or in plug-ins such as Flash download faster and, when used
for animation, draw faster than pages displaying bitmaps. It is only when
you draw many hundreds of objects on your screen that you may experi-
ence a slowdown while you wait for the screen to be refreshed—the size,
location, and other properties for each of the objects must be computed.
Thus, a single image made up of 500 individual line and rectangle objects,
for example, may take longer for the computer to process and place on the
screen than an image consisting of just a few drawn circle objects.
A vector-drawn object is created “on the fly,” that is, the computer
draws the image from the instructions it has been given, rather than dis-
playing a precreated image. This means that vector objects are easily scal-
able without loss of resolution or image quality. A large drawn image can
be shrunk to the size of a postage stamp, and while it may not look good
on a computer monitor at 72 dpi, it may look great when printed at 300 dpi
to a color printer. Resizing a bitmapped image requires either duplicating
pixels (creating a blocky, jagged look called pixelation) or throwing pixels
away (eliminating details). Because vector images are drawn from instruc-
tions on the fly, a rescaled image retains the quality of the original.

TIP Using a single bitmap for a complicated image may give you faster screen-
refresh performance than using a large number of vector-drawn objects to make
that same screen.

Converting Between Bitmaps and Drawn Images

Most drawing programs offer several file formats for saving your work,
and, if you wish, you can convert a drawing that consists of several vector-
drawn objects into a bitmap when you save the drawing. You can also grab
a bitmapped screen image of your drawn objects with a screen capture
program.
Converting bitmaps to drawn objects is more difficult. There are, how-
ever, programs and utilities that will compute the bounds of a bitmapped
image or the shapes of colors within an image and then derive the polygon
object that describes the image. This procedure is called autotracing and
is available in vector drawing applications such as Illustrator or Freehand.
Flash has a Trace Bitmap menu option that converts a bitmapped image
into a vector image. Be cautious: the size of your Flash file may actu-
ally balloon because the bitmapped image is replaced by hundreds or even
 Chapter 3 Images 83

thousands of tiny vector-drawn objects, leading to slow processing and

display.

WARNING Some bitmap applications allow vector images to be pasted into

them. Be careful to save your vector drawing separately because you will not be
able to edit the curves when they are bitmapped.

3-D Drawing and Rendering

Drawing in perspective or in 3-D on a two-dimensional surface takes special
skill and talent. Creating objects in three dimensions on a computer screen
can be difficult for designers comfortable with squares, circles, and other
x (width) and y (height) geometries on a two-dimensional screen. Dedi-
cated software is available to help you render three-dimensional scenes,
complete with directional lighting and special effects, but be prepared for
late nights and steep learning curves as you become familiar with nurbs,
deformations, mesh generations, and skinning! From making 3-D text to
creating detailed walkthroughs of 3-D space, each application will demand
study and practice before you are efficient and comfortable with its feature
set and power.
The production values of multimedia projects have increased dramati- Form•Z, the 3-D form
cally, and as the production bar has risen, end users’ expectations have also synthesizer, is above all a
ratcheted upward. The multimedia production bar moves like a high jump 3-D modeling program,
or pole vault contest—as each new project improves on the last, competi- even though it also includes
tors must jump to meet the new, higher standard. Flat and colorless 2-D drafting, rendering and
screens are no longer sufficient for a successful commercial multimedia animation. Additional
project. 3-D-rendered graphic art and animation has become common- photo-realistic rendering is
place since the late 1980s, providing more lifelike substance and feel to offered by form•Z Render-
projects. Luckily, in an arena where only high-powered workstations could Zone Plus. It combines
supply the raw computing horsepower for effective 3-D designing, inex- solids and surface modeling.
pensive desktop PCs and excellent software have made 3-D modeling It also combines faceted
attainable by most multimedia developers. (boundary) representa-
Today many products—including Daz3D ([Link]) and tions with parametric spline
form•Z ([Link])—are touted as essential tools for illustra- representations, NURBS,
tion, animation, and multimedia production. NewTek’s Lightwave (www­ patches, and metaballs. This
.[Link]/lightwave) and Autodesk’s Maya ([Link]/ unique mixture of modeling
Maya) are industry-standard, high-end animation programs used for personalities allows you to
everything from multimedia programs and game designs to special effects create any form, existing or
in films and even feature-length movies. For experimenting with 3-D, imaginary, while working in
Google’s SketchUp ([Link]) provides a simple (and free) a single package.
cross-platform tool. To delve deeply into 3-D, the open-source Blender
([Link]) is a powerful tool—but its complex interface presents Marketing literature from
a steep learning curve. auto•des•sys, Inc.
([Link])
84 Multimedia: Making It Work

For 3-D, the depth (z dimension) of cubes and spheres must be cal-
culated and displayed so that the perspective of the rendered object seems
correct to the eye. As illustrated in Figure 3-9, most 3-D software pack-
ages provide adjustable views so that you can see your work from the top,
bottom, or sides.

Figure 3-9 3-D applications provide x, y, and z axes and adjustable perspective views.

A great deal of information is needed to display a 3-D scene. Scenes

consist of objects that in turn contain many small elements such as blocks,
cylinders, spheres, or cones (described using mathematical constructs or
formulas). The more elements contained in an object, the more complicated
its structure will be and, usually, the finer its resolution and smoothness.
Objects and elements in 3-D space carry with them properties such
as shape, color, texture, shading, and location. A scene contains many dif-
ferent objects. Imagine a scene with a table, chairs, and a background.
Zoom into one of the objects—the chair, for example, in Figure 3-10. It
has 11 objects made up of various blocks and rectangles. Objects are cre-
ated by modeling them using a 3-D application.
Figure 3-10 A chair modeled
in 3-D is made up of various
blocks and rectangles.
 Chapter 3 Images 85

To model an object that you want to place into your scene, you must
start with a shape. You can create a shape from scratch, or you can
import a previously made shape from a library of geometric shapes called
­primitives, typically blocks, cylinders, spheres, and cones. In most 3-D
applications, you can create any 2-D shape with a drawing tool or place the
outline of a letter, then extrude or lathe it into the third dimension along
the z axis (see Figure 3-11). When you extrude a plane surface, its shape
extends some distance, either perpendicular to the shape’s outline or along
a defined path. When you lathe a shape, a profile of the shape is rotated
around a defined axis (you can set the direction) to create the 3-D object.
Other methods for creating 3-D objects differ among the various software
packages.

Figure 3-11 A free-form object

created by extrusion and a wine
flute created by lathing

Once you have created a 3-D object, you can apply textures and col-
ors to it to make it seem more realistic, whether rough and coarse or shiny
and smooth. You can also apply a color or pattern, or even a bitmapped
picture, to texture your object. Thus you can build a table, apply an oak fin-
ish, and then stain it purple or blue or iridescent yellow. You can add coffee
cup rings and spilled cheese dip with appropriate coloring and texturing.
To model a scene, you place all of your objects into 3-D space. Some
complex scenes may contain hundreds (if not thousands) of elements. In
modeling your scene, you can also set up one or more lights that will create
diffuse or sharp shades and shadows on your objects and will also reflect,
or flare, where the light is most intense. Then you can add a background
and set a camera view, the location and angle from which you will view the
final rendered scene.
86 Multimedia: Making It Work

Shading can usually be applied in several ways. As illustrated in Figure

3-12, flat shading (b) is the fastest for the computer to render and is most
often used in preview mode. Gouraud shading (a), Phong shading (d), and
ray tracing (c) take longer to render but provide photo-realistic images.

Figure 3-12 A scene rendered with four different methods of shading

When you have completed the modeling of your scene or an object in

it, you then must render it for final output. Rendering is when the com-
puter finally uses intricate algorithms to apply the effects you have speci-
fied on the objects you have created. Figure 3-13 shows a background, an
object, and the rendered composite.
Rendering an image requires great computing muscle and often takes
many hours for a single image, and you will feel the strength (or weakness)
of your hardware. Indeed, some multimedia and animation companies
dedicate certain computers solely for rendering. The final images for the
classic animated movie Toy Story were rendered on a “farm” of 87 dual-
processor and 30 quad-processor 100 MHz SPARCstation 20s. It took
46 days of continuous processing to render that film’s 110,000 frames at a
rate of about one frame every one to three hours.

NOTE Farms of many computers hooked together may also be called “clusters
of workstations,” or COWs. There is occasionally humorous contention regarding
proper nomenclature: it seems that developers who live and work in cities tend
to prefer the notion of computer farms; developers in rural communities already
familiar with farms prefer to call these beasts COWs.
 Chapter 3 Images 87

Figure 3-13 A background and

object rendered into an image with
shadows and lighting effects
88 Multimedia: Making It Work

Panoramas
Media players such as QuickTime and RealPlayer let you view a single
surrounding image as if you were “inside” the picture and able to look up or
down, turn, or zoom in on features. To make this work, you need to stitch
together many images taken from different angles around a circle. Soft-
ware such as ULead COOL 360 ([Link]/cool360) or Panorama
Factory ([Link]) works by importing a sequence of
photos and letting you adjust them precisely into a single seamless bitmap,
where the right edge attaches to the left edge and the color and lighting
differences among the image are smoothed. You should allow some overlap
when you take each photo for a 360-degree panorama, and you may need
to adjust each photo’s contrast, brightness, hue, and saturation while
stitching, if that feature is not provided by your software. Most programs
also allow you to adjust perspective to compensate for different focal
lengths or camera heights.

Color
Color is a vital component of multimedia. The next few sections explain
where color comes from and how colors are displayed on a computer monitor.
Management of color is both a subjective and a technical exercise. Picking
the right colors and combinations of colors for your project can involve
many tries until you feel the result is right. But the technical description of
a color may be expressed in known physical values (humans, for example,
perceive colors with wavelengths ranging from 400 to 600 nanometers on
the electromagnetic spectrum), and several methods and models describe
color space using mathematics and values (see Figure 3-14).

Understanding Natural Light and Color

Light comes from an atom when an electron passes from a higher to a
lower energy level; thus each atom produces uniquely specific colors. This
explanation of light, known as the quantum theory, was developed by
physicist Max Planck in the late 19th century. Niels Bohr, another physi-
cist, later showed that an excited atom that has absorbed energy and whose
electrons have moved into higher orbits will throw off that energy in the
form of quanta, or photons, when it reverts to a stable state. This is where
light comes from.
Color is the frequency of a light wave within the narrow band of the
electromagnetic spectrum to which the human eye responds. The letters of
the mnemonic ROY G. BIV, learned by many of us to remember the colors
of the rainbow, are the ascending frequencies of the visible light spectrum:
red, orange, yellow, green, blue, indigo, and violet. Light that is infrared, or
below the frequency of red light and not perceivable by the human eye, can
 Chapter 3 Images 89

Figure 3-14 Color pickers allow you to

select a color using one or more different
models of color space.
90 Multimedia: Making It Work

be created and viewed by electronic diodes and sensors, and it is used for
TV and VCR remote controls, for wireless communications among com-
puters, and for night goggles used in the military. Infrared light is radiated
heat. Ultraviolet light, on the other hand, is beyond the higher end of the
visible spectrum and can be damaging to humans.
The color white is a noisy mixture of all the color frequencies in the
visible spectrum. Sunlight and fluorescent tubes produce white light
(though, technically, even they vary in color temperature—sunlight is
affected by the angle at which the light is coming through the atmosphere,
and fluorescent tubes provide spikes in the blue-green parts of the color
spectrum); tungsten lamp filaments produce light with a yellowish cast;
sodium vapor lamps, typically used for low-cost outdoor street lighting,
produce an orange light characteristic of the sodium atom. These are the
most common sources of light in the everyday (or every night) world. The
light these sources produce typically reaches your eye as a reflection of that
light into the lens of your eye.
The cornea of the eye acts as a lens to focus light rays onto the retina.
The light rays stimulate many thousands of specialized nerves, called rods,
which cover the surface of the retina. Receptors in the cones are sensitive
to red, green, and blue light, and all the nerves together transmit the pat-
tern of color information to the brain. The eye can differentiate among
about 80,000 colors, or hues, consisting of combinations of red, green,
and blue.
As color information is sent to the brain, other parts of the mind mas-
sage the data en route to its point of cognitive recognition. Human response
to color is complicated by cultural and experiential filters that cause other-
wise straightforward color frequencies to carry pleasant, unpleasant, sooth-
ing, depressing, and many other special meanings. In Western cultures, for
example, red is the color of anger and danger; in Eastern cultures, red is
the color of happiness. Red is the traditional color for Chinese restaurant
motifs, to make them attractive and happy places; Western restaurants are
often decorated in quieter pastels and earth tones. White, not black, is the
color of funerals in Chinese culture.
Green, blue, yellow, orange, purple, pink, brown, black, gray, and white
are the ten most common color-describing words used in all human lan-
guages and cultures. Komar and Melamid’s interesting tongue-in-cheek
Internet study ([Link]/km/[Link]) has determined that
the favorite color in the world is blue.
See what an image looks like to someone with glaucoma, cataracts,
macular degeneration, or a color deficit:

[Link]/examples
[Link]
 Chapter 3 Images 91

Computerized Color
Because the eye’s receptors are sensitive to red, green, and blue light, by
adjusting combinations of these three colors, the eye and brain will inter-
polate the combinations of colors in between. This is the psychology, not
the physics, of color: what you perceive as orange on a computer monitor
is a combination of two frequencies of green and red light, not the actual
spectral frequency you see when you look at that namesake fruit, an orange,
in sunlight. Various color models are illustrated in Figure 3-14. Although
the eye perceives colors based upon red, green, and blue, there are actually
two basic methods of making color: additive and subtractive.

Additive Color
In the additive color method, a color is created by combining colored
light sources in three primary colors: red, green, and blue (RGB). This is
the process used for cathode ray tube (CRT), liquid crystal (LCD), and
plasma displays. On the back of the glass face of a CRT are thousands of
phosphorescing chemical dots. These dots are each about 0.30mm or less
in diameter (the dot pitch), and are positioned very carefully and very
close together, arranged in triads of red, green, and blue. These dots are
bombarded by electrons that “paint” the screen at high speeds (about 60
times a second). The red, green, and blue dots light up when hit by the
electron beam. Your eye sees the combination of red, green, and blue light
and interpolates it to create all other colors. Like CRTs, LCD and plasma
screens utilize tiny red, green, and blue elements energized through tiny
transparent conductors and organized in a Cartesian grid as illustrated by
Marvin Raaijmakers and Angelo La Spina:

GLASS
LAYERS

COLOR
FILTERS

NEMATIC
MOLECULES

VERTICAL
HORIZONTAL FILTER
FILTER

Subtractive Color
In the subtractive color method, color is created by combining colored
media such as paints or ink that absorb (or subtract) some parts of the
92 Multimedia: Making It Work

color spectrum of light and reflect the others back to the eye. Subtractive
color is the process used to create color in printing. The printed page is
made up of tiny halftone dots of three primary colors: cyan, magenta, and
yellow (designated as CMY). Four-color printing includes black (which is
technically not a color but, rather, the absence of color). Since the letter B is
already used for blue, black is designated with a K (so four-color printing is
designated as CMYK). The color remaining in the reflected part of the light
that reaches your eye from the printed page is the color you perceive.
All these factors make computerized color pretty tricky to manage.
The fact that a paint program uses RGB to create the colors on your moni-
tor, while your printer uses CMYK to print out your image, explains the
problem of matching what you see on the screen with your printout. High-
end image-editing programs such as Photoshop deal with this problem by
allowing you to calibrate your monitor with your printer.
The following chart shows the three primary additive colors and how,
when one of the primary colors is subtracted from this RGB mix, the sub-
tractive primary color is perceived. The numbers in parentheses indicate
the amount of red, green, and blue (in that order) used to create each of
the colors in 24-bit color, which is described in the next section. A zero
indicates a lack of that primary color, while 255 is the maximum amount
of that color.

RGB Combination (R,G,B) Perceived

Color
Red only (255,0,0) Red
Green only (0,255,0) Green
Blue only (0,0,255) Blue
Red and green (blue subtracted) (255,255,0) Yellow
Red and blue (green subtracted) (255,0,255) Magenta
Green and blue (red subtracted) (0,255,255) Cyan
Red, green, and blue (255,255,255) White
None (0,0,0) Black

Computer Color Models

Models or methodologies used to specify colors in computer terms are
RGB, HSB, HSL, CMYK, CIE, and others. Using the 24-bit RGB (red,
green, blue) model, you specify a color by setting each amount of red, green,
and blue to a value in a range of 256 choices, from 0 to 255. Eight bits of
memory are required to define those 256 possible choices, and that has to
be done for each of the three primary colors; a total of 24 bits of memory
(8 + 8 + 8 = 24) are therefore needed to describe the exact color, which is
 Chapter 3 Images 93

one of “millions” (256 × 256 × 256 = 16,777,216). When web browsers

were first developed, the software engineers chose to represent the color
amounts for each color channel in a hexadecimal pair. Rather than using
one number between 0 and 255, two hexadecimal numbers, written in
a scale of 16 numbers and letters in the range “0123456789ABCDEF”
represent the required 8 bits (16 × 16 = 256) needed to specify the inten-
sity of red, green, and blue. Thus, in HTML, you can specify pure green as
#00FF00, where there is no red (first pair is #00), there is maximum green
(second pair is #FF), and there is no blue (last pair is #00). The number
sign (#) specifies the value as hexadecimal.

Red Green Blue Color

255 (#FF) 255 (#FF) 255 (#FF) White (#FFFFFF)
255 (#FF) 255 (#FF) 0 (#00) Yellow (#FFFF00)
255 (#FF) 0 (#00) 255 (#FF) Magenta (#FF00FF)
0 (#00) 255 (#FF) 255 (#FF) Cyan (#00FFFF)
255 (#FF) 0 (#00) 0 (#00) Red (#FF0000)
0 (#00) 255 (#FF) 0 (#00) Green (#00FF00)
0 (#00) 0 (#00) 255 (#FF) Blue (#0000FF)
0 (#00) 0 (#00) 0 (#00) Black (#000000)
There are many valid color
In the HSB (hue, saturation, brightness) and HSL (hue, saturation, names for HTML and CSS
lightness) models, you specify hue or color as an angle from 0 to 360 degrees listed by The World Wide
on a color wheel, and saturation, brightness, and lightness as percentages. Web Consortium (W3C)
Saturation is the intensity of a color. At 100 percent saturation a color is that can be used in place of
pure; at 0 percent saturation, the color is white, black, or gray. Lightness or #Hex values: for example,
brightness is the percentage of black or white that is mixed with a color. A aqua, black, blue, fuchsia,
lightness of 100 percent will yield a white color; 0 percent is black; the pure gray, green, lime, maroon,
color has a 50 percent lightness. navy, olive, purple, red,
The CMYK color model is less applicable to multimedia production. silver, teal, white, and yellow.
It is used primarily in the printing trade where cyan, magenta, yellow, and Check out [Link]/TR/
black are used to print process color separations. css3-color/#svg-color for a
full list.
Color Degrees
Red 0°
Yellow 60°
Green 120°
Cyan 180°
Blue 240°
Magenta 300°
94 Multimedia: Making It Work

Other color models include CIE, YIQ, YUV, and YCC. CIE describes
color values in terms of frequency, saturation, and illuminance (blue/yel-
low or red/green, which in turn corresponds to the color receptors in
the cones of the eye). CIE more closely resembles how human beings
perceive color, but certain devices such as scanners are unable to replicate
the process.
YIQ and YUV were developed for broadcast TV (composite NTSC).
They are based on luminance and chrominance expressed as the amplitude
of a wave and the phase of the wave relative to some reference. Detail is
carried by luminance (black and white), so reduction in color does not
result in the loss of image definition detail. This analog process can be
translated to a number value so that the computer can use a palette to
assign a color to a pixel.
The Photo YCC model has been developed by Kodak to provide a def-
inition that enables consistent representation of digital color images from
negatives, slides, and other high-quality input. YCC is used for ­PhotoCD
images.
Macintosh System
Color Palettes
Palettes are mathematical tables that define the color of a pixel displayed
on the screen. The most common palettes are 1, 4, 8, 16, and 24 bits deep:

Color Depth Colors Available

1-bit Black and white (or any two colors)
4-bit 16 colors
8-bit 256 colors (good enough for color images)
16-bit Thousands of colors (65,536; excellent for color images)

Windows System 24-bit More than 16 million colors (16,777,216; totally

­photo-realistic)

When color monitors became available for computers, managing

the computations for displaying colors severely taxed the hardware and
memory available at the time. 256-color, 8-bit images using a color lookup
table or palette were the best a computer could do. 256 default system
colors were statistically selected by Apple and Microsoft engineers (work-
ing independently) to be the colors and shades that are most “popular” in
photographic images; their two system palettes are, of course, different.
Web authorities also decided on a palette of 216 “web-safe” colors that
would allow browsers to display images properly on both Macintosh and
Web-Safe Windows computers.
 Chapter 3 Images 95

GIF files using 256-color palettes are saved in a lossless format. The
PNG format also uses palettes (24-bits or 32 bits if an “alpha” mask is To generate a palette which
included for transparency), and is lossless. It was developed for the Internet is best for representing a
(it supports only the RGB color space) to expand GIF’s limited 256 colors particular image, we support
to millions of colors. Heckbert’s median cut algo-
In 24-bit color systems, your computer works with three channels of rithm. This algorithm first
256 discrete shades of each color (red, green, and blue) represented as the builds a three-dimensional
three axes of a cube. This allows a total of 16,777,216 colors (256 × 256 table (a histogram cube)
× 256). Just as the 44.1 kHz sampled-sound standard for CD music on indicating how popular any
compact discs that is discussed in Chapter 4 covers the range of human given colour in the RGB
hearing, the color range offered by 24-bit systems covers what the human cube is in the image being
eye can sense. converted. It then proceeds
to subdivide this histogram
Dithering cube (by dividing boxes in
If you start out with a 24-bit scanned image that contains millions of half ) until it has created
colors and need to reduce it to an 8-bit, 256-color image, you get the as many boxes as there are
best replication of the original image by dithering the colors in the palette entries.
image. Dithering is a process whereby the color value of each pixel is The decision as to where
changed to the closest matching color value in the target palette, using to divide a box is based on
a mathematical algorithm. Often the adjacent pixels are also examined, the distribution of colours
and patterns of different colors are created in the more limited palette within the box. This algo-
to best represent the original colors. Since there are now only 256 colors rithm attempts to create
available to represent the thousands or even millions of colors in the boxes which have approxi-
original image, pixels using the 256 remaining colors are intermixed and mately equal popularity in
the eye perceives a color not in the palette, created by blending the colors the image. Palette entries are
mixed together. Thus any given pixel might not be mapped to its closest then assigned to represent
palette entry, but instead to the average over some area of the image; each box. There are other
this average will be closer to the correct color than a substitute color methods of generating a
would be. How well the dithered image renders a good approximation palette from an image, but
of the original depends upon the algorithm used and whether you allow Heckbert’s algorithm is
the image-editing program to select the best set of 256 colors from the generally regarded as the
original image (called an adaptive palette) or force it to use a prede- best trade-off between speed
termined set of 256 colors (as, for example, with a System palette or and quality.
the browser-safe web palette). Figure 3-15 compares the same scanned
image dithered from millions of colors to 256 colors, 16 colors, 16 grays, Allan Hessenflow of
and black and white. HandMade Software, makers
Dithering concepts are important to understand when you are work- of Image Alchemy, describing
how an 8-bit palette is made
ing with bitmaps derived from RGB information or based upon differ-
ent palettes. The palette for the image of a rose, for example, may contain
mostly shades of red with a number of greens thrown in for the stem and
leaves. The image of your pretty Delft vase, into which you want to elec-
tronically place the rose, may be mostly blues and grays. Your software will
96 Multimedia: Making It Work

Multimedia is just another

Figure 3-15 These images were dithered in Photoshop to best fit the 8-bit palettes
way to transform ambi- of GIF files (Adaptive, System, or Custom 216 Netscape). Also shown are JPEG files
guity. There were so many compressed with highest and lowest quality and their actual file sizes. The files were
ambiguous colors in this then displayed using a browser at 16-bit and then 8-bit color depth. Note the subtle
differences among palettes and systems, especially in the gradient blue background.
scan, I decided to make them Gradients do not usually dither well into 8-bit palettes.
unambiguous. How do you
like the purple?
use a dithering algorithm to find the 256 color shades that best represent
Lars Hidde, explaining why both images, generating a new palette in the process.
he dithered a perfectly fine Dithering software is usually built into image-editing programs and is
256-color image into a 16-color also available in many multimedia authoring systems as part of the appli-
default palette cation’s palette management suite of tools.
 Chapter 3 Images 97

Image File Formats

Most applications on any operating system can manage JPEG, GIF,
PNG, and TIFF image formats. An older format used on the Macin-
tosh, PICT, is a complicated but versatile format developed by Apple
where both bitmaps and vector-drawn objects can live side by side. The
device-independent bitmap (DIB), also known as a BMP, is a common
Windows palette–based image file format similar to PNG. PCX files
were originally developed for use in Z-Soft MS-DOS paint packages;
these files can be opened and saved by almost all MS-DOS paint soft-
ware and desktop publishing software. TIFF, or Tagged Interchange File
Format, was designed to be a universal bitmapped image format and
is also used extensively in desktop publishing packages. Often, applica-
tions use a proprietary file format to store their images. Adobe creates
a PSD file for Photoshop and an AI file for Illustrator; Corel creates a
CDR file. DXF was developed by AutoDesk as an ASCII-based drawing
interchange file for AutoCAD, but the format is used today by many
computer-aided design applications. IGS (or IGES, for Initial Graphics
Exchange Standard) was developed by an industry committee as a
broader standard for transferring CAD drawings. These formats are also
used in 3-D rendering and animation programs.
JPEG, PNG, and GIF images are the most common bitmap formats
used on the Web and may be considered cross-platform, as all browsers
will display them. Adobe’s popular PDF (Portable Document File) file
manages both bitmaps and drawn art (as well as text and other multimedia
content), and is commonly used to deliver a “finished product” that con-
tains multiple assets.

First Person
I needed to get about 40 bitmap file, and then saved it in PICT format. files using the network. The 40 new
files from the Macintosh to the The translator program I wanted to files were now on the Macintosh,
Sun SPARCstation. “Piece of cake,” I use to convert Macintosh PICT files mixed in with the original PICTs. I
said. “Give me a few minutes.” The to Sun raster files was an MS-DOS collected the needed raster files into
network hadn’t gone down in three application, so I renamed all the a single folder on the Macintosh and
days, and we were connected at Macintosh files to fit the DOS eight- then sent the whole thing over to
broadband speeds. Well, the files plus-three-character filename con- the Sun.
had been saved in native Photo- vention. Then I cranked up the PC,
A few minutes? The process kept
shop format on the Macintosh. So I launched the translator, and batch-
three chairs warm for about
launched Photoshop, opened each processed all of the files into RAS
two hours.
 Chapter 3 Review
n Chapter Summary

For your review, here’s a summary of the important ■■ The image’s bit-depth determines the number of
concepts discussed in this chapter. colors that can be displayed by an individual pixel.
Work out your graphical approach by planning ■■ You can grab a bitmap image from a screen, scan
your approach, organizing your tools, and config- it with a scanner, download it from a web site, or
uring your computer workspace capture it from a video capture device.
■■ What you see on a multimedia computer screen ■■ You can then manipulate and adjust many of its
is the viewer’s primary connection to all of your properties, and cut and paste among many bitmaps
project’s content. using specialized image-editing or “darkroom”
programs.
■■ Work out your graphic approach before you begin,
either in your head or during creative sessions with ■■ Vector images are most appropriate for lines,
your client or colleagues. boxes, circles, polygons, and other graphic shapes
that can be mathematically expressed in angles,
■■ To get a handle on any multimedia project, start
coordinates, and distances.
with pencil, eraser, and paper. Outline your project
and your graphic ideas first: make a flowchart; ■■ A vector object can be filled with color and
storyboard the project using stick figures; use patterns, and you can select it as a single object.
three-by-five index cards and shuffle them until
■■ Vector-drawn objects use a fraction of the
you get it right.
memory space required to describe and store the
■■ Most authoring systems provide simple tools same object in bitmap form.
for creating the graphic objects directly on your
■■ Most drawing programs can export a vector
screen. Most can also import objects from other
drawing as a bitmap.
applications.
■■ Converting bitmaps to vector-drawn objects
■■ Multimedia designers employ a variety of applica-
is difficult; however, autotracing programs can
tions and tools to accomplish many specialized
compute the boundaries of shapes and colors in
tasks.
bitmapped images and then derive the polygon
Differentiate among bitmap, vector, and 3-D object that describes those bounds.
images and describe the capabilities and limita-
■■ For 3-D, the depth (z dimension) of cubes and
tions of all three
spheres must be calculated and displayed so that
■■ Bitmaps are an image type most appropriate for the perspective of the rendered object seems
photo-realistic images and complex drawings correct to the eye.
requiring fine detail.
■■ Objects and elements in 3-D space carry with
■■ Limitations of bitmapped images include large them properties such as shape, color, texture,
files sizes and the inability to scale or resize the shading, and location.
image easily while maintaining quality.
■■ To model an object that you want to place into
■■ A bitmap is a simple information matrix your scene, you must start with a shape.
describing the individual dots of an image, called
■■ When you extrude a plane surface, it extends its
pixels.
shape some distance, either perpendicular to the
shape’s outline or along a defined path.

98
■■ When you lathe a shape, a profile of the shape ■■ If you are using a specialized application to make
is rotated around a defined axis (you can set the bitmaps or drawings, make sure your multimedia
direction) to create the 3-D object. authoring package can import the image files you
produce, and that your application can export such
■■ Rendering is when the computer finally uses
a file.
intricate algorithms to apply the effects you have
specified on the objects you have created. Cite the various file types used in multimedia
Describe the use of colors and palettes in ■■ GIF and PNG images use palettes of colors.
multimedia
■■ Windows uses device-independent bitmaps
■■ Color is the frequency of a light wave within the (DIBs) as its common image file format, usually
narrow band of the electromagnetic spectrum to written as BMP files.
which the human eye responds.
■■ TIFF, or Tagged Interchange File Format, was
■■ Different cultures associate certain colors with designed to be a universal bitmapped image
different meanings. format and is also used extensively in desktop
publishing packages.
■■ For 8-bit GIF images, the computer uses a palette
of 256 colors to determine which colors to display. ■■ For handling drawn objects across many
platforms, there are two common formats: DXF
■■ Dithering is a process whereby the color value of
and IGS. JPEG and GIF images are the most
each pixel is changed to the closest matching color
common bitmap formats used on the Web and
value in the target palette, using a mathematical
may be considered cross-platform, as all browsers
algorithm.
will display them.

■■ Key Terms

additive color (91) HSB (92) real estate (69)

autotracing (82) HSL (92) rendering (86)
Bézier (81) hue (90) RGB (91)
binary (71) IGS or IGES (Initial Graphics rotated (85)
bit (71) Exchange Standard) (97) ROY G. BIV (88)
bitmap (70) JPEG (71) scene (84)
BMP (97) lathe (85) shading (86)
Cartesian coordinates (80) modeling (84) shape (85)
CIE (92) morphing (77) subtractive color (91)
clipboard (77) object (84) SVG (Scalable Vector
CMYK (92) palette (94) ­Graphics)(81)
device-independent bitmap PCX (97) texture (85)
(DIB) (97) pel (72) TIFF (97)
dithering (95) PICT (97) vector (80)
dot pitch (91) pixel (72) vector-drawn (70)
DXF (97) pixelation (82) YCC (94)
extrude (85) PNG (71) YIQ (94)
flare (85) primitive (85) YUV (94)
GIF (71) property (84) z dimension (84)
hexadecimal (93) quantum theory (88)

99
■■ Key Term Quiz

1. The working area of a computer display is sometimes called _______________.

2. The type of image used for photo-realistic images and for complex drawings requiring fine detail is the
_______________.
3. The type of image used for lines, boxes, circles, polygons, and other graphic shapes that can be
mathematically expressed in angles, coordinates, and distances is the _______________.
4. The picture elements that make up a bitmap are called _______________.
5. _______________ allows you to smoothly blend two images so that one image seems to melt into the next.
6. The process that computes the bounds of the shapes of colors within a bitmap image and then derives the
polygon object that describes that image is called _______________.
7. _______________ is when the computer uses intricate algorithms to apply the effects you have specified
on the objects you have created for a final 3-D image.
8. ________________ is the blocky, jagged look resulting from too little information in a bitmapped image.
9. A collection of color values available for display is called a _______________.
10. _______________ is a process whereby the color value of each pixel is changed to the closest matching
color value in the target palette, using a mathematical algorithm.

■■ Multiple-Choice Quiz

1. What is the best way to start creating your 4. Vector-drawn objects are used for all of the
project’s interface? following except:
a. Start with pencil, eraser, and paper. a. lines
b. Outline your project and graphic ideas. b. circles
c. Storyboard using stick figures. c. polygons
d. Use three-by-five index cards and shuffle d. photographs
them. e. boxes
e. All of the above
5. “Unlimited use” of stock photography may
2. Which image file type is best for photographs? actually impose a limitation on:
a. vector a. the number of units you can distribute
b. encapsulated PostScript without paying more.
c. bitmap b. the number of changes you can make to the
d. Shockwave image.
e. laser c. converting the image to another file format.
d. the filters you may use to alter the image.
3. A 24-bit image is capable of representing how
e. the price you can charge for your product.
many different colors?
a. 2 6. Name the area of memory where data such as
b. 16 text and images is temporarily stored when you
c. 256 cut or copy within an application.
d. 65,536 a. scrapbook
e. 16,772,216 b. notepad
c. junkyard
d. filedump
e. clipboard
100
 7. Perhaps the single most significant advance in 11. A GIF image may contain:
computer image processing during the late 1980s a. 8 bits of color information per pixel
was the development of: b. 16 bits of color information per pixel
a. digital cameras c. 24 bits of color information per pixel
b. 3-D modeling programs d. 32 bits of color information per pixel
c. image-editing programs e. 48 bits of color information per pixel
d. scanners
12. Which of these is the correct HTML
e. electronic crayons
hexadecimal representation of magenta (red +
8. When an image created on a Macintosh is blue)?
viewed on a PC: a. 00GGHH
a. it appears darker and richer because the b. #FF00FF
values have changed c. 255,0,255
b. it appears lighter and less saturated because d. %R100-%G0-%B100
the values have changed e. <color = “magenta”>
c. it appears darker and richer even though the
13. Which of the following is not a color specification
values have not changed
format?
d. it appears lighter and less saturated even
a. RGB
though the values have not changed
b. HSB
e. it appears exactly the same
c. GIF
9. Graphic artists designing for print media use d. CMYK
vector-drawn objects because: e. CIE
a. they can contain more subtle variations in
14. Which of the following is not a native Windows
shading than bitmap graphics
graphics file format?
b. printing inks respond better to them
a. BMP
c. they can be converted across platforms more
b. RIFF
easily
c. TIFF
d. they can be scaled to print at any size
d. PCX
e. they can be viewed directly in Web browsers
e. PICT
10. The 3-D process of extending a plane surface
15. TIFF stands for:
some distance, either perpendicular to the shape’s
a. Transitional Image File Format
outline or along a defined path, is called:
b. Total Inclusion File Format
a. lathing
c. Tagged Interchange File Format
b. rendering
d. Temporary Instruction File Format
c. modeling
e. Table Index File Format
d. extruding
e. skinning

■■ Essay Quiz

1. Discuss the difference between bitmap and vector graphics. Describe five different graphic elements you
might use in a project, for example, the background, buttons, icons, or text. Would you use a vector tool or
a bitmap tool for each element? Why?
2. You are assigned to create an interface that will look good across platforms. What is the difference between
images as shown on a Macintosh and PC? How would you deal with this problem?

101
 3. List several simple geometric shapes. If you have a 3-D modeling program available, using these shapes,
extrude or lathe them to create various objects, such as a teapot, a tree, a car, a table, or a lamp. Think of
some other objects. How would you use the simple geometric shapes (called “primitives” ) to create the
3-D object?
4. You are a designer given the task of creating a web site for a new division of your company. Start by
defining the characteristics of the customers of the company and the kind of image the company wishes to
present to its customers. Then specify a color palette to be used for the design of the site. Defend your color
choices by discussing the associations people have with the colors and how they relate to your customers
and the company’s image.

Lab Projects

■■ Project 3.1
Select five different web pages, each from a different web site. Select pages that contain lots of colors and images,
both photographs and graphics. View the five different pages on both a Macintosh and PC screen, preferably
side by side, as well as on more than one computer on the same platform (for example, one Mac, two Windows
computers). Note the differences in how each page appears across platforms and across screens. For each page,
write a paragraph describing how they differ in terms of color tone, saturation, and any other characteristics that
you notice.

■■ Project 3.2
Using the capture tool built into the operating system or another dedicated tool, capture and save five different
screens. Use the tools to save the entire screen, areas of the screen, the frontmost window, an image with a menu
pulled down, and an image with the cursor (some capture programs may not be able to capture all these different
types of images). Save the files and print them out.

■■ Project 3.3
Download three different images from a web site. One should be photographic, one should be a graphic (solid
colors or gradients), and one should be a mix. Convert the images to 256 colors. Use the tools available to use
different dithering patterns and palettes. Print out the files before and after reducing to 256 colors. Write the
file sizes on each one. Use an image-editing program to compare the effects of applying different palettes and
compression methods to the original images.

■■ Project 3.4
Visit different web sites. Describe the use of colors for each in subjective terms. Is each site vibrant? childish?
muted? subtle? Why? What cultural or other factors determined the color selection? Print out a page from each
site, and write a paragraph describing the colors and images used in each one.

102
■■ Project 3.5
Open an image in an image-editing program capable of identifying colors. Select three different pixels in the
image. Sample the color and write down its value in RGB, HSB, CMYK, and web (hexadecimal) color.

Point RGB HSB CMYK Hexadecimal

103