The document discusses different types of graphics, including raster graphics and vector graphics. Raster graphics are composed of pixels arranged in a grid, while vector graphics use mathematical equations to describe shapes. The document then covers topics like raster image formats (GIF, JPG, PNG), color depth, resolution, editing raster images, and vector drawing formats.

1. Text Audio Image/Graphics Movie Animation

2. imageandgraphics

3. Agenda
• Raster graphics vs Vector graphics
• Raster graphics
• Raster image formats
• Acquiring an image
• Editing raster images
• Vector graphics
• Vector drawing formats

4. Raster Graphics vs Vector Graphics

5. Raster Graphics vs Vector Graphics
Raster graphics
(bitmap image)

6. Raster Graphics vs Vector Graphics
Raster graphics Vector graphics
(bitmap image) (drawing)

7. Raster Graphics vs Vector Graphics
Raster graphics Vector graphics
(bitmap image) (drawing)

8. Raster Graphics vs Vector Graphics
Raster graphics Vector graphics
(bitmap image) (drawing)

9. Raster Graphics vs Vector Graphics
Raster graphics Vector graphics
(bitmap image) (drawing)

10. Raster Graphics vs Vector Graphics
Raster graphics Vector graphics
(bitmap image) (drawing)

11. “Let’s take a look at Google Earth, for live demo...”

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. 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. 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. 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. 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. 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. 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. 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. Color Depth
• Color depth describes the
number of bits used to
represent the color of a single
pixel in a bitmapped image.

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

27. Dithering

28. Dithering

29. Dithering

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. Lossless vs Lossy
• Two techniques:

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. 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. 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. GIF
(pronounced ‘jif ’)
• Graphics Interchange Format (GIF)
• developed by Compuserve
• uses 8-bit color
• lossless compression, LZW (Lempel-Ziv-
Welch) algorithm.

36. GIF
• Best suited for
• simple graphics
• line drawings
• cartoons
• navigation buttons
• image containing text
(limited range of
colors)

37. GIF
• Best suited for
• simple graphics
• line drawings
• cartoons
• navigation buttons
• image containing text
(limited range of
colors)

38. GIF
• Best suited for
• simple graphics
• line drawings
• cartoons
• navigation buttons
• image containing text
(limited range of
colors)

39. GIF
• Best suited for
• simple graphics
• line drawings
• cartoons
• navigation buttons
• image containing text
(limited range of
colors)

40. GIF
• Best suited for
• simple graphics
• line drawings
• cartoons
• navigation buttons
• image containing text
(limited range of
colors)

41. GIF (Transparent)

42. GIF89a (Animation)
GIF animation is simply
a file with multiple
images stored in it. So,
think about the
size.

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. 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. JPG
☺ best for
photographic
images (for which a
variety of colors is
important)

46. JPG
☺ best for
photographic
images (for which a
variety of colors is
important)

47. JPG
☺ best for
photographic
images (for which a
variety of colors is
important)

48. JPG
☹
jpg
gif
not suitable for
line drawing or
images with
text

49. PNG
• Portable Network Graphics (pronounced ping)
• allow for true color
• lossless compression
• sophisticated transparency
• support by modern web-browsers

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. Raster Image File Formats
• .tiff / .tif
• used extensively for traditional print
graphics
• lossy & lossless compression available

52. Acquiring an Image
• Screen capture
• Scanner
• Digital camera & digital VDO camera
• Other sources

53. Screen Capture

54. Screen Capture

55. Screen Capture
n at i ve s
A l te r
O S or
App

56. Scanner

57. Scanner

58. Scanners
Flatbed Sheet-fed

59. Scanners
Handheld Drum
Use photomultiplier tube (PMT)
instead of CCD (read more on wiki)

60. TWAIN
Prior to TWAIN capture in one application

61. TWAIN
Prior to TWAIN save the file

62. TWAIN
Prior to TWAIN save the file

63. TWAIN
Prior to TWAIN

64. TWAIN
Prior to TWAIN open with another app

65. Using TWAIN

66. Using TWAIN

67. Using TWAIN
OP.
E ST
It’s ON

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. Digital Camera & VDO Camera

70. Digital Camera & VDO Camera

71. Digital Camera & VDO Camera

72. Digital Camera & VDO Camera

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. 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. Editing Raster Images
• Selecting an Area
• Cropping
• Image resizing & canvas size
• Rotating
• Adjusting the balance

76. Editing Raster Images
• Sharping the contrast
• Adjusting the resolution
• Saving and exporting

77. Vector Graphics

78. Vector Graphics

79. Vector Graphics

80. Vector Graphics

81. 3D Modeling

82. Converting Between
Vectors & Bitmaps

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