1.
Multimedia:
Text and Graphics
Dr. Tan CK 1

2.
Multimedia Components
Audio
Cds Graphics
Video
Animation
A i i
Dr. Tan CK 2

3.
What is typography ?
It is the art of
choosing and
h i d
arranging font
Dr. Tan CK 3

4.
Typography
yp g p y
• What type of font should be
yp
used ?
• What font size is the most
suitable ?
• What is the suitable space to
p
separate each row of text ?
• What is the best contrast for the
title and the text body ?
y
Dr. Tan CK 4

5.
Font Classification
Classification of font :
Serif
Sans serif
Square serif
Script
Decorative / Alternative
Dr. Tan CK 5

6.
Font Classification
SERIF
Dr. Tan CK 6

7.
Font Classification
SANS-SERIF
SANS SERIF
Dr. Tan CK 7

8.
Font Classification
SQUARE-SERIF
Dr. Tan CK 8

9.
Font Classification
SCRIPT
Dr. Tan CK 9

10.
Font Classification
DECORATIVE &
ALTERNATIVE
Dr. Tan CK 10

11.
The Wheel of Colour
Dr. Tan CK 11

12.
The Saying goes …
Color affects our life.
Color is physical ……we see it.
Color
C l communicates ……we receive it
i t i
information from the language of
color.
color
Color is emotional ……it evokes our
feelings.
Bride M. Whelan
M .
(
(Color Harmony 2)...
y )
Dr. Tan CK 12

13.
Hot Colour
Dr. Tan CK 13

14.
Cold Colour
Dr. Tan CK 14

15.
Lukewarm Colour
Dr. Tan CK 15

16.
Cool Colour
Dr. Tan CK 16

17.
Light Colour
Dr. Tan CK 17

18.
Dark Colour
Dr. Tan CK 18

19.
Bright Colour
Dr. Tan CK 19

20.
Terms Related to Colour
Hue refers to colo r ( green yellow, red
H colour green, ello
and others)
Value refers to value of the brightness /
darkness
when we add more white colour, the
value is higher
when we add more black colour, the
value is lower
Dr. Tan CK 20

21.
Terms Related to Colour
Saturation the intensity, natural and richness
y,
of the colour
usually represents the middle
ll t th iddl
segment of the wheel of colour
pure colour (without white,
black and grey)
g y)
Tint colour which is added with white
little by little to become lighter
b
colour
Dr. Tan CK 21

22.
Terms Related to Colour
Shades colour which is added with
black little by little until it
becomes darker colour
Dr. Tan CK 22

23.
Basic Colour Schemes
Primary Colour
Dr. Tan CK 23

24.
Basic Colour Schemes
Secondary Colour
Dr. Tan CK 24

25.
Basic Colour Schemes
Tertiary Colour
Dr. Tan CK 25

26.
Basic Colour Schemes
Achromatic scheme
Dr. Tan CK 26

27.
Basic Colour Schemes
Monochromatic scheme
Dr. Tan CK 27

28.
Basic Colour Schemes
Complimentary scheme
p y
Dr. Tan CK 28

29.
Basic Colour Schemes
Split complimentary scheme
p p y
Dr. Tan CK 29

30.
Basic Colour Schemes
Clash scheme
Dr. Tan CK 30

31.
Basic Colour Schemes
Analogous scheme
g
Dr. Tan CK 31

32.
Basic Colour Schemes
Neutral scheme
Dr. Tan CK 32

33.
Text Layout
Elements of effective text
layout :
C – Contrast
R - Repetition
A - Alignment
P – P i it
Proximity
Dr. Tan CK 33

34.
Text Layout
Font Contrast
Contrast
C t t Colour C
C Contrast
Graphics Contrast
Repetition
Repetition of characters
R titi f h t
Repetition of g ap cs
epet t o o graphics
Combined Repetition of graphics and
text
te t
Dr. Tan CK 34

35.
Text Layout
Alignment
Alignment of characters
Graphics Alignment
Text and graphics Alignment
Proximity
Distance between characters
Distance between the graphics
g p
Distance between characters and
graphics
Dr. Tan CK 35

36.
Example 1
Think
Big,
Big
Start Small…
Locally
Implemented,
Implemented
a
Proven
Way
to
Global
Data
Warehousing
Success.
IDS
Dr. Tan CK 36

37.
Example 2
Think BIG
Act LOCAL
IDS
International Data Security
A Successful Global Data Warehousing Service
1003A Jalan Jelutong Utara, Bandar Virtual, 66710, Gnalk, AISYALAM
Tel. No. 06-03-66765944
Dr. Tan CK 37

38.
Example 3
Dr. Tan CK 38

39.
Graphic images
p g
• A digital display is divided into
discrete, individually addressable
points called pixels
• Images are produced by
assigning a color and intensity to
each pixel
Dr. Tan CK 39

40.
Screen Resolution (SR)
• The maximal image area of the
computer screen expressed in
screen,
horizontal and vertical pixels
• Standard screen resolutions:
• 640 x 480
• 800 x 600
• 1024 x 768
• 1280 x 1024
Dr. Tan CK 40

41.
Screen Resolution
• When screen resolution
increases, images become
i i b
smaller
• M t h screen resolutions with
Match l ti ith
actual screen size:
• 640 x 480 (ss: 14”, 15”)
• 800 x 600 ( 15” 17”, 21”)
(ss: 15”, 17”
• 1024 x 768 (ss: 17”, 21”)
0 7 , )
Dr. Tan CK 41

42.
Vector Graphics
• It is stored as a set of instruction
which describe the dimension
and shape of every component of
the drawing
• To display a vector graphic, each
graphic
instruction is read and converted
to the shapes and colors that
comprise the image
• Created by DRAW programs
(CorelDraw, MacDraw, etc )
(CorelDraw MacDraw etc.)
Dr. Tan CK 42

43.
Vector Graphics
• Advantageous:
• Object orientation: objects in a
g p
graphic can be manipulated
p
separately
• Good for line art and charts
• Disadvantageous:
i d
• The larger the graphic, the longer it
g g p , g
takes to render the image
Dr. Tan CK 43

44.
Bit Maps
• It is stored as a set of bits in
computer memory that define the
h d fi h
color and intensity of each pixel
y p
in an image
• Created by digitizing images
(photo, art work) or using PAINT
programs (PC P i b h
Paintbrush,
PaintShop Pro, etc.)
p )
• Also called raster or pixel maps
Dr. Tan CK 44

45.
Bit Maps
• Advantageous:
• C di l faster than vector
Can display f t th t
graphics
• Good for reproducing images with
complex variations in color,
shading and detail
• Disadvantageous:
• Require more disk space
• Fi d resolution can lead to
Fixed l ti l dt
scalability problems
Dr. Tan CK 45

46.
Image Resolution (IR)
• Size of the digitized image expressed
in horizontal and vertical pixels
• When IR and SR are identical, the
image fills the screen
i fill th
• A 320 x 240 pixel image on a 640 x
480 pixel display will be one half the
length and height of the screen and
g g
fill one quarter of the screen area
• When IR > SR, only a portion of the
SR
image can be displayed (required
scroll bars)
Dr. Tan CK 46

47.
Image Depth
• Image depth refers to the maximal
number of colors used in bitmap p
• Each pixel can have 1 or more bits of
color information attached to it
Bits Colors Uses
1 2 Text, line drawing
4 16 Simple drawings, graphics
8 256 Natural images
24 16.7M Photographic realism
g p
Dr. Tan CK 47

48.
Color Models
• RGB each component of colors;
red,
red green and blue is stored. For
stored
example: in 24 bit color, there will be
8 bits of info for each of the 3 colors
bit f i f f h f th l
• HSL color info is divided into
components of hue, saturation and
luminosity (intensity)
• CMYK components of cyan,
magenta, yellow and black are stored.
It is usually used for publishing
Dr. Tan CK 48

49.
Image File Size
• Size (in bytes) = (Height x Width x
Color Depth) / 8
• Sample file size for different images
size and color depths:
• Monocrome: (640 x 480 x 1 bit)/8
( )
= 38 KB
• 256 colors: (640 x 480 x 8 bits)/8 =
307 KB
• 16M colors: (640 x 480 x 24
l
bits)/8 = 922 KB
Dr. Tan CK 49

50.
Images : Issues
• High quality images
• Big file size
• High resolutions
• I
Image requirement will affect
i ill ff
hardware and software selections
including h i
i l di authoring and graphic
d hi
software, video graphics adapter, disk
space and data transfer rate
Dr. Tan CK 50

51.
Transfer Rate
• The table below shows sample of
transfer times for a hard disk with a 2
MB transfer rate and a CD-ROM
drive (2X) with a 300 KB transfer
rate
Image Size
I Si HDD CD-ROM
CD ROM
307 K 0.2
0 2 sec 1.0
1 0 sec
922 K 0.5 sec 3.1 sec
2359 K 1.2 sec 7.9 sec
Dr. Tan CK 51

52.
Techniques
• Techniques for reducing image size:
•R d
Reduce size of height and/or width
i f h i h d/ id h
of image
• Reduce the number of colors (ex:
image depth)
g p )
• Image data compression
Dr. Tan CK 52

53.
Image Compression
• Data compression reduces file size by
eliminating redundancy
• Compression involves two parts :
compression and decompression
called codecs
• Two types of data compression:
• Lossless output is exactly the
same compression (used for
programs and data) (done by
PKZIP, stacker)
Dr. Tan CK 53

54.
Image Compression
• Second type of data compression:
• Lossy a set of data will undergo
a loss of accuracy after
y
compression. Typically used on
image or graphics, animation,
g g p , ,
audio and video
• Eliminates info that is difficult for
our eyes to detect (Ex: eye is less
sensitive to change in color than it
is to change in intensity
Dr. Tan CK 54

55.
Image Formats
• Bitmap (.bmp)
• Internal format used by Windows
• Device Independent Bitmap (.dib)
• S d d windows bitmap
Standard i d bi
• Encapsulated PostScript Format
p p
(.eps)
• Used to exchange images between
programs and platform
• Graphics Interchange Format (.gif)
( gif)
• Used to transmit and exchange
images betweenCKplatforms
Dr. Tan 55

56.
Image Formats
• Joint Photographic Expert Group
( jpg jp g)
(.jpg/.jpeg)
• Offers the greatest compression
(10:1 without visible loss)
• Targa (.tga)
• Used in high end image capture
(35% compression)
• Tagged Image File Format (.tif)
• Zsoft PCX (.pcx)
( pcx)
• Used to exchange images bewteen
programs
Dr. Tan CK 56