ImagesImages are a key component of any multimedia presentation

Computers & ColorComputers 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 ColorWe “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 ColorOur brain can differentiate among about 80,000 colors, consisting of combinations of red, green and blue.

Seeing ColorLight 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 ColorComputers use a different model to construct color for a transmitted source (additive color) and a reflected source (subtractive color).

Additive Color Subtractive Color

RGB color space CMYK color space

Transmitting ColorOn 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 ColorRed, 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 = 28 combinations (256). With 3 channels and 256 tone levels per channel we can represent > 16 million colors with 24 bits.

Printing ColorWorks 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 ColorUse CMY color space because:

•Cyan absorbs red light•Magenta absorbs green light•Yellow absorbs blue light

Printing ColorThe 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 ColorThe 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 FilesBefore 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 FilesBefore 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 GraphicsAn 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 GraphicsDrawing 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

<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="scale(0.5)"> <polygon fill="red" stroke="blue" stroke-width="10“ points="350, 75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10“ points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5"/> </g> </svg>

Vector GraphicsCan 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