File: techniken.htm

package info (click to toggle)
selfhtml 8.1.2-1
  • links: PTS
  • area: non-free
  • in suites: bullseye, buster, jessie, jessie-kfreebsd, squeeze, stretch, wheezy
  • size: 28,076 kB
  • ctags: 4,161
  • sloc: xml: 614; java: 375; makefile: 8
file content (556 lines) | stat: -rw-r--r-- 43,808 bytes parent folder | download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: Grafik / Techniken und Begriffe der Bildbearbeitung</title>
<link rel="stylesheet" type="text/css" href="../src/selfhtml.css">
<meta name="description"    content="Welche Begriffe im Zusammenhang mit digitaler Bildbearbeitung immer wieder auftauchen, und was sich dahinter und mit den damit verbundenen Techniken verbirgt.">
<meta name="keywords"       content="SELFHTML, Grafik">
<meta name="author"         content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots"         content="noindex, nofollow">
<meta name="DC.Publisher"   content="SELFHTML e. V.">
<meta name="DC.Date"        content="2005-08-22T21:21:39+02:00">
<meta name="DC.Identifier"  content="http://de.selfhtml.org/grafik/techniken.htm">
<meta name="DC.Language"    content="de">
<meta name="DC.Rights"      content="../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype"  content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../src/favicon.ico">
<link rel="author" title="Impressum" href="../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../index.htm">
<link rel="up" title="Grafik" href="index.htm">
<link rel="next" title="Animierte GIF-Grafiken" href="animierte_gifs.htm">
<link rel="prev" title="Typische Grafiksorten fr Web-Seiten" href="sorten.htm">
<link rel="first" title="Grafikformate fr Web-Seiten" href="formate.htm">
<link rel="last" title="Animierte GIF-Grafiken" href="animierte_gifs.htm">
</head>
<body>

<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../index.htm">SELFHTML</a>/<a href="../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="index.htm">Grafik</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../index.htm"><img src="../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Techniken und Begriffe der Bildbearbeitung</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#allgemeines">Allgemeines zur Bildbearbeitung von Raster- bzw. Pixelgrafiken</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#bildgroesse">Bildgre, dpi und Pixel</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#farbtiefen_modelle_kanaele">Farbtiefen, Farbmodelle und Farbkanle</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#farbpaletten">Farbpaletten und indizierte Farben</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#alphakanal_transparenz">Alphakanal und echte Transparenz</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#transparenz">Transparenz einer bestimmten Palettenfarbe</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#dithering">Dithering (Error-Diffusion)</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#graustufen">Graustufen</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#helligkeit_saettigung_kontrast">Helligkeit, Sttigung und Kontrast</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#histogramm">Histogramm</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#gammakorrektur">Gammakorrektur</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#filter">Filter-Effekte</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#antialiasing">Anti-Aliasing</a><br>
</p>
</td>
</tr><tr><td colspan="2" class="doc">&nbsp;<a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>&nbsp;</td></tr>
</table>



<h2><a class="an" name="allgemeines">Allgemeines zur Bildbearbeitung von Raster- bzw. Pixelgrafiken</a></h2>

<p>Bildbearbeitung ist eine Welt fr sich und kann im Rahmen der vorliegenden Dokumentation nur gestreift werden. Die Bearbeitung von Grafiken ist auch immer noch stark an die Fhigkeiten einzelner Software-Produkte gebunden. Wenn Sie Grafiken fr Web-Seiten selbst erstellen oder bearbeiten wollen, brauchen Sie deshalb auf jeden Fall ein professionelles oder zumindest semi-professionelles Grafikprogramm fr Pixelgrafik. Betriebssystem-Bordmittel wie Paint unter Windows reichen dazu nicht aus. Das fhrende Produkt zur Bildbearbeitung ist wohl nach wie vor Photoshop. Andere Programme, die deutlich preiswerter oder sogar Freeware sind und sich im Vergleich zu Photoshop aber nicht verstecken brauchen, sind ebenfalls erhltlich. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie eine Software-bersicht:</p>

<p><img src="../src/serverdok.gif" width="15" height="10" alt="Online-Seite">&nbsp;
<a target="_top" href="http://aktuell.de.selfhtml.org/links/grafik-programme.htm">Grafik-Programme</a></p>

<p>Um die Funktionen solcher Grafikprogramme richtig einzusetzen, bentigen Sie Kenntnisse. Im Link-Verzeichnis des Online-Angebots von SELFHTML aktuell finden Sie Verweise zu Grafik-Tutorials im Web:</p>

<p><img src="../src/serverdok.gif" width="15" height="10" alt="Online-Seite">&nbsp;
<a target="_top" href="http://aktuell.de.selfhtml.org/links/design.htm">Design, Grafik, Fonts</a></p>

<p>Einige wichtige Begriffe und Funktionen der Bildbearbeitung werden auch in diesem Abschnitt behandelt. Dabei geht es um die Technik der Rasterbilder. Rasterbilder sind einfach alle Bilder, deren Inhalt nicht durch vektorielle Angaben beschrieben sind, sondern durch Raster von Bildpunkten. Ein fr Bildschirmgrafiken optimales Raster sind Bildschirmpixel. Pixelgrafiken sind also eine Form von Rasterbildern. Die beiden heute verbreitetsten Formate fr Web-Grafiken, das <img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="formate.htm#gif">GIF-Format</a>  und das <img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="formate.htm#jpeg">JPEG-Format</a>, sind beide auf das Abspeichern solcher Pixelgrafiken spezialisiert.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="bildgroesse">Bildgre, dpi und Pixel</a></h2>

<p>Wenn Sie eine Pixelgrafik neu erstellen, mssen Sie zunchst die Bildgre durch Angabe von Breite und Hhe der Grafik festlegen.</p>

<p>Eine Pixelgrafik (oder Rastergrafik) besteht - im Gegensatz zu einer Vektorgrafik - aus einer Anzahl von Bildpunkten, genannt Pixel. Die Breite einer solchen Grafik ergibt sich dann aus der Anzahl der Pixel, die horizontal in einer Reihe liegen, und die Hhe aus der Anzahl der Pixel, die vertikal in einer Reihe liegen. Solange alles am Bildschirm bleibt, geht diese einfache Rechnung auf. Und solange Sie Pixelgrafiken nur fr den Einsatz auf Web-Seiten bentigen, die am Bildschirm angezeigt werden, brauchen Sie sich ber andere Probleme der Bildgre auch keine Gedanken machen.</p>

<p>Die Probleme entstehen erst, wenn eine Pixelgrafik auf einem anderen, nicht pixel-orientierten Medium ausgegeben werden soll. Bei der Ausgabe auf Papier etwa, also beim Drucken, muss festgelegt werden, wie "gro" ein Pixel auf dem Papier sein soll, denn im Gegensatz zum Bildschirm gibt es auf Papier keine vorgegebenen Pixel. Beim Druck gibt es druckbare Punkte. Je dichter sie zusammen liegen, desto feiner die Auflsung des ausgedruckten Bildes. Diese Dichte wird in Dots per Inch (dpi) gemessen.</p>

<p>Da nun viele Pixelgrafiken fr den Druck gedacht sind, bieten die meisten Grafikprogramme beim Festlegen der Bildgre zwei oder mehrere Varianten an. Die eine besteht darin, Breite und Hhe des Bildes in Pixeln anzugeben, die andere darin, eine dpi-Dichte zu whlen oder die Gre des Bildes in Maeinheiten wie Zentimetern oder Zoll bzw. Inch zu bestimmen. Die zweite Variante ist auf jeden Fall nur fr die Weiterverarbeitung der Grafik fr den Druck interessant. Um die Gre eines Bildes fr die Bildschirmanzeige zu bestimmen, sollten Sie stets die Variante whlen, die Bildgre ber die Angabe von Pixeln fr Breite und Hhe zu bestimmen.</p>

<p>Bereits vorhandene Pixelgrafiken haben entweder schon die Gre am Bildschirm, in der Sie sie fr den Einbau in Ihre Web-Seiten brauchen knnen, oder die vorhandenen Grafiken sind am Bildschirm zu gro oder zu klein.</p>

<p>Wenn das Bild zunchst viel grer ist, als Sie es fr die Bildschirmanzeige bentigen, mssen Sie es durch Festlegen von geringeren Pixelwerten fr Breite und Hhe verkleinern. Erforderlich ist das beispielsweise bei Fotos von Digitalkameras, die oft mehrere Megapixel gro sind und am Bildschirm bei 1:1-Betrachtung riesig wirken. Auch Grafiken, die durch Einscannen bei hoher dpi-Zahl entstanden sind, sind so gro. Zum Herunterrechnen der Gre eines Bildes besitzen moderne Grafikprogramme ausgereifte Algorithmen. Einige bieten zum so genannten "Resample", also zum Neuberechnen des Bildinhaltes fr eine andere Bildgre, auch mehrere Algorithmen zur Auswahl an. Zwei Faktoren sind zum Resample auf jeden Fall wichtig: es sollte die volle Farbtiefe (z.B. 16,7 Millionen Farben) eingestellt sein, und es sollte proportional verkleinert werden, d.h. die Seitenverhltnisse sollten beibehalten werden, damit das Grafikprogramm die Grafik beim Verkleinern nicht auch noch zustzlich verzerren muss.</p>

<p>Wenn das Bild am Bildschirm kleiner ist, als Sie es haben mchten, sieht die Sache schlecht aus. Durch "Resample" knnen Sie eine Grafik zwar nicht nur verkleinern, sondern auch vergrern. Doch die Ergebnisse sind dabei oft unbefriedigend. Denn es ist leichter, aus viel Information weniger zu machen (wie beim Verkleinern), als aus wenig Information mehr (wie beim Vergrern). In solchen Fllen ist es meist besser, sich mit der zu kleinen Bildgre abzufinden.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="farbtiefen_modelle_kanaele">Farbtiefen, Farbmodelle und Farbkanle</a></h2>

<p>Unter der Farbtiefe einer Grafik wird verstanden, wie viele verschiedene Farbtne in der Grafikdatei gespeichert werden knnen. Bei Pixelformaten gibt es folgende typischen Farbtiefen:</p>

<ul>
<li>2 Farben (schwarz/wei)</li>
<li>16 Farben</li>
<li>256 Farben</li>
<li>16,7 Mio. Farben</li>
</ul>

<p>Das <img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="formate.htm#gif">GIF-Format</a> untersttzt 2, 16 und 256 Farben, das <img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="formate.htm#jpeg">JPEG-Format</a> 16,7 Mio. Farben, ebenso wie das <img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="formate.htm#png">PNG-Format</a>. Dass in einer Datei so viele Farben gespeichert werden knnen, bedeutet aber noch lange nicht, dass Anwender tatschlich so viele Farben sehen. Denn wie viele Farben beim Anwender angezeigt werden knnen, hngt von der eingesetzten Hardware (Grafikkarte, Bildschirm) ab. Nur die wenigsten Anwender verfgen ber Hardware, mit deren Hilfe volle 16,7 Mio. Farben angezeigt werden knnen. Viele heutige Standard-PCs bieten Farbtiefen zwischen 16.000, 32.000 oder 64.000 Farben an.</p>

<p>Bei Pixelgrafiken wird fr jeden Pixel dessen Farbe gespeichert. Um die Farben in computer-gerechte Darstellungsform zu bringen, mssen sie als Zahlenwerte dargestellt werden. Das ist ganz hnlich wie bei der Umsetzung von <img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../inter/sprache.htm#bits_bytes_zeichen">Zeichen in Bits und Bytes</a>. Bei der numerischen Reprsentation von Farben im Computer gibt es verschiedene Modelle. Die beiden bekanntesten Modelle sind:</p>

<ul>
<li><b>Das RGB-Modell:</b> Beim RGB-Modell wird eine Farbe durch ihre Anteile an den drei Grundfarben <b>R</b>ot, <b>G</b>rn und <b>B</b>lau definiert. Jede Farbe hat also einen Rotwert, einen Grnwert und einen Blauwert. Jeder der drei Werte wird durch Zahlen zwischen 0 und 255 definiert. Der Wert 0 bedeutet: keinen Anteil an der betreffenden Grundfarbe, der Wert 255 bedeutet: maximalen Anteil an der betreffenden Grundfarbe. Ein dunkles Blau hat nach diesem Schema z.B. die Farbwerte 0,0,153. (0 rot, 0 grn, 153 blau). Mit diesem Schema knnen bis zu 16,7 Millionen unterschiedliche Farben definiert werden.<br>&nbsp;
<table class="reftable" cellpadding="10" cellspacing="0" border="1">

<tr>
<td valign="top">
<img src="rgb.gif" width="400" height="200" alt="RGB-Modell">
</td>
<td valign="top">
Die nebenstehende Abbildung zeigt, wie Farbtne beim RGB-Modell durch addierendes Mischen zustande kommen.
</td>
</tr></table><br>&nbsp;</li>
<li><b>Das HSB-Modell</b>: Auch bei diesem Modell gibt es drei definierende Zahlenwerte. <b>H</b> steht fr <i>Hue</i> (<i>Farbton</i>), <b>S</b> fr <i>Saturation</i> (<i>Sttigung</i>), und <b>B</b> fr <i>Brightness</i> (<i>Helligkeit</i>). Farbtne knnen Werte zwischen 0 und 359 annehmen, Sttigung und Helligkeit Werte zwischen 0 und 100%. Auf diese Weise lassen sich ca. 23,6 Mio. Farben definieren.<br>&nbsp;
<table class="reftable" cellpadding="10" cellspacing="0" border="1">

<tr>
<td valign="top">
<img src="hsb.jpg" width="400" height="200" alt="HSB-Modell">
</td>
<td valign="top">
Die nebenstehende Abbildung zeigt eine typische Dialogbox eines Grafikprogramms, die das Definieren von Farbtnen nach dem HSB-Modell ermglicht.
</td>
</tr></table><br>&nbsp;</li>
</ul>

<p>Fr Web-Grafiken ist das RGB-Modell mageblich. Wenn Sie zum Erstellen von Web-Grafiken mit einem Grafikprogramm arbeiten, das mehrere Farbmodelle kennt, halten Sie sich an das RGB-Modell.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="farbpaletten">Farbpaletten und indizierte Farben</a></h2>

<p>Im GIF-Format knnen Sie pro GIF-Datei aus den 16,7 Mio. mglichen Farben des RGB-Farbmodells maximal 256 Farben "aussuchen" und abspeichern. Bei einer solchen Farbauswahl spricht man von einer Farbpalette.</p>

<p>Jede der 256 Farben kann beliebige RGB-Werte haben, d.h. es sind auch "krumme" Farbwerte wie 71,217,34 mglich. Fr Web-gerechte GIF-Grafiken steht jedoch ein Standard-Schema zur Verfgung, das von Netscape eingefhrt wurde und auf diesem Browser plattformbergreifend optimal interpretiert wird. Nach dem Netscape-Schema sind alle Farben erlaubt, deren RGB-Werte durch 51 dividierbar sind. R(ot), G(rn) und B(lau) sollten danach also einen der Werte 0, 51, 102, 153, 204 oder 255 (hexadezimal: 00, 33, 66, 99, CC oder FF) haben. Ein erlaubter Wert ist danach z.B. 255,51,204 (hexadezimal: FF,33,CC). Auf diese Weise ergeben sich 6 x 6 x 6 mgliche Farben, also 216. Die verbleibenden 40 Farben knnen Sie als "eiserne Reserve" betrachten. Wenn Sie fr einzelne Grafiken bestimmte, fehlende Farbtne brauchen, knnen Sie unbenutzte Farben der Palette mit der gewnschten Farbe definieren.</p>

<p><img src="../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="../diverses/anzeige/farbpalette_216.htm">Anzeige: die 216 Farben des Netscape-Schemas</a></p>

<p>Wenn Sie Ihre Ansprche an die Hardware des Endanwenders noch weiter zurckschrauben wollen, knnen Sie sich auch auf Grafiken beschrnken, die eine 16-Farbpalette enthalten. Auch dabei gilt: theoretisch kann jede der 16 Farben einer solchen Farbpalette beliebige Farbwerte haben. Es gibt jedoch 16 Farben, die von jedem VGA-kompatiblen Bildschirm angezeigt werden knnen. In MS Windows sind das deshalb auch die 16 Grundfarben. Bei einer Beschrnkung auf 16 Farben ist es sinnvoll, mit diesen 16 Grundfarben zu arbeiten.</p>

<p><img src="../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="../diverses/anzeige/farbpalette_16.htm">Anzeige: die 16 Farben des VGA-Schemas</a></p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="alphakanal_transparenz">Alphakanal und echte Transparenz</a></h2>

<p>Der Alphakanal ist eine Erweiterung der Farbmodelle. Dabei wird fr jeden Bildpunkt (Pixel) neben dessen Farbwert ein Alphawert gespeichert. Beim RGB-Modell spricht man daher auch vom erweiterten RGBA-Modell (<b>R</b>ot-<b>G</b>rn-<b>B</b>lau-<b>A</b>lpha). ber den Alphakanal wird die Transparenz der Farbe beschrieben.</p>

<p>Sinnvoll ist das Arbeiten mit dem Alphakanal, wenn man mit der so genannten Layer-Technik arbeitet. Dabei wird eine Grafik durch bereinanderlegen mehrerer Ebenen komponiert, wobei jede Ebene ein oder mehrere bestimmte Bestandteile der Grafik enthlt. Wenn Sie nichts anderes angeben, berdecken sich die Ebenen dabei. Mit Hilfe diverser Filtereffekte, die im Alphakanal gespeichert werden, lsst sich jedoch bestimmen, dass und wie eine unterhalb angeordnete Deckfarbe durch eine oberhalb angeordnete Deckfarbe hindurchschimmert.</p>

<p>Die folgenden beiden Abbildungen zeigen zwei typische Filter-Effekte, die durch Arbeit mit mehreren Ebenen und Alphakanal entstanden:</p>

<table class="reftable" cellpadding="10" cellspacing="0" border="1">

<tr>
<td valign="top">
<img src="alpha1.jpg" width="347" height="216" alt="Alpha-Beispiel 1">
</td>
<td valign="top">
<img src="alpha2.jpg" width="347" height="216" alt="Alpha-Beispiel 2">
</td>
</tr></table>

<p>In diesem Fall wurde ein Foto als erster Layer (erste Ebene) definiert, und ein Schriftzug <kbd>NATUR</kbd> als zweiter Layer. Der zweite Layer enthlt nur den Schriftzug und ist ansonsten vollstndig transparent. Damit der untere Layer aber auch durch den Schriftzug hindurchschimmern kann, ist der Alphakanal erforderlich. Bei aktiviertem Alphakanal lassen sich die gewnschten Filtereffekte einstellen.</p>

<p>Gute Grafikprogramme untersttzen Sie bei der Arbeit mit mehreren Layern und mit dem Alphakanal.</p>

<p>Bei den Transparenz-Effekten, wie sie mit Hilfe des Alphakanals mglich sind, spricht man auch von "echter" Transparenz. Im Gegensatz dazu steht die im folgenden beschriebene Transparenz einer bestimmten Palettenfarbe.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="transparenz">Transparenz einer bestimmten Palettenfarbe</a></h2>

<p>Die meisten Web-Browser bieten dem Anwender per Voreinstellung einen hellgrauen oder weien Hintergrund fr das Anzeigefenster an, sehen jedoch die Mglichkeit vor, die Hintergrundfarbe dem eigenen Geschmack anzupassen. Wenn Sie nun eine Grafik mit hellgrauem Hintergrund haben, wirkt diese Grafik auf einem weien oder bunten Fensterhintergrund wie ein "hsslicher" grauer Fleck. Ideal ist da eine Grafik, die einen unsichtbaren (transparenten) Hintergrund hat, sodass sie auf jedem Fensterhintergrund wirkt. Auch in Verbindung mit selbst definierten Hintergrundfarben und Hintergrundbildern (Wallpapers) ist der Einsatz von Grafiken mit transparentem Hintergrund sinnvoll.</p>

<p>Das <img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="formate.htm#gif">GIF-Format</a> sieht die Mglichkeit vor, eine bestimmte <img src="../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#farbpaletten">Palettenfarbe</a> als unsichtbar zu definieren. Dies ist jedoch erst mit dem neuen, 89er-Format von GIF mglich, im lteren, 87er Format noch nicht. Sinnvoll ist die Anwendung bei Grafiken, die einen klaren, einfarbigen Hintergrund haben.</p>

<p>Moderne Grafikprogramme untersttzen beim Auswhlen und Testen der transparenten Palettenfarbe.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="dithering">Dithering (Error-Diffusion)</a></h2>

<p>Wenn Sie mit <img src="../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#farbpaletten">Farbpaletten und indizierten Farben</a> arbeiten und so ein begrenztes Farbschema auf Bilder mit feinen bergngen und zahlreichen Zwischentnen anwenden, dann muss der Computer eine Lsung fr das Problem finden, dass weniger Farbwerte zur Verfgung stehen, als das Bild erfordert. Dazu gibt es verschiedene Algorithmen. Die folgende Abbildung zeigt zwei Mglichkeiten, darunter diejenige mit dem Algorithmus fr Dithering:</p>

<table class="reftable" cellpadding="10" cellspacing="0" border="1">

<tr>
<td valign="top">
<img src="verlauf1.jpg" width="181" height="127" alt="Farbverlauf 1">
</td>
<td valign="top">
Farbverlauf mit 16,7 Millionen Farben<br>
(die Anzeigequalitt hngt allerdings von Ihrem Bildschirm ab - falls dieser weniger Farben darstellen kann, besorgt der Web-Browser das Dithering)
</td>
</tr><tr>
<td valign="top">
<img src="verlauf2.gif" width="181" height="127" alt="Farbverlauf 2">
</td>
<td valign="top">
Bild auf Farbpalette mit 16 optimierten Indexfarben reduziert<br>
<b>ohne</b> Dithering!
</td>
</tr><tr>
<td valign="top">
<img src="verlauf3.gif" width="181" height="127" alt="Farbverlauf 3">
</td>
<td valign="top">
Bild auf Farbpalette mit 16 optimierten Indexfarben reduziert<br>
<b>mit</b> Dithering!
</td>
</tr><tr>
<td valign="top">
<img src="verlauf4.gif" width="181" height="126" alt="Farbverlauf 4">
</td>
<td valign="top">
Ausschnittsvergrerung, die den Dithering-Effekt deutlich macht.
</td>
</tr></table>

<p>Beim Dithering werden Farbverlufe in Punktmuster aufgelst, die mit Hilfe der vorhandenen Palettenfarben darstellbar sind. Das Prinzip wird auch als Error-Diffussion bezeichnet. Der bekannteste Algorithmus dafr ist der Floyd-Steinberg-Algorithmus, der in den meisten Grafikprogrammen zum Einsatz kommt. Beachten Sie, dass GIF-Grafiken mit intensivem Dithering schnell sehr gro werden knnen. Meistens ist es besser, solche Grafiken gleich als JPEG-Grafiken abzuspeichern. Dann muss allerdings der Web-Browser des Anwenders das Dithering besorgen, falls die Grafikumgebung, auf der er luft, nur eine begrenzte Anzahl von Farben zulsst.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="graustufen">Graustufen</a></h2>

<p>Bei Graustufenbildern wird mit einer <img src="../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#farbpaletten">Farbpalette</a> von 256 Farben gearbeitet. Es handelt sich jedoch um eine ganz bestimmte Palette. Rot- Grn- und Blau-Anteile sind bei allen 256 definierten Werten jeweils gleich, was in der Addition zu einem Ton zwischen Schwarz und Wei fhrt. Wenn R, G und B den Wert 0 haben, ist die damit definierte Farbe ein reines Schwarz. Wenn alle drei Farbanteile den Wert 255 haben, wird damit ein reines Wei definiert. Ein Zwischenwert, etwa 192,192,192, definiert eine graue Farbe von bestimmter Helligkeit. Die Palette eines Graustufenbildes besteht nun darin, dass darin alle 256 Farben zwischen 0,0,0 und 255,255,255 gespeichert sind - also 256 Grautne.</p>

<p>Die folgenden Abbildungen zeigen links die typische Graustufentabelle, bestehend aus 256 Grautnen von Schwarz bis Wei, und rechts die Anwendung einer solchen Graustufentabelle auf ein Foto.</p>

<table class="reftable" cellpadding="10" cellspacing="0" border="1">

<tr>
<td valign="top">
<img src="graustufen.gif" width="297" height="297" alt="Graustufen">
</td>
<td valign="top">
<img src="graustufenbild.jpg" width="297" height="297" alt="Graustufenbild">
</td>
</tr></table>

<p>In der Beispiel-Abbildung wurde allerdings das Foto nach der Reduzierung auf Graustufen wieder auf volle Farbtiefe gesetzt und dann im JPEG-Format, nicht im GIF-Format abgespeichert. Die Grafik wird dadurch deutlich kleiner. Denn auch bei der Reduzierung eines Farbfotos mit voller Farbtiefe auf Graustufen wird krftig mit <img src="../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#dithering">Dithering</a> gearbeitet, was die Dateigren bei Fotos schnell in die Hhe treibt.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="helligkeit_saettigung_kontrast">Helligkeit, Sttigung und Kontrast</a></h2>

<p>Helligkeit, Sttigung und Kontrast sind typische Funktionen der Bildbearbeitung, die sich auf ein ganzes Bild oder auf zuvor markierte Ausschnitte anwenden lassen.</p>

<h3>Helligkeit:</h3>

<p>Farben knnen den gleichen Farbton haben, aber unterschiedlich hell wirken. Die folgenden Farbvergleiche zeigen jeweils links eine Farbe und rechts eine hellere Variante davon:</p>

<p><img src="helligkeit.gif" width="200" height="128" alt="Helligkeit"></p>

<p>Fr die Farben der rechten Seite wurde eine ca. 25% mehr Helligkeit gegenber den Farben der linken Seite eingestellt. Durch Helligkeit werden Farben <b>nicht</b> leuchtender! Krftige Farben bleiben krftig, Pastellfarben bleiben pastell.</p>

<h3>Sttigung:</h3>

<p>Im Gegensatz zur Helligkeit beeinflusst die Sttigung die subjektiv empfundene Leuchtkraft einer Farbe. Die folgenden Farbvergleiche zeigen in der Mitte jeweils eine Ausgangsfarbe, links davon eine Variante mit geringerer Sttigung, und rechts davon eine Variante mit hherer Sttigung:</p>

<p><img src="saettigung.gif" width="300" height="128" alt="Sttigung"></p>

<p>Was die Helligkeit betrifft, werden die Farbtne jeweils als etwa gleich hell eingestuft. Farben mit geringerer oder hherer Sttigung wirken zwar beim ersten Hinsehen oft heller oder dunkler, aber das stellt sich als Trugschluss heraus.</p>

<h3>Kontrast:</h3>

<p>Eine Erhhung des Kontrasts bewirkt, dass dunkle Farben noch dunkler, und helle Farben noch heller werden. Die Unterschiede zwischen hellen und dunklen Farben werden also betont. Besonders bemerkbar macht sich das bei Fotos beispielsweise an scharfen Farbbergngen, etwa bei Huserecken, wo eine Seite von der Sonne beschienen wird und die andere im Halbschatten liegt. Wird der Kontrast dagegen verringert, werden helle Farben dunkler, und dunkle werden heller. Die Farben des Bildes gleichen sich also strker an. Harte Farbbergnge erscheinen weicher, das Bild wirkt insgesamt grautniger. Die folgenden Farbvergleiche zeigen in der Mitte jeweils eine Ausgangsfarbe, links davon eine Variante mit niedrigerem Kontrast, und rechts davon eine Variante mit hherem Kontrast:</p>

<p><img src="kontrast.gif" width="300" height="128" alt="Kontrast"></p>

<p>Bei stark erhhtem Kontrast gehen Feinheiten im Farbverlauf verloren, es kommt zum Schlagschatten-Effekt. Bei stark reduziertem Kontrast entsteht ein Grauschleier-Effekt. Die folgenden drei Bilder zeigen in der Mitte ein Ausgangsbild, links reduzierten Kontrast (Grauschleier) und rechts erhhten Kontrast (Schlagschatten).</p>

<table class="reftable" cellpadding="2" cellspacing="0" border="1">

<tr>
<td valign="top">
<img src="kontrast2.jpg" width="200" height="350" alt="Kontrast: geringer">
</td>
<td valign="top">
<img src="kontrast1.jpg" width="200" height="350" alt="Kontrast: normal">
</td>
<td valign="top">
<img src="kontrast3.jpg" width="200" height="350" alt="Kontrast: hher">
</td>
</tr></table>

<p>Zustzlich zur einfachen Kontrastkorrektur bieten die meisten besseren Grafikprogramme eine farblich abgestufte Tonwertkorrektur an, mit deren Hilfe sich Grobheiten, wie sie bei starker Kontrastvernderung entstehen, vermeiden lassen.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="histogramm">Histogramm</a></h2>

<p>Fr jede Pixelgrafik lsst sich ein Histogramm erstellen. Das ist die grafische Darstellung der Farb- und Helligkeitsverteilung in der Grafik. Zur Darstellung dient dabei ein Koordinatensystem mit einer X-Achse (horizontal) und einer Y-Achse (vertikal). Die X-Achse bedeutet die Helligkeit. Der Achsenursprung steht fr maximale Dunkelheit. Je weiter die Achse reicht, desto mehr Helligkeit bedeutet dies. Die Y-Achse steht fr die Anzahl der Pixel im Bild. Im Koordinatensystem lsst sich nun ablesen, wie viele Pixel welchen Farbwert bzw. welche Helligkeit haben. Das folgende Beispiel zeigt ein Foto und sein Histogramm:</p>

<table class="reftable" cellpadding="2" cellspacing="0" border="1">

<tr>
<td valign="top">
<img src="histogrammfoto.jpg" width="250" height="200" alt="Foto">
</td>
<td valign="top">
<img src="histogramm.gif" width="300" height="200" alt="Histogramm">
</td>
</tr></table>

<p>Das Histogramm zeigt in diesem Beispiel zweierlei: erstens zwei auffllige Spitzen, eine im sehr dunklen Bereich, und eine im sehr hellen Bereich; zweitens zeigt es, dass die Rot-, Grn- und Blau-Kurven des Bildes vergleichsweise parallel verlaufen. Letzteres ist ein Indiz dafr, dass die Farbverteilung einigermaen in Ordnung ist und das Bild keinen Farbstich in eine bestimmte Richtung hat. Die beiden Spitzen im unteren und im obersten Helligkeitsbereich deuten jedoch auf eine starke Dominanz sehr heller und sehr dunkler Farben hin, was ja auch ersichtlich ist.</p>

<p>Gute Grafikprogramme erlauben das Bearbeiten der grafischen Histogrammkurven. Auf diese Weise lsst sich die Farbverteilung im Bild korrigieren. Im obigen Beispiel wre es ein Versuch wert, die Spitze im unteren Bereich zu reduzieren, also die RGB-Werte dort nher an den Ursprung der Y-Achse zu bekommen. Natrlich macht das nur Sinn, wenn die damit verbundene Bildaufhellung bei den dunklen Tnen keine hsslichen Verflschungen bewirkt. Bildkorrekturen auf Histogramm-Ebene erfordern deshalb viel Geduld und Ausprobieren.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="gammakorrektur">Gammakorrektur</a></h2>

<p>Bei der Gammakorrektur ist es zunchst wichtig zu wissen, was ein Gammawert ist. Ein Gammawert ist bei Computergrafiken das Verhltnis zwischen den Farbwerten, die in der Grafik gespeichert sind, und den Farbwerten, die ein Gert wie Bildschirm oder Drucker daraus macht. Idealerweise wre das ein 1:1-Verhltnis, sprich, es werden genau die Farben ausgegeben, die in der Grafikdatei gespeichert sind. Das ist aber nicht der Fall. Bildschirme beispielsweise sind leider nicht "geeicht". Die Darstellung von Farben schwankt von Bildschirm zu Bildschirm und von Betriebssystem zu Betriebssystem sogar gewaltig. Wenn Sie also an Ihrem Bildschirm eine Grafik bearbeiten und mit Funktionen wie Helligkeit, Sttigung, Histogramm usw. deren optische Wirkung beeinflussen, dann gilt das Ergebnis zunchst mal nur fr Ihren Bildschirm. Wenn Sie die Grafik im Web prsentieren wollen, wird sie jedoch auf sehr vielen und sehr unterschiedlichen Bildschirmen angezeigt.</p>

<p>Gute Grafikprogramme bieten die Gammakorrektur deshalb auf zwei Ebenen an: auf der Ebene des eigenen Monitors, und auf der Ebene konkreter Grafiken. Die Gammakorrektur fr den Monitor leistet eine Anpassung zwischen numerischen Farbwerten, etwa nach dem RGB-Modell, und deren Darstellung im Grafikprogramm an Ihrem Bildschirm. Die Bildschirmgrundeinstellungen selber werden dabei nicht verndert. Die Korrektur betrifft lediglich die Richtigstellung der Farbanzeige im Grafikprogramm. Eine grafische Darstellung erlaubt bei solchen Grafikprogrammen die Angleichung zwischen gespeicherten und am Bildschirm dargestellten Farbwerten. Bei den meisten Computerbildschirmen mssen Sie einen Gammawert von 1,5 oder hher einstellen, um eine realistische Farbdarstellung im Grafikprogramm zu erhalten. Wenn jeder, der Grafiken bearbeitet, das tun wrde, wre insgesamt schon viel gewonnen.</p>

<p>Nachdem die Gammakorrektur fr den Monitor erfolgt ist, lassen sich mit Hilfe der Gammakorrektur fr konkrete Grafiken Farbprobleme ausgleichen, die durch die Herkunftsquelle der Grafik bedingt sind. So nehmen beispielsweise viele Digitalkameras Bilder scheinbar zu dunkel auf. Das liegt daran, dass auch bei der Umrechnung von Lichtstrke in RGB-Werte, die eine Digitalkamera bei einer Aufnahme vornehmen muss, Ungleichheiten vorkommen, die von Kamera zu Kamera schwanken knnen. Durch eine Gammakorrektur lassen sich solche Probleme meistens gut lsen. Das linke der beiden folgenden Bilder zeigt ein Ausgangsbild, das rechte das Ergebnis nach einer Gammakorrektur (Gammawert 1,8):</p>

<table class="reftable" cellpadding="2" cellspacing="0" border="1">
<tr>
<td valign="top">
<img src="gamma1.jpg" width="360" height="288" alt="Foto ohne Gammakorrektur">
</td>
<td valign="top">
<img src="gamma2.jpg" width="360" height="288" alt="Foto mit Gammakorrektur">
</td>
</tr></table>



<p>Bei einem Gammawert grer als 1,0 werden vor allem die mittleren Farbtne gegenber den sehr dunklen und sehr hellen Farbtnen aufgehellt. Bei einem Gammawert kleiner als 1,0 werden diese Farbtne abgedunkelt. Der Effekt ist dabei ein anderer, als wenn Sie etwa versuchen, durch Erhhen der Helligkeit eine Grafik aufzuhellen.</p>



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="filter">Filter-Effekte</a></h2>

<p>Jede Form der Manipulation einer Pixelgrafik, z.B. Helligkeit, Kontrast, Sttigung oder Gammakorrektur, ist ein Filter. Denn auf Rechnerebene ist das ndern von Helligkeit, Kontrast usw. mit einem bestimmten mathematischen Algorithmus verbunden, der auf die gespeicherten RGB-Werte in der Grafik angewendet wird. Diese werden durch die Anwendung des Algorithmus neu berechnet. Das Ergebnis ist dann das genderte Aussehen des Bildes aufgrund der neuen RGB-Werte der einzelnen Pixel.</p>

<p>Solange Sie mit den Standardfunktionen der Bildmanipulation arbeiten, brauchen Sie deren Filter-Algorithmen nicht kennen. In den Dialogen, die das Grafikprogramm anbietet, verndern Sie lediglich Parameter, aber nicht den zugrunde liegenden Algorithmus. So stellen Sie beispielsweise den gewnschten Wert fr Sttigung ein, aber Sie wissen nicht, wie das Grafikprogramm eigentlich rechnet, um aus dem eingestellten Wert die RGB-Werte der einzelnen Pixel neu zu berechnen.</p>

<p>Gute Grafikprogramme bieten eine ganze Reihe von weiteren Filtern im Dialog an. Dazu gehren Standards wie Relief-Effekte, Rausch- und Verwisch-Effekte usw.
Daneben bieten einige Programme auch eine so genannte Plugin-Schnittstelle fr Filter an. Diese erlaubt es, sich beliebige eigene Filter schreiben, die einen Algorithmus auf die RGB-Werte einer Grafik bewirken. Ein Algorithmus knnte beispielsweise lauten: ziehe von allen Rot-Werten, die ber 200 liegen, 50 ab, von allen Grnwerten, die ber 200 liegen, 100, und von allen Blauwerten, die ber 200 liegen, 150. Oder: setze bei allen Pixeln, bei denen der Rotwert, der Grnwert und der Blauwert ber 200 liegen, den Wert auf reines Wei, also 255,255,255.</p>

<p>Filter knnen ganz verschiedene Aufgaben wahrnehmen, z.B.:</p>

<ul>
<li>Fehlerkorrekturen in Bildern durchfhren (z.B. Farbkorrekturen)</li>
<li>Interessante Effekte einbauen (z.B. Puzzle-Effekt oder Verwisch-Effekte)</li>
<li>Optische Standard-Effekte nachempfinden (z.B. Lichteinfall von einer Seite oder Mondscheinlicht)</li>
<li>Erzeugung vllig neuer Phantasiegrafiken (dabei wird die Ausgangsgrafik nur als "zuflliger Input" benutzt)</li>
</ul>

<p>Die folgenden Bilder zeigen die Anwendung einiger Filter auf eine Ausgangsgrafik:</p>

<table class="reftable" cellpadding="10" cellspacing="0" border="1">

<tr>
<td valign="top">
<img src="filterbild.jpg" width="250" height="200" alt="Filterbild">
</td>
<td valign="top">
Ausgangsgrafik
</td>
</tr><tr>
<td valign="top">
<img src="filter1.jpg" width="250" height="200" alt="Filter 1">
</td>
<td valign="top">
Filter, der einen Verzerrungseffekt bewirkt
</td>
</tr><tr>
<td valign="top">
<img src="filter2.jpg" width="250" height="200" alt="Filter 2">
</td>
<td valign="top">
Filter, der einen Kohlezeichnungs-Effekt bewirkt
</td>
</tr><tr>
<td valign="top">
<img src="filter3.jpg" width="250" height="200" alt="Filter 3">
</td>
<td valign="top">
Filter, der einen Spot-Effekt bewirkt
</td>
</tr><tr>
<td valign="top">
<img src="filter4.jpg" width="250" height="200" alt="Filter 4">
</td>
<td valign="top">
Filter, der die Grafik zum Erzeugen eines Musters benutzt
</td>
</tr></table><br>&nbsp;



<p class="doc"><a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><a class="an" name="antialiasing">Anti-Aliasing</a></h2>

<p>Anti-Aliasing ist ein Algorithmus fr Pixelgrafiken, um sichtbare Treppeneffekte an harten Kanten oder Farbbergngen in Grafiken auszugleichen. An den folgenden Grafiken knnen Sie den Effekt gut beobachten:</p>


<table class="reftable" cellpadding="10" cellspacing="0" border="1">

<tr>
<td valign="middle" align="center">
<img src="antialias2.gif" width="200" height="50" alt="">
</td>
<td valign="middle" align="center">
ohne Anti-Aliasing
</td>
<td valign="middle" align="center">
<img src="antialias4.gif" width="132" height="50" alt="">
</td>
<td valign="middle" align="center">
(Ausschnittsvergrerung)
</td>
</tr><tr>
<td valign="middle" align="center">
<img src="antialias1.gif" width="200" height="50" alt="">
</td>
<td valign="middle" align="center">
mit Anti-Aliasing
</td>
<td valign="middle" align="center">
<img src="antialias3.gif" width="135" height="50" alt="">
</td>
<td valign="middle" align="center">
(Ausschnittsvergrerung)
</td>
</tr><tr>
<td valign="middle" align="center">
<img src="antialias6.gif" width="50" height="50" alt="">
</td>
<td valign="middle" align="center">
ohne Anti-Aliasing
</td>
<td valign="middle" align="center">
<img src="antialias8.gif" width="143" height="50" alt="">
</td>
<td valign="middle" align="center">
(Ausschnittsvergrerung)
</td>
</tr><tr>
<td valign="middle" align="center">
<img src="antialias5.gif" width="50" height="50" alt="">
</td>
<td valign="middle" align="center">
mit Anti-Aliasing
</td>
<td valign="middle" align="center">
<img src="antialias7.gif" width="143" height="50" alt="">
</td>
<td valign="middle" align="center">
(Ausschnittsvergrerung)
</td>
</tr></table>



<p>Die Ausschnittsvergrerungen zeigen das Prinzip des Anti-Aliasing. Mit Anti-Aliasing werden bei schrgen Strichen oder Rundungen die Treppeneffekte abgeschwcht, indem abgeschwchte Farbtne hinzugefgt werden.</p>

<p>Besonders bei Schriftzgen innerhalb von Grafiken ist Anti-Aliasing ein Mittel fr mehr Professionalitt. Aber auch bei anderen Objekten mit Schrgen oder Kurven bietet sich Anti-Aliasing an, um die Rnder weich zu zeichnen und sichtbare Pixeltreppen zu vermeiden.</p>

<p>Gute Grafikprogramme untersttzen den Anti-Aliasing-Effekt. Das Problem dabei ist normalerweise, dass Pixelgrafiken keine "Objekte" enthalten, die man einfach markieren kann, um ihnen Eigenschaften - wie zum Beispiel den Anti-Aliasing-Effekt - zuzuweisen. Einige Programme bieten jedoch die Mglichkeit an, Pixelbereiche, die ein erkennbar zusammenhngendes Muster darstellen, als Objekt zu markieren (Hilfsmittel dazu ist der meist so genannte "Zauberstab"). Markierten Objekten knnen Sie dann die Eigenschaft des Anti-Aliasing zuweisen. Beim Neuerstellen von Elementen wie Schriftzgen oder geometrischen Figuren knnen Sie dagegen von vorneherein den Anti-Aliasing-Effekt einstellen.</p>



<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
&nbsp;<a href="#top"><img src="../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="animierte_gifs.htm"><img src="../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="animierte_gifs.htm">Animierte GIF-Grafiken</a>
</td></tr>
<tr>
<td class="doc"><a href="sorten.htm"><img src="../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="sorten.htm">Typische Grafiksorten fr Web-Seiten</a>
</td>
</tr>
<tr><td colspan="2" class="doc">&nbsp;</td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../index.htm">SELFHTML</a>/<a href="../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="index.htm">Grafik</a></td>
</tr>
</table>

<p>&copy; 2007 <img src="../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../editorial/impressum.htm">Impressum</a></p>

</body>
</html>