cgmb113/ citb 123: multimedia technology chapter five multimedia building blocks i text 1 saraswathy...

26
CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela Zainal Abidin © UNITEN 2004/2005

Upload: beverly-nash

Post on 18-Jan-2016

241 views

Category:

Documents


6 download

TRANSCRIPT

Page 1: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGYCHAPTER FIVE

MULTIMEDIA BUILDING BLOCKS ITEXT

1

SARASWATHY SHAMINIAdapted from Notes Prepared by:

Noor Fardela Zainal Abidin© UNITEN 2004/2005

Page 2: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

22222

Objectives

At the end of this chapter, students should be able to:• Understand the history and development of text • Understand the importance and significance of text in

multimedia • Identify the terms and concept related to text • Describe the application of text in multimedia systems

Page 3: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

3

Text in History

•Text came into use about 6,000 years ago

Ramesses the IVth offering Maat to Amon and Khonsou

• It was mainly used for vital information at the time (politics, taxes etc.)

Page 4: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

4

Text in History

• Originated from Mesopotamia, Egypt, Sumeria and Babylonia• Initially text was written in symbols such as pictographic signs and cuneiforms• Johann Gensfleisch zum Gutenberg’s printing press revolutionized text in the 15th century

Page 5: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Importance of Text in a Multimedia Presentation•Words and symbols in any form, spoken or written,

are the most common means of communication.•Text is a vital element of multimedia menus,

navigation systems, and content.•Factors affecting legibility of text:▫Size▫Background and foreground color▫Style▫ Leading

5

Page 6: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

The power of meaning…•Word must be chosen carefully▫Precise and accurate meaning to describe what you mean▫Word must be chosen to illustrate to a few meaning

•Word appears in titles, menus and navigational aids.•Test the words that you plan to use on several users

and observe their reaction.

6

Page 7: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Understanding Fonts and Typefaces• Typeface: a family of similar characters that may include

many sizes and styles ARIAL Courier Times

• Font: characters of a single size and style, which are part of the same font face family▫ Arial – Arial Italic – Arial size 28 ▫ Arial Narrow▫ Times – Times extra – Times bold

• Style: attributes of a font, such as italic, bold, underline, shadow shadow etc.

7

Page 8: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Understanding Fonts and Typefaces• The study of fonts and typefaces includes the following:▫Font styles▫Font sizes▫Cases.▫Serif versus Sans Serif

• Font styles include:▫Boldface▫ Italic▫Underlining▫Outlining

8

Page 9: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Understanding Fonts and Typefaces

• Font size is measured in points.

• Character metrics are the general measurements applied to individual characters.

• Kerning is the spacing between character pairs.

• Leading is the space between lines.

9

Line 1

Line 2Leading

Page 10: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Understanding Fonts and Typefaces•Cases▫A capitalized letter is referred to as 'uppercase', while

a small letter is referred to as 'lowercase.'▫Placing an uppercase letter in the middle of a word is

referred to as intercap.

10

Page 11: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Understanding Fonts and Typefaces•Serif Vs Sans Serif▫Serif is the little decoration at the end of a letter

stroke.▫Serif fonts are used for body text.▫Sans serif fonts do not have a serif at the end of a

letter stroke. ▫These fonts are used for headlines and bold

statements.

11

Page 12: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Understanding Fonts and Typefaces•Verdana is a sans serif type •Times Roman is a serif type

12

EESerif Sans serif

VerdanaTimes New Romans

Page 13: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Monospaced vs propotional fonts.• In a monospaced font, every

character occupies the same amount of space horizontally, regardless of its shape.

• Text in monospaced font looks as if it was produced on a typewriter.

▫ Lucida typewrite is an example for monospaced font.

• In a proportional font, the space each letter occupies depends on the width of the letter shape.

• This produce a more even appearance, and you can fit more words in one line.

▫ Tahoma is an example for proportional font.

13

Page 14: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

14

Measurement of Type•The height of characters in a font is measured in points. One point being approximately 1/72 inch.

•The width is measured by pitch, which refers to how many characters can fit in an inch. Common pitch values are 10 and 12.

Page 15: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

•Distinguish between display fonts and text fonts▫Display fonts:

are designed for short pieces of text, such as headings, slogan or signs. They are not intended for use in lengthy passages.

Are designed in fancy style. ( This is the example )▫Text fonts:

must be unobtrusive, so they do not intrude on the reader and interfere with the primary message of the text.

Must easy to read, so they do not cause fatigue when they are read for hours at a time.

Usually are fonts which are familiar to the users. (This is the example)

15

Issues when designing with text

Page 16: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

•Boldface is intrusive, so reserve it for headings or similar use.

• Italic text, because of its slant, often render badly at low resolution, making it hard to read

•Consider legibility when choosing fontcan you read this? Or this word ?

Is this too small? Or is this readable ?

•Avoid too many different faces

16

Issues when designing with text

Page 17: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

•Strike the density balance•Minimize lines of centered text•Distinguish text link with colours and underlining•Explore text colours and backgrounds•Use distorted layout to grab attention

17

Issues when designing with text

Page 18: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

•Adjust leading and kerning for readability.▫ In text blocks, adjust the leading for the most pleasing

spacing. Lines too tightly packed are difficult to read.•Vary the size of the font in proportion to the

importance of the message you are delivering.•Remember that long continuous texts covering

multiple pages are tiring to read. •Always breakdown information into smaller chunk,

and summaries them.

18

Issues when designing with text

Page 19: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

•Use anti-aliased text: ▫anti-aliasing blends the colours along the edges of the

letters (called dithering) to create a soft transition between letter and its background.

▫Anti-aliasing also smoothes jaggies at the edge of characters.

19

Issues when designing with text

Page 20: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

•True type font: the same font will be used on the printer and the screen (as oppose to scalable printer resident font)▫True type : Arial, Times New Roman▫Scalable printer resident: Antique olive, CG Omega

20

Issues when designing with text

Page 21: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Issues when designing with text

•Font compatibility: not all font is available on every operating system.

•Choose regularly used fonts such as Arial, Times New Roman, Courier

• If you want to use your own font, that font must be first installed.

21

Page 22: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Designing menu and icon•Menu: choose word with precise meaning• Icon/symbols : choose icon which has very few meaning for

interpretation, or go for something which is globally understood.

•Can be useful if language barrier is an issue•Consider using text label together with icons.

22

Page 23: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Animating text•Animated text can grab attention•Do not overdo it. ▫Too many animation and attention grabbers will

distract users attention.

23

Page 24: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Hypertext and Hypermedia

•Hypermedia provides a structure of links through which a user can navigate and interact.

•Hypermedia structure:▫Hypermedia elements are called nodes▫Nodes are connected using links▫A linked points is called an anchor

•Hypertext words are linked to other elements•Hypertext is usually searchable.

24

Page 25: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

The final rule…•Experiment your work by try and error.•Test your work with users – accept critique and

improvise.

25

Page 26: CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY CHAPTER FIVE MULTIMEDIA BUILDING BLOCKS I TEXT 1 SARASWATHY SHAMINI Adapted from Notes Prepared by: Noor Fardela

Reference

•Vaughan Tay, Multimedia: Making It work. 7th Edition. McGraw Hill

26