1. ia Systems
520251: Multimed
!"#$%&'()*'()*+',-.,/
[!"#$%&]
29 '+012%/2 2553
1

2. Raster vs vector
2

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

4. Raster Graphics vs Vector Graphics
Raster graphics Vector graphics
(bitmap image) (drawing)
3

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

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

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

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

9. $%&344 raster
%&'()*+,#-./+ (x,y) 0&1-(#"2 pixel
6

10. $%&344 raster
34"5' pixel 67)8,)9:5
7

11. $%&344 raster
8,)9:54,);<=,>7?$@1A<$(2&.B+0(C*
8

12. $%&344 raster
6D+;"2-E .F$#$ pixel 92(G2><=,>7?$@1AH92(
9

13. #566(/7,849:;2%.
6<2=2 pixel (resolution)
lena_color_256.tif,
256x256, 201 KB
lena_color_512.tif,
!"#$%: http://www.imageprocessingplace.com/root_files_V3/image_databases.htm 512x512, 791 KB
10

14. #566(/7,849:;2%.
>=%')?@;A:B, (color depth)
lena_color_256.tif, lena_gray_256.tif,
256x256, 201 KB 256x256, 70 KB
!"#$%: http://www.imageprocessingplace.com/root_files_V3/image_databases.htm
11

15. Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12

16. Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12

17. Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12

18. Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12

19. Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
12

20. Color Depth
!"#$%: http://en.wikipedia.org/wiki/Color_depth
13

21. Color Depth
!"#$%: http://www.gimvic.org/predmeti/informatika/gradiva/navodila-strani/Uporaba_grafike.html
14

22. Color Depth
!"#$%: http://www.gimvic.org/predmeti/informatika/gradiva/navodila-strani/Uporaba_grafike.html
15

23. Color Depth
!"#$%: http://www.gimvic.org/predmeti/informatika/gradiva/navodila-strani/Uporaba_grafike.html
16

24. %&'0+C$4"2;E8); raster graphics
resolution x color depth
0@6I$I5-1)/%(&JK0(1A-#(B*G2>
(2&>BL$20@6I$I5-1 image processing
)B5()&DMN90>7A)(2&3!+;O5G2>
(2&*1*)B+8,)9:5
17

25. -7>C2C)/,A1#@!DE-@,8/=@(4$%&
18

26. Input
19

27. Output
20

28. )B5()&DMN9<$(2&3!+;O5G2>
21

29. Anti-aliasing
aliasing = !A/F/(@4!+-=D;A4
22

30. Anti-aliasing
aliasing = !A/F/(@4!+-=D;A4
jaggies
22

31. Anti-aliasing
aliasing = !A/F/(@4!+-=D;A4 anti-aliasing = 7<GFH;A4." smooth
jaggies
22

32. Anti-aliasing
aliasing = !A/F/(@4!+-=D;A4 anti-aliasing = 7<GFH;A4." smooth
jaggies
22

33. Anti-aliasing
aliasing = !A/F/(@4!+-=D;A4 anti-aliasing = 7<GFH;A4." smooth
jaggies
22

34. Anti-aliasing
!"#$%: http://flasheandoblog.wordpress.com/2009/11/29/flash- !"#$%: http://www.pixelburg.com/am_glossary/
performance-series-quality-adjustments/
23

35. Dithering
aliasing = -7>2+>@%!)=:*%'21I/EG2@%!
(-F'JA2@(4)-&+8'#!+'%D color depth
$%/G*H#!+'%DB, (color palette) 7,8',
6<@(.
!"#$%: http://en.wikipedia.org/wiki/Dithering
24

36. Dithering
aliasing = -7>2+>@%!)=:*%'21I/EG2@%!
(-F'JA2@(4)-&+8'#!+'%D color depth
$%/G*H#!+'%DB, (color palette) 7,8',
6<@(.
!"#$%: http://en.wikipedia.org/wiki/Dithering
24

37. Dithering
!"#$%: http://en.wikipedia.org/wiki/Dithering
25

38. Dithering
!"#$%: http://en.wikipedia.org/wiki/Dithering
25

39. Dithering
!"#$%: http://en.wikipedia.org/wiki/Dithering
25

40. Dithering
!"#$%: http://en.wikipedia.org/wiki/Dithering
25

41. Dithering
!"#$%: http://commons.wikimedia.org/wiki/File:Dithering_algorithms.png
26

42. Dithering
!"#$%: http://www.gimvic.org/predmeti/informatika/gradiva/navodila-strani/Uporaba_grafike.html
27

43. Image Compression
ion i s the
omp ress
Ima ge c data
“
l icatio n of ages.
app digi tal im
ssio n on is to
co mpre obje ctive
n effe ct , the f the
I nda ncy o
d uce redu to be able
re in o rder
ge da ta data in an
ima tran smit
sto re or m....”
to
effi cien t for
28

44. Image Compression
lossless lossy
29

45. lossless
30

46. Image Compression
lossless lossy
31

47. hi-quality comp: 83,261 Bytes lossy
lo-quality comp: 4,787 Bytes
!"#$%: http://en.wikipedia.org/wiki/Jpeg
32

48. Image File Format
33

49. JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
34

50. JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
I-$8,)9:5!"#$@1A429$/R-K9);0SC$6#2934(4"2;P+,-2(
))(P%
34

51. JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
I-$8,)9:5!"#$@1A429$/R-K9);0SC$6#2934(4"2;P+,-2(
))(P%
0%T$&:%3**PQ5K@1A$D-9<=,<$ www 92(@1A!/+
(I+-0U>2'G2>V"2-)
34

52. JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
I-$8,)9:5!"#$@1A429$/R-K9);0SC$6#2934(4"2;P+,-2(
))(P%
0%T$&:%3**PQ5K@1A$D-9<=,<$ www 92(@1A!/+
(I+-0U>2'G2>V"2-)
PQ5K05C(34"0(C*&2-5'0)1-+!:;
34

53. JPEG
<=,0@6$D6(2&-")PQ5K3** lossy compression
I-$8,)9:5!"#$@1A429$/R-K9);0SC$6#2934(4"2;P+,-2(
))(P%
0%T$&:%3**PQ5K@1A$D-9<=,<$ www 92(@1A!/+
(I+-0U>2'G2>V"2-)
PQ5K05C(34"0(C*&2-5'0)1-+!:;
0(C*G2>!1P+,S52(S52-6#295N(8);!1
34

54. !"#$%: http://upload.wikimedia.org/wikipedia/commons/c/ce/Quality_comparison_jpg_vs_saveforweb.jpg
35

55. !"#$%: http://upload.wikimedia.org/wikipedia/commons/c/ce/Quality_comparison_jpg_vs_saveforweb.jpg
36

56. !"#$%: http://en.wikipedia.org/wiki/JPEG
37

57. 38

58. 39

59. JPEG vs JPEG2000
!"#$%: www.lithium.it/050702_ jp2_qualitvergl_e.jpg
40

60. 41

61. JPEG
☹
jpg
gif
not suitable for
line drawing or
images with
text
42

62. 43

63. GIF
<=,0@6$D6(2&-")PQ5K3** lossless
compression (LZW)
44

64. GIF
<=,0@6$D6(2&-")PQ5K3** lossless
compression (LZW)
6#295N(8);!1P+,0>1-; 8-bit
44

65. GIF
<=,0@6$D6(2&-")PQ5K3** lossless
compression (LZW)
6#295N(8);!1P+,0>1-; 8-bit
0S92'(B*G2>@1A915B(RJ'52-0!,$ P9"0S92'(B*
G2>V"2-
44

66. GIF
<=,0@6$D6(2&-")PQ5K3** lossless
compression (LZW)
6#295N(8);!1P+,0>1-; 8-bit
0S92'(B*G2>@1A915B(RJ'52-0!,$ P9"0S92'(B*
G2>V"2-
44

67. GIF (Transparent)
45

68. GIF89a (Animation)
46

69. PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
47

70. PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
true color
47

71. PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
true color
web browser &/"$<S9"E !$B*!$/$ png
47

72. PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
true color
web browser &/"$<S9"E !$B*!$/$ png
!292&V&);&B* transparency @1AWB*W,)$P+,
47

73. PNG
<=,0@6$D6(2&-")PQ5K3** lossless
compression
true color
web browser &/"$<S9"E !$B*!$/$ png
!292&V&);&B* transparency @1AWB*W,)$P+,
47

74. I%&3(&94*34";G2>
48

75. 49

76. 50

77. 51

78. 52

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

80. Scanner
54

81. Scanner
54

82. Scanners
Flatbed Sheet-fed
55

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

84. 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
57

85. Digital Camera & VDO Camera
58

86. Digital Camera & VDO Camera
58

87. Digital Camera & VDO Camera
58

88. Digital Camera & VDO Camera
59

89. 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...
60

90. 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 +
61

91. Editing Raster Images
• Selecting an Area
• Cropping
• Image resizing & canvas size
• Rotating
• Adjusting the balance
62

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

93. Vector Graphics
64

94. Vector Graphics
65

95. Vector Graphics
66

96. Vector Graphics
66

97. Vector Graphics
66

98. 3D Modeling
67