smart graphics: graphik und - lmu
TRANSCRIPT
![Page 1: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/1.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 1
Smart Graphics: Graphik und Kommunikation
Vorlesung „Smart Graphics”Andreas Butz, Otmar Hilliges
Wednesday, November 09, 2005
![Page 2: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/2.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 2
Themen heute• Farbe (Nachtrag zum Thema Gestaltung)
– Farbwahrnehmung– Farbmodelle– Farbharmonie und -akkorde– Farbwirkung
• Kommunikative Strukturen– Eine „Grammatik“ für Diagramme– Rhetoric Structure Theory für Multimedia
![Page 3: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/3.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 3
Was ist Licht?• Licht kann als Elektromagnetische Welle
beschrieben werden (oder als Teilchen)• Sichtbarer Bereich zwischen 350 nm und 750 nm• Zerlegung des Farbspektrums durch ein Prisma
![Page 4: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/4.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 4
Eigenschaften des Lichts• Energieverteilung über den
gesamten Spektralbereich
• Unterschiedliche Lichtquellen haben unterschiedliche Verteilungen– Tageslicht– Abendsonne– Glühbirne– Neonröhre
Wellenlänge
Rel
ativ
e E
nerg
iem
enge
400 500 600 700
Wellenlänge
Rel
ativ
e E
nerg
iem
enge
400 500 600 700
![Page 5: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/5.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 5
Additive Farbmischung (1)• Die Farbe der Mischung zweier Lichter
ergibt sich aus der Addition der Energiespektren
Wellenlänge
Rel
ativ
e E
nerg
iem
enge
400 500 600 700
![Page 6: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/6.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 6
Additive Farbmischung (2)• Grundfarben: Rot, Blau und Grün• Komplementärfarben:
Cyan, Magenta und Gelb
![Page 7: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/7.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 7
RGB-Farbmodell
3D-Farbwürfel
![Page 8: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/8.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 8
Vom Spektrum zum Farbkreis
• Magenta als Grenzwert an beiden Enden des Spektrums
• Physikalisch nicht ganz korrekt, aber von der Wahrnehmung her plausibel
![Page 9: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/9.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 9
Farbkreis nach Goethe (1810)
• Abgeleitet aus Naturbetrachtung
• Angelehnt an Farbsymbolik
• Zuordnung von Farben zu Verstand, Sinnlichkeit, Phantasie, Vernunft
• Nachlesen
![Page 10: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/10.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 10
Farbenkugel nach Philipp Otto Runge (1810)
![Page 11: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/11.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 11
Farbkreis nach Johannes Itten (1961)
• 3 Primärfarben: rot, gelb, blau
• 3 Sekundärfarben: grün, orange, violett
• Unterschiedlich von heutigem RGB Modell
• Gewichtung angelehnt an Wahrnehmung und Empfindung von Farben
![Page 12: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/12.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 12
Farbsechseck nach RGB-Mischung• Andere Gewichtung
der Farben• Angelehnt an
physikalische Grundlagen
![Page 13: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/13.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 13
NatürlichesFarbsystem
![Page 14: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/14.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 14
MunsellFarbsystem
![Page 15: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/15.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 15
DIN 6164
![Page 16: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/16.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 16
Subtraktive Farbmischung (1)• Farbfilter absorbieren Teile des
Farbspektrums
Cyan filtert Rot
Magenta filtert Grün
Gelb filtert Blau
![Page 17: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/17.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 17
Subtraktive Farbmischung (2)• Verringerung der Lichtintensität durch
Farbpigmente nach dem Beer-Lambertgesetz:
A(α) = log(1/T(α)))=a(α)bc
T(α)=gefiltertes Licht
A(α)=Absorption
a(α)=Materialkonstante der Absorption
b= Dicke des Materials
c= Konzentration der Pigmente
![Page 18: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/18.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 18
…oder einfacher:• Die doppelte Menge von Pigmenten
halbiert die transmittierte Lichtintensität.• Die doppelte Dicke des Materials halbiert
die transmittierte Lichtintensität• Die Absorption verschiedener Filter, die
hintereinander liegen ist additiv.
![Page 19: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/19.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 19
Umrechnung RGB - CMY
• Beispiel (8 bit/Kanal, wmax = 255):(255r,0g,0b) = (0c,255m,255y)
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛−⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
yellowmagenta
cyan
www
bluegreenred
max
max
max
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛−⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
bluegreenred
www
yellowmagenta
cyan
max
max
max
![Page 20: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/20.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 20
Umwandlung RGB Graustufen
• Naiver Ansatz: g=(r+g+b)/3 führt zu falschen Helligkeiten (bzgl. unserer Wahrnehmung)
• Farbrezeptoren im Auge: 1:20:40
bluegreenredgrey 11,059,03,0 ++=
![Page 21: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/21.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 21
HSV Farbmodell
Hue(Farbton)
Saturation (Farbsättigung)
Value (Farbwert, Helligkeit)
![Page 22: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/22.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 22
HSV Farbraum, andere Darstellung
Saturation
Val
ue
Hue
![Page 23: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/23.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 23
Umrechnung RGB HSV
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛+=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
3
)/arctan(
3
22
21
21
mmm
mm
vsh
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
−−−
=⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
bgr
mmm
3/13/13/12/12/106/16/16/2
3
2
1
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
3/)cos()sin(
3
2
1
vhshs
mmm
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
⎟⎟⎟⎟
⎠
⎞
⎜⎜⎜⎜
⎝
⎛
−−−=
⎟⎟⎟
⎠
⎞
⎜⎜⎜
⎝
⎛
3
2
1
3/12/16/13/12/16/13/106/2
mmm
bgr
]1...0[,]360...0[
∈°∈
vsh
![Page 24: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/24.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 24
Farbkreis nach Johannes Itten (1961)
![Page 25: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/25.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 25
Komplementärfarben
• Liegen im Farbkreis gegenüber
• HöchstmöglicherFarbkontrast
• HarmonischerZweiklang
![Page 26: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/26.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 26
Harmonische Dreiklänge
• Gleichseitiges oder gleichschenkliges Dreieck im Farbkreis
• Auch als einge-schriebenes Dreieck in der Farbkugel
![Page 27: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/27.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 27
Harmonische Vierklänge
• Quadrat oder recht-winkliges Viereck im Farbkreis
• Je zwei Komple-mentärfarben
• auch als einge-schriebenes Viereck in der Farbkugel
![Page 28: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/28.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 28
Harmonische Sechsklänge
• RegelmäßigesSechseck imFarbkreis
• auch alseingeschriebenesSechseck in derFarbkugel
![Page 29: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/29.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 29
Beziehung zur Mathematik• 12 = 2 x 2 x 3 Farben im Farbkreis• Regelmäßige Formen: 2,3,4,6-Eck• Fünf-, Siebeneck usw. mit kontinuier-
lichem Farbkreis konstruierbar• Wichtig für harmonische
Farbkombinationen: gleiche Abstände im Farbkreis oder auf der Farbkugel
![Page 30: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/30.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 30
Beziehung zur Musik• 12 Farben im Farbkreis <==> 12 Töne in
der Oktave• Frequenzverhältnis einer Oktave = 1:2• Frequenzverhältnis von rotviolett zu
blauviolett im sichtbaren Spektrum = 1:2• Komplementärfarben = Tritonus• Farbdreiklang = übermäßiger Akkord• Farbvierklang = verminderter Akkord
![Page 31: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/31.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 31
Reine und getrübte Farben
![Page 32: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/32.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 32
Kalte und warme Farben
hell
dunkel
kalt warm
![Page 33: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/33.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 33
Farbtemperatur• Physik
– Temperatur eines Schwarzen Strahlers
– Angabe in Kelvin– Glut des Strahlers
fängt bei Rot an, und geht mit steigender Temperatur ins Blaue über
• rot=kalt, blau=warm
• Kunst– Farbwirkung als Basis– Angabe als qualitative
Beschreibung „warm“oder „kalt“
– Rot, orange wirken warm, blau wirkt kalt
• rot=warm, blau=kalt
![Page 34: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/34.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 34
Harmonische Farbakkorde (in Ittens Farbkreis konstruiert)
![Page 35: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/35.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 35
Andere harmonische Farbkombinationen
• Benachbarte Farben• Nur warme Farben• Nur kalte Farben
Bildquelle: http://www.ipsi.fraunhofer.de/~crueger/farbe/farb-harm2.html
![Page 36: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/36.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 36
Andere harmonische Farbkombinationen
• Bunte/unbunte Farben• Aufgehellte/Volltöne• Entsättigte/Volltöne
Bildquelle: http://www.ipsi.fraunhofer.de/~crueger/farbe/farb-harm2.html
![Page 37: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/37.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 37
Die sieben Farbkontraste (1)
Farbe-an-sich-Kontrast
Hell-Dunkel- Kontrast
Kalt-Warm-Kontrast
Komplementärkontrast
Komplementärkontrast
![Page 38: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/38.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 38
Die sieben Farbkontraste (2)
Simultankontrast Qualitätskontrast
![Page 39: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/39.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 39
Farbwirkung Weiß• Schnee• Reinheit• Unschuld• Friede• Leichtigkeit• Sauberkeit
• Kälte• Krankenhaus• Verletzlichkeit• Leichenblässe• Kapitulation• Sterilität
![Page 40: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/40.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 40
Farbwirkung Schwarz• Nacht• Kohle• Energie• Stabilität• Förmlichkeit• Solidität
• Angst• Leere• Tod• Verschwiegenheit• Anonymität• Böses
![Page 41: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/41.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 41
Farbwirkung Grau• Intelligenz• Reife• Wohlstand• Würde• Hingabe• Zurückhaltung
• Verwirrung• Verfall• Beton• Schatten• Depression• Langeweile
![Page 42: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/42.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 42
Farbwirkung Rot• Sieg• Leidenschaft• Liebe• Stärke• Energie• Sexualität
• Blut• Krieg• Feuer• Gefahr• Wut• Teufel
![Page 43: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/43.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 43
Farbwirkung Gelb• Sonne• Sommer• Frische• Heiterkeit• Gold• Ernte• Innovation
• Feigheit• Verrat• Eifersucht• Gefahr• Krankheit• Torheit
![Page 44: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/44.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 44
Farbwirkung Grün• Vegetation• Natur• Frühling• Fruchtbarkeit• Hoffnung• Sicherheit• Normalität
• Verfall• Unerfahrenheit• Neid• Geiz• Drückeberger• Pech
![Page 45: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/45.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 45
Farbwirkung Blau• Himmel• Meer• Ruhe• Vertrauen• Spiritualität• Stabilität• Friede• Einheit
• Kälte• Nachlässigkeit• Traumtänzerei• Melancholie• Mysterium• Konservativ
![Page 46: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/46.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 46
Farbwirkungen aus der Natur• Beispiel: Schwarz-gelb: Vorsicht,
Warnung, Vorbild: Wespe = Gefahr
![Page 47: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/47.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 47
Überlegungen bei der Wahl eines Farbschemas
• Wie viele Farben brauche ich?• Welche Grundstimmung möchte ich?• Welche Kontraste möchte ich?• Welche Harmonien möchte ich?• Welche Farben haben eine vorbelegte
Bedeutung oder Symbolik?• Entscheidung “aus dem Bauch”
![Page 48: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/48.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 48
Literatur• Johannes Itten: „Kunst der Farbe“, ISBN:
3332014706• studio 7.5: „Farbe digital“, ISBN 3499612518• Richard Jackson et al.: “Computer Generated
Colour: A Practical Guide to Presentation and Display”, ISBN 0471933783
• http://www.ipsi.fraunhofer.de/~crueger/farbe/
![Page 49: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/49.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 49
Graphik und Kommunikation• Eine „Grammatik“ für Diagramme
– Syntax– Semantik
• Rhetoric Structure Theory– Grundidee– Anwendung auf multimediale Präsentationen
![Page 50: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/50.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 50
Eine Grammatik für Diagramme: APT [Mackinlay 1986]
![Page 51: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/51.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 51
Ausgangsdaten
![Page 52: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/52.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 52
Diagramme als visuelle Sprache• Graphische Elemente (Punkte, Linien, ..) sind die
„Worte“• Mehrere Elemente werden zu „Sätzen“ kombiniert
(Syntax)• Worte und Sätze haben Bedeutungen (Semantik)• Visualisierung = Generierung eines Satzes, der genau
die beabsichtigten Inhalte ausdrückt
![Page 53: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/53.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 53
Formale Beschreibung eines Diagrams
![Page 54: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/54.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 54
Zugehörige graphische Ausgabe
![Page 55: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/55.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 55
Alternative graphische Umsetzung
![Page 56: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/56.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 56
Gegenbeispiel
![Page 57: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/57.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 57
Rhetoric Structure Theory [Mann & Thompson, 1988]
• Beschreibung der hierarchischen Struktur eines Textes
• Unterteilung des Textes in logische Einheiten, z.B. Teilsätze
• Relationen zwischen diesen Einheiten – Nukleus – Relation – Satellit
• Insgesamt 23 Relationen– Preparation, elaboration, background, purpose,…
• Schemata für typische Kombinationen• Fast jeder Text kann durch einen RST-Baum
beschrieben werden
![Page 58: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/58.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 58
RST - Beispiel
![Page 59: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/59.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 59
RST Multimedia Planung in WIP[Andre & Rist 1997]
• Verallgemeinerung von RST auf Multimediale Inhalte– Text, Bilder, Animationen, (Zeigegesten)
• Planung multimedialer Dokumente als hierarchischer Planungsprozess– Beginne mit der Wurzel des RST-Baumes– Unterteile in logische Einheiten– Lege Medium für jede Einheit fest– Generiere jeweilige Einheit (Text, Bild,
Animation)
![Page 60: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/60.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 60
WIP Architektur
![Page 61: Smart Graphics: Graphik und - LMU](https://reader030.vdocuments.net/reader030/viewer/2022020916/61a3136f7f7071517d3d2fb4/html5/thumbnails/61.jpg)
LMU München – Medieninformatik – Butz/Hilliges – Smart Graphics – WS2005 – 09.11.2005 – Folie 61
WIP Generierungsbeispiel