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 Be consistent 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: 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 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