Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×


Nächste SlideShare
Wird geladen in …3

Hier ansehen

1 von 56 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)


Ähnlich wie Textgraphics1 (20)


Aktuellste (20)


  1. 1. Multimedia: Text and Graphics Dr. Tan CK 1
  2. 2. Multimedia Components Audio Cds Graphics Video Animation A i i Dr. Tan CK 2
  3. 3. What is typography ? It is the art of choosing and h i d arranging font Dr. Tan CK 3
  4. 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. 5. Font Classification Classification of font : Serif Sans serif Square serif Script Decorative / Alternative Dr. Tan CK 5
  6. 6. Font Classification SERIF Dr. Tan CK 6
  7. 7. Font Classification SANS-SERIF SANS SERIF Dr. Tan CK 7
  8. 8. Font Classification SQUARE-SERIF Dr. Tan CK 8
  9. 9. Font Classification SCRIPT Dr. Tan CK 9
  10. 10. Font Classification DECORATIVE & ALTERNATIVE Dr. Tan CK 10
  11. 11. The Wheel of Colour Dr. Tan CK 11
  12. 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. 13. Hot Colour Dr. Tan CK 13
  14. 14. Cold Colour Dr. Tan CK 14
  15. 15. Lukewarm Colour Dr. Tan CK 15
  16. 16. Cool Colour Dr. Tan CK 16
  17. 17. Light Colour Dr. Tan CK 17
  18. 18. Dark Colour Dr. Tan CK 18
  19. 19. Bright Colour Dr. Tan CK 19
  20. 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. 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. 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. 23. Basic Colour Schemes Primary Colour Dr. Tan CK 23
  24. 24. Basic Colour Schemes Secondary Colour Dr. Tan CK 24
  25. 25. Basic Colour Schemes Tertiary Colour Dr. Tan CK 25
  26. 26. Basic Colour Schemes Achromatic scheme Dr. Tan CK 26
  27. 27. Basic Colour Schemes Monochromatic scheme Dr. Tan CK 27
  28. 28. Basic Colour Schemes Complimentary scheme p y Dr. Tan CK 28
  29. 29. Basic Colour Schemes Split complimentary scheme p p y Dr. Tan CK 29
  30. 30. Basic Colour Schemes Clash scheme Dr. Tan CK 30
  31. 31. Basic Colour Schemes Analogous scheme g Dr. Tan CK 31
  32. 32. Basic Colour Schemes Neutral scheme Dr. Tan CK 32
  33. 33. Text Layout Elements of effective text layout : C – Contrast R - Repetition A - Alignment P – P i it Proximity Dr. Tan CK 33
  34. 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. 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. 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. 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. 38. Example 3 Dr. Tan CK 38
  39. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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