IMAGES & GRAPHICS (2)

COMPONENTS OF MULTIMEDIA
COMP2: MULTIMEDIA AND WEB DESIGN
PRESENTATION OUTLINE
01 Types of Image
BITMAPS (RASTER BASED)

02 Types of Image
(VECTOR GRAPHICS)

03 Difference between Raster and Vector Graphics

[BITMAP(RASTER) VS VECTOR]

04 3-Dimensional Graphic Models

05 Natural light and color

IMAGES AND
GRAPHICS
STILL IMAGE
• Still images are generated in two
ways
1. Bitmaps (Raster based)
2. Vector-drawn graphics.
BITMAPS (RASTER
BASED)
BITMAPS (RASTER BASED)
• Bitmap is derived from the words
‘bit’, which means the simplest
element in which only two digits are
used, and ‘map’, which is a two-
dimensional matrix of these bits.
• A bitmap is a data matrix
describing the individual dots of an
image.
BITMAPS (RASTER BASED)
• Bitmaps are an image format
suited for creation of:
✓ Photo-realistic images
✓ Complex drawings
✓ Images that require fine detail.
BITMAPS (RASTER BASED)

Photo-realistic Complex
images drawing
BITMAPS (RASTER BASED)
• Bitmapped images are known
as paint graphics.
• A bitmap is made up of
individual dots or picture
elements known as pixels or pels.
• Bitmapped images can have
varying bit and color depths.
BITMAPS (RASTER BASED)

Available binary Combinations for

describing a color
BITMAPS (RASTER BASED)
• FILE SIZE
✓ width x height x No. bytes per pixel
✓ 1 byte = 8 bit

Example:
(640 x 480 x 1)/8 = 38.4 kB for
monochrome
BITMAPS (RASTER BASED)
• FILE SIZE
✓ width x height x No. bytes per pixel

Note:
✓8 bit = 1 byte
✓1024 bytes = 1 kilobyte (KB)
✓1024 kilobytes = 1 megabyte (MB)

Example:
(640 x 480 x 1)/8 = 38.4 kB for monochrome
BITMAPS (RASTER BASED)
• Bitmaps can be inserted by:
✓ Using clip art galleries
✓ Using bitmap software
✓ Capturing and editing
images.
✓ Scanning images.
BITMAPS (RASTER BASED)
• USING 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.
BITMAPS (RASTER BASED)
• USING CLIP ART GALLERIES
BITMAPS (RASTER BASED)
• 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, etc.
BITMAPS (RASTER BASED)
• USING BITMAP SOFTWARE
BITMAPS (RASTER BASED)
• CAPTURING AND EDITING IMAGES
✓ Capturing and storing images
directly from the screen is another
way to assemble images for
multimedia.
✓ The PRINT SCREEN button in Windows
and COMMAND- CONTROL-SHIFT-4
keystroke on the Macintosh copies
the screen image to the clipboard.
BITMAPS (RASTER BASED)
• CAPTURING AND EDITING IMAGES
✓ Enhance and make composite
images.
✓ Alter and distort images.
✓ Add and delete elements.
✓ Morph (manipulate still images
to create animated
transformations).
BITMAPS (RASTER BASED)
• SCANNING IMAGES
✓ Users can scan images from
conventional sources and
make necessary alterations and
manipulations.
VECTOR GRAPHICS
 VECTOR GRAPHICS
• Vector Graphics
✓ also known as Object Oriented
Graphics
✓ image consists of a set of commands
(mathematical equations) that are
drawn the object when needed.
✓ are stored as the set of graphic
primitives required to represent the
image.
 VECTOR GRAPHICS
• Vector Graphics
✓Graphics Primitives
o is a simple graphic based
on drawing elements or
objects such as shape.
o Example: square, line,
ellipse, arc, etc.
 VECTOR GRAPHICS
• Vector Graphics
✓Graphics Primitives
o each primitive object has various
attributes that go to make up the
entire image
o Example: x-y location, fill colour,
line colour, line style, etc.
o RECTANGLE : rectangle top, left,
width, height, color is ( 0, 0, 200, 200,
red)
 VECTOR GRAPHICS
• Vector Graphics
✓ can be resized without losing
the integrity of the original
image.
✓ scaling a vector is a
mathematical operation which
only the attributes change, the
image is unaffected.
 VECTOR GRAPHICS
• Primitive Geometrics Objects
1. Basic
✓ Line
✓ Polyline
✓ Arc
✓ Bezier Curve
 VECTOR GRAPHICS
• Primitive Geometrics
Objects
2. Shapes
✓ Circle
✓ Rectangle
✓ Square
✓ Triangle
 VECTOR GRAPHICS
• Primitive Geometrics Objects
3. Text
✓ Font
✓ Weight
 VECTOR GRAPHICS
• Software to create vectors:
✓ Graphics Program
o also known as graphics
editor.
o are tools that allow an artist
to create and edit designs
used in multimedia
applications.
 VECTOR GRAPHICS
• Software to create vectors:
✓ Drawing Program
o creating draw type graphics
o provide freehand like
geometric shapes
o Examples: Adobe Illustrator,
Corel Draw, Macromedia
Freehand
 VECTOR GRAPHICS
• Software to create vectors:
✓ Drawing Program
o creating draw type graphics
o provide freehand like
geometric shapes
o Examples: Adobe Illustrator,
Corel Draw, Macromedia
Freehand
 VECTOR GRAPHICS
• Software to create vectors:
✓ Paint Program
o those creating bitmaps
o useful in creating
original art
o Example: Paint Shop
Pro
 VECTOR GRAPHICS
• Software to create vectors:
✓ Paint Program
o those creating bitmaps
o useful in creating
original art
o Example: Paint Shop
Pro
 VECTOR GRAPHICS
• Software to create vectors:
✓ Image Editing Program
o Making changes to existing
images, such as manipulating
the brightness or contrast,
applying textures, patterns.
o Example: Adobe Photoshop,
Adobe Page Maker
 VECTOR GRAPHICS
• Software to create vectors:
✓ Image Editing Program
o Making changes to existing
images, such as manipulating
the brightness or contrast,
applying textures, patterns.
o Example: Adobe Photoshop,
Adobe Page Maker
 VECTOR GRAPHICS
• How vector images works?
✓ Cartesian Coordinates
o are numbers that
describe a point in two
or three-dimensional
space as the intersection
of X, Y, and Z axis.
 VECTOR GRAPHICS
• How vector images works?
✓ Cartesian Coordinates
o are numbers that
describe a point in two
or three-dimensional
space as the intersection
of X, Y, and Z axis.
 VECTOR GRAPHICS
• How vector images works?
✓ Cartesian Coordinates
o Example : RECT 0,0,200,300,RED,BLUE
says
o Draw a rectangle starting at 0,0
(upper left corner of screen) going
200 pixels horizontally right and 300
pixels downward, with a RED
boundary and filled with BLUE.”
 VECTOR GRAPHICS
• How vector images works?
✓ Cartesian Coordinates
o Example : RECT 0,0,200,300,RED,BLUE
says
o Draw a rectangle starting at 0,0
(upper left corner of screen) going
200 pixels horizontally right and 300
pixels downward, with a RED
boundary and filled with BLUE.”
BITMAP VS VECTOR
 VECTOR-DRAWN IMAGES V/S
BITMAPS
• Vector images use less memory
space and have a smaller file size
as compared to bitmaps.
• For the Web, pages that use
vector graphics in plug-ins
download faster, and when used
for animation, draw faster than
bitmaps.
 VECTOR-DRAWN IMAGES V/S
BITMAPS
• Vector images cannot be used
for photorealistic images.
• Vector images don’t require a
plug-in for Web-based display.
• Bitmaps are not easily scalable
and resizable.
• Bitmaps can be converted to
vector images using autotracing.
 VECTOR-DRAWN IMAGES V/S
BITMAPS
• Vector images cannot be used
for photorealistic images.
• Vector images don’t require a
plug-in for Web-based display.
• Bitmaps are not easily scalable
and resizable.
• Bitmaps can be converted to
vector images using autotracing.
 VECTOR FORMATS
• .wmf (Windows metafile)
✓ used by Microsoft Windows.
• .svg (Scalable Vector Graphics)
✓ a new format devised for the web.
• .ps (Adobe PostScript)
✓ a page description language used
to control printers.
 VECTOR FORMATS
• .pdf (Portable Document Format)
✓ a page description language common on
the web.
• .dfx (Drawing Exchange Format)
✓ Store 3D image created by design program
AutoCAD.
• .eps (Encapsulated PostScript)
✓ professional printing: Illustration program,
Adobe Systems, Desktop Publishing programs
 3-DIMENSIONAL
GRAPHIC MODELS
 3-DIMENSIONAL GRAPHIC
MODELS
• A 3D scene consist of object that
in turn contain many small
elements, such as blocks, cylinders,
spheres or cones (described in
terms of vector graphics)
• The more elements, the finer the
object’s resolution and
smoothness.
 3-DIMENSIONAL GRAPHIC
MODELS
• A 3D scene consist of object that
in turn contain many small
elements, such as blocks, cylinders,
spheres or cones (described in
terms of vector graphics)
• The more elements, the finer the
object’s resolution and
smoothness.
 3-DIMENSIONAL GRAPHIC
MODELS
• 3D graphics offer the
photorealistic effects that
have you seen in TV,
Computer Game.
• Example of 3D Programs :
Cargali Truespace; 3D Studio
Max; Inifini-D etc.
3-DIMENSIONAL GRAPHIC
MODELS
3-DIMENSIONAL GRAPHIC
MODELS
 3-DIMENSIONAL GRAPHIC
MODELS
• Features of a 3-D Application
✓Modeling
o involves drawing a shape,
such as a 2D letter, then
extruding it or lathing it into
a third dimension.
 3-DIMENSIONAL GRAPHIC
MODELS
• Features of a 3-D Application
✓Modeling
o involves drawing a shape,
such as a 2D letter, then
extruding it or lathing it into
a third dimension.
 3-DIMENSIONAL GRAPHIC
MODELS
• Features of a 3-D Application
✓Modeling
o Modeling also deals with
lighting, setting a camera
view to project shadows.
 3-DIMENSIONAL GRAPHIC
MODELS
• Features of a 3-D Application
✓Modeling
o Modeling also deals with
lighting, setting a camera
view to project shadows.
 3-DIMENSIONAL GRAPHIC
MODELS
• Features of a 3-D Application
✓Rendering
o produces a final output of
a scene and is more
compute-intensive
 3-DIMENSIONAL GRAPHIC
MODELS
• Features of a 3-D Application
✓Rendering
o produces a final output of
a scene and is more
compute-intensive
NATURAL LIGHT AND
COLOR
 NATURAL LIGHT AND COLOR
• Light comes from an atom where
an electron passes from a higher
to a lower energy level.
• Each atom produces uniquely
specific colors
• Eye can differentiate 80,000
different colors
 NATURAL LIGHT AND COLOR
• COLOR
✓ is the frequency of a light
wave within the narrow band
of the electromagnetic
spectrum, to which the human
eye responds.
 NATURAL LIGHT AND COLOR
• COLOR AND CULTURE
 NATURAL LIGHT AND COLOR
• COLOR AND EMOTION
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Basic Methods of Making
Color
1. Additive Color - a color is
created by combining
colored light sources in
three primary colors - red,
green, and blue (RGB).
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Basic Methods of Making
Color
2. Subtractive Color - color is
created by combining
colored media such as
paints or ink.
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Computer Color Models
o RGB Model - A 24-bit
methodology where color is
specified in terms of red, green,
and blue values ranging from 0 to
255.
Add red, green and blue to create
colors, so it is an additive model.
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Basic Methods of Making Color
2. RGB Model - A 24-bit
methodology where color is
specified in terms of red, green,
and blue values ranging from 0
to 255.
Add red, green and blue to create
colors, so it is an additive model.
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Computer Color Models
o HSB or HSL Model - Three
fundamental properties of
color: HUE, Saturation
(chroma) and BRIGHTNESS
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Computer Color Models
o HSB or HSL Model
HUE - color reflected from or
transmitted through an
object, measured on color
wheel.
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Computer Color Models
o HSB or HSL Model
SATURATION (CHROMA) -
strength or purity of color (%
of grey in proportion to hue)
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Computer Color Models
o HSB or HSL Model
SATURATION (CHROMA) -
strength or purity of color (%
of grey in proportion to hue)
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Computer Color Models
o HSB or HSL Model
BRIGHTNESS - relative
lightness or darkness of
color, also measured as %
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Computer Color Models
o HSB or HSL Model
BRIGHTNESS - relative
lightness or darkness of
color, also measured as %
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Computer Color Models
o CMYK Model - Based on
light-absorbing quality of ink
printed on paper.
o Four Channel : (C) Cyan
(M) Magenta (Y) Yellow (K)
Black
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Computer Color Models
o CMYK Model - Based on
light-absorbing quality of ink
printed on paper.
o Four Channel : (C) Cyan
(M) Magenta (Y) Yellow (K)
Black
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Color Palettes
o Palettes are mathematical tables
that define the color of pixels
displayed on the screen.
o Palettes are called ‘color lookup
tables or CLUTs on Macintosh.
o The most common palettes are 1,
4, 8, 16, and 24-bit deep.
 NATURAL LIGHT AND COLOR
• COMPUTERIZED COLOR
✓ Color Palettes
o Palettes are mathematical tables
that define the color of pixels
displayed on the screen.
o Palettes are called ‘color lookup
tables or CLUTs on Macintosh.
o The most common palettes are 1,
4, 8, 16, and 24-bit deep.
QUESTIONS?