Chap 3 PDF

MMGD0203 Multimedia Design
MMGD0203
MULTIMEDIA DESIGN
Chapter 3
Graphics and Animations
1
Topics:
• Definition of Graphics • Graphic File Size

• Why use Graphics? • Introduction to
• Graphics Categories Animation
• Graphics Qualities • Principles of Animation
• File Formats • Types of Animation
• Types of Graphics
2
Definition of Graphics
• Graphic is a digital representation of non-text

information such as chart, graph, illustration etc.
• Picture or image made with the assistance of
computers.
• Many visual representations are generally much
more effective at conveying information than text.
3
Usages of Graphics
• To add emphasis
• Direct attention
• Illustrate concepts
• Provide background content
4
Advantages of Graphics in Multimedia
• Convey information more quickly than when using

text
• Make complex information simple
• Enhance online teaching and learning
• Enhance communication with some disabled groups,
particularly those with learning difficulties or cognitive
impairments
5
Disadvantages of Graphics in Multimedia
• Take longer to download

• Require the use of plug-ins that the user may not
have or be able to install
• Create accessibility barriers for some users
6
Graphics Categories
• There are two categories of graphics :

– Vector
– Bitmap
7
Vector Graphics
• Images created with software that

uses geometrical formulas to
represent images.
• Composed of individual elements,
eg, arc, line, polygon, with their
own attributes that can be
individually edited.
• Can be created using any drawing
software, eg: Illustrator.
8
Vector Graphics - Advantages
• The ability to resize and rotate a graphic without

distortions a major advantage of vector graphics.
• Another advantage is their smaller file size.
9
Vector Graphics - Disadvantages
• One of the drawbacks of vector graphics is that the

more complex they are, the larger the file size and
the longer they take to appear on the screen.
• Another disadvantage is that they cannot display
photorealistic quality.
10
Bitmap Graphics
• Bitmap graphics are also called

raster graphics.
• A bitmap represents the image as
an array of dots, called pixels.
• Bitmap graphics are resolution-
dependent and generate large file
sizes.
11
Bitmap Graphics - Advantages
• The bitmap can be more photorealistic.

• We can set the colour of every individual pixel in the
image
12
Bitmap Graphics - Disadvantages
• Bitmaps are memory intensive, and the higher the

resolution, the larger the file size.
• When an image is enlarged, the individual coloured
squares become visible and the illusion of a smooth
image is lost to the viewer.
13
Bitmap Graphics
Original image After scaled up
14
Bitmap Image Quality
Three factors:
• Image Size
• Color Depth
• Resolution
15
Image Size
• Image size refers to the height and width of the

image, measured in inches, centimeters, pixels, or
any other unit of measure.
• Alternatively, if the image size is measured in dots or
pixels, then you know exactly how much image data
exists because a 300 pixel by 500 pixel image
contains 15,000 pixels no matter how many pixels
you designate per inch.
16
Color Depth
• Color Depth or Bit Depth refers to the number of bits

used to describe the color of a single pixel.
• It determines the number of colors that can be
displayed at one time.
17
Color Depth
Color Depth No. of Colors

1 bit 2
2 bit 4
4 bit 16
8 bit 256
16 bit 65,536
24 bit 16,777,216
32 bit 16,777,216 + Transparent
18
Color Depth
19
Resolution
• The resolution of the image refers to the number of

pixel in the image.
• It also refers to the sharpness and clarity of an
image.
• You can think of a bitmapped image as a piece of
graph paper, of any size, that has had each square
filled in by a color.
• The squares are called dots or pixels.
20
Resolution
21
Digital Image File Formats
• Microsoft Bitmap (BMP)

• Joint Photographic Experts Group (JPEG)
• Tag Image File Format (TIFF)
• Raw Image Format (RAW)
• Portable Network Graphic (PNG)
• Graphic Interchange Format (GIF)
• Windows Metafile (WMF)
22
Sources
• Clip art
• Stock photographs
• Video images
• Still images
• Scanned images
• Photo CD’s
• Screen-capture programs
23
Calculate Digital Image File Size
File size (byte) = (height x width x color depth)

8
24
Calculate Bitmap Image File Size
Example 1:
• A full screen graphic resolution (640 x 480 pixels) at

an 8-bit color will yield the following file size:
(640 x 480 x 8) / 8 = 307200 bytes (b)
25
Calculate Bitmap Image File Size
Example 2:
• A full screen graphic resolution (320 x 240 pixels)

with 16-bit colors will yield the following file size:
(320 x 240 x 16) / 8 = 153600 bytes (b)
26
File Compression
Two types of file compression:

• Lossless
• Lossy
27
File Compression
Lossless Compression
• Lossless compression algorithms reduce file size

without losing image quality, though they are not
compressed as small a file as a lossy compression
file.
28
File Compression
Lossy Compression
• A lossy compression method is one where

compressing data and then decompressing it
retrieves data that is different from the original, but is
close enough to be useful in some way.
• Lossy compression is most commonly used to
compress multimedia data (audio, video, still images)
29
Working with Graphics
• Select the right kind of graphics for the job

• Select the right graphics tool for the job
• Select the minimum color depth that is appropriate to
your application
• Set up your delivery system correctly.
• Select bitmap file formats for quality and portability
• Use vector graphics formats that are understood by
your authoring system
30
Animations
• A simulation of movement created by

displaying a series of pictures, or
frames.
• Entertainment multimedia titles in
general, and children’s titles
specifically, rely heavily on animation.
31
Animations
• Animations are useful in multimedia in the areas of

entertainment, education, and training.
• They can be used to create simplified illustrations of
a simulation or dramatization.
• They can be much easier to understand because
they are less complex than video.
32
Animations - Usages
• Allows for real world processes to be modelled.

• Enriching graphical representations.
• Attracting attention.
• Visual interest.
33
Types of Computer Animation
• 2D animation
• 3D animation
34
2D Animations
• Two dimensional (2D) animation software adds

movement and action to static images.
• These programs use either vector drawn or
bitmapped images as objects.
• The motion of animation is perceived by the viewer
from a series of frames.
• For the motion to appear smooth a minimum of 15
frames persecond (fps) is generally required.
35
2D Animations
• 2D animation methods:
– Cel Animation
– Path Animation
36
Cel Animation
• Cel animation is based on a series of frames or cels

in which the object is redrawn in each consecutive cel
to depict motion.
• Cel comes from the word celluloid (a transparent
sheet material) which was first used to draw the
images and place them on a stationary background.
37
Cel Animation
38
Path Animation
• Path Based animation is the simplest form of

animation and the easiest to learn.
• It moves an object along a predetermined path on the
screen.
• The path could be a straight line or it could include
any number of curves.
• Often the object does not change, although it might
be resized or reshaped.
39
Path Animation
40
3D Animations
• Creating 3D animation is considerably more complex

than 2D animation.
• It involves two steps :
– modeling
– rendering
41
3D Modeling
• 3D modeling is the process of developing a

mathematical, wireframe representation of any
three-dimensional object (either inanimate or
living) via specialized software.
• The product is called a 3D model.
• Models may be created automatically or manually.
42
3D Modeling
43
3D Rendering
• 3D rendering is the 3D computer graphics process

of automatically converting 3D wire frame models into
2D images with 3D photorealistic effects on a
computer.
• Rendering may take from seconds to days for a
single image/frame.
• In general, different methods are better suited for
either photo-realistic rendering, or real-time
rendering.
44
3D Rendering
45
Animation File Formats
• Graphic Interchange Format (GIF)

• Flash FLA Project File Format (FLA)
• Flash (SWF)
• Multi-image Network Graphics (MNG)
46
Difference between Animation and Video
• Note the difference between animation and video.

• Video takes continuous motion and breaks it up into
discrete frames.
• Animation starts with independent pictures and puts
them together to form the illusion of continuous
motion.
47
Lab Exercise:
1. Search and download image/animation from the

Internet.
2. Using online image editor:
http://pixlr.com/
3. Using online animation tool:
http://antimatter15.com/ajaxanimator/wave/
48
Lab Exercise:
4. Using online 3D tool

http://www.3dtin.com
49

Chap 3 PDF

Uploaded by

Chap 3 PDF

Uploaded by

MMGD0203 Multimedia Design

• Definition of Graphics • Graphic File Size

• Graphic is a digital representation of non-text

Advantages of Graphics in Multimedia

• Convey information more quickly than when using

Disadvantages of Graphics in Multimedia

• Take longer to download

• There are two categories of graphics :

• Images created with software that

Vector Graphics - Advantages

• The ability to resize and rotate a graphic without

Vector Graphics - Disadvantages

• One of the drawbacks of vector graphics is that the

• Bitmap graphics are also called

Bitmap Graphics - Advantages

• The bitmap can be more photorealistic.

Bitmap Graphics - Disadvantages

• Bitmaps are memory intensive, and the higher the

Original image After scaled up

Bitmap Image Quality

• Image size refers to the height and width of the

• Color Depth or Bit Depth refers to the number of bits

Color Depth No. of Colors

• The resolution of the image refers to the number of

Digital Image File Formats

• Microsoft Bitmap (BMP)

Calculate Digital Image File Size

File size (byte) = (height x width x color depth)

Calculate Bitmap Image File Size

• A full screen graphic resolution (640 x 480 pixels) at

(640 x 480 x 8) / 8 = 307200 bytes (b)

Calculate Bitmap Image File Size

• A full screen graphic resolution (320 x 240 pixels)

(320 x 240 x 16) / 8 = 153600 bytes (b)

Two types of file compression:

• Lossless compression algorithms reduce file size

• A lossy compression method is one where

Working with Graphics

• Select the right kind of graphics for the job

• A simulation of movement created by

• Animations are useful in multimedia in the areas of

• Allows for real world processes to be modelled.

Types of Computer Animation

• Two dimensional (2D) animation software adds

• Cel animation is based on a series of frames or cels

• Path Based animation is the simplest form of

• Creating 3D animation is considerably more complex

• 3D modeling is the process of developing a

• 3D rendering is the 3D computer graphics process

Animation File Formats

• Graphic Interchange Format (GIF)

Difference between Animation and Video

• Note the difference between animation and video.

1. Search and download image/animation from the

4. Using online 3D tool

You might also like