1. Multimedia Elements – Text and Graphics

2. 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

3. 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

4. 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

5. Examples of: Serif, Sans Serif, and Other Fonts Scanned image: from Multimedia Concepts – James Shuman

6. 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

7. 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

8. Creating and Editing Text Word Processor Corel Draw Adobe Illustrator Scanner OCR-Optical Character Recognition

9. 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

10. Graphics in Multimedia Applications

11. 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

12. 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

13. Draw-type Example Scanned image: from Multimedia Concepts – James Shuman

14. 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

15. 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

16. 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

17. Graphics Software Programs Drawing programs – Adobe Illustrator Paint programs – Paint Shop Pro Image-editing programs – Photoshop (does the work of all 3)

18. Graphics Programs Features Graphics types Compatibility Graphics files – tiff, jpeg, bmp, gif … Layers Image enhancement Selection tools Color adjustments

19. Graphics Programs Features (Cont.) Image manipulation Filters Antialiasing  Smoothes edges by blending colors Text support Hardware support Open architecture

20. 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

21. Graphic Image Sources Alternative image sources  Clip art  Stock photographs  Video images  Still images  Scanned images  Photo CD’s  Screen-capture programs

22. Other Resources Some of the sources for font shopping EyeWire (www.eyewire.com) garageFonts (www.garagefonts.com)www.garagefonts.com LetterSpace (www.letterspace.com)www.letterspace.com BitStream (www.bitstream.com)www.bitstream.com MyFonts (www.myfonts.com)www.myfonts.com T26 (www.tw6.com) P22 (www.p22.com) FontHaus (www.fonthaus.com)

23. The End University of North Texas Dr. Vicky Cereijo