MMT image & graphics

2,216 views

Published on

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,216
On SlideShare
0
From Embeds
0
Number of Embeds
140
Actions
Shares
0
Downloads
297
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

MMT image & graphics

  1. 1. Text Audio Image/Graphics Movie Animation
  2. 2. imageandgraphics
  3. 3. Agenda • Raster graphics vs Vector graphics • Raster graphics • Raster image formats • Acquiring an image • Editing raster images • Vector graphics • Vector drawing formats
  4. 4. Raster Graphics vs Vector Graphics
  5. 5. Raster Graphics vs Vector Graphics Raster graphics (bitmap image)
  6. 6. Raster Graphics vs Vector Graphics Raster graphics Vector graphics (bitmap image) (drawing)
  7. 7. Raster Graphics vs Vector Graphics Raster graphics Vector graphics (bitmap image) (drawing)
  8. 8. Raster Graphics vs Vector Graphics Raster graphics Vector graphics (bitmap image) (drawing)
  9. 9. Raster Graphics vs Vector Graphics Raster graphics Vector graphics (bitmap image) (drawing)
  10. 10. Raster Graphics vs Vector Graphics Raster graphics Vector graphics (bitmap image) (drawing)
  11. 11. “Let’s take a look at Google Earth, for live demo...”
  12. 12. Raster Graphics • A raster image is composed of small, independently controlled dots (pixel, picture elements). • These dots are arranged in rows (x) and column (y), just as information is displayed on computer screens and most printers. • ‘Bitmap image’ comes from the description of the image pixels by bits and specific (x,y) coordinate.
  13. 13. Image Resolution • Image resolution is described by the number of pixels in its height and width. • The more pixels in an image, the higher its level of details or clarity. • The drawback = larger file size.
  14. 14. Anti-Aliasing • Aliasing is the jagged part in a line, curve, or edge that results from an image on a raster grid. • We call the jagged stairsteplike effect as the “jaggies”. • Anti-Aliasing diminishes jaggies → smooth edge.
  15. 15. Anti-Aliasing • Aliasing is the jagged part in a line, curve, or edge that results from an image on a raster grid. • We call the jagged stairsteplike effect as the “jaggies”. • Anti-Aliasing diminishes jaggies → smooth edge.
  16. 16. Anti-Aliasing jaggies • Aliasing is the jagged part in a line, curve, or edge that results from an image on a raster grid. • We call the jagged stairsteplike effect as the “jaggies”. • Anti-Aliasing diminishes jaggies → smooth edge.
  17. 17. Anti-Aliasing jaggies • Aliasing is the jagged part in a line, curve, or edge that results from an image on a raster grid. • We call the jagged stairsteplike effect as the “jaggies”. • Anti-Aliasing diminishes jaggies → smooth edge.
  18. 18. Anti-Aliasing jaggies • Aliasing is the jagged part in a line, curve, or edge that results from an image on a raster grid. • We call the jagged stairsteplike effect as the “jaggies”. • Anti-Aliasing diminishes jaggies → smooth edge.
  19. 19. Anti-Aliasing jaggies • Aliasing is the jagged part in a line, curve, or edge that results from an image on a raster grid. • We call the jagged stairsteplike effect as the “jaggies”. • Anti-Aliasing diminishes jaggies → smooth edge.
  20. 20. Color Depth • Color depth describes the number of bits used to represent the color of a single pixel in a bitmapped image.
  21. 21. 2.2 LCD Displays 2.3 Truecolor 2.4 32-bit color 2.5 Beyond truecolor Color Depth 2.5.1 BrilliantColor 3 Selection of color depth 4 See also 5 References 6 External links Indexed color With relatively low color depth, the stored value is typically an index into a color map or palette. The colors available in the palette itself may be fixed by the hardware or modifiable. Modifiable palettes are sometimes referred to as pseudocolor palettes. 1-bit color (2 1 = 2 colors) monochrome, often black and white • Color depth describes the 2-bit color (2 2 = 4 colors) CGA 4-bit color (2 4 = 16 colors) as used by EGA and by the least common denominator VGA standard at higher resolution 6-bit color (2 6 = 64 colors) Original Amiga chipset number of bits used to 8-bit color (2 8 = 256 colors) Most early color Unix workstations, VGA at low resolution, Super VGA, AGA represent the color of a single 12-bit color (2 12 = 4096 colors) some Silicon Graphics systems and Amiga systems in HAM mode. pixel in a bitmapped image. Old graphics chips, particularly those used in home computers and video game consoles, often feature an additional level of palette mapping in order to increase the maximum number of simultaneously displayed colors. For example, in the ZX Spectrum, the picture is stored in a two-color format, but these two colors can be separately defined for each rectangular block of 8x8 pixels. Direct color As the number of bits increases, the number of possible colors becomes impractically http://en.wikipedia.org/wiki/Color_depth Page 1 of 4
  22. 22. Color Depth Color depth No. of colors Color mode Palette 1-bit color 2 Indexed color Yes 4-bit color 16 Indexed color Yes 8-bit color 256 Indexed color Yes 24-bit color 16,777,216 True color No
  23. 23. True Color RGB • In true color images, each pixel is defined in terms of its actual: • red, green, blue (RGB) • cyan, magenta, yellow, black (CMYK) CMYK
  24. 24. Dithering • Dithering alternates the value of adjacent dots or pixels to create the effect of intermediate values. • Dithering is useful when performing color reductions. • Dithered images sometimes look grainy.
  25. 25. Dithering • Dithering alternates the value of adjacent dots or pixels to create the effect of intermediate values. • Dithering is useful when performing color reductions. • Dithered images sometimes look grainy.
  26. 26. Dithering
  27. 27. Dithering
  28. 28. Dithering
  29. 29. Dithering
  30. 30. Image Compression • Image compression is the application of data compression to digital images. • Reduce redundancy of the image data for efficient storage or transmission of the image file.
  31. 31. Lossless vs Lossy • Two techniques:
  32. 32. Lossless vs Lossy • Two techniques: • Lossless - the data are compressed and uncompressed with no loss of information. The amount of compression is limited.
  33. 33. Lossless vs Lossy • Two techniques: • Lossless - the data are compressed and uncompressed with no loss of information. The amount of compression is limited. • Lossy - the uncompressed file is not exactly the same as the original. Some loss of minor data occurs. Much greater compression is possible.
  34. 34. Raster Image Formats • Native and nonnative format • Native - the file is intended to be opened only with the application that was used to create it. (say, PSD of Adobe Photoshop.) • Nonnative - cross-application compatible, which means that any applications can open and save in this format. • GIF, JPG, and PNG are most common.
  35. 35. GIF (pronounced ‘jif ’) • Graphics Interchange Format (GIF) • developed by Compuserve • uses 8-bit color • lossless compression, LZW (Lempel-Ziv- Welch) algorithm.
  36. 36. GIF • Best suited for • simple graphics • line drawings • cartoons • navigation buttons • image containing text (limited range of colors)
  37. 37. GIF • Best suited for • simple graphics • line drawings • cartoons • navigation buttons • image containing text (limited range of colors)
  38. 38. GIF • Best suited for • simple graphics • line drawings • cartoons • navigation buttons • image containing text (limited range of colors)
  39. 39. GIF • Best suited for • simple graphics • line drawings • cartoons • navigation buttons • image containing text (limited range of colors)
  40. 40. GIF • Best suited for • simple graphics • line drawings • cartoons • navigation buttons • image containing text (limited range of colors)
  41. 41. GIF (Transparent)
  42. 42. GIF89a (Animation) GIF animation is simply a file with multiple images stored in it. So, think about the size.
  43. 43. GIF89a (Animation) GIF animation is simply a file with multiple images stored in it. So, think about the Oh... and it has no sound.... size.
  44. 44. JPG • Developed by the Joint Photographic Expert Group. • 24-bit color is allowed • lossy compression - allow for smaller file size but with the sacrifice of some clarity
  45. 45. JPG ☺ best for photographic images (for which a variety of colors is important)
  46. 46. JPG ☺ best for photographic images (for which a variety of colors is important)
  47. 47. JPG ☺ best for photographic images (for which a variety of colors is important)
  48. 48. JPG ☹ jpg gif not suitable for line drawing or images with text
  49. 49. PNG • Portable Network Graphics (pronounced ping) • allow for true color • lossless compression • sophisticated transparency • support by modern web-browsers
  50. 50. Raster Image File Formats • .bmp • .psd • commonly used by • default proprietary MS-Windows format of Adobe Photoshop • lossless compression can be specified • extra features e.g. layering • uncompressed in some programs
  51. 51. Raster Image File Formats • .tiff / .tif • used extensively for traditional print graphics • lossy & lossless compression available
  52. 52. Acquiring an Image • Screen capture • Scanner • Digital camera & digital VDO camera • Other sources
  53. 53. Screen Capture
  54. 54. Screen Capture
  55. 55. Screen Capture n at i ve s A l te r O S or App
  56. 56. Scanner
  57. 57. Scanner
  58. 58. Scanners Flatbed Sheet-fed
  59. 59. Scanners Handheld Drum Use photomultiplier tube (PMT) instead of CCD (read more on wiki)
  60. 60. TWAIN Prior to TWAIN capture in one application
  61. 61. TWAIN Prior to TWAIN save the file
  62. 62. TWAIN Prior to TWAIN save the file
  63. 63. TWAIN Prior to TWAIN
  64. 64. TWAIN Prior to TWAIN open with another app
  65. 65. Using TWAIN
  66. 66. Using TWAIN
  67. 67. Using TWAIN OP. E ST It’s ON
  68. 68. Scanned Image Size (in 24-bit color) Resolution image dimension (dpi) 1”x1” 4”x6” 8.5”x11” 72 15 KB 356 KB 1,420 KB 100 29 KB 703 KB 2,739 KB 300 264 KB 6,328 KB 24,653 KB 600 1,055 KB 25,313 KB 98,613 KB
  69. 69. Digital Camera & VDO Camera
  70. 70. Digital Camera & VDO Camera
  71. 71. Digital Camera & VDO Camera
  72. 72. Digital Camera & VDO Camera
  73. 73. JPEG vs RAW • Normally, digital cameras save their images in the JPEG format. • Automatically adjusts: white-balance and all. • RAW format is exactly what the camera sees when it takes the picture; NO adjustments have been made to the images. BUT, the file is a lot bigger in size...
  74. 74. Type of image Min resolution Camera Spec. Web images 640x480 1 megapixel + 5”x7” 2048x1536 3 megapixels + 8”x10” 2272x1704 4 megapixels + 16”x20” 3072x2048 6 megapixels +
  75. 75. Editing Raster Images • Selecting an Area • Cropping • Image resizing & canvas size • Rotating • Adjusting the balance
  76. 76. Editing Raster Images • Sharping the contrast • Adjusting the resolution • Saving and exporting
  77. 77. Vector Graphics
  78. 78. Vector Graphics
  79. 79. Vector Graphics
  80. 80. Vector Graphics
  81. 81. 3D Modeling
  82. 82. Converting Between Vectors & Bitmaps
  83. 83. Vector Drawing Formats • DWG - AutoCAD 2D/3D files • DXF - Standard ASCII text files storing vector data for CAD programs • WMF - Windows Metafile (stores vector and raster graphics) • AI - Vector format for Adobe Illustrator • CDR - Vector format for CorelDRAW

×