Multimedia Elements – Multimedia Elements – Text and GraphicsText and Graphics

Unit BUnit B

2

Objectives - TextObjectives - Text

Text in multimedia applicationsText in multimedia applications

Text on the webText on the web

Software for text editingSoftware for text editing

3

Objectives - GraphicsObjectives - Graphics

Graphics in multimedia Graphics in multimedia applicationsapplications

Graphic image file sizesGraphic image file sizes

Software for graphics Software for graphics editingediting

Sources of graphic Sources of graphic imagesimages

Graphics on the webGraphics on the web

4

Using Text in Multimedia Using Text in Multimedia ApplicationsApplications

Be concise; “a picture is Be concise; “a picture is worth a thousand words”worth a thousand words”

Text should fill less than Text should fill less than half the screenhalf the screen

Use appropriate fonts Use appropriate fonts (typefaces) and type (typefaces) and type sizesize

5

Use Fonts To:Use Fonts To:

Focus attentionFocus attention

Enhance readabilityEnhance readability

Set a toneSet a tone

Project an imageProject an image

6

Font TypesFont Types

SerifSerif

Sans SerifSans Serif

DecorativeDecorative

7

Make it ReadableMake it Readable

Body text: use a serif fontBody text: use a serif font– Helps to guide the eyeHelps to guide the eye

Title text: can use a sans serif fontTitle text: can use a sans serif font

SerifSerif

Sans SerifSans Serif

8

Font MeasurementsFont Measurements

Point sizes - 72 points per inchPoint sizes - 72 points per inch

Guidelines:Guidelines:– Headings:Headings: 14-48 point 14-48 point– Subheadings:Subheadings: half the heading size, but half the heading size, but

not smaller than the text blocknot smaller than the text block– Text block:Text block: 10-12 point 10-12 point

72 48 1224

9

Font Formats & ColorsFont Formats & Colors

BoldBold

ItalicItalic

UnderlineUnderline

ColorColor

Userestraint

Userestraint

Beconsistent

Beconsistent

10

Using Text on the WebUsing Text on the Web

First-time Web site First-time Web site visitors stay for less than visitors stay for less than 53 seconds53 seconds

Challenge: get message Challenge: get message across in exciting, across in exciting, creative and visual waycreative and visual way

11

Web Page Text DesignWeb Page Text Design

Determined by:Determined by:– Microsoft Internet ExplorerMicrosoft Internet Explorer– Netscape NavigatorNetscape Navigator

Fonts must be compatible with Fonts must be compatible with browsersbrowsersBrowser can only display common Browser can only display common fonts that are found on the web fonts that are found on the web surfer’s machinesurfer’s machineUse font set to specify multiple Use font set to specify multiple possible fontspossible fonts

ArialTimes

Helvetica

ArialTimes

Helvetica

12

Web Page Text DesignWeb Page Text Design

Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)– Acts as a templateActs as a template– Provides consistency to entire siteProvides consistency to entire site– Can make one change to CSS and Can make one change to CSS and

update entire siteupdate entire site

Embedding fontsEmbedding fonts– OpenType (Microsoft and Adobe)OpenType (Microsoft and Adobe)– TrueDoc (Netscape and Bitstream)TrueDoc (Netscape and Bitstream)

13

Converting Text Into a GraphicConverting Text Into a Graphic

Independent of installed fontsIndependent of installed fonts

DrawbacksDrawbacks– Increase development timeIncrease development time– Increase development costsIncrease development costs– Graphic is larger; increased download timeGraphic is larger; increased download time– Increased maintenance cost; harder to edit Increased maintenance cost; harder to edit

texttext

14

Large Amounts of Web TextLarge Amounts of Web Text

Can you use Can you use another method? another method? – Animation, video or Animation, video or

audio?audio?

Use small text Use small text hyperlink to more hyperlink to more informationinformationUse frames or Use frames or drop-down boxesdrop-down boxes

15

Text Editing SoftwareText Editing Software

Word processing Word processing packages to create initial packages to create initial text text – Word and WordPerfectWord and WordPerfect

Can save in HTML formatCan save in HTML format

16

Other Programs to UseOther Programs to Use

Graphics programs Graphics programs – CorelDRAW and Adobe IllustratorCorelDRAW and Adobe Illustrator

Authoring programs: Authoring programs: – Macromedia Director and AuthorwareMacromedia Director and Authorware

All of the above have text tools All of the above have text tools and special effects and special effects – Animating and distortingAnimating and distorting

17

Font PackagesFont Packages

A Web site that A Web site that sells fontssells fonts

Create/modify Create/modify fonts using fonts using Macromedia Macromedia FontographerFontographer

18

Using Existing TextUsing Existing Text

Obtain electronic files and import Obtain electronic files and import into documentinto document

Use scanner and optical character Use scanner and optical character recognition (OCR) softwarerecognition (OCR) software

19

Fonts and Playback SystemsFonts and Playback Systems

Macintosh (PostScript fonts)Macintosh (PostScript fonts)– HelveticaHelvetica and and TimesTimes

Windows (True Type fonts)Windows (True Type fonts)– Arial and Arial and Times New RomanTimes New Roman

Internet Explorer or Netscape Internet Explorer or Netscape NavigatorNavigator

20

Graphical Images Are Used To:Graphical Images Are Used To:

AddAddEmphasisEmphasis

DirectDirectAttentionAttention

IllustrateIllustrateConceptsConcepts

ProvideProvideBackgroundBackground

21

Graphic Types: Draw-Type Graphic Types: Draw-Type

VectorVector

Geometric shape Geometric shape composed of lines, ovals composed of lines, ovals and arcsand arcs

Uses size, position, shape Uses size, position, shape and relationships between and relationships between themthem

Programs: CorelDRAW Programs: CorelDRAW and Adobe Illustratorand Adobe Illustrator

22

Draw-Type GraphicDraw-Type Graphic

AdvantagesAdvantages– Resize and rotate Resize and rotate

without distortionwithout distortion

– Smaller file size if Smaller file size if simple graphicsimple graphic

– Good for graphics Good for graphics that must retain that must retain distinctive lines distinctive lines when sizes change when sizes change (logos)(logos)

DisadvantagesDisadvantages– More complex it is, More complex it is,

the larger the file the larger the file size and time to size and time to downloaddownload

– Cannot be displayed Cannot be displayed in photo qualityin photo quality

23

Graphic Types: BitmapGraphic Types: Bitmap

Composed of pixelsComposed of pixelsColor depth recorded for each Color depth recorded for each pixelpixelCan become distorted when Can become distorted when resizedresizedGood for photographs and Good for photographs and gradientsgradientsFile size can be quite largeFile size can be quite largePrograms: Adobe Photoshop Programs: Adobe Photoshop and Jasc Paint Shop Proand Jasc Paint Shop Pro

24

Graphic Image File Size Graphic Image File Size ConsiderationsConsiderations

Screen resolutionScreen resolution– Lowest Standard: 640 x 480Lowest Standard: 640 x 480– Highest Standard: 1024 x 768Highest Standard: 1024 x 768

Image size (in pixels)Image size (in pixels)

Color depth of each pixelColor depth of each pixel

25

Color DepthColor Depth

Each pixel can display 1 color to Each pixel can display 1 color to millions of colorsmillions of colors

Depends on number of bits Depends on number of bits specifiedspecified– 8-bit = 256 colors8-bit = 256 colors– 16-bit = 65,000 colors16-bit = 65,000 colors– 24-bit = 16.7 million colors24-bit = 16.7 million colors

26

Color DepthColor Depth

How 4 Bits = 16 ColorsHow 4 Bits = 16 Colors

27

Graphic Image File SizeGraphic Image File Size

Estimating file size:Estimating file size:– Image size in pixels * color depth in bits / 8Image size in pixels * color depth in bits / 8

28

Graphic File FormatsGraphic File Formats

Tagged Image File FormatTagged Image File FormatTagged Image File FormatTagged Image File Format TIFFTIFFTIFFTIFF

Multimedia applications:Multimedia applications:

Web Applications:Web Applications:

Macintosh Picture FormatMacintosh Picture FormatMacintosh Picture FormatMacintosh Picture FormatPICTPICTPICTPICT

Windows PaintWindows PaintWindows PaintWindows Paint PCXPCXPCXPCX

BitmapBitmapBitmapBitmapBMPBMPBMPBMP

Portable Network GraphicsPortable Network GraphicsPortable Network GraphicsPortable Network GraphicsPNGPNGPNGPNG

Graphics Interchange File FormatGraphics Interchange File FormatGraphics Interchange File FormatGraphics Interchange File Format GIFGIFGIFGIF

Joint Photographer Experts GroupJoint Photographer Experts GroupJoint Photographer Experts GroupJoint Photographer Experts GroupJPEGJPEGJPEGJPEG

29

Graphics Software TypesGraphics Software Types

Drawing programsDrawing programs

Paint programsPaint programs

Image editing Image editing programsprograms

30

Drawing ProgramsDrawing Programs

Create vector Create vector graphicsgraphics

Freehand and Freehand and geometric geometric shapesshapes

IllustratorIllustrator

31

Paint ProgramsPaint Programs

Create bitmap Create bitmap graphicsgraphics

Use tools Use tools (brushes/pens) (brushes/pens) like artistslike artists

PaintShop ProPaintShop Pro

32

Image Editing ProgramsImage Editing Programs

Edit existing Edit existing images & images & photographsphotographsChange Change brightness & brightness & contrastcontrastApply texturesApply texturesPhotoshopPhotoshop

33

Graphic Program FeaturesGraphic Program Features

Types of images supported Types of images supported (bitmap/vector)(bitmap/vector)Cross-platform compatibilityCross-platform compatibilityFile formats supported and ability to File formats supported and ability to convertconvertObject layering supportObject layering supportImage enhancement toolsImage enhancement toolsSelection tool sophistication (masks)Selection tool sophistication (masks)Color adjustment capabilityColor adjustment capability

34

Graphic Program Advanced Graphic Program Advanced FeaturesFeatures

35

Graphic Image Source IssuesGraphic Image Source Issues

CopyrightCopyright: provides legal : provides legal protection and grants certain protection and grants certain rights to its ownerrights to its ownerClip artClip artStock PhotographsStock Photographs– Getty ImagesGetty Images– Can search via keywordsCan search via keywords– Royalty-free art Royalty-free art – Understand terms of agreementUnderstand terms of agreement

36

Graphic Image SourcesGraphic Image Sources

Video images: can save Video images: can save individual framesindividual framesStill images: digital camerasStill images: digital camerasScanned images: can Scanned images: can zoom/crop/resizezoom/crop/resizePhoto CDsPhoto CDsScreen-capture programs Screen-capture programs (Hijack Pro and Collage (Hijack Pro and Collage Plus)Plus)

37

Using Graphics on the WebUsing Graphics on the Web

ObjectiveObjective– Speed up transfer timeSpeed up transfer time– Give developer and user some control Give developer and user some control

over the transfer processover the transfer process

TechniquesTechniques– File compressionFile compression– Load in stagesLoad in stages– Use thumbnailsUse thumbnails

38

File CompressionFile Compression

Reduces file sizeReduces file sizeCompress before sendingCompress before sendingDecompress before displayingDecompress before displayingGIF, JPEG and PNGs GIF, JPEG and PNGs automatically compressed when automatically compressed when createdcreatedAnalyzes image and notes Analyzes image and notes repeating patterns; reduces repeating patterns; reduces repeated pattern to single unitrepeated pattern to single unit

Reduces file sizeReduces file sizeCompress before sendingCompress before sendingDecompress before displayingDecompress before displayingGIF, JPEG and PNGs GIF, JPEG and PNGs automatically compressed when automatically compressed when createdcreatedAnalyzes image and notes Analyzes image and notes repeating patterns; reduces repeating patterns; reduces repeated pattern to single unitrepeated pattern to single unit

39

File CompressionFile Compression

Information for block is stored together

Block is reassembled from the stored information

40

Load Graphic in StagesLoad Graphic in Stages

Faint at first and Faint at first and image gets sharperimage gets sharper

Save images asSave images as– Interlaced GIFsInterlaced GIFs– Progressive JPEGsProgressive JPEGs

41

ThumbnailsThumbnails

42

Issue: Copyrights and Issue: Copyrights and MultimediaMultimedia

Availability of images on the webAvailability of images on the web

Copyright lawsCopyright laws

Fair UseFair Use

Public domainPublic domain

Derivative worksDerivative works

TrademarkTrademark

Right to publicityRight to publicity

Multimedia Elements – Multimedia Elements – Text and GraphicsText and Graphics

EndEnd