GM311 Introduction to Multimedia

1
Course Content
 Lecture 00 : Course Information
 Lecture 01: Introduction.
 Lecture 02: Vector Graphics.
 Lecture 03:Bitmapped Images.
 Lecture 04:Colour.
 Lecture 05:Video.
 Lecture 06:Animation.
 Lecture 07: 7th Week Exam
 Lecture 08: Sound.
 Lecture 09: Text and Typography.
 Lecture 10: Hypermedia & Interactivity.
 Lecture 11: Design Principles.
 Lecture 12: Accessibility.
 Lecture 13: 12th Week Exam
 Lecture 14: Multimedia and Networks.
 Lecture 15: Student Presentations
 Introduction
 Image is a spatial representation of an object or a
scene. (image of a person, place, object)

 Graphic is a broader and general definition which

includes:
Pictures or Photographs
Drawings or Line arts
Clip arts
Buttons and Banner
Charts and graphs
Backgrounds
Icons
 Picture Vs Graphics / Image
Pictures:
 Pictures are found in the world which is external
to the computers.

Images :
 Images are the 2-Dimensional digital
representations of pictures found in computers.
 Computer attempts to duplicate the “look and
feel” of a picture via storing and processing.
 Therefore, an image is a “realistic” version of the
original picture ; dependent on the quality and
capabilities of the computer and the graphic artist’s
ability to use the software.
Graphics in Multimedia Applications
 Graphical images - used to add emphasis,
direct attention, illustrate concepts, and
provide background content
 Two types of graphics:
1) Draw-type graphics or vector graphics –
represent an image as a geometric shape
2) Raster (Bitmap) graphics – represents the
image as an array of dots, called pixels
 Representations in graphics
Draw-type Graphics Or Vector Graphics
 Image is represented by continuous geometric objects:
lines, curves, etc.

Raster (Bitmap) Graphics

 Image is represented as an rectangular grid of coloured
squares

6
Draw Type Or Vector Graphics
Example

Scanned image: from Multimedia Concepts – James Shuman

 Bit-Mapped vs. Draw Type Graphics

 Drawing programs
object-based representation
e.g., Powerpoint, outline fonts

 Painting programs
bit-mapped representation
e.g., Adobe Photoshop, bit-map fonts
Vector vs Raster

vector raster
Vector vs Raster
Raster : Zooming on it
Raster : Zooming on it
Vector : Zooming on it
 Raster vs Vector
 Raster file extensions
Png – portable network graphic
Psd – Photoshop document
Jpg – joint photographic experts group
Gif – graphics interchange format
Bmp – Bitmap

 Vector File Extensions

Ai – Adobe Illustrator
Eps – Encapsulated Postscript
Wmf – Windows Metafile
Raster vs Vector
 Raster (Bitmap)
A raster image is defined by pixels. A pixel is the
smallest display element that makes up the images seen
on a computer monitor or television.

 In raster images, the more pixels an image contains,

the higher its resolution.

 For example, in a raster image a line is made up of a

row of pixels with each pixel having a color value.

 Raster images are the best choice for creating subtle

gradations of shades and color, such as in a photograph.
 Raster (Bitmap) Graphics
 Bitmaps – array of dots or pixels
 Color depth per pixel
 High quality pictures
 Photo realistic
 Larger than draw-type
Lecture
Two
 File size = pixels x color depth / 8
 Raster (Bitmap)

A raster image is resolution-dependant because it

contains a fixed number of pixels that are used to
create the image.

 Since there is a fixed and limited number of pixels, a

raster image will lose quality if enlarged beyond that
number of pixels as the computer will have to 'make
up' the missing information.
 Raster (Bitmap) graphics
 Advantage
Can have different textures
on the drawings; detailed and
comprehensive.
 Disadvantage
Large file size.
Not easy to make
modification to
objects/drawings.
Graphics become "blocky"
when the size is increased.

Lecture
Two
 Draw Type Or Vector Graphics
 A vector image is defined by objects which are made of
lines and curves that are defined mathematically.

 Vectors can have various attributes such as line thickness,

length and color. In a vector image, a line work with it as a
single object, not group of pixels

 Programs PowerPoint, Illustrator, & Freehand work vectors.

 Draw Type Or Vector Graphics
 Vector graphics are resolution-independent because the
vector objects are drawn mathematically in the computer.

 They can be made larger or smaller without any loss of

quality to the image. Vectors can be printed at any size, on
any output device, at any resolution, without losing detail
and without altering the resolution of the image.

 Vector images are the best choice for typefaces, charts and
graphs, drawings, and other graphics that must have sharp
lines when scaled to various sizes.
 Draw-type Graphics Or
Advantage Vector Graphics
Small file size.
Maintain quality as the
size of the graphics is
increased.
Easy to edit the
drawings as each object
is independent of other.
Disadvantage
Objects/drawings
cannot have texture; it
can only have plain
Lecture colours or gradients ;
Two
limited level of detail in
an image.
 Draw Type Or Vector Graphics
 Draw type or vector graphics
Geometric shape stored as set of instructions
Smaller than bitmap
Resize, rotate, no distortion
No photo quality

Lecture
Two
 Conversion

Vector graphics

Scan conversion
Pattern recognition

Lecture
Two
Raster (Bitmap) graphics
24
 Computer Graphics

Image Analysis
(pattern recognition)

Mathematical
Image
Model

Image Synthesis
(Rendering)

Modeling Image processing

25
 Graphics Software

 Drawing programs – used to create draw-type

graphics
 Paint programs – used to create bitmap
images
 Image editing programs – useful in making
changes, or applying textures or patterns to
existing images
 Graphics Software Programs
 Drawing programs –
Adobe Illustrator
 Paint programs –
Paint Shop Pro
 Image-editing
programs –
Photoshop (does the
Lecture
Two work of all 3)
 Graphic Image Sources
 Alternative image sources
Clip art
Stock photographs
Video images
Still images
Scanned images
Photo CD’s
Screen-capture programs
 Vector Graphics
 Vector graphics are created from
mathematical formulas used to define lines,
shapes and curves.
 Edited in draw programs
 Shapes can be edited by moving points called
nodes (drawing points)

Node

Handle
Examples

Original Image

Resized
Image Shapes that
make up the
image.
Uses of Vector Graphics
 Graphics that will be scaled (or resized)
Architectural drawings and CAD programs
Flow charts
Logos that will be scaled (resized)
 Cartoons and clip art
 Graphics on websites
Because they have very small file sizes.
This allows them to load quickly.
 Fonts and specialized text effects
 Popular Vector Graphic Software
 Xara Xtreme
 Adobe Illustrator
 CorelDraw
 DXF - AutoCAD
 Inkscape – open source software similar to Adobe
Illustrator.
 Common Vector File Formats
 AI – Adobe Illustrator
Industry standard used by developers of vector
graphics.
Used to create, save, and archive original artwork.
 EPS – Encapsulated Postscript
Meta Graphic
Graphics developers generally save a copy of the AI
file in EPS format because it can be opened by
computers running different operating systems.
Preferred format for vendors/clients who use the
graphics in publications due to its portability.
 Meta Graphics
 Can contain vector and raster data.
 Shapes in vector graphics can be filled with
textures and patterns that are raster graphics.
 Useful when layering text on top of raster
graphics.
 Examples
WMF – Windows Metafile
EPS – Encapsulated Postscript
More Vector Formats
 SVG – Scalable Vector Graphics
Standard format created by W3C
Versatile, all-purpose vector format
 CDR – Corel Draw
 DXF – AutoCAD
 WMF – Windows Metafile
 Vector Images
 Vector images (also called
outline images) are images
made with lines, text, and
shapes.
 Test type is considered to
be vector because it is
composed of lines and
curves.

Lecture
Two
 Advantages of Vector Images
 Vector graphics are
resolution independent,
which means they can be
output to the highest quality
at any scale.
 Vector graphic images
normally have much smaller
file sizes than raster-based
bitmaps.
 Changing or transforming the
characteristics of a vector
Lecture
Two object does not effect or
distort the object.
 Advantages of Vector Images
 Vector images are not
limited to rectangular
shapes like bitmaps.
 An image can be
enlarged or reduced
without affecting the
quality of the image.
 There is no background
unless it is placed
Lecture
Two
behind the image as a
layer
 Advantages of Vector Images
 Vector images have the appearance of artistic form such
as cartoons.
 Vector images can be easily converted to bitmap images.
 Lines and curves are easily defined and will always be
smooth and retain their continuity.

Lecture
Two
 Disadvantages of Vector Images
 The main disadvantage is
they are not
photorealistic.
 Vector images are usually
filled with solid or
gradient colors but lack in
depth and appearance in
the values and colors of a
true continuous tone
image.

Lecture
Two
 Creating Vector Images

Vector images are drawn

with basic line tools
available in most
graphic software
programs.
The freehand tool is
used to produce
freeform lines.
The pen tool (Bezier) is
Lecture
used to draw
Two controlled curves called
Bezier curves.
 Classifications of Vector Images
 Simple line art is a 1
bit graphic image with
large areas of black
and White.
 Complex line art is
made up of many
curves with linear
contrast but still
maintains the quality of
a black and white
image.
Lecture
Two
 Classifications of Vector Images
 High detail line art is
composed of curves and
stippled dots (simulates
different styles of etching) to
form values.
 Colored vector images are
composed of lines, solid colors,
blended or gradient colors to
simulate tonal changes and are
produced using different color
Lecture methods (opaque or
Two transparent).
Common Rules for Vector Images
• A common rule for vector
images is to save the image
in its native format in the
software program being
used first, and then convert
the image into other
desired formats.
• The native format for
Corel Draw is .cdr
• The native format for
Adobe Illustrator is .ai
• Photoshop = .psd and
Corelpaint = .cpt
Functions of a Graphic Package
Graphics Library such as Core, OpenGL, DirectX
 Provide primitives for graphic description
 Build and maintain graphic representation models
 Provide primitives for viewing operations
 Support user interaction with application program
 Interactdirectly with users to allow them modify
viewing parameters, if possible
Graphics System

API

CGI (Computer Graphics Interface)

Graphics system: a library of graphics functions

 General Graphics Packages
 Graphics packages are device-independent
 Official Standards
Core: ACM SIGGRAPH 1977, U.S.
GKS : ANSI85, 2D, Europe
GKS-3D : ANSI88
PHIGS : ANSI88 - Hierarchical structures
PHIGS+ : ISO 92
 Non-official Standards
X Window System, PEX
Silicon Graphics OpenGL (1992)
Open Inventor
Microsoft DirectX
Sun Mircorsystems VRML
 SIGGRAPH
 SIGGRAPH (short for Special Interest Group on
GRAPHics and Interactive Techniques) is the name
of the annual conference on computer graphics
(CG) convened by theACM SIGGRAPH
organization.
 The first SIGGRAPH conference was in 1974.
 The conference is attended by tens of thousands of
computer professionals.
 Past SIGGRAPH conferences have been held in Los
Angeles, Dallas, New Orleans, Boston,Vancouver,
and elsewhere across the United States.
48
 Graphical Kernel System (GKS)
 Graphical Kernel System (GKS) was the first ISO
standard for low-level computer graphics,
introduced in 1977.
 GKS provides a set of drawing features for two-
dimensional vector graphics suitable for charting
and similar duties.
 The calls are designed to be portable across
different programming languages, graphics devices
and hardware, so that applications written to use
GKS will be readily portable to many platforms and
devices
49
 Summary
 Discuss the basic terminology.
 Introduction to different formats.
 Advantages of Vectors
Resolution Independent: Regardless of how much the
image is enlarged or reduced, the image definition and
quality remain the same.
Small File Sizes
Easily transferred over the Internet.
 Disadvantages of Vectors
Lower color quality than raster images.
They do not support as many colors.
Not good for photographic images.
50