COM 205 Multimedia Applications

St. Joseph’s College Fall 2004

Chapter 6

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

• • • •

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

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

Bitmaps

Bitmaps can be inserted by:

–

Using clip art galleries.

–

Using bitmap software.

–

Capturing and editing images.

–

Scanning images.

Bitmap Example

•

Clipart

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

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.

• •

Bitmaps

Clipart Bitmap Software

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

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

Bitmaps

• •

Clipart Bitmap software

•

Capturing

•

Scanning

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 shading Flat shading Ray tracing Phong shading A scene can use different types of shading

Color

•

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

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 2 colors 4-bit 16 colors 8-bit 256 colors 24-bit 16,777,216 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) world’s 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 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)

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