1. PREVIOUSLY ON ELEMENTS OF VISUAL STYLE
前 回 のお 話

2. TE XTURE
HT T P: //WW W. F L ICK R.COM / P HOTO S /Y ND R A /4 3 4 3 4 7 3 2 5 3 /

3. TE XTURE

4. TE XTURE

5. LIGHT SOURCE
POINT OF OBSERVATION

6. IN
MIC
R
CID
EN
O FA
T L
T CE
IG
HT
FAC E
T NO
RMA
N
S U R FA C E D IF F U S IO
SU
R F AC
SU
E
RF
D
AC
IF
E
FU
RE
S
FL
IO
EC
N
TI
O
N
IN
TE
RN
AL
RE
PIGMENTS
FL
EC
TI
ON

7. RAY TRACIN G

8. G L O B A L I L L U M I N AT I O N

9. I RI DOL OGY, VOL . 2 , 1 9 8 2 , J E N SE N E NT E R P R I S E S , E S C O NDI D O
R. B . A R A M A N T: R E TI N A L T RA N SP LA NTAT I O N, S C I E NC E A N D MED I CI NE , J/F 2000

10. L AT E R A L I N H I B I T I O N
0.8 0.5 0. 8 0 .2 0 .5 0 .2
-0.25 1.0 -0.25 -0.25 1 .0 -0.25
0. 1 0. 4

12. DAZZLING EFFECT

13. PREVIOUSLY ON ELEMENTS OF VISUAL STYLE
前 回 のお 話

14. TE XTURE
肌理
RE FLE CTION & DIF F USIO N
反 射 ・拡 散
G L O B A L I L L U M I N AT I O N
大 域 照明
A MB IE N T OCCLUSION
環 境 的遮 蔽
L AT E R A L I N H I B I T I O N
側 方 抑制
KINETIC DISRUPTION
運動 的 崩壊

17. S EPA RATI ON

18. I N HIB I T I ON

19. A M BIE N T
OCCULUSION

20. D I FFU S I O N

21. A RE A S H AD OW

23. Elements of Visual Style
ii. Pixel

24. Elements of Visual Style
ii. Pixel

25. WHAT I S TH IS T HI N G C A L L E D P I X E L ?
ピ クセ ル と は何で し ょう

26. WHAT I S TH IS T HI N G C A L L E D P I X E L ?

27. RGB
FULL-COLOR
S TR I PE FI LT E R

29. PIXEL

30. 格 子状 に 並 ぶ PIXEL FORMS GRID

31. XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE

32. PIXEL

33. 色を 表す PIXEL
R EP R ESE N T S
A C O L OR

34. PIXEL
= ( )
RED
GREEN
BL UE

35. P IXEL
= ( )=( )
R ED
GREEN
B LUE
0~ 255
0~ 255
0~ 255

36. X
Y
P IXEL
= ( )=( )
R ED
GREEN
B LUE
X, Y
0~ 255
0~ 255
0~ 255
X, Y

37. PIXEL

38. 物 理量 を も つ PIXEL
H A S SPAT I A L
D I ME N SI O N S

39. P IXEL

40. 0. 3 5mm
P IXEL 0. 35mm
7 2D P I
B A SEL INE D ENS IT Y FO R PU BLISHI NG

41. P IXEL

42. 0. 2 3mm
P IXEL 0. 23mm
1 10D P I
A PPROX . STANDA R D DENSIT Y ON DE SKTO P TO DAY

43. P IXEL

44. 0. 0 8mm
P IXEL 0. 08mm
3 26D P I
R ET INA DI SPLAY

45. WHAT I S TH IS T HI N G C A L L E D P I X E L ?
ピ クセ ル と は何で し ょう

46. PIXEL FORMS GRID
格 子状 に 並 ぶ
PIXEL REPRESENTS A COLOR
色 を表 す
PIXEL HAS SPATIAL DIMENSIONS
物 理量 を も つ

47. HOW P IX EL R E PR E SE N T S A C OL OR
ピ クセ ル の 色が表 示 されるとき

48. + + =
CO LOR PR I M AR I ES R ED GREEN BLU E

49. + + =
CO LOR PR I M AR I ES R ED GREEN BLU E

50. + + =
CO LOR PR I M AR I ES R ED GREEN BLU E

51. + + =
CO LOR PR I M AR I ES R ED GREEN BLU E

52. + + =
CO LOR PR I M AR I ES R ED GREEN BLU E

53. 1 80 + 124 + 30 = ( )
180
124
30

54. INP UT
( )
18 0
12 4
30
OUTPUT

55. INP UT
( )
18 0
12 4
30
OUTPUT

56. INP UT
( )
18 0
12 4
30
C OR R ECT IO N
C OR RE C T ED INP UT
( )
19 2
13 9
62
OUTPUT

57. COLO R

58. さ れる
補
正
COLO R
W I L L B E G A MM A -
マ C O RR E C TE D
ン
ガ

59. 1.0
0.8
0.6
0.4
0.2
0.0
0.0 0.2 0.4 0.6 0.8 1.0

60. 1.0
0.8
0.6
OUTPUT
0.4
0.2
0.0
0.0 0.2 0.4 0.6 0.8 1.0
INP UT
DI S PL AY’S RES PO N SE C U RV E

61. 1.0
INPU T
0.8
0.6
OUTPUT
0.4
OUTPUT
0.2
0.0
0.0 0.2 0.4 0.6 0.8 1.0
INP UT

62. 1.0
INPU T
0.8
0.6
OUTPUT
0.4
OUTPUT
0.2
0.0
0.0 0.2 0.4 0.6 0.8 1.0
INP UT

63. 1.0
INPU T
0.8
0.6
OUTPUT
0.4
OUTPUT
0.2
0.0
0.0 0.2 0.4 0.6 0.8 1.0
INP UT

64. 1.0
INPU T
0.8
0.6
OUTPUT
0.4
OUTPUT
0.2
0.0
0.0 0.2 0.4 0.6 0.8 1.0
INP UT

65. 1.0
0.8
0.6
OUTPUT
0.4
0.2
0.0
0.0 0.2 0.4 0.6 0.8 1.0
INP UT
R E SP O N S E C U RV E

66. 1.0
0.8
0.6
OUTPUT
0.4
0.2
0.0
0.0 0.2 0.4 0.6 0.8 1.0
INP UT

67. 1.0
0.8
0.6
OUTPUT
0.4
0.2
0.0
0.0 0.2 0.4 0.6 0.8 1.0
INP UT
GAMMA CORRECTION

69. PRACTICE TIME.

70. COLO R

71. 別の 色空 間 SPAC E W IL L B E
に COLO R C O N VE RT E D
変換 され る I N TO A N OTH E R

72. y 1.0
0.9
520 525
515 530
0.8 535
510 540
545
0.7 550
505 555
560 SR G B C OL O R SPAC E
0.6 565
570
500
575
0.5 580
585
590
495
595
0.4
600
605
610
0.3 490 620
635
700
485
0.2
x+
480
y=
0
0.1 475
470
460
0.0 380
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0
x

73. y 1.0
0.9
520 525
515 530
0.8 535
510 540
545
0.7 550
505 555
560 W H AT IS TH I S ?
0.6 565
570
500
575
0.5 580
585
590
495
595
0.4
600
605
610
0.3 490 620
635
700
485
0.2
x+
480
y=
0
0.1 475
470
460
0.0 380
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0
x

74. TR I ST IMU L U S
E XPE RI M E N T

75. TR I ST IMU L U S
E XPE RI M E N T
R G B 三刺 激 による等色実験

76. TR I ST IMU L U S
E XPE RI M E N T
1 93 0 1 9 40

77. TR I ST IMU L U S
E XPE RI M E N T
TARGET COLOR

78. TR IS TIMU L U S
EX PERI M E N T
TARGET COLOR

79. 700 .0nm 546 .1n m 435 .8n m
TR IS TIMU L U S
LASERS
EX PERI M E N T
TARGET COLOR

80. 700 .0nm 546 .1n m 435 .8n m
TR IS TIMU L U S
EX PERI M E N T
+
+
+
C O EF F I C I EN TS
TARGET COLOR

81. 700 .0nm 546 .1n m 435 .8n m
TR IS TIMU L U S
EX PERI M E N T
+
+
+
+ +
TARGET COLOR MATCHED COLOR

82. 700 .0nm 546 .1n m 435 .8n m
+
+
+
0.65
+ 0.47
+ 0.02
TARGET COLOR MATCHED COLOR

83. 700 .0nm 546 .1n m 435 .8n m
+
+
+
0.74
+ 0.21
+ 0.07
TARGET COLOR MATCHED COLOR

84. 700 .0nm 546 .1n m 435 .8n m
+
+
+
0.00
+ 1.00
+ 0.87
TARGET COLOR MATCHED COLOR

85. 700 .0nm 546 .1n m 435 .8n m
+
+
+
0.00
+ 1.00
+ 0.87
TARGET COLOR MATCHED COLOR

86. 700 .0nm 546 .1n m 435 .8n m
+
+
+
0.00
+ 1.00
+ 0.87
+
+ 0.44
=
TARGET COLOR MATCHED COLOR

87. 700 .0nm 546 .1n m 435 .8n m
+
+
+
-0.44
+ 1.00
+ 0.87
TARGET COLOR MATCHED COLOR

88. T RI S TI M U L U S
E XP ER I M E NT

89. 0.4
0.3
0.2
0.1
0.0
-0.1
380 420 460 500 540 580 620 660 700 mm

90. 0.4
R
B
0.3
G
0.2
0.1
0.0
-0.1
380 420 460 500 540 580 620 660 700 mm
WAVELENGTH

91. 435 .8nm
0.4
R
B
0.3
G
0.2
0.1
0.0
-0.1
380 420 460 500 540 580 620 660 700 mm
WAVELENGTH

92. 435 .8nm 54 6.1 nm
0.4
R
B
0.3
G
0.2
0.1
0.0
-0.1
380 420 460 500 540 580 620 660 700 mm
WAVELENGTH

93. 435 .8nm 54 6.1 nm 700 .0nm
0.4
R
B
0.3
G
0.2
0.1
0.0
-0.1
380 420 460 500 540 580 620 660 700 mm
WAVELENGTH

94. 0.4
R
B
0.3
G
0.2
0.1
0.0
-0.1
380 420 460 500 540 580 620 660 700 mm
WAVELENGTH

95. 0.4
R
B
0.3
G
0.2
0.1
0.0
-0.1
380 420 460 500 540 580 620 660 700 mm
WAVELENGTH

96. R
r =
R + G + B
G
g =
R + G + B
B
b =
R + G + B
R G B TO rg b CONVERSION

97. R
r =
R + G + B
G
g =
R + G + B
B
b = = 1 - r - g
R + G + B
R G B TO rg b CONVERSION

98. 2.0
1.5
g
b r
1.0
0.5
0.0
0.5
1.0
1.5
380 420 460 500 540 580 620 660 700 mm
WAVELENGTH

99. 2.0
1.5
g
r
1.0
0.5
0.0
0.5
1.0
1.5
380 420 460 500 540 580 620 660 700 mm
WAVELENGTH

100. C IE RG B C OL O R SPAC E

101. g 3.0
2.5
r+
g=
0
2.0 515
510
520
505 525
1.5 530
500
535
540
495 500
1.0 550
555
490 560
565
570
0.5 485
575
580
480
500 600
500 700
0.0
380
0.5
-2.0 -1.5 -1.0 -0.5 0.0 0.5 1.0 1.5 2.0
r

102. g 3.0
2.5
B A SE S ON A
r+
g=
C H A R AC TE RI ST IC OF
0
2.0 515
510
520 H U M AN RE C O G NI TI O N
505 525
S TANDARD OB S ERVE R
1.5 530
500
535
540
495 500
1.0 550
555
490 560
565
570
0.5 485
575
580
480
500 600
500 700
0.0
380
0.5
-2.0 -1.5 -1.0 -0.5 0.0 0.5 1.0 1.5 2.0
r

103. g 3.0
2.5
B A SE S ON A
r+
g=
C H A R AC TE RI ST IC OF
0
2.0 515
510
520 H U M AN RE C O G NI TI O N
505 525
S TANDARD OB S ERVE R
1.5 530
500
535
540
495 500
1.0 550
555
490 560
565
570
0.5 485
575
580
480
500 600
500 700
0.0
380
0.5
-2.0 -1.5 -1.0 -0.5 0.0 0.5 1.0 1.5 2.0
r

104. 540
500
550
555
90 560
565
570
485
575
580
480
500 600
500 700
380

105. 540
500
550
555
90 560
565
570
485
575
580
480 1/3
500 600
500 700
380 1/3

106. g 3.0
2.5
r+
g=
0
2.0 515
510
520
505 525
1.5 530
500
535
540
495 500
1.0 550
555
490 560
565
570
0.5 485
575
580
480
500 600
500 700
0.0
380
0.5
-2.0 -1.5 -1.0 -0.5 0.0 0.5 1.0 1.5 2.0
r

107. g 3.0
y
2.5
r+
g=
0
2.0 515
510
520
505 525
1.5 530
500
535
540
495 500
1.0 550
555
490 560
565
570
0.5 485
575
580
480
500 600
500 700
0.0
380
x
0.5
-2.0 -1.5 -1.0 -0.5 0.0 0.5 1.0 1.5 2.0
r

109. () ()
X R
Y = M • G
Z B

110. C IE XY Z C O L O R SPAC E

111. y 1.0
0.9
520 525
515 530
0.8 535
510 540
545
0.7 550
505 555
560
0.6 565
570
500
575
0.5 580
585
590
495
595
0.4
600
605
610
0.3 490 620
635
700
485
0.2
x+
480
y=
0
0.1 475
470
460
0.0 380
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0
x

112. y 1.0
0.9
520 525
515 530
0.8 535
510 540
545
0.7 550
505 555
560 SR G B C OL O R SPAC E
0.6 565
570
500
575
0.5 580
585
590
495
595
0.4
600
605
610
0.3 490 620
635
700
485
0.2
x+
480
y=
0
0.1 475
470
460
0.0 380
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0
x

113. y 1.0
0.9
520 525
515 530
0.8 535
510 540
545
0.7 550
505 555 A D O BE R G B
560
0.6 565 C O L OR S PAC E
570
500
575
0.5 580
585
590
495
595
0.4
600
605
610
0.3 490 620
635
700
485
0.2
x+
480
y=
0
0.1 475
470
460
0.0 380
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0
x

114. y 1.0
0.9
520 525
515 530
0.8 535
510 540
545
H OW D O W E
0.7
505
550
555
C O N VE RT
560 E AC H OTH E R?
0.6 565
570
500
575
0.5 580
585
590
495
595
0.4
600
605
610
0.3 490 620
635
700
485
0.2
x+
480
y=
0
0.1 475
470
460
0.0 380
0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0
x

116. PRACTICE TIME.

117. HOW P IX EL R E PR E SE N T S A C OL OR
ピ クセ ル の 色が表 示 されるとき

118. CO L OR WI L L B E G A M M A- C OR R E C T E D
ガ ンマ 補 正 される
CO L OR SPAC E W I L L B E C ON V E RT E D
IN TO A N OT H E R
別 の色 空 間 に変換 さ れる

119. WHE N P IX EL S S HA PE
ピ クセ ル た ちが形 づ くるとき

120. XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE
XEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXEL PIXE

121. P IXEL
PIXEL

122. P IXEL

123. PIXEL

124. アン チ エイ リア ス処 理する PIXEL
COULD BE
A N T IA L IA SE D

125. A NT I A LI ASING

126. A NT I ALI ASING

127. A NT I ALI ASING
抗 する こと 偽りと なること
に

130. O R I G I N A L DATA

131. O R I G I N A L DATA

132. O R I G I N A L DATA
DOW N-SA MPLED DATA

134. HOW IS S H AP E A N TI A L I A SED ?

152. VE CTOR S H A PE RE F ER ENC E
F I R E WO R K S CS6.
IL LUST R ATOR C S 6 . PI X EL P REVIEW MO DE
PHOTOSHOP C S 6 . S HA PE LAYER
S U PE R -S A MP L E D RE F ERENC E

153. VE CTOR S H A PE RE F ER ENC E
F I R E WO R K S CS6
IL LUST R ATOR C S 6 . PI X EL P REVIEW MO DE
PHOTOSHOP C S 6 . S HA PE LAYER
S U PE R -S A MP L E D RE F ERENC E

155. LESSON
教訓
C HO O S E A DEQ UATE R ESO LU TIO N FO R
TH E S H A PE YOU APPLY A NT IA LIAS ING TO.
そ の形 に とって 適 量 の 解 像 度に よっ てア ンチ エイ リア シン グすべし

156. S U SAN KARE: DOGCOW, 1 9 8 4

158. D ON ’ T EV E N T HI N K OF A N T I AL I ASI N G T H I S .

159. PIXEL

160. グ リ ッド 吸 着 する PIXEL SH OU L D F IT G R ID

163. H OW T HI S S HOUL D BE DOW N-SA MP LED
S U PP OS I N G T H E SIG NIFIC A NCE IS IN ALTERNATIO N?

164. H OW T HI S S HOUL D BE DOW N-SA MP LED
S U PP OS I N G T H E SIG NIFIC A NCE IS IN ALTERNATIO N?

165. H OW T HI S S HOUL D BE DOW N-SA MP LED
S U PP OS I N G T H E SIG NIFIC A NCE IS IN ALTERNATIO N?

166. H OW T HI S S HOUL D BE DOW N-SA MP LED
S U PP OS I N G T H E SIG NIFIC A NCE IS IN ALTERNATIO N?

167. m

168. m
W H AT MA KES L OW E RC ASE LETTER “M”?

169. W H AT MA KES L OW E RC ASE LETTER “M”?

170. W H AT MA KES L OW E RC ASE LETTER “M”?

171. W H AT MA KES L OW E RC ASE LETTER “M”?

172. W H AT MA KES L OW E RC ASE LETTER “M”?

174. LESSON
教訓
TRY TO U NDE R STAND T HE M EANI NG OF DATA
WH E N YO U LES SEN THE AMOUNT OF SPATIAL INFORMATION.
空 間的 な 情報量 の 削 減 に は 、ま ずそ の意 味を 汲み 取る べし

175. VE CTOR S H A PE RE F ER ENC E
S UP E R- S AM P L E D WI THO U T GRID- F ITTING
O S X Q UA RT Z
O S X Q UA RT Z S U BP IX EL- ANTIALIAS ING

176. VE CTOR S H A PE RE F ER ENC E
S UP E R- S AM P L E D WI THO U T GRID- F ITTING
O S X Q UA RT Z
O S X Q UA RT Z S U BP IX EL- ANTIALIAS ING

177. VE CTOR S H A PE RE F ER ENC E
S HA R P PHOTOSHOP CS6
C RI SP PHOTOSHOP CS6
S T RO N G PHOTOSHOP CS6

178. VE CTOR S H A PE RE F ER ENC E
S HA R P PHOTOSHOP CS6
C RI SP PHOTOSHOP CS6
S T RO N G PHOTOSHOP CS6

182. WHE N P IX EL S S HA PE
ピ クセ ル た ちが形 づ くるとき

183. PIXEL COULD BE ANTIALIASED
ア ンチ エ イ リアス 処 理される
PIXEL SHOULD FIT GRID
グ リッ ド 吸 着する

184. AFTERWOR D
お わり に

185. 1 PIXE L LINE

186. 1 PIXE L LINE
3 PIXE L LINE

187. 1 PIXE L LINE
3 PIXE L LINE
1 LIN E

189. Grids, Alignment, and Simplicity
Upcoming

190. Grids, Alignment, and Simplicity
Upcoming