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

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

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 (
garageFonts (
LetterSpace (
BitStream (
MyFonts (
T26 (
P22 (
FontHaus (

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