Transcript Multimedia Elements – Text and Graphics

Multimedia Elements – Text
and Graphics
Text in Multimedia Applications

Of all multimedia elements, text is the easiest to
manipulate

General guidelines:






Be concise
Use appropriate fonts
Consider different type styles
Be consistent
Make the text readable
Use restraint
Working with Text

Be concise – text fills < ½ screen

Large amounts of text


Alternatives? - animation, video, narration.
Show a preview and allow user to request
more


Hyper linking
Pop-up messages, scroll bars,
drop-down menus
Use Appropriate Type Fonts

Decorative



Serif



Hard to read
Used for emphasis
Creates illusion of a line and guides the eye
across the screen facilitating readability
Used on large blocks of text
San serif


Clean, simple
Good for headings
Examples of:
Serif, Sans Serif, and Other Fonts
Scanned image: from Multimedia Concepts – James Shuman
Font Type Styles

Type styles: bold, italic, underline



Used for emphasis
Use for links – hypertext
Be consistent



Similar headings – typeface, size, style
Use same font for similar sections
Graphic image for headings
Consistency vs. file size
Make Text Readable - Use Restraint



Choose fonts found in most systems
Avoid “ransom note” effect
Choose only up to four variations of type
styles, fonts and sizes
Creating and Editing Text





Word Processor
Corel Draw
Adobe Illustrator
Scanner
OCR-Optical Character Recognition
Using Text on the Internet

Microsoft IE and Netscape determine the
fonts of your web page

To ensure text is displayed in the desired
way:




Use a font set
Use a Cascading Style Sheet
Embed it in your Web pages
Change the text into an image
Graphics in Multimedia Applications
Graphics in Multimedia Applications

Graphical images - used to add
emphasis, direct attention, illustrate
concepts, and provide background
content

Two types of graphics:
1)
2)
Draw-type graphics or vector graphics –
represent an image as a geometric shape
Bitmap graphics – represents the image
as an array of dots, called pixels
Draw Type Graphics

Draw type or vector graphics




Geometric shape stored as set of
instructions
Smaller than bitmap
Resize, rotate, no distortion
No photo quality
Draw-type Example
Scanned image: from Multimedia Concepts – James Shuman
Bitmap Graphics

Bitmaps – array of dots or pixels

Color depth per pixel

High quality pictures

Photo realistic

Larger than draw-type

File size = pixels x color depth / 8
Graphic Image File Sizes

Image file sizes can
become large, you must
balance the need for quality
images with the need for
small file sizes
Graphics Software



Drawing programs – used to create drawtype graphics
Paint programs – used to create bitmap
images
Image editing programs – useful in making
changes, or applying textures or patterns
to existing images
Graphics Software Programs

Drawing programs –
Adobe Illustrator

Paint programs –
Paint Shop Pro

Image-editing
programs –
Photoshop (does the
work of all 3)
Graphics Programs Features







Graphics types
Compatibility
Graphics files – tiff,
jpeg, bmp, gif …
Layers
Image
enhancement
Selection tools
Color adjustments
Graphics Programs Features (Cont.)



Image manipulation
Filters
Antialiasing




Smoothes edges by
blending colors
Text support
Hardware support
Open architecture
Using Graphics on the Internet

Techniques to speed transfer times




File compression – reduces the file size of
a graphic
Load images in stages
Use thumbnails
Use image editing programs
Graphic Image Sources

Alternative image sources







Clip art
Stock photographs
Video images
Still images
Scanned images
Photo CD’s
Screen-capture programs
Other Resources

Some of the sources for font shopping








EyeWire (www.eyewire.com)
garageFonts (www.garagefonts.com)
LetterSpace (www.letterspace.com)
BitStream (www.bitstream.com)
MyFonts (www.myfonts.com)
T26 (www.tw6.com)
P22 (www.p22.com)
FontHaus (www.fonthaus.com)
The End
University of North Texas
Dr. Vicky Cereijo