Published on

Published in: Technology, Art & Photos
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Introduction to Multimedia <ul><li>SMM 2005 </li></ul><ul><li>Muhd. Nabil Ahmad Zawawi </li></ul><ul><li>Jabatan Multimedia, FSKTM, UPM </li></ul><ul><li>[email_address] </li></ul><ul><li>03-89466526 </li></ul><ul><li> </li></ul>
  2. 2. Introduction to Multimedia <ul><li>Chapter 4 </li></ul>
  3. 3. Graphics Overview <ul><li>Key feature/element in multimedia products </li></ul><ul><li>Most of the time, using text only is not enough to convey a message to the user. </li></ul><ul><li>Multimedia products need attractive graphical combination and presentation </li></ul><ul><li>Developers must understand the purpose and significance of graphics that are going to be used in their projects </li></ul><ul><li>Also important in information delivery. </li></ul>
  4. 4. Graphics Overview <ul><li>Graphics can be developed using several methods: </li></ul><ul><ul><li>Illustration software </li></ul></ul><ul><ul><li>Graphic/image manipulation software </li></ul></ul><ul><ul><li>Acquiring through scanning or camera transfer </li></ul></ul><ul><li>Graphic files can be stored in various file format – each format has different purposes </li></ul>
  5. 5. 4.1 Elements of Graphic <ul><li>To create a remarkable graphics, developer must understand graphics and its elements: </li></ul><ul><ul><li>Lines </li></ul></ul><ul><ul><li>Shapes </li></ul></ul><ul><ul><li>Space </li></ul></ul><ul><ul><li>Texture </li></ul></ul><ul><ul><li>Color </li></ul></ul>
  6. 6. Lines <ul><li>A mark with length and directions </li></ul><ul><li>Continuous mark made on some surface by a moving point </li></ul><ul><li>Types of line include: vertical , horizontal , diagonal , straight or ruled , curved , bent , angular , etc. </li></ul>
  7. 7. Shapes <ul><li>Enclosed space defined and determined by other art elements such as line , color , value , and texture </li></ul><ul><li>Can appear as 2 dimensional ( 2D ) or 3 dimensional ( 3D ) </li></ul>
  8. 8. Space <ul><li>Refers to the distance or area between , around , above , below , or within things </li></ul><ul><li>can be described as two-dimensional or three-dimensional; as flat, shallow or as positive or negative space etc </li></ul>
  9. 9. Texture <ul><li>Surface quality or &quot;feel&quot; of an object, its smoothness , roughness , softness , etc </li></ul><ul><li>Actual or Simulated </li></ul>
  10. 10. Texture <ul><li>Actual textures - can be felt with fingers </li></ul><ul><li>Simulated textures - suggested by an artist in the painting of different areas of a picture </li></ul>
  11. 11. Color <ul><li>Produced by light of various wavelengths - when light strikes an object and reflects back to the eyes </li></ul>
  12. 12. Color <ul><li>An element of art with three properties: </li></ul><ul><ul><li>hue or tint (the color name) </li></ul></ul><ul><ul><li>intensity (purity and strength of a color) </li></ul></ul><ul><ul><li>value (the lightness or darkness of a color) </li></ul></ul><ul><li>Photographers measure color temperature in degrees Kelvin (K). </li></ul>7200 to 8500 Rainy, Misty Daylight 8000 to 27,000 Clear Blue Sky Degrees Kelvin Description
  13. 13. Graphics Image Development <ul><li>Graphical images obviously play a very important role in multimedia products </li></ul><ul><ul><li>Images may be photograph-like bitmaps, vector-based drawings, or 3D renderings </li></ul></ul><ul><li>Access to the right tools and right hardware for image development is important! </li></ul><ul><ul><li>E.g., graphic designers like to have large, high-resolution monitors or multiple monitors </li></ul></ul>
  14. 14. Graphics Image Development <ul><li>Still images are generated in two ways: </li></ul><ul><ul><li>bitmaps (or raster-based ) </li></ul></ul><ul><ul><li>vector - drawn </li></ul></ul>
  15. 15. Generating still images: Bitmap <ul><li>Bitmap - a matrix describing the individual dots that are the smallest elements (pixels) of resolution on a computer screen or printer </li></ul>
  16. 16. Generating still images: Bitmap <ul><li>Example </li></ul>
  17. 17. Generating still images: Bitmap <ul><li>Monochrome just requires one bit per pixel , representing black or white </li></ul>BMP – 16 KB
  18. 18. Generating still images: Bitmap <ul><li>8 bits per pixel allows 256 distinct colors </li></ul>BMP – 119KB
  19. 19. Generating still images: Bitmap <ul><li>16 bits per pixel represents 32K distinct colors (Most graphic chipsets now supports the full 65536 colors and the color green uses the extra one bit) </li></ul>BMP – 234 KB
  20. 20. Generating still images: Bitmap <ul><li>24 bits per pixel allows millions of colors </li></ul>BMP – 350KB
  21. 21. Generating still images: Bitmap <ul><li>More bits provide more color depth , hence more photo-realism, </li></ul><ul><ul><li>but require more memory and processing power </li></ul></ul><ul><li>Graphics production software may capture in 24-bit color and convert to 8-bit </li></ul>
  22. 22. Generating still images: Bitmap <ul><li>GIF and PNG formats use a 8-bit color table allowing up to 256 color </li></ul>GIF – 74KB PNG – 63KB
  23. 23. Generating still images: Bitmap <ul><li>JPG preserves more color depth with 16 bits per pixel </li></ul>JPG – 19KB
  24. 24. Generating still images: Bitmap <ul><li>Bitmaps are best for photo-realistic images or complex drawings requiring fine detail </li></ul>
  25. 25. Generating still images: Bitmap <ul><li>Bitmaps picture and their suitability of use:- </li></ul><ul><ul><li>Use the native Microsoft bmp format as a raw image that will later be processed. It faster to process. </li></ul></ul><ul><ul><li>Use JPEG, for photo sharing on the web because of its size and quality. </li></ul></ul><ul><ul><li>GIF is normally used for diagrams, buttons, etc., that have a small number of colours </li></ul></ul><ul><ul><ul><li>It is also suitable for simple animation because it supports interlaced images. </li></ul></ul></ul><ul><ul><li>PNG is almost equal to gif except that it didn’t support the animation format. </li></ul></ul>
  26. 26. How to Create Bitmap Graphics Clip Art Drawn Capture Scan
  27. 27. Generating still images: Vector-Drawn <ul><li>Vector-drawn - created from geometric objects such as lines, rectangles, ovals, polygons using mathematical formulas </li></ul><ul><li>e.g., RECT 0,0,200,300,RED,BLUE says </li></ul><ul><ul><li>“ Draw a rectangle starting at 0,0 (upper left corner of screen) going 200 pixels horizontally right and 300 pixels downward, with a RED boundary and filled with BLUE . ” </li></ul></ul>
  28. 28. Generating still images: Vector 300 pixel 200 pixel
  29. 29. Generating still images: Vector <ul><li>The first popular vector-drawn images were for computer-aided design (CAD) </li></ul><ul><ul><li>Such as AutoCAD, for aiding engineers and artists in creating complex renderings </li></ul></ul><ul><li>Graphic artists designing for print media use vector-drawn objects because they put rectangles and Bezier curves on paper without jaggies , exploiting high resolution printers </li></ul>
  30. 30. Generating still images: Vector <ul><li>Macromedia Freehand, Corel Draw & Adobe Illustrator are vector-drawing applications </li></ul><ul><ul><li>Macromedia Flash puts vector-drawing on the Web with a plug-in </li></ul></ul>
  31. 31. 3D Object <ul><li>3D graphics tools, such as Macromedia Extreme3D, or Form-Z, typically extend vector-drawn graphics in 3 dimensions (x, y and z) </li></ul>X y Z
  32. 32. 3D Object <ul><li>A 3D scene consist of object that in turn contain many small elements , such as blocks, cylinders, spheres or cones (described in terms of vector graphics) </li></ul><ul><li>The more elements, the finer the object’s resolution and smoothness. </li></ul>
  33. 33. 3D Object <ul><li>Objects as a whole have properties such as shape, color, texture, shading & location. </li></ul><ul><li>A 3D application lets you model an object’s shape, then render it completely. </li></ul>
  34. 34. 3D Object <ul><li>Modeling involves drawing a shape, such as a 2D letter, then extruding it or lathing it into a third dimension. </li></ul><ul><ul><li>extruding : extending its shape along a defined path </li></ul></ul><ul><ul><li>lathing : rotating a profile of the shape around a defined axis </li></ul></ul>
  35. 35. Extrude and Lathe
  36. 36. 3D Object <ul><li>Modeling also deals with lighting , setting a camera view to project shadows </li></ul>
  37. 37. 3D Object <ul><li>Rendering : produces a final output of a scene and is more compute-intensive. </li></ul>
  38. 38. 4.2 Colors <ul><li>The tools we use to describe color are different when the color is printed than from when it is projected. </li></ul><ul><ul><ul><li>Projected color is additive. </li></ul></ul></ul><ul><ul><ul><li>Printed color is subtractive. </li></ul></ul></ul>
  39. 39. Additive Color <ul><li>The additive reproduction process usually uses red , green and blue light to produce the other colors. </li></ul><ul><li>No light (or color) is black. All light (all colors) is white. </li></ul>
  40. 40. Subtractive Color <ul><li>Subtractive color explains the theory of mixing paints , dyes , inks , and natural colorants to create colors which absorb some wavelengths of light and reflect others. </li></ul>
  41. 41. 4.2 Colors <ul><li>Color models : </li></ul><ul><ul><li>Different ways of representing information about color </li></ul></ul><ul><ul><li>Example: </li></ul></ul><ul><ul><ul><li>RGB </li></ul></ul></ul><ul><ul><ul><li>HSB </li></ul></ul></ul><ul><ul><ul><li>CMYK </li></ul></ul></ul>
  42. 42. HSB Model <ul><li>Based on human perception of color, describe three fundamental properties of color: </li></ul><ul><ul><li>Hue </li></ul></ul><ul><ul><li>Saturation (or chroma ) </li></ul></ul><ul><ul><li>Brightness - relative lightness or darkness of color, also measured as % </li></ul></ul><ul><li>* There is no HSB mode for creating or editing images </li></ul>
  43. 43. HSB Model <ul><li>Hue - color reflected from or transmitted through an object, measured on color wheel </li></ul>
  44. 44. HSB Model <ul><li>Saturation (or chroma ) - strength or purity of color (% of grey in proportion to hue) </li></ul>
  45. 45. HSB Model <ul><li>Brightness - relative lightness or darkness of color, also measured as % </li></ul>0% 50% 100% white Black
  46. 46. RGB Model <ul><li>Add red, green and blue to create colors, so it is an additive model. </li></ul><ul><li>Assigns an intensity value to each pixel ranging from 0 (black) to 255 (white) </li></ul><ul><ul><li>A bright red color might have R 246, G 20, B 50 </li></ul></ul>
  47. 47. CMYK Model <ul><li>Based on light-absorbing quality of ink printed on paper </li></ul><ul><li>As light is absorbed, part of the spectrum is absorbed and part is reflected back to eyes </li></ul><ul><li>Associated with printing ; called a subtractive model </li></ul><ul><li>Four channels: Cyan (C ), magenta (M), yellow (Y) and black (K) </li></ul><ul><li>In theory, pure colors should produce black, but printing inks contain impurities, so this combination produces muddy brown </li></ul><ul><li>K is needed to produce pure black, hence CMYK is four-color process printing </li></ul>
  48. 48. 4.2 Color <ul><li>Color Gamut </li></ul><ul><ul><li>Range of colors that a color system can display or print </li></ul></ul><ul><ul><li>Different models have different gamut (RGB has the smallest gamut, approximately) </li></ul></ul>
  49. 49. 4.2 Color <ul><li>Color Channel </li></ul><ul><ul><li>Photoshop shows information about color elements in different channels </li></ul></ul><ul><ul><li>E.g., RGB has at least three channels; CMYK has at least four channels - at least, because Photoshop also permits “ Alpha ” channels for storing mask information </li></ul></ul><ul><ul><li>A mask lets part of an image be transparent so that other layers show through </li></ul></ul>
  50. 50. 4.3 Graphic Files & Application Format <ul><li>Most popular formats: </li></ul><ul><ul><li>JPEG (Joint-Photographic Experts Group) </li></ul></ul><ul><ul><li>GIF (Graphical Interchange Format) </li></ul></ul><ul><ul><li>PNG (Portable Network Graphic) </li></ul></ul><ul><ul><li>Other formats: </li></ul></ul><ul><ul><ul><li>BMP, PSD, TIFF/TIF, TGA, EPS, PCX, ICO </li></ul></ul></ul>
  51. 51. JPEG <ul><li>For continuous tone images, such as full-color photographs </li></ul><ul><li>Supports more than 16 millions of color ( 24-bit ) </li></ul><ul><li>Uses lossy compression (averaging may lose information) </li></ul>
  52. 52. GIF <ul><li>For large areas of the same color and a moderate level of detail . </li></ul><ul><li>Supports up to 256 colors </li></ul><ul><li>Allows transparency and interlacing </li></ul><ul><li>Uses lossless compression </li></ul>
  53. 53. PNG <ul><li>lossless , portable , well-compressed storage of raster images </li></ul><ul><li>patent-free replacement for GIF </li></ul><ul><li>also replace many common uses of TIFF </li></ul><ul><li>Support indexed-color, grayscale, and true color images + an optional alpha channel for transparency </li></ul>
  54. 54. Other Formats <ul><li>BMP – Bitmap File Format . </li></ul><ul><ul><li>Native bitmap file format of the Microsoft Windows environment. </li></ul></ul><ul><li>PSD – Photoshop Document . </li></ul><ul><ul><li>Native bitmap file format of the Adobe Photoshop graphical editing application. </li></ul></ul><ul><li>TIFF – Tagged Image File Format . </li></ul><ul><ul><li>Used to exchange documents between different applications and platforms. </li></ul></ul>
  55. 55. Other Formats <ul><li>TGA – Targa File Format . </li></ul><ul><ul><li>An image format designed for systems using Truevision video boards </li></ul></ul><ul><ul><li>supported by MS-DOS platforms. </li></ul></ul><ul><li>EPS – Encapsulated PostScript </li></ul><ul><ul><li>file format. Adobe drawing format supported by most illustration and page layout programs. </li></ul></ul>
  56. 56. Other Formats <ul><li>PCX – ZSoft IBM PC Paintbrush file format. </li></ul><ul><ul><li>One of the oldest bitmapped formats popularized by MS-DOS paint programs that first appeared in the early 1980's. </li></ul></ul><ul><li>ICO – Icon file format. </li></ul><ul><ul><li>Created by Microsoft for icons. </li></ul></ul>
  57. 57. 4.4 Information Delivery <ul><li>Graphics are used to convey information in multimedia products. </li></ul><ul><li>For example, a picture of an automobile engine is much more effective than text that merely describes it. </li></ul>
  58. 58. 4.4 Information Delivery <ul><li>Graphics for information delivery include: </li></ul><ul><ul><li>Drawn images </li></ul></ul><ul><ul><li>Charts and graphs </li></ul></ul><ul><ul><li>Maps </li></ul></ul><ul><ul><li>Scenery </li></ul></ul><ul><ul><li>People </li></ul></ul>
  59. 59. 4.4 Information Delivery <ul><li>In each case, the image must be relevant to the overall product. </li></ul><ul><li>Image size , color in respect to the application and other images, and positioning must all be considered when using images. </li></ul>
  60. 60. 4.4 Information Delivery
  61. 61. 4.4 Information Delivery
  62. 62. 4.4 Information Delivery
  63. 63. Summary <ul><li>The computer generates still images as bitmaps and vector-drawn images. </li></ul><ul><li>Images can be incorporated in multimedia using clip arts, bitmap software, or by capturing, editing, or scanning images. </li></ul><ul><li>Creating 3-D images involves modeling, extruding, lathing, shading, and rendering. </li></ul><ul><li>Color is one of the most vital components of multimedia. </li></ul>