Multimedia Elements – Text and Graphics

23
Multimedia Elements – Text and Graphics

description

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. - PowerPoint PPT Presentation

Transcript of Multimedia Elements – Text and Graphics

Page 1: Multimedia Elements – Text and Graphics

Multimedia Elements – Text and Graphics

Page 2: 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

Page 3: Multimedia Elements – Text and Graphics

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

Page 4: Multimedia Elements – Text and Graphics

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

Page 5: Multimedia Elements – Text and Graphics

Examples of: Serif, Sans Serif, and Other Fonts

Scanned image: from Multimedia Concepts – James Shuman

Page 6: Multimedia Elements – Text and Graphics

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

Page 7: Multimedia Elements – Text and Graphics

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

Page 8: Multimedia Elements – Text and Graphics

Creating and Editing Text

Word Processor Corel Draw Adobe Illustrator Scanner OCR-Optical Character Recognition

Page 9: Multimedia Elements – Text and Graphics

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

Page 10: Multimedia Elements – Text and Graphics

Graphics in Multimedia Applications

Page 11: Multimedia Elements – Text and Graphics

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

Page 12: Multimedia Elements – Text and Graphics

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

Page 13: Multimedia Elements – Text and Graphics

Draw-type Example

Scanned image: from Multimedia Concepts – James Shuman

Page 14: Multimedia Elements – Text and Graphics

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

Page 15: Multimedia Elements – Text and Graphics

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

Page 16: Multimedia Elements – Text and Graphics

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

Page 17: Multimedia Elements – Text and Graphics

Graphics Software Programs

Drawing programs – Adobe Illustrator

Paint programs – Paint Shop Pro

Image-editing programs – Photoshop (does the work of all 3)

Page 18: Multimedia Elements – Text and Graphics

Graphics Programs Features

Graphics types Compatibility Graphics files – tiff,

jpeg, bmp, gif … Layers Image

enhancement Selection tools Color adjustments

Page 19: Multimedia Elements – Text and Graphics

Graphics Programs Features (Cont.) Image manipulation Filters Antialiasing

Smoothes edges by blending colors

Text support Hardware support Open architecture

Page 20: Multimedia Elements – Text and Graphics

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

Page 21: Multimedia Elements – Text and Graphics

Graphic Image Sources

Alternative image sources Clip art Stock photographs Video images Still images Scanned images Photo CD’s Screen-capture programs

Page 22: Multimedia Elements – Text and Graphics

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)

Page 23: Multimedia Elements – Text and Graphics

The End

University of North Texas

Dr. Vicky Cereijo