Transcript Unit B.pps

Multimedia Elements –
Text and Graphics
Unit B
Objectives - Text
Text in multimedia applications
Text on the web
Software for text editing
2
Objectives - Graphics
Graphics in multimedia
applications
Graphic image file sizes
Software for graphics
editing
Sources of graphic
images
Graphics on the web
3
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
4
Use Fonts To:
Focus attention
Enhance readability
Set a tone
Project an image
5
Font Types
Serif
Sans Serif
Decorative
6
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
7
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
24
12
8
Font Formats & Colors
Use
restraint
Bold
Italic
Underline
Color
Be
consistent
9
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
10
Web Page Text Design
Determined by:
– Microsoft Internet Explorer
– Netscape Navigator
Arial
Times
Helvetica
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
11
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)
12
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
13
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
14
Text Editing Software
Word processing
packages to create initial
text
– Word and WordPerfect
Can save in HTML format
15
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
16
Font Packages
A Web site that
sells fonts
Create/modify
fonts using
Macromedia
Fontographer
17
Using Existing Text
Obtain electronic files and import
into document
Use scanner and optical character
recognition (OCR) software
18
Fonts and Playback Systems
Macintosh (PostScript fonts)
– Helvetica and Times
Windows (True Type fonts)
– Arial and Times New Roman
Internet Explorer or Netscape
Navigator
19
Graphical Images Are Used To:
Add
Emphasis
Direct
Attention
Illustrate
Concepts
Provide
Background
20
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
21
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
22
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
23
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
24
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
25
Color Depth
How 4 Bits = 16 Colors
26
Graphic Image File Size
Estimating file size:
– Image size in pixels * color depth in bits / 8
27
Graphic File Formats
Multimedia applications:
BMP
Bitmap
Windows Paint
PICT
PCX
Macintosh Picture Format
Tagged Image File Format
TIFF
Web Applications:
JPEG Joint Photographer Experts Group
Graphics Interchange File Format
PNG
GIF
Portable Network Graphics
28
Graphics Software Types
Drawing programs
Paint programs
Image editing
programs
29
Drawing Programs
Create vector
graphics
Freehand and
geometric
shapes
Illustrator
30
Paint Programs
Create bitmap
graphics
Use tools
(brushes/pens)
like artists
PaintShop Pro
31
Image Editing Programs
Edit existing
images &
photographs
Change
brightness &
contrast
Apply textures
Photoshop
32
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
33
Graphic Program Advanced
Features
34
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
35
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)
36
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
37
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
38
File Compression
Information for block is stored together
Block is reassembled from
the stored information
39
Load Graphic in Stages
Faint at first and
image gets sharper
Save images as
– Interlaced GIFs
– Progressive JPEGs
40
Thumbnails
41
Issue: Copyrights and
Multimedia
Availability of images on the web
Copyright laws
Fair Use
Public domain
Derivative works
Trademark
Right to publicity
42
Multimedia Elements –
Text and Graphics
End