Post on 05-Jun-2015
description
transcript
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