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