Multimedia:Text and Graphics

Dr. Tan CK 1

Multimedia Components

AudioAudio

GraphicsGraphicsCdsCds

VideoVideo

A i iA i i

VideoVideo

Dr. Tan CK 2AnimationAnimation

What is typography ?What is typography ?

It is the art of h i dchoosing and

arranging font

Dr. Tan CK 3

Typographyyp g p y• What type of font should be yp

used ?

• What font size is the most suitable ?

• What is the suitable space to pseparate each row of text ?

• What is the best contrast for the title and the text body ?

Dr. Tan CK 4

y

Font Classification

Classification of font :

Serif

Sans serif

Square serif

Script

Decorative / AlternativeDr. Tan CK 5

Font Classification

SERIF

Dr. Tan CK 6

Font Classification

SANS SERIFSANS-SERIF

Dr. Tan CK 7

Font Classification

SQUARE-SERIF

Dr. Tan CK 8

Font Classification

SCRIPT

Dr. Tan CK 9

Font Classification

DECORATIVE &DECORATIVE & ALTERNATIVE

Dr. Tan CK 10

The Wheel of Colour

Dr. Tan CK 11

The Saying goes …

Color affects our life.

Color is physical ……we see it.

C l i t i itColor communicates ……we receive it information from the language of

colorcolor.

Color is emotional ……it evokes our feelings.

Bride M WhelanBride M. Whelan .

(Color Harmony 2)...Dr. Tan CK 12

( y )

Hot ColourHot Colour

Dr. Tan CK 13

Cold ColourCold Colour

Dr. Tan CK 14

Lukewarm ColourLukewarm Colour

Dr. Tan CK 15

Cool ColourCool Colour

Dr. Tan CK 16

Light ColourLight Colour

Dr. Tan CK 17

Dark ColourDark Colour

Dr. Tan CK 18

Bright ColourBright Colour

Dr. Tan CK 19

Terms Related to Colour

H refers to colo r ( green ello redHue refers to colour ( green, yellow, red and others)

Value refers to value of the brightness / darkness

when we add more white colour, the value is highervalue is higher

when we add more black colour, the value is lower

Dr. Tan CK 20

Terms Related to Colour

Saturation the intensity, natural and richness y,of the colour

ll t th iddlusually represents the middle segment of the wheel of colour

pure colour (without white, black and grey) g y)

Tint colour which is added with white little b little to become lighterlittle by little to become lighter colour

Dr. Tan CK 21

Terms Related to Colour

Shades colour which is added with black little by little until it becomes darker colour

Dr. Tan CK 22

Basic Colour Schemes

Primary ColourDr. Tan CK 23

Basic Colour Schemes

Secondary ColourDr. Tan CK 24

Basic Colour Schemes

Tertiary ColourDr. Tan CK 25

Basic Colour Schemes

Achromatic schemeDr. Tan CK 26

Basic Colour Schemes

Monochromatic schemeDr. Tan CK 27

Basic Colour Schemes

Complimentary schemeDr. Tan CK 28

p y

Basic Colour Schemes

Split complimentary schemeDr. Tan CK 29

p p y

Basic Colour Schemes

Clash schemeDr. Tan CK 30

Basic Colour Schemes

Analogous schemeDr. Tan CK 31

g

Basic Colour Schemes

Neutral schemeDr. Tan CK 32

Text LayoutElements of effective text

layout :

C – ContrastR - RepetitionA - AlignmentP P i itP – Proximity

Dr. Tan CK 33

Text Layout

C t tFont ContrastC CContrast Colour ContrastGraphics ContrastGraphics Contrast

RepetitionR titi f h tRepetition of charactersRepetition of graphicsepet t o o g ap csCombined Repetition of graphics and te t

Dr. Tan CK 34text

Text LayoutAlignment

Alignment of charactersAlignment of characters Graphics AlignmentText and graphics Alignment

ProximityDistance between charactersDistance between charactersDistance between the graphicsg pDistance between characters and graphics

Dr. Tan CK 35

graphics

Example 1

ThinkBigBig,

Start Small… Locally

ImplementedImplemented, a

Proven WWay

to Global Data

Warehousing Success.

IDS

Dr. Tan CK 36

IDS

Example 2

Think BIGBIG

Act LOCALAct LOCAL

IDSInternational Data SecurityIDSA Successful Global Data Warehousing Service

1003A Jalan Jelutong Utara, Bandar Virtual, 66710, Gnalk, AISYALAM

Tel. No. 06-03-66765944

Dr. Tan CK 37

Example 3

Dr. Tan CK 38

Graphic imagesp g

• A digital display is divided intoA digital display is divided into discrete, individually addressable points called pixelspoints called pixels

• Images are produced by assigning a color and intensity toassigning a color and intensity to each pixel

Dr. Tan CK 39

Screen Resolution (SR)• The maximal image area of the

computer screen expressed incomputer screen, expressed in horizontal and vertical pixels

• Standard screen resolutions:• Standard screen resolutions:• 640 x 480• 800 x 600

1024 768• 1024 x 768• 1280 x 1024

Dr. Tan CK 40

1280 x 1024

Screen Resolution• When screen resolution

i i bincreases, images become smaller

M t h l ti ith• Match screen resolutions with actual screen size:• 640 x 480 (ss: 14”, 15”)

800 600 ( 15” 17” 21”)• 800 x 600 (ss: 15”, 17”, 21”)• 1024 x 768 (ss: 17”, 21”)

Dr. Tan CK 41

0 768 (ss: 7 , )

Vector Graphics• It is stored as a set of instruction

which describe the dimensionwhich describe the dimension and shape of every component of the drawing

• To display a vector graphic eachTo display a vector graphic, each instruction is read and converted to the shapes and colors thatto the shapes and colors that comprise the image

• Created by DRAW programs (CorelDraw MacDraw etc )

Dr. Tan CK 42

(CorelDraw, MacDraw, etc.)

Vector Graphics• Advantageous:

• Object orientation: objects in a graphic can be manipulated g p pseparately

• Good for line art and chartsGood for line art and charts

i d• Disadvantageous:• The larger the graphic, the longer it g g p , g

takes to render the image

Dr. Tan CK 43

Bit Maps• It is stored as a set of bits in

h d fi hcomputer memory that define the color and intensity of each pixel y pin an image

• Created by digitizing images• Created by digitizing images (photo, art work) or using PAINT

(PC P i b hprograms (PC Paintbrush, PaintShop Pro, etc.)p )

• Also called raster or pixel maps

Dr. Tan CK 44

Bit Maps• Advantageous:

C di l f t th t• Can display faster than vector graphics

• Good for reproducing images with complex variations in color, shading and detail

• Disadvantageous:Disadvantageous:• Require more disk space

Fi d l ti l d t• Fixed resolution can lead to scalability problems

Dr. Tan CK 45

Image Resolution (IR)• Size of the digitized image expressed

in horizontal and vertical pixelsin horizontal and vertical pixels• When IR and SR are identical, the

i fill thimage fills the screen• 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 gfill one quarter of the screen area

• When IR > SR only a portion of theWhen IR > SR, only a portion of the image can be displayed (required scroll bars)

Dr. Tan CK 46

scroll bars)

Image Depth• Image depth refers to the maximal

number of colors used in bitmapp• Each pixel can have 1 or more bits of

color information attached to itcolor information attached to itBits Colors Uses

1 2 Text, line drawing

4 16 Simple drawings, graphics

8 256 Natural images8 256 Natural images

24 16.7M Photographic realismDr. Tan CK 47

g p

Color Models• RGB each component of colors;

red green and blue is stored Forred, green and blue is stored. For example: in 24 bit color, there will be 8 bit f i f f h f th 3 l8 bits of info for each of the 3 colors

• HSL color info is divided into components of hue, saturation and luminosity (intensity)

• CMYK components of cyan, magenta, yellow and black are stored.magenta, yellow and black are stored. It is usually used for publishing

Dr. Tan CK 48

Image File Size• Size (in bytes) = (Height x Width x

Color Depth) / 8Color 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 =• 256 colors: (640 x 480 x 8 bits)/8 =

307 KB16M l (640 480 24• 16M colors: (640 x 480 x 24 bits)/8 = 922 KB

Dr. Tan CK 49

Images : Issues• High quality images

• Big file size• High resolutionsHigh resolutions

I i ill ff• Image requirement will affect hardware and software selections i l di h i d hiincluding authoring and graphic software, video graphics adapter, disk space and data transfer rate

Dr. Tan CK 50

Transfer Rate• The table below shows sample of

transfer times for a hard disk with a 2transfer times for a hard disk with a 2 MB transfer rate and a CD-ROM drive (2X) with a 300 KB transferdrive (2X) with a 300 KB transfer rateI Si HDD CD ROMImage Size HDD CD-ROM

307 K 0 2 sec 1 0 sec307 K 0.2 sec 1.0 sec

922 K 0.5 sec 3.1 sec

2359 K 1.2 sec 7.9 sec

Dr. Tan CK 51

Techniques

• Techniques for reducing image size:Techniques for reducing image size:

R d i f h i h d/ id h• Reduce size of height and/or width of image

• Reduce the number of colors (ex: image depth)g p )

• Image data compression

Dr. Tan CK 52

Image Compression• Data compression reduces file size by

eliminating redundancyeliminating redundancy• Compression involves two parts :

compression and decompression called codecs

• Two types of data compression:• Lossless output is exactly the• Lossless output is exactly the

same compression (used for programs and data) (done byprograms and data) (done by PKZIP, stacker)

Dr. Tan CK 53

Image Compression• Second type of data compression:

• Lossy a set of data will undergo a loss of accuracy after ycompression. Typically used on image or graphics, animation, g g p , ,audio and video

• Eliminates info that is difficult forEliminates info that is difficult for our eyes to detect (Ex: eye is less sensitive to change in color than itsensitive to change in color than it is to change in intensity

Dr. Tan CK 54

Image Formats • Bitmap (.bmp)

• Internal format used by WindowsInternal format used by Windows• Device Independent Bitmap (.dib)

S d d i d bi• Standard windows bitmap• Encapsulated PostScript Format p p

(.eps)• Used to exchange images betweenUsed to exchange images between

programs and platform• Graphics Interchange Format ( gif)• Graphics Interchange Format (.gif)

• Used to transmit and exchange Dr. Tan CK 55

images between platforms

Image Formats • Joint Photographic Expert Group

(.jpg/.jpeg)( jpg jp g)• Offers the greatest compression

(10:1 without visible loss)(10:1 without visible loss)• Targa (.tga)

• Used in high end image capture (35% compression)

• Tagged Image File Format (.tif)• Zsoft PCX ( pcx)Zsoft PCX (.pcx)

• Used to exchange images bewteen

Dr. Tan CK 56programs