Images Images are a key component of any multimedia presentation

Computers & Color Computers are numerical machines yet monitors attached to computers can display colorful images. An understanding of ….. color, and how computers can display color ….. is an important aspect of producing effective multimedia applications.

Seeing Color We “see” color because our brain interprets the mix of wavelengths of light hitting the cones in the back of our eye as colors. Receptors in the cones are sensitive to red, green and blue light

Seeing Color Our brain can differentiate among about 80,000 colors, consisting of combinations of red, green and blue.

Seeing Color Light gets to our eye either because it is: 1.directly transmitted from a source (computer monitor) or 2.reflected from a surface (printed image)

Computerised Color Computers use a different model to construct color for a transmitted source (additive color) and a reflected source (subtractive color). Additive ColorSubtractive Color RGB color spaceCMYK color space

Transmitting Color On the back of the glass face of a computer monitor are thousands of tiny red, green and blue light sources arranged in groups of red, green and blue. Each group is known as a pixel.

Transmitting Color Red, green and blue are each divided into 256 tone levels. The color of a pixel is a combination of the tone levels of the 3 colors. Why 256? 1.We need 200 tone levels to create the illusion of continuous tone.

Transmitting Color Why 256 tone levels? 2.We need to represent colors in a file on a computer. We need to be able to represent at least 80,000 colors digitally. Computers are setup to work in bytes. 1 byte = 8 bits = 2 8 combinations (256). With 3 channels and 256 tone levels per channel we can represent > 16 million colors with 24 bits.

Printing Color Works on the basis of colored ink or dye absorbing certain wavelengths of white light (colors) and reflecting others. Eg. A red ink absorbs all the colors which make up white light except for red. Only the red is reflected back to the eye.

Printing Color Use CMY color space because: Cyan absorbs red light Magenta absorbs green light Yellow absorbs blue light

Printing Color The different color spaces for Monitors and Printers can cause color-matching problems when printing an image. Solutions: 1.Calibrate the monitor so that the colors are the same as produced by the printer

Printing Color The different color spaces for Monitors and Printers can cause color-matching problems when printing an image. Solutions: 2.Use a printer profile to display an image on the screen as it would appear on a particular printer

Image Files Before an image can be displayed on a monitor or printed on paper it must be represented in a file on a computer. There are 2 fundamentally different ways of doing this: 1.Raster graphics – uses dots on a rectangular grid (raster) to display image.

Image Files Before an image can be displayed on a monitor or printed on paper it must be represented in a file on a computer. There are 2 fundamentally different ways of doing this: 2.Vector graphics – an image is considered to be made up of a collection of lines, both straight and curved.

Vector Graphics An image is considered to be made up of a collection of lines, both straight and curved, each with its own thickness and color. Suited to cartoons, technical illustrations, graphs, architectural and engineering drawings. Can represent 3D shapes using a ‘wire-frame’ approach

Vector Graphics Drawing a vector object requires: plotting points to create PATHS (lines) specifying how the edges (strokes) of the paths appear specifying how everything bound by the paths (fill) should appear The paths, strokes and fills of a vector image can be stored in a text file

SVG The language used in a text file to specify a vector image is SVG. XML is a markup language for storing and transporting data (HTML is a markup language for displaying data) In XML a user specifies their own markup tags (unlike HTML) SVG is a language for describing two-dimensional graphics in XML tags. The W3C produces a specification for SVG. All browsers except Internet Explorer can render SVG without the use of a plugin.

SVG example <svg xmlns= xmlns:xlink=" <polygon fill="red" stroke="blue" stroke-width="10“ points="350, , , , , , , , , ,161" /> <polygon fill="lime" stroke="blue" stroke-width="10“ points="850,75 958, , , , ,137.5"/>

Vector Graphics Can be also be constructed using software like Fireworks. But the final images are rasterized and saved as PNG files.

Vector Graphics Major advantage is that the images are resolution independent Can move, resize, reshape and change the color of shapes within the image easily Can display on output devices of varying resolutions without changing quality of appearance