1. Chapter 3
IMAGES

2. What is difference between SIT and UAT testing?
Software system integration testing. For software SIT is part of the software testing life cycle for collaborative projects. Usually, a round of SIT precedes the user acceptance test (UAT) round. Software providers usually run a pre-SIT round of tests before consumers run their SIT test cases.

3. Eye Strain

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

5. Before You Start to Create:
Plan your approach using flowcharts 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)
DARK RED HEADING

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

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

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

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

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

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

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

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

17. Vector Drawings Vector graphics are defined using formulas
RECT 0,0,200,200,RED,BLUE

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

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

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

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

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

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

24. 3-D Drawing 3-D software usually offers: Directional lighting Motion
Different perspectives

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

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

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

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

29. Modeling 3-D objects
…or lathed

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

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

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

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

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

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

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

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

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

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

40. Color Wheel

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

42. Color Models - Additive

43. Color Models Subtractive Color : CMYK Most object reflect light
Mixing two colors creates a darker one
Similar to pain and printer’s ink
Primary colors are cyan, magenta, yellow, which are complements of red, green and blue, respectively
Where 3 inks overlap, there is black ( gray)

44. Color Models - Subtractive

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

46. Color Models - HSB

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

48. Color Models
Varying Brightness
Varying Saturation

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

50. Color Harmony
Primary Colors Secondary colors Tertiary Colors

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

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

53. Color Harmony Schemes
Monochromatic Examples

54. Monochromatic Example

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

56. Complementary Example

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

58. Color Harmony Schemes Analogous

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

60. Color Schemes - Triadic

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

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

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

64. 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 for other formats

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