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
