CSC 413: INTRODUCTION TO INTERACTIVE

MULTIMEDIA

CHAPTER 3
IMAGES
Overview

• Creation of multimedia images

• Creation of still images

• Colors and palettes in multimedia

• Image file types used in multimedia

"A picture is worth a thousand words"
"A picture is worth a thousand words"
"A picture is worth a thousand words"
 Creation of Multimedia Images
• Before commencing the creation
of images in Multimedia, you
should:

– Plan your approach using

flow charts
and storyboards.

– Organize the available

tools.

– Have multiple monitor.

 Creation of Still Images (continued)

• Still images are generated in two ways:

– Bitmap (raster images)

– Vector drawn graphics

Bitmap Vector Bitmap Vector

 Bitmap (continued)
• Bitmaps

– bitmap is a simple matrix of the tiny dots that form

an image
– Created as a pattern of discrete elements called
pixels/pels or "picture elements.“
Pixels

– Small squares.
– Assigned a binary code to
define color.
– More bits = more color
possibilities
 Bitmap (continued)
• Bitmapped images are known as paint graphics.
• Bitmapped images can have varying bit depth.
Bitmap (continued)
 Bitmap (continued)

24 bits depth. Dithered to 8 Dithered to 8 Dithered to 4

Millions of bits. bits. bits.
colors. Adaptive palette Macintosh palette 16 colors.
of 256 colors. of 256 colors.

Available binary Combinations

for Describing a Color

Dithered to 8-bit Dithered to 4-bit Dithered to 1-bit.

gray-scale. gray-scale. Two colors, black
256 shades of 16 shades of and white.
gray. gray.
 Bitmap (continued)

• Bitmaps are an image format suited for creation of:

– Photo-realistic images
– Complex drawings
– Images that require fine detail
 Bitmap (continued)

• Bitmaps can be inserted by:

– Using clip art galleries

– Using bitmap software - Make a bitmap from
scratch with a paint or drawing program.
– Capturing and editing images - Grab a bitmap
from an active computer screen with a screen
capture program, and then paste it into a
paint program or your application.
– Scanning images - Capture a bitmap from a
photo or other artwork using a scanner to
digitize the image.
 Bitmap (continued)

The industry-standard programs for bitmap painting

and editing are:

– Adobe’s Photoshop and Illustrator.

– Corel’s Painter and CorelDraw.
 Bitmap (continued)

• Image editing programs enable the

user to:

– Enhance and make composite

images.
– Alter and distort images.
– Add and delete elements.
– Morph (manipulate still
images to create animated
transformations).
https://www.youtube.com/watch?v=-ZopSqoJ
Ogo
 Vector-drawn graphics

• Vector-drawn graphics

– How vector-drawn images work

– Applications of vector-drawn images
– Vector-drawn images versus bitmaps
 Vector-drawn graphics
• What is vector-drawn graphics ?

– Vector graphics are mathematically calculated objects based on

lines.
– Vector graphics define pictures as collections of lines, ellipses,
triangles, polygons and other basic graphic “primitives”.
 Vector-drawn graphics (continued)

• How vector-drawn images work

– Vector drawing makes use of Cartesian

coordinates.
– Cartesian coordinates are numbers that describe

a point in two- or three-dimensional space as

the intersection of the X, Y, and Z axes.
 Vector-drawn graphics (continued)
• Vector-drawn images are used in the following areas:

– Computer-aided design (CAD) programs

– Graphic artists designing for the print media
(flyer, banner, poster)
– 3-D animation programs
– Applications requiring drawing of graphic shapes
CreationVector-drawn
of Still Images (continued)
graphics

Vector graphic formats:

-Adobe Illustrators-
SVG format.

-Corel Draw files -

.CDR format

-AutoCAD drawings
- .DXF format
Bitmap VS Vector-drawn graphics

Properties Vector-Drawn Images Bitmaps

Size Less memory space & Used bigger memory

smaller file size space & bigger file size

Download Faster Slower

Animation Drawing Draw faster Draw slower

Photorealistic Cannot be used Can be used

Plug-in Required Not required

Scalable & Resizable Easy Not easily

 Autotracing
– Bitmaps can be converted to vector images
using autotracing.
 programs and utilities that will compute the
bounds of a bitmapped image or the shapes
of colors within an image and then derive the
polygon object that describes the image.

 available in vector drawing applications such

as Illustrator or Freehand

 Flash has a Trace Bitmap menu option that

converts a bitmapped image into a vector
image.
 Bitmap VS Vector-drawn graphics

• Vector graphics

– Can be scaled to
any desired size
without
pixellation
 3-D Drawing and Rendering

• Drawing in perspective or in 3-D on a 2-D surface

takes special skill and talent.
 Extend vector-drawn graphics in 3-Dimensions
(x,y,z)
 3-D Drawing and Rendering

• A 3D scene – consist of object that in turn

contain many elements, such as blocks,
cylinders, spheres or cones.
 3-D Drawing and Rendering
• Objects as a whole have properties such as
shape, color, texture, shading and
location.
• A 3D application lets you model an object’s
shape, then render it completely.
 3-D Drawing and Rendering
Features of 3D application
•Modeling – involves drawing a
shape, then extruding it or lathing
it into a third dimension.
– Extruding – extending its
shape along a defined path
– Lathing - A profile of the
shape is rotated
around a defined axis.
– https://www.youtube.com/watc
h?v=rW9zYRDjJlk
 3-D Drawing and Rendering
Features of 3D application (cont)
•Modeling also deals with
- Lighting
- Setting a camera view to project shadows
 3-D Drawing and Rendering
Features of 3D application (cont)
•Rendering

-Produces a final output if a scene and is more

compute intensive
-Use of intricate algorithms to apply user- specified
effects
 3-D Drawing and Rendering

• 3-D animation, drawing and rendering tools include:

– Daz3D
– Form*Z
– NewTek′s Lightwave
– Autodesk’s Maya
– Google’s SketchUp
– Blender
– Rhinoderos 3D
 Creation of Still Images (continued)

• Panoramas

– Panoramic images are created by stitching together

a sequence of photos around a circle and adjusting
them into a single seamless bitmap.
 Colors and Palettes in Multimedia
(continued)

• Understanding natural light and color (continued)

– Additive color
– Subtractive color
– Monitor-specific color
– Color models
Colors and Palettes in Multimedia
(continued)
• Additive color
– Color is represented on a computer by using
varying amounts of red, green and blue light.
– These are the primary colors of what’s called
“additive colour”.
– Any color by adding percentages of red,
green and blue.
Colors and Palettes in Multimedia
(continued)
• Subtractive color
– Combining two pure additive primaries produces a
subtractive primary. The subtractive primaries of cyan,
magenta, and yellow are the opposing colors to red,
green, and blue.
– When two subtractive primaries overlap, an additive
primary is produced.
– Subtractive color is the process used to create color in
printing.
– Printing processes use cyan, magenta, and yellow inks to
control the amount of red, green, and blue light that is
reflected from white paper.
 Colors and Palettes in Multimedia
(continued)
• Monitor-specific colors

– Palettes are mathematical tables that define the color of

a pixel displayed on the screen.
– The most common palettes are 1, 4, 8, 16, and 24 bits
deep.
 Colors and Palettes in Multimedia
(continued)
• Monitor-specific colors

– The preferred monitor resolution is 800 x 600 pixels.

– The preferred color depth is 32 bits.
 Colors and Palettes in Multimedia
(continued)

• Models used to specify color in computer terms are:

– RGB model – A 24-bit methodology: color

is specified in terms of red, green, and blue
values
ranging from 0 to 255.
– Hue, Saturation and Brightness (HSB) and Hue,
Saturation and Lightness (HSL) models – Color is
specified as an angle from 0 to 360 degrees on a
color wheel.
– Other models include CMYK, CIE, YIQ, YUV,
and YCC.
 Colors and Palettes in Multimedia
(continued)

• 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.
Image File Types Used
in Multimedia
• Macintosh formats

• Windows formats

• Cross-platform formats
Image File Types Used
in Multimedia (continued)
• Macintosh formats

– 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.
 Image File Types Used
in Multimedia (continued)

• Windows formats

– The most commonly used image file format on

Windows is DIB, also known as BMP.
•DIB stands for device-independent bitmaps.

– Bitmap formats used most often by Windows

developers are:
•BMP - A Windows bitmap file
•TIFF - Extensively used in DTP packages
•PCX - Used by MS-DOS paint software
 Image File Types Used
in Multimedia (continued)

• 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
Summary
• The computer generates still images
as bitmaps and vector-drawn images.
• Images can be incorporated in
multimedia using clip art or bitmap
software, or by capturing, editing, or
scanning images.
• Creating 3-D images involves
modeling, extruding, lathing, shading,
and rendering.
• Color is one of the most vital
components of multimedia.