GRAPHICS

Introduction

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

2
Sources of Digital Images

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

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

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

Slide scanner

5
Still Images and
Video Images
 Digital cameras capture images in a digital format.
 Digital video cameras can be used to capture frames
of video or still images.

Digital camera Digital video camera

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

7
Stock Photography

 High-quality photographs are available from stock

photography Web sites.

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

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

10
Image Types

 Vector graphics
 Bitmap graphics

Vector graphics Bitmap graphics

11
Vector 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)

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

13
Image Quality

 Factors that affect the quality of bitmap graphics:

 Color resolution
 Image resolution
 Image compression

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

15
Color Resolution

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

16
Color Resolution

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

17
Color Resolution

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

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

19
Image Resolution

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

20
Image Resolution

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

21
Image Resolution

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?

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

The pixel density on the monitor 600 px

800 px
22
Image 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.

23
Image File Size

Image File Size (in bytes):

(Assume that there is no image compression)

Image Size Screen Size Color Number of Approximated File

in Pixels Resolution Available Size (in Bytes)
(in Bits) Colors
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

24
Image File Size


 Example: When a 10 MB file is compressed to 2 MB, the

compression ratio is (10 / 2) = 5.

Image File Size (in bytes):

(Assume that the compression ratio is CR)

25
Colors

 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.
26
Colors

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

27
Colors

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

28
Colors
 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

29
Colors

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

30
Colors

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

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

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

33
Components 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)

34
Graphics Software

 Three types of graphics software

 Painting tools
 Drawing tools
 Image editing tools
 Painting tools
 Create bitmap graphics
 Example: Corel Paint Shop Pro

35
Graphics Software

 Drawing tools
 Create vector graphics
 Example: Adobe Illustrator
 Image editing tools
 Edit existing images & photographs
 Example: Adobe Photoshop

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

37
Graphics File Formats

 JPEG

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

38
Graphics File Formats

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

39
Graphics File Formats

 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

40
Summary
 Vector graphics are based on mathematical
formulas that define lines, shapes, and
curves.