Multimedia Elements – Text and Graphics Unit B. 2 Objectives - Text Text in multimedia...
-
Upload
trevor-pearson -
Category
Documents
-
view
243 -
download
1
Transcript of Multimedia Elements – Text and Graphics Unit B. 2 Objectives - Text Text in multimedia...
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