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 PresentationTRANSCRIPT
![Page 1: Multimedia Elements – Text and Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/1.jpg)
Multimedia Elements – Text and Graphics
![Page 2: Multimedia Elements – Text and Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/3.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/5.jpg)
Examples of: Serif, Sans Serif, and Other Fonts
Scanned image: from Multimedia Concepts – James Shuman
![Page 6: Multimedia Elements – Text and Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/8.jpg)
Creating and Editing Text
Word Processor Corel Draw Adobe Illustrator Scanner OCR-Optical Character Recognition
![Page 9: Multimedia Elements – Text and Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/9.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/10.jpg)
Graphics in Multimedia Applications
![Page 11: Multimedia Elements – Text and Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/13.jpg)
Draw-type Example
Scanned image: from Multimedia Concepts – James Shuman
![Page 14: Multimedia Elements – Text and Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/16.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/22.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022081420/56813ce7550346895da6902e/html5/thumbnails/23.jpg)
The End
University of North Texas
Dr. Vicky Cereijo