chapter images multimedia subject to make.ppt

Multimedia Image

1. Multimedia Applications

2. Chapter 3
IMAGES

3. Overview
•Creation of multimedia images.
•Creation of still images.
•Colors and palettes in multimedia.
•Image file types used in multimedia.

4. Before You Start to Create:
•Plan your approach using flowcharts
and storyboards
•Organize your tools means with
multimedia tools you can make text,
buttons, sounds, etc.
•Use multiple monitors (especially for
a program like Director where
changes in one window are visible in
the presentation window)

5. Making Still Images
•Bitmaps ( paint graphics or raster
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

6. Making Still Images
•Stills are drawn in one of two
ways and are usually compressed
Bitmaps
Vector-drawn graphics

7. 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.

8. BITMAPS
•A simple information matrix
describing the dots or pixels which
make up the image
•Make it with paint or drawing
program
•Grab it and (save it) then paste it into
you application
•Scan or digitize an image

9. Bitmaps
Bitmaps are an image format suited for
creation of:
–Photo-realistic images.
–Complex drawings.
–Images that require fine detail.

10. 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.

11. Bitmaps
Available binary Combinations for Describing a Color

12. Bitmaps
Bitmaps can be inserted by:
–Using clip art galleries.
–Using bitmap software.
–Capturing and editing images.
–Scanning images.

13. Bitmap Example
•Clipart

14. Clip Art
•Available from many sources on the
web or on CD ( such as PHOTODISC)
•Often included with packages such
as Corel Draw, Office, etc.
•Can manipulate some properties
such as brightness, color, size
•Can paste it into an application

15. 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.

16. Bitmaps
•Clipart
•Bitmap Software

17. 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.

18. 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 Design’s
Painter are more sophisticated painting
and editing tools

19. Tip
•Use paint program for cartoon, text,
icons, symbols, buttons, or graphics.
•For photo-realistic images first scan
a picture, then use a paint or image
editing program to refine or modify
them

20. Bitmaps
•Clipart
•Bitmap software
•Capturing
•Scanning

21. 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.

22. 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

23. 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

24. Vector Drawings
•Vector graphics are defined using
formulas
–RECT 0,0,200,200,RED,BLUE

25. 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

26. 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

27. 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

28. 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, illustrator etc

29. 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

30. 3-D Drawing and Rendering
•Drawing in 3-D onto 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

31. 3-D Drawing
•3-D software usually offers:
Directional lighting
Motion
Different perspectives

32. 3-D Drawing
•3-D creation tools include:
Ray Dream Designer
Caligari True Space 2
Specular Infini-D
form*Z

33. 3-D Drawing
3-D objects
combine
various shapes

34. 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.

35. Modeling 3-D objects
Shapes can be
extruded…

36. Modeling 3-D objects
…or lathed

37. 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.

38. 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
•Toy Story were rendered on a “farm” of 87 dual processor and 30 quad-processor
100 MHz SPARCstation 20s. It took 46 days of continuous processing to render that
film’s 110,000 frames at a rate of about one frame every one to three hours.

39. Modeling 3-D objects
A scene can use different types of
shading
Ray
tracing
Phong
shading
Gouraud
shading
Flat
shading

40. Color
•Panorama
works by importing a sequence of photos and letting you
adjust them precisely into a single seamless bitmap,
where the right edge attaches to the left edge and the
color and lighting differences among the image are
smoothed. You should allow some overlap when you
take each photo for a 360-degree panorama.
•Natural Light and Color
–Quantum Theory of Light (Max Planck 19
th
Century and 20
th

Century Niels Bohr – photons)
Atoms produce unique colors as light passes
through
Light travels in the form of photons, or quanta

41. 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

42. Color
•Computerized color
Computers combine red, green, and blue (RGB) light
Bit depth determines the number of possible colors
1-bit
2 colors
4-bit
16 colors
8-bit
256 colors
24-bit
16,777,216 colors

43. 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.
•The eye can differentiate among about 80,000 colors,
or hues, consisting of combinations of red, green,
and blue.

44. 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) world’s favorite color is
blue

45. 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)

46. 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

47. COLOR Formation
•RGB Combination (R,G,B) Perceived Color
•Red only (255,0,0) Red
•Green only (0,255,0) Green
•Blue only (0,0,255) Blue
•Red and green (blue subtracted) (255,255,0) Yellow
•Red and blue (green subtracted) (255,0,255) Magenta
•Green and blue (red subtracted) (0,255,255) Cyan
•Red, green, and blue (255,255,255) White
•None (0,0,0) Black

48. Color Wheel

49. 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

50. Color Models - Additive

51. Color Models
•Subtractive Color : CMYK
–Most object reflect light
–Mixing two colors creates a darker one
–cyan, magenta, yellow, which are
complements of red, green and blue,
respectively
–Where 3 inks overlap, there is black
( gray)

52. Color Models - Subtractive

53. 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

54. Color Models - HSB

55. 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)

56. Color Models
Varying Brightness
Varying Saturation

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

58. Color Harmony
Primary ColorsSecondary colors Tertiary Colors

59. Color Harmony Schemes
•Primary colors: red, green 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

60. 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

61. Color Harmony Schemes
Monochromatic Examples

62. Monochromatic Example

63. 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

64. Complementary Example

65. 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

66. Color Harmony Schemes Analogous

67. 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

68. Color Schemes
- Triadic

69. 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.

70. 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

71. 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

72. 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

73. 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