Chapter 3

IMAGES
Overview
Creation of multimedia images.
Creation of still images.
Colors and palettes in multimedia.
Image file types used in multimedia.
 Before You Start to Create:
Plan your approach using flowcharts
DARK RED HEADING

and storyboards
Organize your tools ( text, buttons,
sounds, etc.)
Use multiple monitors (especially for
a program like Director where
changes in one window are visible in
the presentation window)
Making Still Images
Bitmaps ( or paint graphics) used for
photo-realistic images and detailed
drawings
Vector graphics used for lines, polygons
and other mathematical objects
Saved as GIF,JPEG,PNG files with
compression
 Making Still Images
Stills are drawn in one of two
ways and are usually compressed
Bitmaps
Vector-drawn graphics
Bitmaps
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
Bitmaps are an image format suited for
creation of:
Photo-realistic images.
Complex drawings.
Images that require fine detail.
Bitmaps
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

Available binary Combinations for Describing a Color

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.
Bitmap Software
Primitive Paint programs included with
windows and MAC
Director included a powerful image editor
with advanced tools such as onion-skin
and image filtering
Adobe Photoshop and Fractal Designs
Painter are more sophisticated painting
and editing tools
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.
From there you can insert it into a paint
program or other application.
Advanced Image Editing
Image editing programs allow you to
insert and remove images from
photos
Enable you to alter and distort
images, add and delete elements
Morphing blends two images so that
one seems to melt into the other
Scanning Images
Everyday objects can be scanned
and manipulated using tools such as
Photoshop
Traditional artwork created with pen
and ink or watercolors can be
created and scanned
Vector Drawings
Vector graphics are defined using
formulas
RECT 0,0,200,200,RED,BLUE
Vector Drawing
Used for lines, rectangles, geometric
objects- stored mathematically
CAD ( computed aided design) programs
created complex and geometric renderings
needed by architects and engineers
Graphic artists use vector graphics to
eliminate the jaggies
Programs for 3-D animation use vector
graphics for rotation,spinning and shading
 How Vector Drawing Works
Vector drawn object are drawn to the computer
screen using a fraction of the memory space
required by a bitmap.
A vector is a line described by its endpoints,
and sometimes direction
A rectangle might be described as:
RECT, 0, 0,200, 200
Starts at 0,0 and extends 200 pixels horizontally and
200 pixels downward from the corner ( a square)
RECT, 0, 0,200, 200, red, blue
This is the same square with a red border filled with
blue
Vector- Drawn vs. Bitmaps
Colored square as a vector contains < 30 bytes
of data
The same square as a bitmapped image would
take 5,000 bytes to describe ( 200x200)/8) and
using 256 colors would require 40K as a bitmap
((200x 200) / 8 X 8)
Vector objects are easily scalable
Sometimes a single bitmap gives better
performance than many vector images required
to make the same image
Converting Between
Bitmaps and Vectors
Most drawing programs offer several file
formats for saving and converting images.
Converting bitmaps to drawn object is
more difficult and is called autotracing
It computes the bounds of an object and
its colors and derives the polygon that
most nearly describes it
It is available in some programs such as
Adobe Streamline
Vectors vs. Bitmaps
Vector drawings are easily scaled
Vector files are usually smaller
Calculation time can draw
resources
Bitmaps cannot easily be
converted to vector
Vector drawings require plug-ins
3-D Drawing and Rendering
Drawing in 3-D on 2 2-D surface or screen
takes practice and skill
Software helps to render ( or represent)
the image in visual form- but these
programs have a steep learning curve.
Object in 3-D space carry many properties,
shape color, texture, location and a
scene often contains many objects
3-D Drawing
3-D software usually offers:
Directional lighting
Motion
Different perspectives
3-D Drawing
3-D creation tools include:
Ray Dream Designer
Caligari True Space 2
Specular Infini-D
form*Z
3-D Drawing

3-D objects
combine
various shapes
Modeling 3-D objects
Start with a shape ( block, cylinder,
sphere, )
You can draw a 2-D object and extrude or
lathe it into the third dimension
Extrude extends the shape
perpendicular to the shapes outline
A lathed shape is rotated around a defined
axis to create the 3-D object.
Modeling 3-D objects

Shapes can be
extruded
Modeling 3-D objects

or lathed
Modeling 3-D objects
Once a 3-D object has been created,
you can apply color and texture to
make it look realistic
To model a scene, place all the
objects into 3-D space and set up
lighting effects and shadows.
Objects will reflect or flare where
light is most intense.
Modeling 3-D objects
Add a background or set a camera view
from which you will view the scene
Shading can be applied in many ways ( See
p. 304)
Finally, the scene must be rendered- using
the algorithms to apply the effects you
have specified on the objects
Rendering requires great computer power
and can often take hours for a single image
 Modeling 3-D objects

Gourand
Flat
shading
shading

Ray Phong
tracing shading

A scene can use different types of shading

 Color
Natural Light and Color
Quantum Theory of Light (Max Planck 19th
Century and 20th Century Niels Bohr
photons)
Atoms produce unique colors as light passes
through
Light travels in the form of photons, or quanta
 Color
Natural Light and Color
Quantum Theory of Light
Color is the frequency of visible light
ROY G. BIV ( increasing frequencies)
Infrared | Visible Light | Ultraviolet
White light is a mixture of all the
frequencies
 Color
Computerized color
Computers combine red, green, and blue (RGB) light
Bit depth determines the number of possible colors

1-bit 8-bit 24-bit

4-bit
2 colors 256 colors 16,777,216 colors
16 colors
Color
Cornea of your eye focuses light rays onto
the retina to stimulate rods and cones
which transmit the patterns of color
information to the brain.
( Cones are sensitive to red, green and
blue light.)
Green, blue, yellow.orange,purple, pink,
brown black, gray and white are most
common colors in all cultures.
Color
Color and Culture
Western culture: Red = anger, danger
Black = death, funerals
Eastern culture Red = happiness
White = death, funerals
( Eastern Weddings and restaurants most often
use RED )
Internet study (p.142) worlds favorite color is
blue
 Color
Psychology of Color how you perceive it
Computer monitors produce color with red,
green and blue light the ADDITIVE primary
colors. Tiny red, blue and green dots on the
screen, light up when bombarded by
electrons.
The reflected light from a printed page is
SUBTRACTIVE primary colors ( cyan,
magenta, yellow and a little black)
Color
Computerized Color
Monitors and Color most monitors today
are set to display 640 X 480 pixels and 256
colors, can be adjusted for more
Called VGA ( Video Graphics Array)
Minimum configuration for Windows and
MAC
More colors requires more memory
Color Wheel
Color Models
Additive Color: RGB
Describes colors that emanate from glowing
bodies such as lights, TV, and computer
monitors
In additive color models, mixing two
colors results in a brighter color
Overlapping colors from 3 projectors
produces new colors:
red+ green -> yellow
green+ blue -> cyan
red + blue -> magenta
Color Models - Additive
Color Models
Subtractive Color : CMYK
Most object reflect light
Mixing two colors creates a darker one
Similar to pain and printers ink
Primary colors are cyan, magenta,
yellow, which are complements of red,
green and blue, respectively
Where 3 inks overlap, there is black
( gray)
Color Models - Subtractive
 Color
Computer Color Models
Color of a pixel is expressed as the amount of
red, green and blue ( RGB)
HSB ( hue, saturation, brightness) and HSL
( hue, saturation, lightness) models specify color
as an angle from 0 360 degrees on a color wheel
and saturation, brightness, and lightness as
percentages.
100% Lightness = white
Saturation is the intensity of the color Other color
models are used for TV, photos and other media
Color Models - HSB
 Color Palettes
Palettes or color look up tables (CLUT)
are mathematical tables that define the
color of a pixel displayed on the screen
Paint programs provide a palette tools
for displaying available colors not
uniform across programs or platforms
Color graphics adaptors work with 256
shades of each color producing over 16
million colors (256 x 256x 256)
Color Models
Varying Brightness

Varying Saturation
Color Harmony
Certain combinations of colors tend
to be pleasing. They arise from the
color harmony schemes:
Monochromatic
Complementary
Analogous
Triadic
Color Harmony

Primary Colors Secondary colors Tertiary Colors

Color Harmony Schemes
Primary colors: red, yellow and blue
Secondary colors: obtained by mixing two
primary colors - orange violet, green
Tertiary colors: obtained by mixing equal
amounts of a primary and secondary color
- red-violet, blue-violet, blue-green, yellow-
green, yellow-orange, red-orange
Warm (yellow, orange, red) or cool ( blue,
green) colors
Color Harmony Schemes
Monochromatic
all colors have hues that are the same
or within a few degrees of one another
colors vary in saturation or brightness,
but hue is consistent
enhances cohesiveness to overall
layout of web page
Color Harmony Schemes
Monochromatic Examples
Monochromatic Example
Color Harmony Schemes
Complementary
uses a pair of complementary hues,
which appear opposite one another on a
color wheel
one color is dominant, the other is an
accent
use the dominant hue to fill the large
areas
Complementary Example
Color Schemes
Analogous
two colors which lie close together on a
color wheel
often echo the colors found in nature
pleasing combinations ( such as
orange, yellow, green)
more interesting if the colors do not
have the same brightness and
saturation
Color Harmony Schemes
Analogous
Color Schemes
Triadic
Any 3 colors, spaced equally around a color
wheel
Color hues form a triad
Offers wide variety of choice and can create
excitement
Can be overpowering unless colors chosen
vary in brightness and saturation, or the
number of text and background are limited
Color Schemes - Triadic
 Color in Text and Background
Text should be legible
Contrast between text and background is
important
Dark text on light background is best or one
with high brightness and low saturation
Avoid combinations that differ only in their
blue component ( yellow on white)
Avoid red-green, red-blue, magenta-green
combinations which cause vibration and
eye fatigue.
Palette Flashing Problem
Palette Flashing occurs when you use a
series of images each with its own color
palette. When the new image replaces the
older one a flash occurs on the screen - a
serious problem in multimedia
Solution
use a single palette for all project images or
fade each image to white or black before
showing the next image since white and black
are present in most palettes
Dithering
Dithering is a process where the color
value of each pixel is changes to the
closest matching color value in the target
palette, using a mathematical algorithm
It averages the color over an area and is
usually close to the original color
Dithering software is usually built into
image editing and multimedia programs
 Image File Formats
MAC has a single standard format PICT
Windows uses device independent bitmaps
DIBs written as .bmp files, which is a
windows bitmap file
TIFF ( tagged interchange file formats) are
universal bitmap files used in desktop
publishing
Adobe creates .psd files for photoshop
See pp. 150-151 for other formats
Image File Formats
Be sure that your program can
import the files that you create or
save.
Most common bitmap formats for the
web are GIF and JPEG, since all
browsers can display them