introduction to multimedia unit 5 – multimedia element: graphics 2014-15 semester 2

Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Unit Unit 55 – – Multimedia Element: Multimedia Element: GraphicsGraphics

2014-15 2014-15 Semester 2Semester 2

Unit 5: Multimedia Element: GraphicsUnit 5: Multimedia Element: Graphics

Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

2

Unit OutlineUnit Outline

• In this unit, we will learn:– Sources of Digital Images

– Image Types• Vector Graphics• Bitmap Graphics

– Image Quality• Color Resolution• Image Resolution• Image Compression

– Image File Size

– Colors

– Graphics Card

– Graphics Software

– Graphic File Formats


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

3

IntroductionIntroduction

• A single table, chart, graphic or photograph can illustrate what might take many pages of narrative text to communicate.

• Graphics may do a better job of creating a lasting impression or establishing a mood than the narrative text may communicate.

• Graphics must be in digital form if we want to use them in multimedia applications.

• Digitizing is needed to convert images into a format that the computer can recognize and manipulate.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

4

Sources of Digital ImagesSources of Digital Images

• Scanned images• Still images• Video images• Photo CD• Stock photography• Clip art


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

5

Scanned ImagesScanned Images

• Scanners digitize already developed images, including photographs and drawings.

• The optical resolution (measured in dpi, dots per inch) of a scanner refers to the number of sensor elements per inch on the scan head.

Scanner


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Scanned ImagesScanned Images

• When scanning images, we may choose the highest possible resolution to obtain the best quality. At a later stage, we may reduce the resolution of the image in order to reduce its file size.

• Slide scanners are used for converting a slide or a negative to a digital image.

6

Slide scanner


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

• Digital cameras capture images in a digital format.

• Digital video cameras can be used to capture frames of video or still images.

7

Still Images and Still Images and Video ImagesVideo Images

Digital camera Digital video camera


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

8

Photo CDPhoto CD

• Photo CD enables photos taken with a film camera to be viewed in a digital format.

Photo CDs, such as Kodak’s Picture CD, store hundreds of digital photographs.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Stock PhotographyStock Photography

• High-quality photographs are available from stock photography Web sites.

9


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Stock PhotographyStock Photography

• Commercial image providers or stock photography houses create and sell the rights to images.

• We may purchase the rights to use an image but that does not mean we own it or can use it whenever we want.

• Copyright and licensing agreements vary from one stock photography house to another.

10


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

11

Clip ArtClip Art

• Clip Art is a collection of drawings or illustrations, generally organized by category.

• If images are in the public domain, it means we can use these images at our discretion for no charge.

Clip art from clip art libraries is available for download from the Web.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Image TypesImage Types

• Vector graphics• Bitmap graphics

12

Vector graphics Bitmap graphics


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

13

Vector GraphicsVector Graphics

• Refer to drawings that contain flat colors without tonal variations

• Are composed of geometric shapes such as lines, curves, ovals and polygons

• Can be constructed using mathematical formulas

• Can be resized and rotated without distortion• Have smaller file sizes for simple drawings• Are good for graphics that must retain distinctive

lines when sizes change (e.g. logos)


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Bitmap GraphicsBitmap Graphics

• Refer to images that have tonal variations, such as color photographs

• Are composed of pixels• Enlarging bitmap graphics too much may result

in staircasing, or jaggies.• Bitmap is an image type suitable for creating

– photo-realistic images– complex drawings– images which contain fine details

14


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

15

Image QualityImage Quality • Factors that affect the quality of bitmap

graphics:– Color resolution – Image resolution– Image compression


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

16

Color ResolutionColor Resolution

• Also known as color depth, bit depth, pixel depth, bit resolution, pixel resolution

• Color resolution refers to the number of bits used to represent the color of a pixel.

• Color resolution ranges from 1-bit color to 32-bit color.

• An image with a higher color resolution will be more colorful and of higher photographic quality.

• Higher color resolution will make the file size larger.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


17

Color Resolution Number of Colors

32-bit 232 16.7+ million colors plus an 8-bit (256-level) grayscale mask

24-bit 224 16.7+ million colors

16-bit 216 65536 colors

8-bit 28 256 colors

4-bit 24 16 colors

2-bit 22 4 colors

1-bit 21 2 colors


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• The actual number of colors displayed on the image depends on the color resolution and the monitor settings. There is no guarantee that our image will be displayed as we planned.

• If we save an image as 24-bit color but our user’s monitor is set to display only 256 colors, the colors in the image will be converted to a fixed palette. This conversion can result in drastic changes in the way our image appears.

18

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


19

As the color resolution increases, so does the size of the file.

As the color resolution changes, so does the color palette.

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

20

Image ResolutionImage Resolution

• Pixel dimensions refer to the number of pixels along the height and width of a bitmap image.

• Image resolution is measured in pixels per inch (PPI).

• Images must be at a certain minimum image resolution to avoid a pixelated or out-of-focus appearance.

• Normally, web graphics can be set to 96 PPI for display on monitor.

• The file size of an image is proportional to its pixel dimensions.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• The more graphics we use, the longer the viewers will have to wait. Thus, we should optimize the images by:– cropping to the area that we need for the final product– choosing the pixel dimensions of the image that we

need– reducing the color resolution to the minimum

necessary for the image– reducing the image resolution to no more than 96 ppi

• If the image resolution is set too low, the image quality may become unacceptable.

21


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Since there are more pixels per unit area, an image of higher image resolution usually produce more details and finer color transitions than an image of lower image resolution.

• Monitor resolution refers to the number of pixels that a monitor can show at one time.

Examples: 1024 x 768, 1440 x 900

• The actual display size of an image on-screen is determined by the pixel dimensions of the image and the monitor resolution.

22


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


Pixel Density on Monitor

A 15 inch monitor with an aspect ratio of 4:3 has monitor resolution of 800 x 600. Calculate the pixel density on the monitor?

23

Let the width and height of the monitor be and .

Since the diagonal is 15” in length, we have, by property of a right-angled triangle:

Solving for , we get .

The width of the monitor is 12”.

The pixel density on the monitor600 px

800 px

15”

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Image CompressionImage Compression

• Mathematical algorithms are used to reduce file sizes.

• Smaller file size – reduces the required storage space– shortens the transfer time if the file needs to be

transmitted

• Two kinds of compression– Lossless compression: None of data has been actually

lost during compression.– Lossy compression: Some data has been lost during

compression.

24


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

25

Image File SizeImage File Size

Image Size in Pixels

Screen Size Color Resolution (in Bits)

Number of Available Colors

Approximated File Size (in Bytes)

640 x 480 Full screen 8 256 307, 200

320 x 240 Quarter screen 8 256 76, 800

1024 x 768 Full screen 24 16.7 million 2, 359, 296

Image File Size (in bytes): (Assume that there is no image compression)


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Image File SizeImage File Size

•

• Example: When a 10 MB file is compressed to 2 MB, the compression ratio is (10 / 2) = 5.

26

Image File Size (in bytes):(Assume that the compression ratio is CR)


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

ColorsColors

• Color is the frequency of a light wave within the narrow band of the electromagnetic spectrum to which the human eye responds.

• The cornea of the eye acts as a lens to focus light rays onto the retina. The light rays stimulate many thousands of specialized nerves, called rods and cones, that cover the surface of the retina.

• Receptors in the cones are sensitive to red, green, and blue light, and all the nerves together transmit the pattern of color information to the brain.

27* This slide is out of the examination scope.

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

28

ColorsColors

• Two common color methods:– Additive color method– Subtractive color method

• Additive color method– Color is created by combining

colored light sources in three primary colors - red, green, and blue (RGB).

– Most TV and computer monitors use this method.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

29

ColorsColors

• Subtractive color method– Color is created by combining

colored media such as paints or ink.

– Subtractive color method is the process used to create color in printing.

– The printed page consists of tiny halftone dots of three primary colors - cyan, magenta, and yellow (CMY).


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

30

ColorsColors

• Color models are used to specify color in computer.

• RGB model– A 24-bit methodology where color is specified in

terms of red, green, and blue values ranging from 0 to 255.

Black (0, 0, 0) 000000

White (255, 255, 255) FFFFFF

Red (255, 0, 0) FF0000

Green (0, 255, 0) 00FF00

Blue (0, 0, 255) 0000FF

Yellow (255, 255, 0) FFFF00

Cyan (0, 255, 255) 00FFFF

Magenta (255, 0, 255) FF00FF


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

31

ColorsColors

• HSB and HSL models – H: Hue, S: Saturation, B: Brightness, L: Lightness– Color is specified as an angle from 0 to 360 degrees

on a color wheel.

• Other color models: CMYK, CIE, YIQ, YUV, YCC

Color wheel is often used to specify the hue value.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

• The total range of colors supported by a color model is known as its gamut.

• Different color models have different gamuts– It may not be always possible to accurately convert

colors from one model to another.

• Some color models are device dependent. (Different devices give rise to slightly different sets of colors.)

32

ColorsColors

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Graphics CardGraphics Card

• Also known as video card, video adaptor, display card, display adaptor, graphics acceleration card

• Is an expansion card whose function is to generate and output images to a display

• Sometimes, graphics hardware is integrated on the motherboard.

• Popular brands: ATI, NVIDIA

33


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Components of Graphics CardComponents of Graphics Card

• Display memory / Video RAM (VRAM)– for storing pixel attributes

• Graphics controller– for coordinating the activities of all other components

of the card– some has the capability of manipulating the image

data independently of the central processor

34

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Components of Graphics CardComponents of Graphics Card

• Digital to Analog Converter (DAC)– It takes the final digital data from the VRAM and

converts it to analog signals before sending them to the monitor for display (the digital data stored in the VRAM describes the pixel attributes needed to draw an image on the screen)

35

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

• Three types of graphics software– Painting tools– Drawing tools– Image editing tools

• Painting tools– Create bitmap graphics – Example: Corel Paint Shop Pro

36

Graphics SoftwareGraphics Software


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

37

Graphics SoftwareGraphics Software

• Drawing tools– Create vector graphics– Example: Adobe Illustrator

• Image editing tools– Edit existing images & photographs – Example: Adobe Photoshop


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Graphics File FormatsGraphics File Formats

• JPEG (Joint Photographer Experts Group)– Supports millions of colors (24-bit)– All browsers support the JPEG file format without

plug-ins.– Uses a sophisticated mathematical model to produce

a sliding scale of graphic compression that enables us to choose the degree of compression we wish to apply to the image

– Photographs and continuous-tone images look best and are generally smallest when saved as a JPEG.

38


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• JPEG

Low quality, high compression. High quality, low compression.

39


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• GIF (Graphics Interchange File Format)– Supports up to 256 colors (8-bit)– All browsers support the GIF file format without plug-

ins.– Images that have solid areas of color look best and

are smallest when saved as a GIF.– Animated GIF (GIF89a) is used for animation (see

Unit 6).

40


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• PNG (Portable Network Graphics)– PNG file format supports variable transparency that

allows us to store up to 256 different levels of partial transparency (i.e. from fully transparent to fully opaque).

– A unique (special) feature of the PNG file format is its capacity for gamma correction (the ability to correct for differences in how computer monitors interpret color. Colors will be closer between platforms.)

• Other graphics file formats: BMP, TIFF, PICT, PSD, PDD

41


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

ReferenceReference

• Part of this slide set is prepared or/and extracted from the following book:– Multimedia For The Web Revealed, Calleen Coorough

& Jim Shuman, Thomson Learning, 2006, ISBN:1-4188-3953-1

• This set of slides is for teaching purpose only.• Self-study slide(s) is / are within the scope of the

final examination.

42

introduction to multimedia unit 5 – multimedia element: graphics 2014-15 semester 2

Documents

multimedia unit

multimedia element

graphics introduction

multimedia scanned images

multimedia applications

multimedia digital cameras

slide scanner slide

slide scanners