Chapter 2 Text 39

HTML Documents
The standard document format used for displaying text pages on the Web
is called Hypertext Markup Language (HTML). In an HTML document
you can specify typefaces, sizes, colors, and other properties by “marking up”
the text in the document with tags. The process of marking up documents
or “styling” them is simple: Where you want text to be bold, surround it
with the tags <B> and </B> or <STRONG> and </STRONG>; the text
between the tags will then be displayed by your browser application in
bold type. Where you have a header, surround it with <H1> and </H1>;
for an ordered list of things (1, 2, 3, … or a, b, c, …, etc.), surround your
list with <OL> and </OL>. There are many tags you can use to lay out a
page. Cascading Style Sheets (CSS) work in conjunction with HTML and
provide fine tuning and control of text and layout. How HTML and CSS
work is discussed in greater detail in Chapters 12 and 13, and there are
many good learning guides and references available on the Web.

www.w3.org/TR/html4/
www.w3.org/MarkUp/Guide/
www.w3schools.com/html/default.asp
www.w3.org/Style/CSS/

Check out these web sites for more information about HTML

The remarkable growth of the Web is straining the “old” designs for
displaying text on computers. Indeed, while marked-up text files (HTML
documents) remain at the foundation of Web activity, when you visit a
well-designed web site, you often discover graphic images, animations, and
interactive work-arounds contrived to avoid displaying text. The neat para-
graphs, indented lists, and formats for text documents for which HTML
was originally intended are evolving into multimedia documents, not text
documents, and the original HTML method and standard is consequently
suffering great stress.
HTML Version 5 is a redesign that stretches into a multimedia deliv-
ery tool, making HTML no longer just a text display tool with assorted
attachments and plugged-in objects. A new <canvas> element allows a box
to be defined on a web page in which 2-D graphics can be drawn under
program control. Video and audio (timed media) playback is supported.
Still, HTML doesn’t provide you with much flexibility to make pretty text
elements, which are often done as graphical bitmaps placed within the
HTML document’s layout with image tags, <IMG>, or incorporated into
Flash animation files. Indeed, using plain HTML, you do not know what
40 Multimedia: Making It Work

font a reader will use to view your document—the default display font
is a preference that can be set in the viewer’s browser, which knows it’s
installed on that viewer’s machine. So some viewers may read your words
in serif Times Roman, others in sans serif Helvetica or Arial.

Computers and Text

Very early in the development of the Macintosh computer’s monitor hard-
ware, Apple chose to use a resolution of 72 pixels per inch. This matches
the standard measurement of the printing industry (72 points per inch)
and allows desktop publishers and designers to see on the monitor what
their printed output will look like (WYSIWYG). In addition, Apple made
each pixel square-shaped, providing even measurements in all directions.
Until the Macintosh was invented, and the VGA video standard set for
the PC (at 96 pixels per inch), pixels were typically taller than they were
wide. The aspect ratio for a pixel on older EGA monitors, for example, is
1.33:1, taller than it is wide. VGA and SVGA monitor resolutions for both
Macintosh and Windows display pixels at an aspect ratio of 1:1 (square).

The Font Wars Are Over

In 1985, the desktop publishing revolution was spearheaded by Apple
and the Macintosh computer, in combination with word processing and
page layout software products that enabled a high-resolution 300 dpi laser
printer using special software to “draw” the shapes of characters as a cluster
of square pixels computed from the geometry of the character. This special
software was the Adobe PostScript page description and outline font
language. It was licensed by Apple and included in the firmware of Apple’s
LaserWriter laser printer.
PostScript is really a method of describing an image in terms of math-
ematical constructs (Bézier curves), so it is used not only to describe the
individual characters of a font but also to describe entire illustrations and
whole pages of text. Because each PostScript character is a mathematical
formula, it can be easily scaled bigger or smaller so it looks right whether
drawn at 24 points or 96 points, whether the printer is a 300 dpi Laser-
Writer or a high-resolution 1200, 2400, or even 3600 dpi image setter suit-
able for the finest print jobs. And the PostScript characters can be drawn
much faster than in the old-fashioned way. Before PostScript, the print-
ing software looked up the character’s shape in a bitmap table containing
a representation of the pixels of every character in every size. PostScript
quickly became the de facto industry font and printing standard for desk-
top publishing and played a significant role in the early success of Apple’s
Macintosh computer.
 Chapter 2 Text 41

There are two kinds of PostScript fonts: Type 3 and Type 1. Type
3 font technology is older than Type 1 and was developed for output to
printers; it is rarely used by multimedia developers. There are currently over
6,000 different Type 1 typefaces available. Type 1 fonts also contain hints,
which are special instructions for grid-fitting to help improve resolution.
Hints can apply to a font in general or to specific characters at a particular
resolution.
Other companies followed Adobe into the desktop publishing arena
with their own proprietary and competitive systems for scalable outline
fonts. In 1989, Apple and Microsoft announced a joint effort to develop
a “better and faster” quadratic curves outline font methodology, called
­TrueType. In addition to printing smooth characters on printers, True-
Type would draw characters to a low-resolution (72 dpi or 96 dpi) monitor.
Furthermore, Apple and Microsoft would no longer need to license the
PostScript technology from Adobe for their operating systems. Because
TrueType was based on Apple technology, it was licensed to Microsoft.
Adobe and Microsoft then developed a new and improved font man-
agement system incorporating the best features of both PostScript and
TrueType, and by 2007, OpenType became a free, publicly available inter-
national standard. The font wars were over.

WARNING TrueType, OpenType, and PostScript fonts do not display (or

print) exactly the same, even though they may share the same name and size.
The three technologies use different formulas. This means that word-wrapping
in a text field may change. So if you build a field or a button that precisely fits text
displayed with a PostScript font, be aware that if you then display it with the same
font in TrueType or OpenType, the text may be truncated or wrapped, wrecking
your layout.

Font Foundries
Today collections of fonts are available through retail channels or directly
from their manufacturers. Typefaces are created in a foundry, a term much
like case, that has carried over from times when lead was poured into molds
to make letter faces. There is also a special interest group (SIG) at America
Online (go to Computing:Software Libraries:Desktop & Web Publishing
Forum:Fonts) where people who enjoy designing and making inter-
esting fonts post them for others to download—hundreds and hundreds
of them with names like Evil of Frankenstein, CocaCola, Kerouac, LED,
PonchoVia (sic), Spaghetti, TreeFrog, and Sassy. When you purchase some
applications, such as CorelDraw or Adobe Illustrator, many extra fonts are
included for free.
42 Multimedia: Making It Work

www.typequarry.com/
www.oldfonts.com/
www.myfonts.com/
www.bitstream.com/
www.will-harris.com/

Commercial type foundries and font sites. These gateways lead to a

discussion of fonts and where to find them. With Esperfonto, Will
Harris provides an interesting tool for making font decisions: Casual or
Formal, Body or Display, Friendly or Serious, Cool or Warm, Modern or
Traditional.

WARNING It is easy to spend hours and hours downloading neat and inter-
esting fonts; they are like the midnight snack table on a Caribbean cruise liner—
ice carvings and delectable goodies laid out as far as the eye can see.

Character Sets and Alphabets

Knowing that there is a wide selection of characters available to you on
your computer and understanding how you can create and use special and
custom-made characters will broaden your creative range when you design
and build multimedia projects.

The ASCII Character Set

The American Standard Code for Information Interchange (ASCII)
is the 7-bit character coding system most commonly used by computer
systems in the United States and abroad. ASCII assigns a number or value
to 128 characters, including both lower- and uppercase letters, punctuation
marks, Arabic numbers, and math symbols. Also included are 32 control
characters used for device control messages, such as carriage return, line
feed, tab, and form feed.
ASCII code numbers always represent a letter or symbol of the Eng-
lish alphabet, so that a computer or printer can work with the number that
represents the letter, regardless of what the letter might actually look like
on the screen or printout. To a computer working with the ASCII charac-
ter set, the number 65, for example, always represents an uppercase letter
A. Later, when displayed on a monitor or printed, the number is turned
into the letter.
 Chapter 2 Text 43

ASCII was invented and standardized for analog teletype communi-

cation early in the age of bits and bytes. The capabilities of the technology
have now moved far beyond the original intent of the standard, but because
millions of installed computers and printers use ASCII, it is difficult to set
any new standards for text without the expense and effort of replacing
existing hardware. At least, for these 128 characters, most computers and
printers share the same values.

The Extended Character Set

A byte, which consists of eight bits, is the most commonly used building
block for computer processing. ASCII uses only seven bits to code its 128
characters; the eighth bit of the byte is unused. This extra bit allows another
128 characters to be encoded before the byte is used up, and computer
systems today use these extra 128 values for an extended character set.
The extended character set is most commonly filled with ANSI (American
National Standards Institute) standard characters, including often-used
symbols, such as ¢ or ∞, and international diacritics or alphabet characters,
such as ä or ñ. This fuller set of 255 characters is also known as the ISO-
Latin-1 character set; it is used when programming the text of HTML
web pages.

nOTE The rules for encoding extended characters are not ­standardized. Thus
ASCII value 165, for example, may be a bullet (•) character on the Macintosh or the
character for Japanese yen (¥) in Windows (ANSI).

Unicode
As the computer market has become more international, one of the
resulting problems has been handling the various international language
alphabets. It was at best difficult, and at times impossible, to translate the
text portions of programs from one script to another. For example, the
differences between the Latin script (also known as “Roman”) used by
western European writers and the kanji script used by Japanese writers
made it particularly challenging to transfer innovative programs from one
market to another.
Since 1989, a concerted effort on the part of linguists, engineers, and
information professionals from many well-known computer companies
has been focused on a 16-bit architecture for multilingual text and char-
acter encoding. Called Unicode, the original standard accommodated up
to about 65,000 characters to include the characters from all known lan-
guages and alphabets in the world.
44 Multimedia: Making It Work

Figure 2-5 Writing systems currently in use around the world. Unicode provides a consistent methodology for encoding the
characters of any alphabet.

Where several languages share a set of symbols that have a historically

While 65,000 characters related derivation, the shared symbols of each language are unified into
are sufficient for encoding collections of symbols (called scripts). A single script can work for tens or
most of the many thousands even hundreds of languages (for example, the Latin script used for English
of characters used in major and most European languages). Sometimes, however, only one script will
languages of the world, the work for a language (such as the Korean Hangul). Figure 2-5 shows a map
Unicode standard and ISO/ of writing systems used in the world today.
IEC 10646 now support The Unicode standard includes more than 18,000 Han characters
three encoding forms that (ideographs for Japanese, Chinese, and Korean) as well as obsolete alpha-
use a common repertoire bets such as cuneiform, hieroglyphs, and ancient Han characters. In addi-
of characters but allow tion, character space is reserved for users and publishers to create their own
for encoding as many as a scripts, designed especially for their own applications. For example, a car-
million more characters. penter might develop a script that included a character meaning “half-inch
This is sufficient for all Sheetrock,” another character meaning “three-quarter-inch plywood,” and
known character encoding so forth. HTML allows access to the Unicode characters by numeric ref-
requirements, including full erence. Thus &#x6C34; (in hexadecimal) represents the Chinese character
coverage of all historic scripts for water:
of the world, as well as
common notational systems.

The Unicode® Standard: A

Technical Introduction
(www.unicode.org/unicode/
standard/principles.html)
 Chapter 2 Text 45

Mapping Text Across Platforms

If you build your multimedia project on a Windows platform and play
it back on a Macintosh platform (or vice versa), there will be subtle (and
sometimes not-so-subtle) differences. Fonts are perhaps the greatest cross-
platform concern, because they must be mapped to the other machine.
If a specified font doesn’t exist on the target machine, a substitute must
be provided that does exist on the target. This is font substitution. In
many cross-platform-savvy applications, you can explicitly define the
font mapping. Table 2-3 shows some typical mappings when crossing
platforms.

Mac➞Win Win➞Mac

Mac:Chicago➞Win:System Win:Arial➞Mac:Helvetica

Mac:Courier➞Win:Courier New Win:Courier➞Mac:Courier

Mac:Geneva➞Win:MS Sans Serif Win:Courier New➞Mac:Courier

Mac:Helvetica➞Win:Arial Win:MS Serif➞Mac:New York

Mac:Monaco➞Win:Terminal Win:MS Sans Serif➞Mac:Geneva

Mac:New York➞Win:MS Serif Win:Symbol➞Mac:Symbol Map None

Mac:Symbol➞Win:Symbol Map None Win:System➞Mac:Chicago

Mac:Times➞Win:Times New Roman Win:Terminal➞Mac:Monaco

(sizes: 14➞12, 18➞14, 24➞18, 30➞24)

Mac:Palatino➞Win:Times New Roman Win:Times New Roman➞Mac:Times

(sizes: 12➞14, 14➞18, 18➞24, 24➞30)

Table 2-3 Typical Mappings for Common Macintosh and Windows Fonts

TIP Never assume that the fonts you have installed on your computer will
also be installed on another person’s computer. Pay attention to the way you
include fonts in a project so that you never face the nightmare of your carefully
picked fonts being replaced by an ill-suited default font like Courier (see the next
“First Person”). If your work is being distributed to sites that may not have the
fonts you are using, or if you do not license these fonts for distribution with your
work, be sure to bitmap the special font text you use for titles, headlines, buttons,
and so forth. For text to be entered by users, it is safest to stay with the installed
Windows or Macintosh fonts, because you know they are universally available
on that platform. In Windows, use the TrueType fonts installed during the Setup
procedure.
46 Multimedia: Making It Work

First Person
We had a short break between we heard her wail, “Something’s not installed in the system of the
sessions to install the software for wrong with my fonts!” We all looked computer being used for the big-
a panel discussion about multime- at her ugly 48-point Courier and screen projector, and she had failed
dia. Four of us brought media with felt sorry for her; we knew her to bring the fonts along. By then, it
discussion material. Our moderator mistake. The beautiful fonts she had was too late anyway.
installed her presentation first, and installed on her home system were

Always be sure your fonts travel with your application when you are
delivering software to run on a hardware platform other than the one you
used to create the application. To avoid many font display problems, par-
ticularly for menus and headlines, you may wish to snap a picture of your
text with a screen capture utility and use this image, or bitmap, instead
of text that you type into a text field. (Chapter 3 describes bitmaps and
how to capture and edit images.) This will ensure that the screen always
looks right, regardless of what hardware platform you use or what fonts
are installed.
It is not just fonts that are problematic; characters, too, must be mapped
across platforms. Character mapping allows bullets, accented characters,
and other curious characters that are part of the extended character set on
one platform to appear correctly when text is moved to the other platform.
Curly quotation marks, for example, rarely, if ever, map successfully across
platforms.

Languages in the World of Computers

In modern Western languages, words are made up of symbols or letters
strung together, representing as a whole the sounds of a spoken word. This
is not so for Eastern languages such as Chinese, Japanese, and Korean
(and the ancient languages of Sumeria, Egypt, and Mesopotamia). In these
languages, an entire concept might be represented by a single word symbol
that is unrelated to a specific phonetic sound.
The letters or symbols of a language are its alphabet. In English, the
alphabet consists of 26 Roman or Latin letters; in Japanese, the kanji alpha-
bet comprises more than 3,000 kanas, or whole words. The Russian ­alphabet,
made up of Cyrillic characters based on the ancient Greek alphabet, has
about the same number of letters as the Roman alphabet. All languages,
from Navajo to Hebrew, have their own unique alphabets.
 Chapter 2 Text 47

First Person
While we were in the early phases of for the old using the unique iden- weren’t interested in pretty pictures,
producing my CD-ROM, Multimedia: tification labels. No language skills QuickTime, sounds, or other types
Working It Out! I sold the rights to required! of cast members, just text). Then
distribute it into Korea and Mainland we placed each page of bitmapped
When we started, Terry Thompson
China. Nobody on the production text into a movie frame (Cast to
devised a color-coded master filing
team had ever seen a computer Time), neatly labeled that frame at
system and database so that all the
that typed short-form Mandarin, the top with the identifying code
word-processed text and the screen-
and we knew that even when the of the image using a Lingo handler,
captured bitmaps would remain
English was localized, we would be and saved all of the frames as PICT
neatly side by side and concurrent.
hard pressed to recognize any of the images (an automatic command
This is called version control. By the
text, much less edit or alter it in its in Director’s Export menu). With
time this project shipped, Donna’s
new form. DeBabelizer, we batch-converted
computer was crashing four or five
these hundreds of PICT images from
So we devised a structured system times a day and we had lost files,
72 dpi (screen capture resolution)
of labels and names for Multimedia: Dan had gone back to school, Peter
to 300 dpi (printer resolution) and
Working It Out! and converted all and I were slapping miscellaneous
saved each as a 1-bit TIFF image. The
the text in the project (about 600 text elements into the project
process was automatic.
“pages” of about a paragraph each) without tracking where they came
into 1-bit bitmaps in a Director from, and we were changing labels OmniPage Pro is a powerful optical
movie. Donna Booher edited and and moving cast members around character recognition (OCR) pro-
formatted the text in Microsoft as we streamlined performance, gram that usually reads documents
Word, Dan Hilgert bitmapped and debugged, and staggered toward on a flatbed scanner and turns them
screen-captured each page with a golden master and the Federal into nicely formatted word process-
Capture and Photoshop, and Peter Express drop-off. We had converted ing documents. OmniPage (ah ha!)
Wolf imported the PICT files into Terry’s neatly organized system into allows batch processing of TIFF
Director (by the hundreds) as cast chaos. (and more recently, PICT) images at
members. Each cast member had 300 dpi, so we ran all of these TIFFs
After the CD-ROMs were pressed,
a unique (but systematic) name (automatically) through OmniPage,
and there wasn’t anything anybody
associated with a Director movie, a and bingo!, they came out as archi-
could change anymore anyway,
heading, and various icons. It took val word processing files. Then we
we did a tricky thing with Lingo
a while. sent the word files to Guido Mozzi in
programming, DeBabelizer, and
Italy so that his team of translators
The localizers across the Pacific, OmniPage Pro to convert the final
could begin localizing there.
then, would simply translate a page project’s bitmapped text back into
or a series of pages using their own word processor text. Some efforts are cyclical, we have
native-language word processor, discovered. The trick is to learn
First we collected all the bitmapped
capture their own bitmaps, and we something and improve the process
text into a single Director movie (we
would substitute the new bitmaps each time the task comes around!
48 Multimedia: Making It Work

Most modern alphabets share one very important attribute: the graphic
The written Japanese shapes and method for writing the Arabic numbers 0 1 2 3 4 5 6 7 8 9.
language consists of three This is a simple system for representing decimal numbers, which lends
different types of character itself to easy reading, writing, manipulation, and calculation. Expressing
sets, namely: kanji, kata- and performing
kana, and hiragana. Kanji 16 + 32 = 48
was originally taken from
the Chinese language and is much easier in Arabic numbers than in Roman or Greek numerals:
is essentially a pictographic XVI + XXXII = XLVIII
representation of the spoken
ις + λβ = µη
word. Each kanji has two
different readings, “on-yomi” Use of Arabic notation has gradually spread across the world to sup-
and “kun-yomi,” respectively, plant other systems, although Roman numerals are still used today in
the “Chinese rendering” and Western languages in certain forms and contexts.
the “Japanese rendering.” Translating or designing multimedia (or any computer-based mate-
Both are used depending on rial) into a language other than the one in which it was originally written
the conjugation of the kanji is called localization. This process deals with everything from the month/
with other kanji. day/year order for expressing dates to providing special alphabetical char-
Due to certain incompat- acters on keyboards and printers. Even the many Western languages that
ibilities between the Japanese share the Roman alphabet have their own peculiarities and often require
spoken word and kanji, two special characters to represent special sounds. For example, German has its
sets of kana or phonetic umlaut (¨); French its various accents (é), the cedilla (ç), and other diacrit-
syllabary (alphabet) were ics; and Spanish its tilde (ñ). These characters are typically available in the
developed. Katakana is extended character set of a font.
the “square” kana and is
used today for writing only Special Characters in HTML
foreign words or onomato- In HTML, character entities based upon the ISO-Latin-1 standard
poeic expressions. Hiragana make up the alphabet that is recognized by browser software on the
is the “cursive” kana and can World Wide Web. All of the usual characters of an English keyboard are
be used alone to represent included (the 7-bit ASCII set is built in), but for the extended character
a certain word or combined set that includes tildes, umlauts, accents, and special symbols, you must
with kanji to form other use an escape sequence to represent them in an ISO-Latin-1 HTML
words and sentences. Romaji, document. A character entity is represented either by a number or by a
a more recent addition to the word and is always prefixed by an ampersand (escape) and followed by a
alphabets of Japan, allows for semicolon. For example, the name for the copyright symbol is “copy” and
the phonetic spelling of the its number is 169. The symbol may be inserted into a document either
Japanese language using the as &copy; or as &#169;—either way, the character © is generated by
Roman characters familiar to the browser. The list of character entities allowed in standard HTML is
the Western world. growing and will soon include mathematical symbols and even icons to
represent things like trash cans, clocks, and disk drives. Word processors
Ross Uchimura, Executive
Vice-President, GC3 Ltd., a
cross-cultural expert
 Chapter 2 Text 49

First Person
When I was in Germany some years courts told him to pay anyway. So umlautless vowel, to indicate that
ago, I read a curious report in the he initiated a civil suit to protect his the umlaut should be there but isn’t.
Frankfurter Allgemeine about a fel- name. Today, with high-speed laser print-
low who was suing the local electric ers and special fonts, the problem
It seems the utility was using a
utility for not correcting the spelling has probably gone away.
legacy IBM system with a high-
of his name to its proper form in the
speed chain printer to produce More recently, there are reports that
German alphabet. His name had
the monthly bills, and none of the the California Department of Motor
an umlaut in it (Wörm), but his bill
umlaut characters were available Vehicles cannot handle blank spaces
always read Woerm. In German, the
on the ASCII-based chain. By long- in the name fields of its massive
letter ö sounds different from the
standing convention, when you are database, so Rip Van Winkle’s name
letter o, so I can’t say I blamed him.
limited to the English alphabet, the was changed to Rip VanWinkle with-
At first he didn’t pay his bill, claiming
letter e immediately follows any out his permission. Expect a lawsuit.
that he wasn’t that person; then the

for languages other than English automatically insert the necessary char-
acter entities when a document is saved in HTML format or specify the
character set to use.

www.w3.org/TR/REC-html40/sgml/entities.html

An encyclopedic discussion and reference for HTML character entity

references

Multilanguage Web Pages

When building a project in more than one language for the Web, consider
translating the languages that use Roman fonts and displaying them as
text in the browser in the normal way. Languages other than English may
have many escaped characters, as you can see in Figure 2-6. If Chinese or
Japanese or Arabic is desired, translate the Roman text onto a computer
running an operating system using that native language. For the web
page, the translator can then capture a screen image of the translated text,
and you can embed that image into your web page. This process takes
precise coordination among the designers, the content providers, and the
translators, but it can be done smoothly with careful labeling of the bits
and pieces.
50 Multimedia: Making It Work

<p>
What can this integrated network solution offer your business? Lower
costs, increased flexibility, and greater reliability by supporting all voice
and data requirments, including:</p>
<p>
O que esta solu&ccedil;&atilde;o de rede integrada pode oferecer a sua
empresa? Menores custos, elevada flexibilidade, e maior confiabilidade,
pelo suporte a todos os requisitos de voz e dados, incluindo:</p>
<p>
Qu&eacute; puede ofrecerle a su negocio esta soluci&oacute;n integrada
de redes? Menores costos, mayor flexibilidad y mayor fiabil-idad mediante
la compatibilidad con todos los requisitos para voz y datos, incluso:</p>
<p>
<img src="images/chinese/story 1-1.gif ">

</p>
<p>
<img src="images/japanese/story 1-1.gif ">

</p>

Figure 2-6 Portion of a five-language web site using normal HTML code for the
Roman languages and screen-captured graphic images to display the Chinese and
Japanese translations

Font Editing and Design Tools

Special font editing tools can be used to make your own type, so you
can communicate an idea or graphic feeling exactly. With these tools,
professional typographers create distinct text and display faces. Graphic
designers, publishers, and ad agencies can design instant variations of
existing typefaces.
Typeface designs fall into the category of industrial design and have
been determined by the courts in some cases to be protected by patent. For
example, design patents have been issued for Bigelow & Holmes’ Lucida,
ITC Stone, and Adobe’s Minion.
 Chapter 2 Text 51

WARNING If your commercial project includes special fonts, be sure that

your license agreement with the font supplier allows you to distribute them with
your project.

Occasionally in your projects you may require special characters. With

the tools described in the paragraphs that follow, you can easily substitute
characters of your own design for any unused characters in the extended
character set. You can even include several custom versions of your client’s
company logo or other special symbols relevant to your content or subject
right in your text font.

www.fontfoundry.com
www.larabiefonts.com

There are hundreds of sites for downloading free and shareware fonts
drawn by others. For starters, try these two.

Fontlab
Fontlab, Ltd., located at www.fontlab.com, specializes in font editors
for both Macintosh and Windows platforms. You can use this software
to develop PostScript, TrueType, and OpenType fonts for Macintosh,
Windows, and Sun workstations. Designers can also modify existing type-
faces, incorporate PostScript artwork, automatically trace scanned images,
and create designs from scratch. A sample of the Fontographer screen is
shown in Figure 2-7.

Figure 2-7 Fontographer

is a powerful font editor for
Macintosh and Windows.
52 Multimedia: Making It Work

Fontographer’s features include a freehand drawing tool to create

professional and precise inline and outline drawings of calligraphic and
script characters, using either the mouse or alternative input methods
(such as a pressure-sensitive pen system). Fontographer allows the cre-
ation of multiple font designs from two existing typefaces, and you can
design lighter or heavier fonts by modifying the weight of an entire
typeface.

Making Pretty Text

To make your text look pretty, you need a toolbox full of fonts and special
graphics applications that can stretch, shade, shadow, color, and anti-alias
your words into real artwork. Pretty text is typi-
cally found in bitmapped drawings where charac-
ters have been tweaked, manipulated, and blended
into a graphic image. Simply choosing the font is
the first step. Most designers find it easier to make
pretty type starting with ready-made fonts, but
some will create their own custom fonts using font
editing and design tools.
With the proper tools and a creative mind,
you can create endless variations on plain-old
type, and you not only choose but also customize
the styles that will fit with your design needs.
Most image-editing and painting applica-
tions (see Figure 2-8 for a PowerPoint example)
let you make text using the fonts available in your
system. You can colorize the text, stretch, squeeze,
and rotate it, and you can filter it through various
plug-ins to generate wild graphic results.
As a multimedia developer, you may only
need to be concerned about how your fonts look
on monitors, not how they are printed to paper—
unless, of course, you are printing perfect pro-
posals, bids, storyboards, reports, and above all,
invoices J. TrueType, OpenType, and PostScript
outline fonts allow text to be drawn at any size on
your computer screen without jaggies:

Figure 2-8 PowerPoint lets you manipulate text in many ways.

 Chapter 2 Text 53

Jaggies are avoided by anti-aliasing the edges of the text charac-

ters, making them seem smoother to the eye. Note the improved look
of the anti-aliased letters in the bottom row of letters in Figure 2-9.
Pasting an image that was anti-aliased against a light background onto
a darker-colored background using transparency (so that the new, dark
background is seen, instead of the old, light one) can be problematic: the
blending pixels along the edge will show as a halo and may have to be
edited pixel by pixel.
Macintosh and PCs handle anti-aliasing differently. Authoring pro-
grams such as Adobe Flash allow you to fine-tune anti-aliasing settings for
text fields (see Figure 2-10), useful when you want a different look for text
that will be static versus text that will be animated.

Figure 2-9 Anti-aliasing text and

graphics creates “smooth” boundaries
between colors. The top row of letters is
not anti-aliased; the bottom row is.

When they first invented

typesetting, there were vari-
ants cut of each character
so that text would look as if
it had been handwritten by
a monk! Desktop designers
have been fighting so hard to
get their setting to look like
Figure 2-10 In some authoring programs, anti-aliasing can be fine-tuned. it’s come from a Berthold
system, that most of the new
potential of desktop typog-
Hypermedia and Hypertext raphy has been overlooked.

Multimedia—the combination of text, graphic, and audio elements into a David Collier, Author of
single collection or presentation—becomes interactive multimedia when Collier’s Rules for Desktop Design
you give the user some control over what information is viewed and when and Typography
it is viewed. Interactive multimedia becomes hypermedia when its designer
provides a structure of linked elements through which a user can navigate
and interact.
When a hypermedia project includes large amounts of text or sym-
bolic content, this content can be indexed and its elements then linked
54 Multimedia: Making It Work

together to afford rapid electronic retrieval of the associated information.

When words are keyed or indexed to other words, you have a hypertext
system; the “text” part of this term represents the project’s content and
meaning, rather than the graphical presentation of the text. Hypertext is
what the World Wide Web is all about.
When text is stored in a computer instead of on printed pages, the
computer’s powerful processing capabilities can be applied to make the
text more accessible and meaningful. The text can then be called hyper-
text; because the words, sections, and thoughts are linked, the user can
navigate through text in a nonlinear way, quickly and intuitively.
Using hypertext systems, you can electronically search through all
the text of a computer-resident book, locate references to a certain word,
and then immediately view the page where the word was found. Or you
can create complicated Boolean searches (using terms such as AND, OR,
NOT, and BOTH) to locate the occurrences of several related words, such
as “Elwood,” “Gloria,” “mortgage,” and “happiness,” in a paragraph or on a
page. Whole documents can be linked to other documents.
A word can be made hot, as can a button, thus leading the user from
one reference to another. Click on the word “Elwood,” and you may find
yourself reading a biography or resume; click on “mortgage,” and a calcula-
tor pops up. Some authoring systems incorporate a hypertext facility that
allows you to identify words in a text field using a bold or colored style,
then link them to other words, pages, or activities, such as playing a sound
or video clip related to that hot word. You cannot do this kind of nonlin-
ear and associative navigation in a sequentially organized book. But on
a CD-ROM, where you might have more than 100,000 pages of text to
investigate, search, and browse, hypertext is invaluable.
Because hypertext is the organized cross-linking of words not only to
other words but also to associated images, video clips, sounds, and other
exhibits, hypertext often becomes simply an additional feature within an
overall multimedia design. The term “hyper” (from the Greek word “over”
[υπερ]) has come to imply that user interaction is a critical part of the
design, whether for text browsing or for the multimedia project as a whole.
When interaction and cross-linking is then added to multimedia, and the
navigation system is nonlinear, multimedia becomes hypermedia.
In 1945, Vannevar Bush wrote a seminal eight-page article, “As We
May Think,” for the Atlantic Monthly (www.theatlantic.com/unbound/
flashbks/computer/bushf.htm). This short treatise, in which he discusses
the need for new methodologies for accessing information, has become
the historic cornerstone of hypertext experimentation. Doug Englebart
(inventor of the mouse) and Ted Nelson (who coined the term “hypertext”
in 1965) have actively championed the research and innovations required
of computer technology for implementing useful hypertext systems, and
they have worked to combat the historic inertia of linear thought. Nelson
 Chapter 2 Text 55

would claim that the very structure of thought is neither sequential nor
linear and that computer-based hypertext systems will fundamentally alter [Vannevar] Bush identi-
the way humans approach literature and the expression of ideas during the fied the problem—and the
coming decades. need to provide new ways
The argument against this theory of associative thought is that people to access information—but
are, indeed, more comfortable with linear thinking and are easily over- was he right about how the
whelmed by too much freedom, becoming quickly lost in the chaos of mind works? I suspect a
nonlinear gigabytes. As a practical reminder, it is important always to pro- purely associative model of
vide location markers, either text-and-symbol menus or illustrative maps, human memory and mental
for users who travel the threads of nonlinear systems. processes is too simplistic.

The Power of Hypertext Philip Murray, From Ventura

to Hypertext, Knowledge
In a fully indexed hypertext system, all words can be found immediately.
Management Associates,
Suppose you search a large database for “boats,” and you come up with Danvers, MA
a whopping 1,623 references, or hits—among them, Noah’s Ark (open
boat in water), television situation comedies (The Love Boat), political
criticisms of cabinet members who challenged the status quo (rocked the
boat), cabinet members who were stupid (missed the boat), and Christmas
dinner trimmings (Grandmother’s gravy boat). So you narrow your search
and look for “boats” and “water” when both words are mentioned on the
same page; this time you get 286 hits. “Boats,” “water,” and “storms” gets
you 37; “boats,” “water,” “storms,” and “San Francisco,” a single hit. With
over a thousand hits, you are lost. With one hit, you have something! But
you still may not find what you are looking for, as you can see in this
fictional example:
The storm had come and gone quickly across the Colorado plains, but
water was still puddled at the foot of the house-high bank of mud
that had slid into town when the dam burst. In front of the general
store, which had remained standing, four strong men carefully lifted a
tiny boat onto the large dray wagon borrowed from the woodcutters.
On a layer of blankets in the bilge of the boat, the undertaker had
carefully laid out the remains of both the mayor and his paramour.
The mayor had not drowned in the flood, but died of a heart attack
in the midst of the panic. Children covered the boat with freshly cut
pine boughs while horses were quickly harnessed to the wagon, and
a strange procession began to move slowly down San Francisco Street
toward the new cemetery. …
The power of such search-and-retrieval systems provided by a com-
puter for large volumes of data is immense, but clearly this power must be
channeled in meaningful ways. Links among words or clusters of informa-
tion need to be designed so that they make sense. Judgments must be made
about relationships and the way information content is organized and
made available to users. The lenses through which vast amounts of data
56 Multimedia: Making It Work

are viewed must necessarily be ground and shaped by those who design the
The hype about hyper- access system.
text may be justified. It The issue of who designs the lenses and how the designers maintain
can provide a computer- impartial focus is troubling to many scientists, archivists, and students of
supported information envi- cognitive thinking. The scientists would remain “hermeneutically” neutral,
ronment which can add to they would balance freedom against authority and warn against the episte-
our appreciation of the text, mological unknowns of this new intellectual technology. They are aware of
can go some way towards the forces that allow advertising and marketing craftspeople to intuitively
aping the mental agility of twist meanings and spin events to their own purposes, with actions that
the human mind, can allow can affect the knowledge and views of many millions of people and thus
navigation along patterns history itself. But these forces remain poorly understood, are not easily
of association, can provide a controlled by authority, and will express themselves with immeasurably
nonlinear information envi- far-reaching, long-term impact on the shape of human culture.
ronment. But the problems The multimedia designer controls the filtering mechanisms and places
of constructing nonlinear the lenses within the multimedia project. A manufacturer, for instance,
documents are not few and that presents its products using interactive multimedia can bring abundant
can prove to be very complex. information and selling power within reach of the user, including back-
ground information, collateral marketing material, pricing statistics, and
Patricia Baird, Editor of technical data. The project design will be, of course, biased—to sell more
Hypermedia, a scientific journal of the manufacturer’s products and generate more profit; but this bias is
published in the United assumed and understood in these circumstances. When the assumptions
Kingdom
and understandings of inherent bias in any information base break down,
when fiction or incomplete data is presented as full fact, these are the times
when the powerful forces of multimedia and hypermedia can have their
Hypermedia on its own greatest deleterious effect.
simply functions as a refer-
ence tool. But when it is WARNING Bad multimedia projects will not alter the collective view of his-
integrated within a goal- tory; really bad projects might.
based activity, it becomes a
powerful learning resource.
Using Hypertext
Brigid Sealy and Paul Phelan,
INESC, Porto, Portugal
Special programs for information management and hypertext have been
(conclusions from research designed to present electronic text, images, and other elements in a data-
funded by the European base fashion. Commercial systems have been used for large and compli-
Commission’s Human Capital cated mixtures of text and images—for example, a detailed repair manual
and Mobility Program) for a Boeing 747 aircraft, a parts catalog for Pratt & Whitney jet turbine
engines, an instant reference to hazardous chemicals, and electronic refer-
ence libraries used in legal and library environments. Such searchable
database engines are widely used on the Web, where software robots
visit millions of web pages and index entire web sites. Hypertext data-
bases rely upon proprietary indexing systems that carefully scan the entire
body of text and create very fast cross-referencing indexes that point to
 Chapter 2 Text 57

the location of specific words, documents, and images. Indeed, a hypertext

index by itself can be as large as 50 percent to 100 percent the size of the
original document. Indexes are essential for speedy performance. Google’s
search engine produces about 1,220,000,000 hits in less than a quarter of
a second!
Commercial hypertext systems were developed historically to retrofit
gigantic bodies of information. Licenses for use and distribution of these
commercial systems are expensive, and the hypertext-based projects typi-
cally require the large mass-storage capability of one or many CD-ROMs
and/or dedicated gigabyte hard disks. Simpler but effective hypertext
indexing tools are available for both Macintosh and Windows, and they
offer fairly elaborate features designed to work in concert with many mul-
timedia authoring systems. Server-based hypertext and database engines
designed for the Web are now widely available and competitively priced.

TIP Rather than designing an elaborate, fully cross-referenced hypertext sys-

tem for your multimedia project, you can “hardwire” the links between the most
salient words (highlight them in your text) so that a mouse click leads to a topic
menu specific to the chosen word. Though this constrains the user’s movement
through the text, the user will not perceive it as such, and you can thus maintain
strict control over your navigation pathways and design.

Searching for Words

Although the designer of a hypermedia database makes assumptions, he
or she also presents users with tools and a meaningful interface to exercise
the assumptions. Employing this interface, users can tailor word searches
to find very specific combinations. Following are typical methods for word
searching in hypermedia systems:
■■ Categories Selecting or limiting the documents, pages, or fields of
text within which to search for a word or words.
■■ Word relationships Searching for words according to their gen-
eral proximity and order. For example, you might search for “party”
and “beer” only when they occur on the same page or in the same
paragraph.
58 Multimedia: Making It Work

■■ Adjacency Searching for words occurring next to one another, usu-

ally in phrases and proper names. For instance, find “widow” only when
“black” is the preceding adjacent word.
■■ Alternates Applying an OR criterion to search for two or more
words, such as “bacon” or “eggs.”
■■ Association Applying an AND criterion to search for two or more
words, such as “skiff,” “tender,” “dinghy,” and “rowboat.”
■■ Negation Applying a NOT criterion to search exclusively for refer-
ences to a word that are not associated with the word. For example,
find all occurrences of “paste” when “library” is not present in the same
sentence.
■■ Truncation Searching for a word with any of its possible suffixes.
For example, to find all occurrences of “girl” and “girls,” you may need
to specify something like girl#. Multiple character suffixes can be
managed with another specifier, so geo* might yield “geo,” “geology,”
and “geometry,” as well as “George.”
■■ Intermediate words Searching for words that occur between what
might normally be adjacent words, such as a middle name or initial in
a proper name.
■■ Frequency Searching for words based on how often they appear: the
more times a term is mentioned in a document, the more relevant the
document is to this term.

Hypermedia Structures
Two buzzwords used often in hypertext systems are link and node. Links
are connections between the conceptual elements, that is, the nodes,
which may consist of text, graphics, sounds, or related information in the
knowledge base. Links connect Caesar Augustus with Rome, for example,
and grapes with wine, and love with hate. The art of hypermedia design lies
in the visualization of these nodes and their links so that they make sense,
not nonsense, and can form the backbone of a knowledge access system.
Along with the use of HTML for the World Wide Web, the term anchor
is used for the reference from one document to another document, image,
sound, or file on the Web (see Chapter 13).
Links are the navigation pathways and menus; nodes are accessible top-
ics, documents, messages, and content elements. A link anchor is where
you come from; a link end is the destination node linked to the anchor.
Some hypertext systems provide unidirectional navigation and offer no
return pathway; others are bidirectional.
The simplest way to navigate hypermedia structures is via buttons that
let you access linked information (text, graphics, and sounds) that is con-
tained at the nodes. When you’ve finished examining the information, you
 Chapter 2 Text 59

return to your starting location. A typical navigation structure might look

like the following:

Navigation becomes more complicated when you add associative

links that connect elements not directly in the hierarchy or sequence.
These are the paths where users can begin to get lost if you do not pro-
vide location markers. A link can lead to a node that provides further
links, as shown here:

When you offer full-text search through an information base, there

may be links between any number of items at your current node and any
number of other nodes with items that meet your relationship criteria.
When users are browsing freely through this system, and one page does
not follow the next (as expected in the linear metaphor of books and litera-
ture), users can get lost in the associative maze of the designer’s content:

One publisher of hypermedia products claims that becoming lost in

“hyperspace” may not be all that bad. The struggle to find your way back
can be valuable in itself, and certainly a learning experience.
60 Multimedia: Making It Work

Hypertext Tools
Hypermedia can take advan- Two functions are common to most hypermedia text management systems,
tage of powerful capabilities and they are often provided as separate applications: building (or authoring)
that are becoming clearer and reading. The builder creates the links, identifies nodes, and generates
as the new multimedia the all-important index of words. The index methodology and the search
medium matures, giving us algorithms used to find and group words according to user search criteria
a greater choice in explora- are typically proprietary, and they represent an area where computers are
tion, if not in outright plot carefully optimized for performance—finding search words among a list of
definition, for example. From many tens of thousands of words requires speed-demon programming.
my experiences with “Playa Hypertext systems are currently used for electronic publishing and
Sirenas,” the real challenge reference works, technical documentation, educational courseware, inter-
facing storytellers in this active kiosks, electronic catalogs, interactive fiction, and text and image
new medium is allowing databases. Today these tools are used extensively with information orga-
readers appropriate choices nized in a linear fashion; it still may be many years before the majority of
(some authorship of the multimedia project users become comfortable with fully nonlinear hyper-
story, really) while they text and hypermedia systems. When (and perhaps if ) they do, the meth-
navigate through the hyper- odology of human thought and conceptual management—indeed, the way
media experience, without we think—will be forever changed.
destroying the successful
and basic patterns that have
been part of storytelling
since people first gathered
around campfires.
There is something organic
about these time-proven
storytelling patterns. As an
author in the new medium,
you must first design the
DNA or template of your
story, then allow (and
promote) mutation along
evolutionary lines that you,
as the author, have created as
part of the template…

Hermann Steffen, hypermedia

novelist, San Jose, Costa Rica
 Chapter 2 Review
n Chapter Summary

For your review, here’s a summary of the important ■■ Type sizes are usually expressed in points (about
concepts discussed in this chapter. 72 per inch).
Recognize the importance of word choice ■■ Leading is the space between lines.
■■ With the recent explosion of the Internet and ■■ Kerning is the space between individual characters.
the World Wide Web, text has become more
■■ Alignment can be left, right, centered, or justified.
important than ever. Words and symbols in any
form, spoken or written, are the most common Discuss the importance of text and ways text can
system of communication. It’s important to design be leveraged in multimedia presentations
labels for title screens, menus, and buttons using ■■ Size, color, background color, style, and leading are
words that have the most precise and powerful factors that affect the legibility of text.
meanings to express what you need to say. Exper-
iment with the words you plan to use by letting ■■ On the printed page, serif fonts are traditionally
others try them. used for body text because the serifs are said to
help guide the reader’s eye along the line of text.
Describe the difference between a typeface and Sans serif fonts, on the other hand, are used for
a font and list at least three attributes of a font, headlines and bold statements. But sans serif fonts
for example, upper/lowercase, serif/sans serif, are far more legible and attractive when used in
PostScript/TrueType/OpenType the small sizes of a text field on a screen.
■■ A typeface is a family of graphic characters that ■■ You must strike a balance between too little text
usually includes many type sizes and styles. on a screen and too much text.
■■ Serif versus sans serif is the simplest way to Discuss the presentation of text on Windows and
categorize a typeface. Macintosh platforms
■■ A font is a collection of characters of a single size ■■ There will be subtle (and sometimes not-so-subtle)
and style belonging to a particular typeface family. differences in how text looks on Windows and
■■ Three common font styles are bold, italic, and Macintosh platforms.
underline, but there are several others; some, such Find sources for free and shareware fonts
as superscript, emboss, or strikethrough, have
specialized uses. ■■ Download free fonts and use shareware tools to
modify fonts by adding special characters and even
logos.
Define hypermedia, hypertext, links, anchors, and
nodes and be able to discuss both the potential
and limitations of hypertext and hyperlinking
systems
■■ Multimedia—the combination of text, graphic,
and audio elements into a single collection or
presentation—becomes interactive multimedia
when you give the user some control over what

61
 information is viewed and when it is viewed. ■■ The standard
Interactive multimedia becomes hypermedia when document format
its designer provides a structure of linked elements used for pages on
through which a user can navigate and interact. the Web is called
Hypertext Markup
■■ When a hypermedia project includes large
Language (HTML).
amounts of text or symbolic content, this content
In an HTML
can be indexed and its elements then linked
document you can
together to afford rapid electronic retrieval of the
specify typefaces,
associated information. When words are keyed
sizes, colors, and
or indexed to other words, you have a hypertext
other properties by
system; the “text” part of this term represents the
“marking up” the text
project’s content and meaning, rather than the
in the document with
graphical presentation of the text. Hypertext is
tags. The remarkable
what the World Wide Web is all about.
growth of the Web
■■ When text lives in a computer instead of on is straining the “old”
printed pages, the computer’s powerful processing designs for displaying
capabilities can be applied to make the text more text on computers.
accessible and meaningful. The text can then be Dynamic HTML
called hypertext; because the words, sections, and uses Cascading
thoughts are linked, the user can navigate through Style Sheets (CSS)
text in a nonlinear way, quickly and intuitively. to define choices
Because hypertext is the organized cross-linking ranging from line
of words not only to other words but also to height to margin
associated images, video clips, sounds, and other width to font face.
exhibits, hypertext often becomes simply an HTML character
additional feature within an overall multimedia entities are repre-
design. sented either by a
■■ Links are connections between the conceptual number or by a word
elements, that is, the nodes containing text, and always prefixed
graphics, sounds, or related information in the by an ampersand
knowledge base. The term anchor is formally used (escape) and followed
in HTML as the reference from one document by a semicolon.
to another document, image, sound, or file. Links ■■ You can search and
are the navigation pathways and menus; nodes view potentially
are accessible topics, documents, messages, and billions of documents
content elements. A link anchor is where you and files (infor-
come from; a link end is the destination node mation), but you can
linked to the anchor. also become “lost in
hyperspace.”

62
■■ Key Terms

Adobe PostScript (40) font mapping (45) outline font (40)

American Standard Code for font substitution (45) pixel (23)
­InformationInterchange
­ foundry (41) point (22)
(ASCII) (42) hint (for Type 1 PostScript portrait (37)
anchor (58) fonts) (41) rasterizing (23)
anti-aliasing (27) hypertext (54) rollovers (36)
attribute (22) hypertext system (54) sans serif (25)
button (35) icon (32) scripts (44)
Cascading Style Sheets intercap (24) serif (25)
(CSS) (30) jaggies (53) software robots (56)
case insensitive (24) kerning (23) style (22)
case sensitive (24) landscape (37) tag (39)
character entity (48) leading (22) tracking (23)
character metrics (23) link (58) TrueType (41)
condensed (23) link anchor (58) typeface (22)
dithering (27) link end (58) Unicode (43)
dots per inch (dpi) (23) localization (48) uppercase (24)
Dynamic HTML (DHTML) (62) lowercase (24) white space (28)
expanded (23) node (58) WYSIWYG (25)
font (22) OpenType (41) x-height (22)

■■ Key Term Quiz

1. Type sizes are usually expressed in _______________.

2. When a password must be entered in upper- or lowercase in order to match the original password, it is said
to be _______________.
3. Symbolic representations of objects and processes common to the graphical user interfaces of many
computer operating systems are called _______________.
4. Special HTML characters, always prefixed by an ampersand (escape) and followed by a semicolon, are
called _______________.
5. “What you see is what you get” is spoken as _______________.
6. Translating or designing multimedia (or any computer-based material) into a language other than the one
in which it was originally written is called _______________.
7. The little decoration at the end of a letter stroke is a _______________.
8. Designers call roomy blank areas _______________.
9. _______________ blends the colors along the edges of the letters (called dithering) to create a soft
transition between the letter and its background.
10. Conceptual elements consisting of text, graphics, sounds, or related information in the knowledge base are
called _______________.

63
■■ Multiple-Choice Quiz

1. A family of graphic characters that usually 5. If a DHTML document includes a font face
includes many type sizes and styles is called a: that is not installed on the user’s computer, a
a. typeface browser will:
b. font a. automatically download the correct font
c. point b. refuse to load the page
d. link c. leave a blank space where that text is
e. node d. crash
e. try to substitute the font with a similar
2. Which of the following is a term that applies to
looking font
the spacing between characters of text?
a. leading 6. In the URL http://www.timestream.com/info/
b. kerning people/biotay/biotay1.html, which part is case
c. tracking sensitive?
d. points a. the record type: “http://”
e. dithering b. the domain name: “timestream.com”
c. the subdomain “www”
3. Intercapping, the practice of placing a capital in
d. the document path: “info/people/biotay/
the middle of a word, is a trend that emerged
biotay1.html”
from the computer programming community
e. all are case sensitive
because:
a. it looks cool 7. Multimedia becomes interactive multimedia
b. they wanted to copy marketing practices in when:
the electronics industry a. the user has some control over what
c. they found they could see the words used information is viewed and when it is viewed
for variables and commands better b. the information is displayed by a computer
d. one of the first computer programmers had with a touchscreen or other input device
a faulty shift key on his keyboard c. the information is available on the Web—
e. it increases security in case-sensitive either the Internet or a local area network
passwords d. quizzes and tests with evaluations and
scoring are included
4. Dynamic HTML uses _______ to define
e. the user can change such attributes as
choices ranging from line height to margin
volume and type size
width to font face.
a. Cascading Style Sheets 8. Interactive multimedia becomes hypermedia
b. font mapping when:
c. font substitution a. the information is available on the Web—
d. software robots either the Internet or a local area network
e. encapsulated PostScript b. quizzes and tests with evaluations and
scoring are included
c. it includes a structure of linked elements
through which a user can navigate and
interact

64
 d. the user can change such attributes as 13. The reference from one document to another
volume and type size document, image, sound, or file on the Web is
e. the content formatting complies with the a(n):
American Standard Code for Information a. sweetspot
Interchange b. anchor
c. node
9. Web pages are coded using:
d. tag
a. Unicode
e. button
b. American Standard Code for Information
Interchange 14. Which of the following is a problem that might
c. File Transfer Protocol apply to hypermedia?
d. Hypertext Markup Language a. Users’ eye movements affect their ability
e. encapsulated PostScript to link.
b. Users will be turned off by excessive
10. Which of the following provides a system for
animation.
dynamically displaying a font?
c. Hypermedia software might create
a. Apache
inappropriate links.
b. PostScript
d. Current hyperlinking technology far exceeds
c. HTTPD
what today’s desktop computers can handle.
d. serif
e. Search results generally are too granular to
e. WYSIWYG
be useful.
11. A printed page might be presented in which of
15. Which of the following is a typical method for
these orientations?
word searching in a hypermedia system?
a. newsscape
a. best fit
b. portrait
b. adjacency
c. flat-file
c. popularity
d. x-height
d. tracking
e. node
e. localization
12. Which of the following is a character encoding
system?
a. FontTab
b. HTML
c. CSS
d. WYSIWYG
e. Unicode

■■ Essay Quiz

1. Describe what characteristics a block of text might have.

2. Describe what characteristics a typeface might have.
3. Discuss the problems encountered using text across computer platforms and in different languages.

65
 4. Discuss the differences among multimedia, interactive multimedia, hypertext, and hypermedia.

5. Your boss wants you to create a hypermedia system for Web visitors to find technical support information
about your company. What are some of the implications in creating this system? Should you hand-build
the links or use an automatic indexing system? Why?

Lab Projects
■■ Project 2.1
Visit a web site and print out a page. Visit the same page on another computer (preferably on another operating
system), and print out the same page.
Compare the pages. Are the printouts different? Why?

■■ Project 2.2
From three different publications, select a printed page. Circle the different blocks of text. Characterize the types
of text used in each block by providing for each page:
■■ Publication name and page number.
■■ Which blocks are headlines? What type of font is used? Is it bold? serif? Characterize the text. How is
it spaced?
■■ Which blocks are body text? What type of font is used? Is it bold? serif? Characterize the text. How is
it spaced?

■■ Project 2.3
Access a computer. Identify two programs that allow you to manipulate text. Write some text in varied styles and
fonts. Print the results. For each, list:
■■ The program’s name.
■■ The ways in which that program allows you to change text. Can you easily change the font? the color?
the style? the spacing?

■■ Project 2.4
Create a new document in a word processing application. Next, type in a line of text and copy the line five times.
Now change each line into a different font. Recopy the entire set of lines three times. Finally, change the size of
the first set to 10-point text, the second set to 18-point text, and the third set to 36-point text.
■■ Which of the smallest lines of text is most readable?
■■ Which line of text stands out the most?

66
■■ Project 2.5
Review two different games or educational programs delivered on CD-ROM. Create a diagram that shows how
the information in each is structured. For each, describe:
■■ How are the navigational structures similar in the two programs?
■■ What words are common to both programs (for example, “Quit,” “Home,” “Help,” etc.)?

67
Vaughan / Multimedia: Making It Work / 0071748466 / Chapter 3 blind folio pg 0

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 www.templatemonster.com. 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 (www.gettyimages.com). 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 (www.corel.com/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="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
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 www.w3.org/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 (www.daz3d.com) and tions with parametric spline
form•Z (www.formz.com)—are touted as essential tools for illustra- representations, NURBS,
tion, animation, and multimedia production. NewTek’s Lightwave (www­ patches, and metaballs. This
.newtek.com/lightwave) and Autodesk’s Maya (www.autodesk.com/ 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 (sketchup.google.com) provides a simple (and free) a single package.
cross-platform tool. To delve deeply into 3-D, the open-source Blender
(www.blender.org) is a powerful tool—but its complex interface presents Marketing literature from
a steep learning curve. auto•des•sys, Inc.
(www.formz.com)
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 (www.ulead.com/cool360) or Panorama
Factory (www.panoramafactory.com) 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