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"> <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"> <a href="#allgemeines">Allgemeines zur Bildbearbeitung von Raster- bzw. Pixelgrafiken</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#bildgroesse">Bildgre, dpi und Pixel</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#farbtiefen_modelle_kanaele">Farbtiefen, Farbmodelle und Farbkanle</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#farbpaletten">Farbpaletten und indizierte Farben</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#alphakanal_transparenz">Alphakanal und echte Transparenz</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#transparenz">Transparenz einer bestimmten Palettenfarbe</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#dithering">Dithering (Error-Diffusion)</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#graustufen">Graustufen</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#helligkeit_saettigung_kontrast">Helligkeit, Sttigung und Kontrast</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#histogramm">Histogramm</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#gammakorrektur">Gammakorrektur</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#filter">Filter-Effekte</a><br>
<img src="../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#antialiasing">Anti-Aliasing</a><br>
</p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </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">
<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">
<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"> <a href="formate.htm#gif">GIF-Format</a> und das <img src="../src/dok.gif" width="15" height="10" alt="Seite"> <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"> <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"> <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"> <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"> <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>
<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> </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>
<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> </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"> <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"> <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"> <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"> <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"> <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"> <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"> <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>
<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">
<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"> <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"> <a href="sorten.htm">Typische Grafiksorten fr Web-Seiten</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </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"> <a href="index.htm">Grafik</a></td>
</tr>
</table>
<p>© 2007 <img src="../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|