Chapter 3:

Graphic

CSC413: INTRODUCTION TO INTERACTIVE MULTIMEDIA

Prepared by Siti Norsyuhada Zainudin

Overview

Creation of multimedia images

Creation of still images

Colors and palettes in multimedia

Image file types used in multimedia

 Creation of Multimedia Images

Before commencing the creation of

images in Multimedia, you should

Plan Organize Prepare

• Plan your • Organize the • Prepare

approach available tools devices and
using flow workspace:
charts and have multiple
storyboards. monitors, for
lots of screen
real estate
(viewing
area).
 Bitmaps

Creation of Vector Drawing

Still Images Vector-Drawn Objects vs. Bitmaps

3-D Drawing and Rendering

 Creation of Still Images

 Still images may be the most important

element of a multimedia project
Two ways of
 The type of still images created creating images
depends on the :

Display
Hardware
resolution Bitmap Vector-drawn

Software
 Type of Still Image: Bitmap

Bitmaps are an image format suited

for creation of

BIT MAP
Photo-realistic image
Simplest element Two-dimensional matrix
that contains only
two digit (0,1)
Complex drawing

Simple matrix of tiny dots that form

an image and displayed on the
screen or printed Fine detail image
Type of Still Image: Bitmap

 Bitmapped images = Paint graphics.

 Individual dots or picture elements known as pixels or pels.
 Bitmapped images can have varying bit and color depths.
Bitmap – Bit Depth
 Sources of Bitmap

Bitmaps can be inserted by

 Sources of Bitmap: Clip Art Galleries

▪ A clip art gallery is an assortment of

graphics, photographs, sound, and
video.
▪ Clip arts are a popular alternative for
users who do not want to create their
own images.
▪ Clip arts are available on CD-ROMs
and on the Internet.
 Sources of Bitmap:
Using Bitmap Software

The industry standard for bitmap painting

and editing programs are:
▪ Adobe's Photoshop and Illustrator
▪ Macromedia's Fireworks
▪ Corel's Painter
▪ CorelDraw
▪ Quark Express
 Sources of Bitmap:
Capture and Edit Images

▪ Capturing and storing images directly from

the screen is another way to assemble
images for multimedia.

▪ Both Macintosh and Windows have a

clipboard – an area of memory where data is
temporarily stored when you cut or copy
within application.

▪ The PRINT SCREEN button in Windows and

COMMAND-CONTROL-SHIFT-4 keystroke on
the Macintosh copies the screen image to the
clipboard.
The Use of Image Editing programs

Enhance and make

Alter and distort images
composite images

Morph
Add and delete (manipulate still
elements images to create
animated
transformations)
Sources of Bitmap: Scanning Images

▪ Everyday objects can be scanned and

manipulated using image-editing tools.
▪ Users can scan images from
conventional sources and make
necessary alterations and
manipulations.
 Bitmaps

Creation Vector Drawing

of Still
Images
Vector-Drawn Objects vs. Bitmaps

3-D Drawing and Rendering

Type of Still Image: Vector-drawn

Vector-
Applications How vector-
drawn
of vector- drawn
images
drawn images
versus
images work
bitmaps
 Applications of Vector-drawn Images

 Computer-aided design (CAD)

programs
 Graphic artists designing for the
print media
 3-D animation programs
 Applications requiring drawing of
graphic shapes
 How Vector-drawn Images Work

▪ A vector is a line that is described

by the location of its two endpoints.
▪ Vector drawing makes use of
Cartesian coordinates.
▪ Cartesian coordinates are numbers (X,Y,Z)
that describe a point in two- or
three-dimensional space as the
intersection of the X, Y, and Z axes.
 Bitmaps

Creation Vector Drawing

of Still
Vector-Drawn Objects vs. Bitmaps
Images
3-D Drawing and Rendering
 Vector-drawn Images Versus Bitmaps

# VECTOR DRAWN BITMAP

1 Use less memory space compared to Use more memory space compared
bitmap to vector
2 Smaller file size compared to bitmap Larger file size compared to vector

3 For the Web, pages that use vector For the Web, pages that use bitmap
graphics in plug-ins download faster graphics in plug-ins download slower
compared to vector
4 For animation, vector can be drawn For animation, bitmaps can be drawn
faster than bitmaps slower than vector
 Vector-drawn Images Versus Bitmaps

# VECTOR DRAWN BITMAP

5 Vector images cannot be used for Bitmap images can be used for
photorealistic images. photorealistic images.
6 Vector images require a plug-in for Bitmap images do not require a plug-
Web-based display. in for Web-based display.
7 Vector are easily scalable and Bitmaps are not easily scalable and
resizable. resizable.
8 Vector cannot be converted to bitmap Bitmaps can be converted to vector
images using autotracing. images using autotracing.
 Bitmaps

Creation Vector Drawing

of Still
Images
Vector-Drawn Objects vs. Bitmaps

3-D Drawing and Rendering

3-D Drawing and Rendering
3-D Animation, Drawing, and Rendering
Tools

3-D applications provide x, y, and z axes

and adjustable perspective views.
 Features of a 3-D Application

Modeling Extrusion Lathing

• Placing all the • The shape of a plane • A profile of the shape

elements into surface extends some is rotated around a
3-D space. distance. defined axis.
 Rendering
Use of intricate algorithms to apply user-specified effects

Gouraud
shading Flat shading

Take longer to render The fastest for the

but provide photo- computer to render and
realistic images is most often used in
preview mode

Ray tracing Phong shading

Take longer to render Take longer to render

but provide photo- but provide photo-
realistic images realistic images
 Panoramas

 Panoramic images are

created by stitching
together a sequence of
photos around a circle
and adjusting them into
a single seamless
bitmap
 Understanding Natural Light and
Color

Colors and
Palettes in Computerized Color

Multimedia
Color Palettes
 Understanding Natural Light and Color

 Quantum theory : Light comes from an

atom where an electron passes from a
higher to a lower energy level
 Color is the frequency of a light wave
within the narrow band of the
electromagnetic spectrum, to which
the human eye responds.
 The eye can differentiate among
about 80,000 colours, or hues,
consisting of combinations of red,
green, and blue.
Computerized Colors

Additive color

Subtractive color

Monitor-specific color

Color models
Computerized Colors -Additive Color

 Color is created by combining

colored light sources in three primary
colors - red, green, and blue (RGB).
 TV and computer monitors use this
method.
 Computerized Colors -Subtractive Color

 Color is created by combining colored media

such as paints or ink
 The colored media absorb (or subtract) some
parts of the color spectrum of light and reflect
the others back to the eye
 Subtractive color is the process used to create
color in printing.
 The printed page consists of tiny halftone dots
of three primary colors - cyan, magenta, and
yellow (CMY).
Computerized Colors -
Monitor-specific Colors

 Colors should be used according to the target audience’s monitor specifications.

 The preferred monitor resolution is 800 x 600 pixels.
 The preferred color depth is 32 bits.
 Computerized Colors -Color Models

RGB HSB & HSL Others

• A 24-bit methodology • HSB: Hue, Saturation & • CMYK

where color is specified in Brightness • CIE
terms of red, green, and • HSB : Hue, Saturation & • YIQ
blue values ranging from 0 Lightness • YUV (TV)
(black) to 255 (white). • Color is specified as an • YCC
angle from 0 to 360
degrees on a color wheel
 Understanding Natural Light and
Color

Colors and
Palettes in Computerized Color

Multimedia
Color Palettes
Color Palettes

▪ Palettes are mathematical tables that define the color of pixels

displayed on the screen.
▪ Palettes are called ‘color lookup tables’ or CLUTs on Macintosh.
 Color Palettes -
Dithering

 Dithering is a process whereby the

color value of each pixel is changed
to the closest matching color value
in the target palette.
 This is done using a mathematical
algorithm.
 Dithering software is usually built into
image-editing software and
available in many multimedia
authoring systems
 Macintosh
Image File
Types Used Windows
in
Multimedia
Cross Platform
 Macintosh

▪ On the Macintosh, the most

commonly used format is PICT.
▪ PICT is a complicated and versatile
format developed by Apple.
▪ Almost every image application on
the Macintosh can import or export
PICT files.
▪ In a PICT file, both vector-drawn
objects and bitmaps can reside side-
by-side.
 Windows

▪ The most commonly used image file format on

Windows is DIB (device-independent bitmap).
▪ The preferred file type for multimedia developers in
Windows is Resource Interchange File Format (RIFF).
▪ Bitmap formats used most often by Windows
developers are:
▪ BMP - A Windows bitmap file.
▪ TIFF (Tagged Interchange File Format) - Extensively
used in DTP packages.
▪ PCX - Used by MS-DOS paint software.
Cross-platform Formats

▪ JPEG, GIF, and PNG – Most commonly used format on the Web
▪ Adobe PDF (Portable Document Format) – Manages multimedia
content
▪ PSD, AI, CDR, DXF – Proprietary formats used by applications
▪ Initial Graphics Exchange Standard (IGS or IGES) –Standard for
transferring CAD drawings
Overview

Creation of multimedia images

Creation of still images

Colors and palettes in multimedia

Image file types used in multimedia

 Chapter 3:
Graphic

CSC413: INTRODUCTION TO INTERACTIVE MULTIMEDIA

Prepared by Siti Norsyuhada Zainudin