Transcript Adobe Photoshop 7.0 Design Professional

Introduction to Multimedia
Unit
5
–
Multimedia Element:
Graphics
2014-15 Semester 2
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Unit 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
2
Introduction to Multimedia
Unit 5: Multimedia Element: 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.
3
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Sources of Digital Images
•
•
•
•
•
•
Scanned images
Still images
Video images
Photo CD
Stock photography
Clip art
4
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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
5
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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
6
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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
7
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
8
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Stock Photography
• High-quality photographs are available from
stock photography Web sites.
9
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
10
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
11
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Image Types
• Vector graphics
• Bitmap graphics
Vector graphics
Bitmap graphics
12
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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)
13
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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
14
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Image Quality
• Factors that affect the quality of bitmap graphics:
– Color resolution
– Image resolution
– Image compression
15
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
16
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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
17
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
18
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Color Resolution
As the color resolution increases, so does
the size of the file.
As the color resolution changes, so does the color
palette.
19
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
20
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
21
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
22
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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 rightangled triangle:
Solving for , we get
.
The width of the monitor is 12”.
The pixel density on the monitor
15”
600 px
800 px
23
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
24
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Image File Size
Image File Size (in bytes):
(Assume that there is no image compression)
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
25
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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)
26
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
* This slide is out of the examination scope.
27
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
28
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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).
29
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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
30
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.
31
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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.)
32
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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
33
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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
34
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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)
35
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Graphics Software
• Three types of graphics software
– Painting tools
– Drawing tools
– Image editing tools
• Painting tools
– Create bitmap graphics
– Example: Corel Paint Shop Pro
36
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Graphics Software
• Drawing tools
– Create vector graphics
– Example: Adobe Illustrator
• Image editing tools
– Edit existing images & photographs
– Example: Adobe Photoshop
37
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Graphics File Formats
• JPEG (Joint Photographer Experts Group)
– Supports millions of colors (24-bit)
– All browsers support the JPEG file format without plugins.
– 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
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Graphics File Formats
• JPEG
Low quality, high compression.
High quality, low compression.
39
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Graphics File Formats
• GIF (Graphics Interchange File Format)
– Supports up to 256 colors (8-bit)
– All browsers support the GIF file format without plugins.
– 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
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
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
41
Introduction to Multimedia
Unit 5: Multimedia Element: Graphics
Reference
• 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:14188-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