Multimedia Dr. Mohd Juzaiddin Ab Aziz Comp. Science Dept, FTSM, UKM
What’s this course all about <ul><li>Exploring multimedia components (text, images, animation, sound, video) </li></ul><ul...
Graphic/Image File Formats <ul><li>Common graphics and image file formats: </li></ul><ul><li>http://www.dcs.ed.ac.uk/home/...
Graphic/Image Data Structures <ul><li>“ A picture is worth a thousand words, but it uses up three </li></ul><ul><li>thousa...
Standard System Independent Formats <ul><li>GIF (GIF87a, GIF89a) </li></ul><ul><li>Graphics Interchange Format (GIF) devis...
System Dependent Formats <ul><li>MicrosoftWindows: BMP </li></ul><ul><li>A system standard graphics file format for Micros...
Basics of Colour: Image and Video <ul><li>Light and Spectra </li></ul><ul><li>Visible light is an electromagnetic wave in ...
The Human Eye <ul><li>The eye is basically similar to a camera </li></ul><ul><li>It has a lens to focus light onto the Ret...
RGB Colour Space <ul><li>Colour Space is made up of Red, Green and Blue intensity components </li></ul>
Red, Green, Blue (RGB) Image Space
CIE Chromaticity Diagram <ul><li>Does a set of primaries exist that span the space with only positive coefficients? </li><...
Colour Image and Video Representations <ul><li>Recap: A black and white image is a 2-D array of integers. </li></ul><ul><l...
RGB to/from CMY   <ul><li>Converting from RGB to CMY is simply the following  </li></ul><ul><li>C =1 - R M =1 - G Y = 1 - ...
Summary of Colour <ul><li>Colour images are encoded as triplets of values. </li></ul><ul><li>Three common systems of encod...
Basics of Video <ul><li>Types of Colour Video Signals </li></ul><ul><li>Component video – each primary is sent as a separa...
NTSC Video <ul><li>525 scan lines per frame, 30 frames per second (or be exact, </li></ul><ul><li>29.97 fps, 33.37 msec/fr...
PAL Video <ul><li>625 scan lines per frame, 25 frames per second </li></ul><ul><li>(40 msec/frame) </li></ul><ul><li>Aspec...
Chroma Subsampling <ul><li>Chroma subsampling is a method that stores color </li></ul><ul><li>information at lower resolut...
Introduction to Text <ul><li>Dual Role: </li></ul><ul><li>–  Visual </li></ul><ul><li>representation of </li></ul><ul><li>...
text in multimedia <ul><li>Use of text in multimedia applications varies on: </li></ul><ul><ul><li>The type of application...
<ul><li>Change the look of your webpage by </li></ul><ul><li>changing: </li></ul><ul><li>–  Text Attributes </li></ul><ul>...
Text Attributes <ul><li>Text doesn't have to be boring! </li></ul><ul><li>•  Emphasis can be added by varying the text att...
Serif Tails Script Body paragraphs Times Roman, Courier New, Century Schoolbook, Palatino Sans-Serif No tails Block-orient...
Text Leading <ul><li>Leading specifies the amount of vertical space between lines of text </li></ul><ul><li>Measured in ei...
Text Size <ul><li>PIXEL (.ppi aka .dpi) </li></ul><ul><li>Measurement for monitor </li></ul><ul><li>resolution </li></ul><...
Text Design Considerations <ul><li>Readability </li></ul><ul><li>Is the text easy to read? </li></ul><ul><li>Avoid dark te...
Text Design Considerations <ul><li>Mood Creation </li></ul><ul><li>Set the mood using appropriate font </li></ul><ul><li>a...
Upcoming SlideShare
Loading in …5
×

Graphics

604 views

Published on

grafik

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
604
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Graphics

  1. 1. Multimedia Dr. Mohd Juzaiddin Ab Aziz Comp. Science Dept, FTSM, UKM
  2. 2. What’s this course all about <ul><li>Exploring multimedia components (text, images, animation, sound, video) </li></ul><ul><li>DELIVER </li></ul><ul><li>Effectively, communicate, Clear, Exact, Professional, Make an impression </li></ul>
  3. 3. Graphic/Image File Formats <ul><li>Common graphics and image file formats: </li></ul><ul><li>http://www.dcs.ed.ac.uk/home/mxr/gfx/ — </li></ul><ul><li>comprehensive listing of various formats. </li></ul><ul><li>See Encyclopedia of Graphics File Formats book in library </li></ul><ul><li>Most formats incorporate compression </li></ul><ul><li>Graphics, video and audio compression techniques in next </li></ul><ul><li>Chapter. </li></ul>
  4. 4. Graphic/Image Data Structures <ul><li>“ A picture is worth a thousand words, but it uses up three </li></ul><ul><li>thousand times the memory.” </li></ul><ul><li>A digital image consists of many picture elements, termed </li></ul><ul><li>pixels. </li></ul><ul><li>The number of pixels determine the quality of the image </li></ul><ul><li>( resolution). </li></ul><ul><li>Higher resolution always yields better quality. </li></ul><ul><li>A bit-map representation stores the graphic/image data in the same manner that the computer monitor contents are stored in video memory. </li></ul>
  5. 5. Standard System Independent Formats <ul><li>GIF (GIF87a, GIF89a) </li></ul><ul><li>Graphics Interchange Format (GIF) devised by the UNISYS </li></ul><ul><li>Corp. and Compuserve, initially for transmitting graphical </li></ul><ul><li>images over phone lines via modems </li></ul><ul><li>Uses the Lempel-Ziv Welch algorithm (a form of Huffman </li></ul><ul><li>Coding), modified slightly for image scan line packets (line </li></ul><ul><li>grouping of pixels) — Algorithm Soon </li></ul><ul><li>Limited to only 8-bit (256) colour images, suitable for images </li></ul><ul><li>with few distinctive colours (e.g., graphics drawing) </li></ul><ul><li>Supports interlacing </li></ul>
  6. 6. System Dependent Formats <ul><li>MicrosoftWindows: BMP </li></ul><ul><li>A system standard graphics file format for Microsoft </li></ul><ul><li>Windows </li></ul><ul><li>Used in Many PC Graphics programs, Cross-platform support </li></ul><ul><li>It is capable of storing 24-bit bitmap images </li></ul>
  7. 7. Basics of Colour: Image and Video <ul><li>Light and Spectra </li></ul><ul><li>Visible light is an electromagnetic wave in the 400nm - 700 </li></ul><ul><li>nm range. </li></ul><ul><li>Most light we see is not one wavelength, it’s a combination </li></ul><ul><li>The profile is called a spectra. </li></ul>
  8. 8. The Human Eye <ul><li>The eye is basically similar to a camera </li></ul><ul><li>It has a lens to focus light onto the Retina of eye </li></ul><ul><li>Retina full of neurons </li></ul><ul><li>Each neuron is either a rod or a cone. </li></ul><ul><li>Rods are not sensitive to colour. </li></ul>
  9. 9. RGB Colour Space <ul><li>Colour Space is made up of Red, Green and Blue intensity components </li></ul>
  10. 10. Red, Green, Blue (RGB) Image Space
  11. 11. CIE Chromaticity Diagram <ul><li>Does a set of primaries exist that span the space with only positive coefficients? </li></ul><ul><li>Yes, but not the pure colours. </li></ul><ul><li>In 1931, the CIE defined three standard primaries (X, Y, Z) . </li></ul><ul><li>The Y primary was intentionally chosen to be identical to the luminous-efficiency ( how well the source provides visible light from a given amount of electricity )function of human eyes. </li></ul><ul><li>All visible colours are in a horseshoe shaped cone in the X-Y-Z space. Consider the plane X+Y+Z=1 and project it onto the X-Y plane, we get the CIE chromaticity diagram. </li></ul>
  12. 12. Colour Image and Video Representations <ul><li>Recap: A black and white image is a 2-D array of integers. </li></ul><ul><li>Recap: A colour image is a 2-D array of (R,G,B) integer triplets. These triplets encode how much the corresponding phosphor should be excited in devices such as a monitor. </li></ul><ul><li>Beside the RGB representation, YIQ and YUV are the two commonly used in video. </li></ul>
  13. 13. RGB to/from CMY <ul><li>Converting from RGB to CMY is simply the following </li></ul><ul><li>C =1 - R M =1 - G Y = 1 - B The reverse mapping is similarly obvious </li></ul><ul><li>R =1 - C G =1 - M B = 1 - Y The two system may also be known as additive for RGB and subtractive for CMY. </li></ul><ul><li>RGB to/from YIQ </li></ul><ul><li>The YIQ system is the colour primary system adopted by NTSC for colour television broadcasting. The YIQ color solid is formed by a linear transformation of the RGB cube. Its purpose is to exploit certain characteristics of the human visual system to maximize the use of a fixed bandwidth. The transform maxtrix is as follows </li></ul>
  14. 14. Summary of Colour <ul><li>Colour images are encoded as triplets of values. </li></ul><ul><li>Three common systems of encoding in video are RGB, YIQ, </li></ul><ul><li>and YCrCb. </li></ul><ul><li>Besides the hardware-oriented colour models (i.e., RGB, CMY, </li></ul><ul><li>YIQ, YUV), HSB (Hue, Saturation, and Brightness, e.g., used </li></ul><ul><li>in Photoshop) and HLS (Hue, Lightness, and Saturation) are </li></ul><ul><li>also commonly used. </li></ul><ul><li>YIQ uses properties of the human eye to prioritise information. </li></ul><ul><li>Y is the black and white (luminance, (B&W)) image, I and Q are the </li></ul><ul><li>colour (chrominance) images. YUV uses similar idea. </li></ul><ul><li>YUV is a standard for digital video that specifies </li></ul><ul><li>image size, and decimates the chrominance images (RGB) (for 4:2:2 </li></ul><ul><li>video) </li></ul>
  15. 15. Basics of Video <ul><li>Types of Colour Video Signals </li></ul><ul><li>Component video – each primary is sent as a separate video </li></ul><ul><li>signal. </li></ul><ul><li>– The primaries can either be RGB or a luminance-chrominance </li></ul><ul><li>transformation of them (e.g., YIQ, YUV). </li></ul><ul><li>– Best colour reproduction </li></ul><ul><li>– Requires more bandwidth and good synchronization of the </li></ul><ul><li>three components </li></ul><ul><li>Composite video – colour (chrominance) and luminance signals </li></ul><ul><li>are mixed into a single carrier wave. Some interference between </li></ul><ul><li>the two signals is inevitable. </li></ul><ul><li>S-Video (Separated video, e.g., in S-VHS) – a compromise </li></ul><ul><li>between component analog video and the composite video. It </li></ul><ul><li>uses two lines, one for luminance and another for composite </li></ul><ul><li>chrominance signal. </li></ul>
  16. 16. NTSC Video <ul><li>525 scan lines per frame, 30 frames per second (or be exact, </li></ul><ul><li>29.97 fps, 33.37 msec/frame) </li></ul><ul><li>Aspect ratio 4:3 </li></ul><ul><li>Interlaced, each frame is divided into 2 fields, 262.5 lines/field </li></ul><ul><li>20 lines reserved for control information at the beginning of </li></ul><ul><li>each field (Fig. ??) </li></ul><ul><li>– So a maximum of 485 lines of visible data </li></ul><ul><li>– Laser disc and S-VHS have actual resolution of 420 </li></ul><ul><li>lines </li></ul><ul><li>– Ordinary TV – 320 lines </li></ul>
  17. 17. PAL Video <ul><li>625 scan lines per frame, 25 frames per second </li></ul><ul><li>(40 msec/frame) </li></ul><ul><li>Aspect ratio 4:3 </li></ul><ul><li>Interlaced, each frame is divided into 2 fields, 312.5 lines/field </li></ul><ul><li>Colour representation: </li></ul><ul><li>– PAL uses YUV (YCrCb) colour model </li></ul><ul><li>– composite = </li></ul><ul><li>Y + 0.492 x U sin(Fsc t) + 0.877 x V cos(Fsc t) </li></ul><ul><li>– In PAL, 5.5 MHz is allocated to Y, 1.8 MHz each to U and </li></ul><ul><li>V. </li></ul>
  18. 18. Chroma Subsampling <ul><li>Chroma subsampling is a method that stores color </li></ul><ul><li>information at lower resolution than intensity information. </li></ul><ul><li>Why is this done? — COMPRESSION </li></ul><ul><li>Human visual system (HVS) more sensitive to variations in </li></ul><ul><li>brightness than colour. </li></ul><ul><li>So devote more bandwidth to Y than the color difference </li></ul><ul><li>components Cr/I and Cb/Q. </li></ul><ul><li>– HVS is less sensitive to the position and motion of color </li></ul><ul><li>than luminance </li></ul><ul><li>– Bandwidth can be optimized by storing more luminance </li></ul><ul><li>detail than color detail. </li></ul><ul><li>Reduction results in almost no perceivable visual difference. </li></ul>
  19. 19. Introduction to Text <ul><li>Dual Role: </li></ul><ul><li>– Visual </li></ul><ul><li>representation of </li></ul><ul><li>message </li></ul><ul><li>– Graphical Element </li></ul>
  20. 20. text in multimedia <ul><li>Use of text in multimedia applications varies on: </li></ul><ul><ul><li>The type of application </li></ul></ul><ul><ul><li>Educational, Entertainment, Business </li></ul></ul><ul><ul><li>Audience ie. Children, teens, adults, Elderly, ESL </li></ul></ul><ul><li>For example </li></ul><ul><ul><li>CD-ROM educational titles aimed at </li></ul></ul><ul><ul><li>preschoolers would have little text, </li></ul></ul><ul><ul><li>while adult educational titles such </li></ul></ul><ul><ul><li>as foreign language studies might </li></ul></ul><ul><ul><li>rely heavily on text </li></ul></ul>
  21. 21. <ul><li>Change the look of your webpage by </li></ul><ul><li>changing: </li></ul><ul><li>– Text Attributes </li></ul><ul><li>– Design/Layout/Placement of the text </li></ul>
  22. 22. Text Attributes <ul><li>Text doesn't have to be boring! </li></ul><ul><li>• Emphasis can be added by varying the text attributes </li></ul><ul><li>• Font type - Arial, Times New Roman, Comic Sans </li></ul><ul><li>• Style - Regular, bold, italics </li></ul><ul><li>• Kerning – space between cha r a cters </li></ul><ul><li>• Leading - vertical space between </li></ul><ul><li>lines of </li></ul><ul><li>text. </li></ul><ul><li>• Size - pts vs. pixels ( 8 pt, 8 px, 10 pt, 10 px, 36pt.) </li></ul><ul><li>• Color - (red, blue, black… ) </li></ul><ul><li>• Special effects - underline, shadow, superscript,subscript, </li></ul>
  23. 23. Serif Tails Script Body paragraphs Times Roman, Courier New, Century Schoolbook, Palatino Sans-Serif No tails Block-oriented Headings, titles Arial, Verdana, Helvetica, Arial Black, Comic Sans MS
  24. 24. Text Leading <ul><li>Leading specifies the amount of vertical space between lines of text </li></ul><ul><li>Measured in either positive or negative points or zero </li></ul>
  25. 25. Text Size <ul><li>PIXEL (.ppi aka .dpi) </li></ul><ul><li>Measurement for monitor </li></ul><ul><li>resolution </li></ul><ul><li># of pixels per inch of monitor </li></ul><ul><li>display </li></ul><ul><li>A display setting of: </li></ul><ul><li>1280 x 1024 has 1.3 million DPI, </li></ul><ul><li>800 x 600 has 480,000 DPI </li></ul>
  26. 26. Text Design Considerations <ul><li>Readability </li></ul><ul><li>Is the text easy to read? </li></ul><ul><li>Avoid dark text against dark </li></ul><ul><li>background </li></ul><ul><li>Visual Appeal </li></ul><ul><li>Does the text complement the graphics? </li></ul><ul><li>Choose text that co-ordinates with any graphics </li></ul><ul><li>Position text carefully to achieve a good balance with the other </li></ul><ul><li>multimedia elements Text Layout – simple, clear, white space </li></ul>
  27. 27. Text Design Considerations <ul><li>Mood Creation </li></ul><ul><li>Set the mood using appropriate font </li></ul><ul><li>attributes and layout </li></ul><ul><li>Headings usually looks better Sans- </li></ul><ul><li>Serif, body usually looks better Serif </li></ul><ul><li>Design in General </li></ul><ul><li>Use a max of 2 to 3 different types of fonts </li></ul><ul><li>Avoid exotic fonts for consistent look on different systems </li></ul><ul><li>Use a max of 2 to 3 colours in a document/website </li></ul><ul><li>Never use underlining in a webpage </li></ul>

×