1. Multimedia Elements – Text and Graphics Unit B

2. 2 Objectives - Text Text in multimedia applications Text on the web Software for text editing

3. 3 Objectives - Graphics Graphics in multimedia applications Graphic image file sizes Software for graphics editing Sources of graphic images Graphics on the web

4. 4 Using Text in Multimedia Applications Be concise; “a picture is worth a thousand words” Text should fill less than half the screen Use appropriate fonts (typefaces) and type size

5. 5 Use Fonts To: Focus attention Enhance readability Set a tone Project an image

6. 6 Font Types Serif Sans Serif Decorative

7. 7 Make it Readable Body text: use a serif font –Helps to guide the eye Title text: can use a sans serif font Serif Sans Serif

8. 8 Font Measurements Point sizes - 72 points per inch Guidelines: –Headings: 14-48 point –Subheadings: half the heading size, but not smaller than the text block –Text block: 10-12 point 72 48 12 24

9. 9 Font Formats & Colors BoldItalicUnderlineColor Use restraint Use restraint Be consistent Be consistent

10. 10 Using Text on the Web First-time Web site visitors stay for less than 53 seconds Challenge: get message across in exciting, creative and visual way

11. 11 Web Page Text Design Determined by: –Microsoft Internet Explorer –Netscape Navigator Fonts must be compatible with browsers Browser can only display common fonts that are found on the web surfer’s machine Use font set to specify multiple possible fonts Arial Times Helvetica Arial Times Helvetica

12. 12 Web Page Text Design Cascading Style Sheet (CSS) –Acts as a template –Provides consistency to entire site –Can make one change to CSS and update entire site Embedding fonts –OpenType (Microsoft and Adobe) –TrueDoc (Netscape and Bitstream)

13. 13 Converting Text Into a Graphic Independent of installed fonts Drawbacks –Increase development time –Increase development costs –Graphic is larger; increased download time –Increased maintenance cost; harder to edit text

14. 14 Large Amounts of Web Text Can you use another method? –Animation, video or audio? Use small text hyperlink to more information Use frames or drop-down boxes

15. 15 Text Editing Software Word processing packages to create initial text –Word and WordPerfect Can save in HTML format

16. 16 Other Programs to Use Graphics programs –CorelDRAW and Adobe Illustrator Authoring programs: –Macromedia Director and Authorware All of the above have text tools and special effects –Animating and distorting

17. 17 Font Packages A Web site that sells fonts Create/modify fonts using Macromedia Fontographer

18. 18 Using Existing Text Obtain electronic files and import into document Use scanner and optical character recognition (OCR) software

19. 19 Fonts and Playback Systems Macintosh (PostScript fonts) –Helvetica and Times Windows (True Type fonts) –Arial and Times New Roman Internet Explorer or Netscape Navigator

20. 20 Graphical Images Are Used To: AddEmphasisDirectAttentionIllustrateConceptsProvideBackground

21. 21 Graphic Types: Draw-Type Vector Geometric shape composed of lines, ovals and arcs Uses size, position, shape and relationships between them Programs: CorelDRAW and Adobe Illustrator

22. 22 Draw-Type Graphic Advantages –Resize and rotate without distortion –Smaller file size if simple graphic –Good for graphics that must retain distinctive lines when sizes change (logos) Disadvantages –More complex it is, the larger the file size and time to download –Cannot be displayed in photo quality

23. 23 Graphic Types: Bitmap Composed of pixels Color depth recorded for each pixel Can become distorted when resized Good for photographs and gradients File size can be quite large Programs: Adobe Photoshop and Jasc Paint Shop Pro

24. 24 Graphic Image File Size Considerations Screen resolution –Lowest Standard: 640 x 480 –Highest Standard: 1024 x 768 Image size (in pixels) Color depth of each pixel

25. 25 Color Depth Each pixel can display 1 color to millions of colors Depends on number of bits specified –8-bit = 256 colors –16-bit = 65,000 colors –24-bit = 16.7 million colors

26. 26 Color Depth How 4 Bits = 16 Colors

27. 27 Graphic Image File Size Estimating file size: –Image size in pixels * color depth in bits / 8

28. 28 Graphic File Formats Tagged Image File Format TIFFTIFF Multimedia applications: Web Applications: Macintosh Picture Format PICTPICT Windows Paint PCXPCX BitmapBitmap BMPBMP Portable Network Graphics PNGPNG Graphics Interchange File Format GIFGIF Joint Photographer Experts Group JPEGJPEG

29. 29 Graphics Software Types Drawing programs Paint programs Image editing programs

30. 30 Drawing Programs Create vector graphics Freehand and geometric shapes Illustrator

31. 31 Paint Programs Create bitmap graphics Use tools (brushes/pens) like artists PaintShop Pro

32. 32 Image Editing Programs Edit existing images & photographs Change brightness & contrast Apply textures Photoshop

33. 33 Graphic Program Features Types of images supported (bitmap/vector) Cross-platform compatibility File formats supported and ability to convert Object layering support Image enhancement tools Selection tool sophistication (masks) Color adjustment capability

34. 34 Graphic Program Advanced Features

35. 35 Graphic Image Source Issues Copyright: provides legal protection and grants certain rights to its owner Clip art Stock Photographs –Getty Images –Can search via keywords –Royalty-free art –Understand terms of agreement

36. 36 Graphic Image Sources Video images: can save individual frames Still images: digital cameras Scanned images: can zoom/crop/resize Photo CDs Screen-capture programs (Hijack Pro and Collage Plus)

37. 37 Using Graphics on the Web Objective –Speed up transfer time –Give developer and user some control over the transfer process Techniques –File compression –Load in stages –Use thumbnails

38. 38 File Compression Reduces file size Compress before sending Decompress before displaying GIF, JPEG and PNGs automatically compressed when created Analyzes image and notes repeating patterns; reduces repeated pattern to single unit Reduces file size Compress before sending Decompress before displaying GIF, JPEG and PNGs automatically compressed when created Analyzes image and notes repeating patterns; reduces repeated pattern to single unit

39. 39 File Compression Information for block is stored together Block is reassembled from the stored information

40. 40 Load Graphic in Stages Faint at first and image gets sharper Save images as –Interlaced GIFs –Progressive JPEGs

41. 41 Thumbnails

42. 42 Issue: Copyrights and Multimedia Availability of images on the web Copyright laws Fair Use Public domain Derivative works Trademark Right to publicity

43. Multimedia Elements – Text and Graphics End