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

Hard to read Used for emphasis

Serif 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) Draw-type graphics or vector graphics – represent an image as a geometric shape

2) 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 draw-type 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