MULTIMEDIA ELEMENT

DEVELOPMENT

Element 2: Graphics
To learn the concept of graphic

To understand the importance of graphic in

multimedia development

To learn how to use graphic in the correct way

Overview

 Graphic
 Graphic technology
 Type of graphic
 Using graphic in multimedia courseware

3
Graphic technology

 Pictures of people, places, artwork &

photographs.
 Diagram of buildings (floor plan) and equipment
(blueprint).
 Charts and graphs, thru lines, curves.
 Backgrounds, 3D photo.

4
Graphic technology

 To create dazzling background textures.

 Visualization of Information and data, such as
spreadsheet data.
 Using animation to illustrate certain
procedures instead of video to save computer
memory.

5
DAZZLING
BACKGROUNDS
Visualization
Graphic technology

 Inject humor and light-heartedness in a

presentation via an animated cartoon.
 Enhanced a textual point on the screen, or
making a button visually stimulating through
PICONS or picture icons.

8
Resolution

 Image resolution
 Device resolution

 Color resolution

9
Image Resolution

 Pixel (picture elements):

 The number of pixels (picture elements/ dots)
used to display or represent an image.
 A dot of colored light that, when grouped
together with many other pixels in a large array,
represents an image on a computer screen.

10
Image Resolution

 Usually given by pixel width times pixel height

(640 X 480 image).
 The greater the number of pixels used to display
an image, the better the image detail definition
will be, but the file size increase.

Resolution Clear ∴ Size File

11
Device Resolution

Input device (Scanner):

Specify 2 key resolution (Scanning & Color).
 Scanning resolution :
- Resolution in dots per inch at which you choose
to scan an image.
- Ex 300dpi scanner, when it scan, it create 300X
300 pixels in dimension.

12
Device Resolution

Input device (Scanner):

 Color resolution :
- Same as image color resolution.
- Most scanner offer 32 bit color resolution and
some even offer 48 bit for high end work.

13
Color Resolution

 Called depth (specifies the number of bits

used in an image file to store color
information).
 The numbers of colors displayable in any
image file format or computer screen display
setting.
 Bit = binary digit, 8 bit = 1 byte.

14
Device Resolution

Output device (Printer):

 Printer resolution is a simple dots per inch
relationship between the data being sent and
the printer dpi capabilities.
 600 dpi color printer will print best an image
with also 600-dpi resolution.

15
Color Resolution

 8-bit byte, 256 combination

 8–bit system is called 256-value system.
 8-bit display also called as 256-color display. It
use 8 bits( a byte) to display each dot of color
(pixel).

16
Color Resolution

 16 bit known as High-color

 24-bit display is 3 byte available to store color
value. It display 16 million color value and known
as true color.

17
Color Depth
 Determine by how much data in bits is used
to determine the number of colors.
• 1 bit = 2 colors.
• 4 bit = 16 colors.
• 8 bit = 256 colors.
• 16 bit = 65,536 colors.
• 24 bit = 16,777,216 colors.

18
Images & Color

 The use of color depend on 2 factors:

- The subject or content of the image
- The technical capability of the computer
hardware and software

19
Images & Color

 Color is based on the perception of light; part of

electromagnetic spectrum (red, orange, yellow,
green, blue, indigo & violet).
 White is created by combining all colors & black by
absence of color (none at all).
- No color = Black
- All color = White

20
Images & Color

 Computer color based on combination of primary

color: Red, Green, Blue (RGB)
 Printed color based on reflective light use
subtractive color; cyan, magenta, yellow & black.
- Red + Green + Blue = White
- Green + Red = Yellow
- Blue + Red = Magenta
- Blue + Green = Cyan

21
Color Display

22
Computer Generated Color

 Monitor display color by shining an electron beam

off phosphorescent color dots (RGB) at very high
speed.
 RGB model - A 24-bit methodology where color is
specified in terms of red, green, and blue values
ranging from 0 to 255.

23
 Pixels & Color Depth

 To control the color of each pixel on the

screen, the operating system must dedicate a
small amount of memory to each pixel.
 In aggregate this memory dedicated to the
display screen is often referred to as "video
RAM" or "VRAM" (Video Random Access
Memory).

24
Pixels & Color Depth

 In the simplest form of black-and-white

computer displays, a single bit of memory is
assigned to each pixel.
 Because each memory bit is either positive or
negative (0 or 1), a 1-bit display system can
manage only two colors (black or white) for
each pixel on the screen:

25
26
Pixels & Color Depth :8-BIT

 If more bits of memory are dedicated to each

pixel in the display, more colors can be
managed.
 When 8 bits of memory are dedicated to each
pixel, each pixel could be one of 256 colors.

27
Pixels & Color Depth :8-BIT

 This kind of computer display is called an "8-

bit" or "256-color" display, and is common on
older laptop computers and desktop
machines.
 Although the exact colors that an 8-bit
screen can display are not fixed, there can
never be more than 256 unique colors on the
screen at once:

28
29
Pixels & Color Depth :24-BIT

 "True-color" or "24-bit" color displays can show

millions of unique colors simultaneously on the
computer screen.
 True-color images are composed by dedicating
24 bits of memory to each pixel; 8 each for the
red, green, and blue components (8 + 8 + 8 =
24):

30
31
Pixels & Color Depth

 The amount of VRAM dedicated to each screen

pixel in the display is commonly referred to as
the "color depth" of the monitor.
 Most Macintosh and Windows microcomputers
sold in recent years can easily display color
depths in thousands (16-bit) or millions (24-bit)
of simultaneous colors.

32
To check your computer
system for the range of
color depths available to
you, use the "Display"
control panel (Windows)
or the "Monitors" control
panel (Macintosh):
33
Color Depth & Graphics Files

 8-bit, or 256-color, image files dedicate 8 bits to

each color pixel in the image.
 In 8-bit images the 256 colors that make up the
image are stored in an array called a "palette" or
an "index."
 The color palette may also be referred to as a
"color lookup table" (CLUT). As mentioned
above, 8-bit images can never contain more than
256 unique colors

34
35
 Color Depth & Graphics Files

 True-color, or 24-bit, images are typically much

larger than 8-bit images in their uncompressed
state, because 24 bits of memory are dedicated to
each pixel, typically arranged in three
monochrome layers — red, green, and blue:

36
37
Types Of Graphics

 Vector Graphics

 Bitmapped Graphics

38
GRAPHICS - BITMAPS

39
GRAPHICS - BITMAPS

 Bitmaps/Raster.
 Picture is stored as a set of pixels & correspond
to the grid of dots on a computer screen.
 Each pixel consist 2 or more color.
 Each dot on the screen is set to the color
specified in the bitmap.
 Bitmaps can be created with a graphics editor.

40
Bitmapped Graphics

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

41
 A bitmap is a data matrix describe the
Bitmapped Graphics
characteristic of all pixels making up an image.
Each cube represent the data required to display a
4X4 pixel image 9the face of the cube) at various
color depth 9with each cube extending behind the
face indicating the number of bits-zeros or ones-
used to represent the color for that pixel)

42
 These images show the color depth of
bitmap as described in previous slide.
 Notes that images 4 & 6 require the
same memory (same file size) but the
gray-scale image is superior.
 Because file size (download time) is
important for images that are
displayed on the web, designers often
dither GIF bitmap files to the lowest
color depth that will still provide an
acceptable image.

43
Bitmaps

Available binary Combinations for

describing a Color

44
Bitmapped Graphics

 Images that come from a scanner, a

photographs or images captured from a video
camcorder or the TV.
 An image format suited for creation of:
 Photo-realistic images.
 Complex drawings.
 Images that require fine detail.

45
Bitmapped Graphics

 Bitmaps can be inserted by:

 Using clip art galleries.
 Using bitmap software.
 Capturing and editing images.
 Scanning images.

46
Bitmapped Graphics Software

 Windows Paintbrush
 Fractal Design Painter
 Adobe's Photoshop and Illustrator.
 Macromedia's Fireworks.
 Corel's Painter.
 CorelDraw.
 Quark Express

47
The windows paint accessory provides rudimentary bitmap
editing

48
Director, like most
serious multimedia
authoring packages,
includes powerful
image editing tools

49
Fireworks provides
tools for bitmap
and vector
graphics destined
for web
presentations.

50
Painter is used for creating original artwork; for book, medical, and
architectural illustration; to transform photographs into realistic-looking
paintings; to build seamless pattern for fabrics; and for storyboarding scene
concepts and costumes for movies and theater.
51
#Capturing and Editing Images

Image- editing programs let you add and delete

elements

52
Capturing and Editing Images

Image editing programs enable the user to:

 Enhance and make composite images.
 Alter and distort images.
 Add and delete elements.
 Morph (manipulate still images to create
animated transformations).

53
Morphing software was used to seamlessly transform the images of 16
kindergartners. When a sound track of music and voices was added to the
four-minute piece, it made a compelling Quick-time video about how
similar children are to each other. 54
Scanning Images

 Users can scan images from conventional sources

and make necessary alterations and manipulations.

55
Advantages Of Bitmap

 Images which reflects the reality in life.

 Could restore a large amount of information
about the images.
 It requires the number of pixels to produce the
appropriate height, width and color depth, while
vector is based on a relatively limited number of
drawing commands.

56
Disadvantages Of Bitmap
 Depends on the resolution (resolution-dependent)
and it needs to create a bigger file.
 Changing sizes of bitmap images would only change
the process of making the pixel images larger or
smaller.
 By resizing the images, images is often distorted due
to replication of pixel elements.

57
GRAPHICS – VECTOR IMAGES

 Vector Images.
 Image is stored as a set of mathematical
equations.
 Equations define curves, lines and shapes.
 Based on drawing elements or objects.

58
How Vector-Drawn Images Work

 A vector is a line that is described by the

location of its two endpoints.
 Vector drawing makes use of Cartesian co-
ordinates.
 Cartesian coordinates are numbers that
describe a point in two or three-dimensional
space as the intersection of X, Y, and Z axis.

59
GRAPHICS - VECTORS

60
Vector Images

 They may include items such as lines, rectangles,

ellipses, arcs, curves and etc.
 All images created are stored as a set of
instruction inside computer.

61
Applications of Vector-Images

Vector-drawn images are used in the following

areas:
 Computer-aided design (CAD) programs.
 Graphic artists designing for the print media.
 3-D animation programs.
 Applications requiring drawing of graphic
shapes.

62
Vector Images Software

 Packages that allow to create vector graphics

include :
 CorelDraw.
 Macromedia Freehand.
 Adobe Illustrator.

63
Advantages Of Vector Images
 Vector images are easily scalable.
 Vector images are smaller in file size.
 It can be proportionately resized without losing
the integrity of the original image.
 The image consists of a set of commands that
are drawn when needed.

64
Disadvantages Of Vector Images

 Less realistic.
 More complicated images, bigger files & take more
time to upload on the computer screen.
 Limited level of detail that can be presented in an
image.

65
More Graphics

 Clip Art
 Libraries of clip art are available online
 Digitized Pictures
 Pictures are transformed into bitmaps
 Can be still pictures or moving pictures
 Hyper pictures
 Pictures that are used as triggers for multimedia
events

66
Vector-Drawn Images vs Bitmaps

 Vector images use less memory space and have a

smaller file size as compared to bitmaps.
 For the Web, pages that use vector graphics in
plug-ins download faster, and when used for
animation, draw faster than bitmaps.

67
Vector-Drawn Images vs Bitmaps

 Vector images cannot be used for photorealistic

images.
 Vector images require a plug-in for Web-based
display.
 Bitmaps are not easily scalable and resizable.
 Bitmaps can be converted to vector images
using auto tracing.

68
Graphic File And Application Formats

 Bitmap formats.
 Vector format.
 Compressed formats.

69
Bitmap Formats

 Common file for graphics.

 The easiest files to import and export across
platforms.
 Including :
- Windows Bitmap (BMP) and Device Independent
Bitmap (DIB) with color depth ranging from two
to millions of colors.
- Windows Run Length Encoded (RLE) Bitmap:
use compression for 4-8 bit color depth images
to reduce file size.
- Apple Pict.

70
Vector Formats

 Windows metafile is a common vector type

image which is generated by processing vector
commands by graphic functions in the window
OS.
 File formats include the type of file, sizing,
number of objects and the data.

71
 Compressed Formats

 Compression file can be used to reduce the file

size, to speed transmission for networked
applications or store large numbers of images on
CD, others.

72
 Compression Technique

 LOSSLESS:
- No information is lost during compression/
decompression cycle.
 LOSSY :
- It discard some information during the
compression process. If data is repeatedly
compressed, decompressed and then
compressed again, quality will progressively
deteriorate.

73
Lossless Compression

Original Data

Compressed data

74
 Lossy Compression

≈ ≈
Original data Decompressed data Decompressed data

Compressed data Recompressed data

75
Compressed File (Gif)

 Graphic Interchange Format (GIF/.gif)

- Developed by Compuserve for moving
images and popular format in WWW.
- Standard format for web page images,
support by all browser.
- Limited to 256 colors.

76
 Compressed File (Gif)

 Use lossless compression, quality image is not

decreased when it is saved.
 Interlaced image : displayed initially at low
resolutions and it quality increased until it appears
at full quality.
 Non-interlaced gif: downloads one line of pixels at
a time from top to bottom, display each line of the
image as it gradually builds on the screen.

77
 Compressed File (Gif)

 Interlacing is best for larger GIF images such as

illustrations and photographs & poor choice; small
GIF graphics (navigation bars, buttons, and icons).
 These small graphics will load onto the screen much
faster if you keep them in conventional (non-
interlaced) GIF format.
 Interlacing has no significant effect on the file size
of GIF graphics.

78
79
 Compressed File (JPEG)

 Joint Photographic Experts Groups (JPEG and JPG).

- A 24-bit color image in small size file.
- Used commonly in WWW.
- Includes specific information about the image in
the file header (image size, bits per pixel, numbers
of color used), color palette and compressed
image data.

80
Compressed File (JPEG)

 JPEG uses the lossy compresion.

 Typical compression ratios for the lossless
algorithm are up to 2:1 and for the lossy
algorithm, 8:1 for printed material, and up to
35:1 for monitor displays.

81
82
83
The illustration shows what happens when you compress an
interface graphic (shown in a) in GIF format (b, no compression
artifacts) and JPEG compression (c, with JPEG compression
"noise" around the text and borders): 84
Compressed File (TIFF)

 Tagged Image File Format (TIFF)

- Very high compression capability.
- Good for black and white images.
- Used extensively in publishing and fax
applications.

85
 Compressed File (PNG)

 Portable Network Graphic (PNG, pronounced "ping") is

an image format developed by a consortium of graphic
software developers as a nonproprietary alternative to
the GIF image format.
 Designed specifically for use on Web pages.
 Unfortunately, the format is not yet widely supported,
and the current implementation of PNG graphics in the
major Web browsers does not fully support all of PNG's
features.

86
 Uses For Gif & Jpeg Files

 Netscape Navigator, Microsoft Internet Explorer, and

most other browsers support both GIF and JPEG
graphics (PNG graphics are not adequately supported).
 In theory, you could use either graphic format for the
visual elements of your Web pages.
 In practice, however, most Web developers will
continue to favor the GIF format for most page design
elements, diagrams, and images that must not dither
on 8-bit display screens.

87
 Uses For Gif & Jpeg Files

 Designers choose the JPEG format mostly for

photographs, complex "photographic" illustrations,
medical images, and other types of images in which
the compression artifacts of the JPEG process do
not severely compromise image quality.

88
 Advantages Of Gif Files

 GIF is the most widely supported graphics format

on the Web
 GIFs of diagrammatic images look better than
JPEGs
 GIF supports transparency and interlacing

89
 Advantages Of Jpeg Images

 Huge compression ratios mean faster download

speeds
 JPEG produces excellent results for most
photographs and complex images
 JPEG supports full-color (24-bit, "true color")
images

90
 Image Size

 It refer to height and width of the images and

measure in inch, cm, dot or others units.

WIDTH

HEIGHT

91
Image Size

 It also determine the display form and time

requirement to display on the screen.
 Example
 640 pixel x 480 pixel.
 1280 pixel x 1024 pixel.

92
Image Sources And Input

 Scanner :
- Have the ability to digitize an image opens
up a world of graphic sources.
- Scan images, photo, newspaper articles,
magazines pictures and etc.
 Digital cameras :
- Take a photo and download to pc and do
editing straight away.

93
Image Sources And Input
 The Web :
- WWW have a lot of source of images and content.
- Can be download and edited after request form the
owner.
 Clip Art :
- Include clip photo, video clips and animation clip.
- Corels Professional Photos CD-ROM series and
Photodex’s Picture factory series, MetaCreations and
Photo Disc and etc.

94
Graphic Design And Interface

 Define a control area and stage area :

- Needs to provide user with navigation and
application controls.
- Area to present the primary content.

95
Graphic Design And Interface

 Choose muted background images and

appropriate button graphic :
- Background should not impose or distract
the main focus point.
- The best button, it tell user it function.

96
Graphic Design And Interface

 Use visual depth to indicate importance :

- Use drop shadows, embossing, lens effect and
3D images.
- An application can become alive with shading
and highlights.

97
Graphic Design And Interface

 Keep it simple :
- Best graphical effects, are those unnoticed.
- Special effect give user a good feeling about
the interface.

98
Using Graphic For Multimedia

 Purpose :
- Images should be useful and meaningful to the
application.
- Avoid images with little relation with the
content.
- Don’t use many images in single display.

99
Using Graphic For Multimedia

 Quality :
- Careful with color depth especially for
applications display on lower color capability.
- Aware with image size and avoid vibrant/
bright color.

100
Using Graphic For Multimedia

 Cost :
- Related to purpose and quality.
- Copyright and ownership of graphics will
determine who is to be paid.

101
Backgrounds And Transitions

 Characteristics :
- Fill up the available display space.
- It complement but don’t overwhelm, content
place on top.
- Colors chosen carefully.
- Used consistently throughout the applications.

102
Clip Art From WWW

 ArtToday (Zedcor) Professional Images

http://www.arttoday.com
 http://www.barrysclipart.com/
 http://www.clipart.co.uk/index.shtml
 http://www.1clipart.com/
 http://www.free-clip-art.com/

103