| Wenn es darauf ankommt, sehr schnell und sparsam zu arbeiten, kann man in der IT die übliche Anzahl von 17 Millionen darstellbaren Farben auf wenige Farben einer 'Palette' reduzieren. | Wenn die Palette erst einmal festgelegt ist, dann genügt die Angabe einer Farb-Nummer (Index), um die gewünschte Farbe festzulegen. |
Farbe
|
Das komplexe Thema 'Farbe' in der Informatik |
| Palette | Künstlerische Palette und IT-Farbtabelle |
| GIF | Graphics Interchange Format |
| PNG | Portable Network Graphics |
| Office-Programme | Speichern von Diagrammen als Grafik mit Index-Farben |
| Standard-Paletten | Ausgewählte Paletten der Informatik (VGA, WebSafe, ...) |
| Live-CLUT | Farb-Tabelle einer beliebigen (hochgeladenen) Grafik-Datei |
| Verwandte Themen | Programmierung von Index-Grafik mit Basic (LibreOffice-Basic, Visual Basic, VBA), PHP, ANSI-Escape-Codes für Farben an der Text-Konsole |
| Links |
Ausgewählte
|
Palette |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
Die Palette ist ein klassisches Mal-Werkzeug.Auf einem ergonomisch geformten Holzbrett werden die für ein Bild benötigten Farben aufgetragen. Eine Palette enthält niemals alle Farben des gesamten Vorrats, sondern nur die kleine,überschaubare Anzahl, die für ein bestimmtes Bild benötigt wird. |
Für ein anderes Bild kann die gleiche oder eine andere Palette verwendet werden. Eine Palette hat nur Platz für eine begrenzte Anzahl verschiedener Farben (in der Infomatik max. 256). Jede einzelne Paletten-Farbe kann aus einem sehr großen Vorrat unterschiedlicher 'Farb-Tuben' gewählt werden. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
In der Informatik wird eine Palette eher nüchtern durch eine Farb-Tabelle
(Color Lookup Table, CLUT) dargestellt: • Die Tabelle rechts enthält die gleichen 8 Farben wie die künstlerische Palette oben. • Die Farben einer CLUT bezeichnet man auch als Index-Farben, weil sie durch eine eindeutige Index-Zahl (Spalte links) bezeichnet werden. • Die Farben einer CLUT-Tabelle können (in der Informatik) nicht gemischt werden: In einem Bild mit Farbtabelle können nur diese und keine anderen Farben verwendet werden. |
Farb-Tabelle (CLUT) dieser Palette:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
•
Eine CLUT-Tabelle darf nur maximal 256 Zeilen enthalten, weil die
Index-Zahl durch genau 1 Byte dargestellt wird. • Die Technik von Paletten mit Index-Farben kann daher nur für Bilder verwendet werden, die nicht mehr als 256 verschiedene Farben enthalten. • Jede einzelne der Paletten-Farben kann allerdings aus dem großen Vorrat aller 17 Mio RGB-Farben ausgewähltr werden. |
•
Eine CLUT enthält die Definition für eine begrente Anzahl (max. 256)
verschiedener Farben. Zur Angabe der Farbe eines Objekts wird die Index-Zahl verwendet. • Jede Farbe wird durch → Addition der 3 RGB-Grundfarben (Rot, Grün, Blau) angegeben. Jede Grundfarbe wird durch eine Dezimalzahl 0..255 oder Hexadezimalzahl #00..#FF angegeben. Durch Kombination dieser Werte sind 256*256*256=16777216 (ca. 17 Mio) Farben von #000000 bis #FFFFFF einstellbar. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
• Die Angabe aller 3 Grundfarben erfordert für jeden Bildpunkt (Pixel) 3*8=24 Bit = 3 Byte. • Index-Bilder benötigen nur max. 8 Bit = 1 Byte, weil für jedes Pixel nur der Farb-Index angegeben wird. Zusätzlich muss allerdings die Farbtabelle gespeichert werden, welche den Index wieder in RGB-Farben mit je 24 Bit übersetzt. Das spart mindestens 2/3 des benötigten Speicher-Platzes: Bild-Dateien mit Index-Farben benötigen weniger Speicherplatz und im Internet weniger Übertragungszeit. • Wenn ein Bild nur wenige (abzählbare) verschiedene Farben enthält, dann ist die Technik von Farbtabelle und Index-Farben die optimale Speicherform. |
Dieser Nachteil ist wegen der hohen Geschwindigkeit heutiger PC-Prozessoren fast bedeutungslos. • Ein weiterer (nicht zu umgehender) Nachteil ist die Einschränkung auf maximal 256 Farben. Nur Bilder mit "abzählbaren" Farben können mit Index-Farben gespeichert werden (z.B. GIF, PNG). Für Bilder mit "unendlich" vielen Farben muss man für jeden einzelnen Punkt die volle Farb-Information (24 Bit) speichern (z.B. TIFF, JPEG). |
||||||||||||||||||||||||||||||||||||||||||||||||||||||
GIF - Graphics Interchange Format |
||||||||||||||||||||||||||||||||||||||||||||||
GIF ist ein Standard für Grafik-Dateien. Entscheidend ist die Verwendung
von Index-Farben.
Rechts die Original Farbtabelle dieser Grafik. Man erkennt die Optimierung
der Tabellen-Farben für dieses Bild: Die Tabelle enthält nur wenige
ausgewählte blaue und gelbe Farbtöne.• In ähnlicher Weise ist die Farbtabelle für jede einzelne GIF-Grafik individuell optimiert. • Mit geringerer Qualität ließe sich dieses Bild noch sparsamer mit nur 2 Farben (blau #0000A9 und gelb #F7F641) darstellen. |
Farb-Tabelle (Color Lookup Table, CLUT) der links gezeigten GIF-Grafik
|
|||||||||||||||||||||||||||||||||||||||||||||
Größen-Vergleich:• Die Demo-Grafik enthält 80*50=4000 Punkte (Pixel). Das entspricht bei Verwendung von 24-Bit RGB-Farben einer Daten-Menge von 96000 Bit = 94kB.• Die hier verwendeten 7 Index-Farben sind mit je 3 Bit darstellbar, das ergibt für alle 4000 Pixel eine Daten-Menge von 12000 Bit = 12kB. Dazu kommt noch die Farbtabelle mit ca. 200 Bit. • Insgesamt benötigt dieses Bild mit Index-Farben nur ca. 13% des Speicherplatzes und der Internet-Übertragungszeit ! • In der Praxis werden die Daten zusätzlich komprimiert. Damit wird die Speichergröße weiter reduziert, und zwar umso mehr, je größer die Flächen einheitlicher Farben sind (Im Beispiel auf 1.5 kB). Der Vorgang ist verlustfrei, d.h. die Grafik ist vor und nach der Kompressioin exakt gleich (Das gilt nicht für JPEG !). |
Faustregeln:
▲
Wenn ein Bild abzählbare Farben enthält,
dann wird es bessser mit Index-Farben gespeichert (PNG oder GIF).
Geschäfts-Grafik (Diagramme), Firmen-Logos usw. sind meist typische
Bilder mit Index-Farben.
▲
Wenn ein Bild unzählig viele Farben enthält,
dann wird es besser mit RGB-Farben gespeichert (PNG, JPEG).
Portraits, Blumen, Landschaften usw. sind typische RGB-Bilder.
|
|||||||||||||||||||||||||||||||||||||||||||||
Transparenz
GIF bietet die Möglichkeit, eine der Index-Farben als durchsichtig
(transparent) zu definieren. Die Transparenz lässt sich allerdings
nur aus- (0%) oder ein-(100%)-schalten.Die häufigste Anwendung ist die Darstellung nicht-rechteckiger Objekte. Mit GIF-Transparenz und CSS lassen sich einige Tricks ausführen (Klicken sie den Kreisring).
AnimationGIF bietet die Möglichkeit einer einfachen Animation. Dazu werden mehrere GIF-Grafiken nach Art eines 'Daumenkinos' hintereinander gezeigt.InterlaceEine weitere Option ermöglicht es, die GIF-Grafik in Teilbilder zu zerlegen und diese zeilenweise anzuzeigen, ähnlich wie die TV-Teilbilder. Das verbessert den Komfort nur bei der Anzeige sehr großer oder sehr langsam übertragener Bilder. Daher wird diese Option nur selten verwendet. |
ProgrammierungAlle modernen Programmiersprachen bieten die Möglichkeit, GIF-Grafik herzustellen oder zu verändern.• Das Beispiel zeigt eine mit → PHP programmierte Demonstration der Standard → WebSafe-Palette (216 Farben).
Die Grafik ließe sich zwar auch manuell erzeugen, die Herstellung mit
einem winzigen PHP-Programm ist jedoch eleganter.• GIF-Animationen von systematisch veränderten oder bewegten Objekten lassen sich mit einem Programm rasch und exakt herstellen. ♦ GIF-Programmierung mit → PHP LizenzGIF war ursprünglich ein patentiertes Verfahren. Je nach Staat ist das Patent in den Jahren 2003-2004 abgelaufen. Während der letzten Lizenz-Jahre nahm vor allem im Internet das Grafik-Volumen sehr rasch zu. Das beschleunigte die Entwicklung des freien ↓ PNG-Standards (nächstes Kapitel), welcher gegenüber GIF viele Vorteile bietet. |
|||||||||||||||||||||||||||||||||||||||||||||
PNG - Portable Network Graphics |
|
| PNG ist ein sehr leistungsfähiger Offener Standard, welcher die meisten Vorteile von Index-Farben (GIF) und 24-Bit TrueColor Farben (JPEG) miteinander verbindet. | PNG kann wahlweise Index-Farben darstellen (wie ↑ GIF) oder Bilder mit dem vollen Farb-Umfang von 24 Bit (TrueColor wie JPEG oder TIFF). In beiden PNG-Varianten kommt auch Daten-Kompression zur Anwendung, ebenso wie bei GIF oder JPEG. |
PNG Index-FarbenWenn man PNG zum Speichern von Index-Farben verwenden willl, dann muss man bei manchen Grafik-Programmen darauf achten, dass nicht ungefragt die 24-Bit Variante gespeichert wird.Das ist nicht gleichgültig, denn erstens sind Dateien mit Index-Farben wesentlich kleiner, zweitens ist nur die Kompression von Index-Farben verlustfrei. |
Dazu stellt man das geladene Bild vor dem Speichern von RGB-Farben auf Index-Farben um. Zumindest alle professionellen Programme bieten diese Option. Allerdings ist der entsprechende Menü-Befehl je nach Programm unterschiedlich formuliert und angeordnet. |
Transparenz
PNG bietet die Möglichkeit, eine der Index-Farben als durchsichtig
(transparent) zu definieren. Die Transparenz lässt sich wie bei GIF nur
ein- oder abschalten.PNG bietet auch variable Transparenz (0..100%), allerdings nur in seiner 24-Bit Variante. |
LizenzfreiPNG ist ein Offener Standard und daher lizenz- und kostenfrei verwendbar. Der IT-Marktführer hat zu den meisten Standards ein gestörtes Verhältnis. Immerhin kann man PNG sogar mit dem MSIE Browser ab Version 7 in vollem Umfang verwenden - viele Jahre nach allen modernen Browsern.ProgrammierungPNG-Grafik lässt sich mit allen modernen Programmiersprachen erzeugen. Die Methoden für verschiedene Formate (GIF, JPEG, PNG, ..) sind weitgehend identisch, sie unterscheiden sich meist nur in einem einzigen Befehl (Sicherung der fertig erstellten Grafik in einem bestimmten Format). |
Animation mit PNG (APNG)In der ursprünglichen Variante bot PNG keine Animation. Deshalb sind die meisten Web-Animationen nach dem (Animated) GIF-Standard erzeugt.Im Jahr 2004 wurde der PNG-Standard vom Mozilla Entwickler-Team auf die animierte Variante APNG erweitert. |
Quelle:
Wikipedia
Alle modernen Browser unterstützen APNG. Nur der veraltete Versionen des MSIE Browsers beherrschen diese Technologie nicht, zeigen jedoch wenigstens eine statische PNG-Grafik. |
Diagramme aus Office-Programmen |
|
|
In Büro-Programmen (LibreOffice, OpenOffice, MS-Office, ...) werden
häufig Diagramme (Geschäfts- oder Business-Grafik) hergestellt. ● In diesem Arbeitsgebiet müssen die einzelnen Farben gut voneinander unterscheidbar sein. ● Extrem feine Abstufungen sind dagegen fast nie erforderlich. Dieses Profil spricht eindeutig für die Verwendung von Paletten bzw. Index-Farben. |
♣
In den meisten Programmen kann man die verwendete Palette genau auf den
Bedarf abstimmen und als Standard speichern. Es ist sinnvoll, sich dabei
an der 'Corporate Identity' zu orientieren. ♣ Meist kann man sogar mehrere Paletten erstellen und zwischen ihnen wahlweise umschalten. Das ist jedoch den meisten AnwenderInnen ebenso unbekannt wie die Unterscheidung zwischen 8-Bit Index-Farben und 24 Bit TrueColor. |
Obwohl es häufig erforderlich ist, mit Kalkulations-Programmen erzeugte
Diagramme als Grafik-Datei zu speichern, ist diese Arbeit derzeit leider
nicht AnwenderInnen-freundlich ausführbar.LibreOfffice & OpenOffice• Grafik markieren und kopieren• Menü • In OpenOfficeDraw: Menü • Menü MS-Excel:• Grafik markieren.• Shift-Taste niederhalten. • Menü • Beliebiges Grafik-Programm öffnen • Menü • Menü NachbearbeitungWenn es notwendig ist, die erzeugte Grafik zu adaptieren, dann verwendet man dazu ein Grafik-Programm.Für OpenOffice eignet sich am besten OpenOffice-Draw. Ansonsten verwendet man z.B. Gimp (professionelle Pixel-Grafik, kostenfrei für alle gängigen Betriebssysteme). |
![]() Säulen-Grafik (Column Chart) ![]() Kreis-Grafik (Pie Chart) |
ScreenShotAus jedem angezeigten Fenster (d.h. auch aus jedem Programm) lässt sich ein ScreenShot machen, d.h. ein Pixel-Bild des aktuell angezeigten Fensters.
● Linux-ScreenShot
unter Gnome Desktop: Ausführung von gnome-screenshot
(Sammlung gnome-utils)unter K-Desktop: Ausführung von ksnapshot |
● Windows-ScreenShot
Tasten Alt+Druck• Die Grafik wird anschließend aus der Zwischenablage in ein beliebiges Grafik-Programm eingefügt und als GIF oder PNG gespeichert. • Unabhängig davon gibt es zahlreiche Freeware und Shareware Programme zur Ausführung von ScreenShots mit verschiedenen zusätzlichen Optionen. |
AutomatisierungDie Erstellung von Geschäfts-Grafik wird in den meisten Betrieben und Organisationen regelmäßig (mit den jeweils aktuellen Zahlen) manuell wiederholt.• Die MitarbeiterInnen sind oft nicht dazu ausgebildet, verwenden umständliche Verfahren und sehr viel Zeit. • Zur Überführung der Grafiken ins Intranet oder Internet werden abenteuerliche und meist sehr aufwändige Verfahren verwendet. • Wenn die zuständigen MitarbeiterInnen gestresst, krank oder auf Urlaub sind, gibt es keine Grafik, oder die Diagramme sehen ganz anders aus. • Nicht alle erstellten Diagramme werden wiedergefunden, schon gar nicht bei Abwesenheit der/des Mitarbeiters. • Die teuer hergestellte Grafik wird oft zu spät, manchmal gar nicht an alle geplanten oder interessierten MitarbeiterInnen verteilt. |
Es ist nur wenig bekannt, dass es vergleichsweise einfach ist, die Erstellung von Geschäftsgrafik zu automatisieren. Das kostet einmalig ca. so viel Aufwand wie die manuelle Herstellung von 10 Diagrammen. • Die Arbeit wird stets pünktlich und zuverlässig erledigt. • Die Diagramme werden automatisch am vorgesehenen Platz gespeichert und sind dort jederzeit auffindbar. • Von allen Daten und Diagrammen werden automatisch Sicherungs-Kopien hergestellt. • Die Grafik wird automatisch ins Internet übernommen. • Das Format ist genau reproduzierbar und daher immer gut vergleichbar. • Für die individuelle Bearbeitung kann man alle notwendigen Daten vom Server an den eigenen PC übernehmen. • Die Zugriffs-Rechte lassen sich genau planen und strikt einhalten. |
Automatisierung mit Basic (LibreOffice-Basic, Visual Basic, VBA)Mit → Basic 'Makro'-Programmen kann man die Arbeit in LibreOffice oder MS-Excel automatisieren. Diese Variante wird von AnwenderInnen meist bevorzugt, weil sie weiter mit dem gewohnten Programm arbeiten können, darin jedoch zusätzliche Menü-Punkte finden.• Es ist sinnvoll, mit Basic-Programmen standardisierte Diagramme herzustellen und zu speichern. • MS-Excel ist allerdings (auch mit Basic-Hilfe) kaum geeignet, Webseiten für die betriebliche Verwendung herzustellen. • Ein derartiger Einsatz von basic führt zu einer Teil-Automatisierung: Die Grafik wird rasch und genau reproduzierbar hergestellt, erfordert jedoch weiterhin persönlichen Einsatz. |
Automatisierung mit Standard-ServerEin Standard-Server ( → LAMP oder → WAMP) ist bei etwa gleichem Aufwand wesentlich besser zur Automatisierung geeignet:• Die Daten werden von einem Datenbank-Server verwaltet, der wesentlich mehr Sicherheit bietet als lokal gespeicherte Excel-Dateien. • Die Grafik wird automatisch, zuverlässig und genau reproduzierbar aus den jeweils aktuellen Daten erzeugt. • Die Daten und Grafik-Dateien müssen nicht verteilt werden, sie stehen im eigenen Web jeder/m berechtigten MitarbeiterIn zur Verfügung. Die Programmierung erfolgt in diesem Fall meist mit → Java, → Perl oder → PHP. Wenn der Betrieb ein Server-Programm-Paket verwendet, dann benötigt man keine Programmierung sondern nur eine Adaptierung. |
Grafik-Programme |
|
|
Fast jedes noch so einfache Grafik-Programm kann Bilder in unterschiedlichen
Formaten öffnen und speichern. Folgende Arbeiten können daher mit jedem gängigen Grafik-Programm ausgeführt werden: ► Öffnen einer Grafik-Datei (BMP, GIF, JPEG, PNG, TIFF, ...) ► Einfügen einer Grafik aus der Zwischenablage ► Speichern einer Grafik (Index-Farben als GIF oder PNG). ► Die meisten Grafik-Programme können darüber hinaus die Grafik verändern (z.B. Zuschneiden, Ausschneiden, Freistellen, ...). ► Andere Änderungen (z.B. Skalierung = Vergrößern oder Verkleinern) erfordern meistens eine manuelle Nachbearbeitung. |
Beispiele für ausgezeichnete FreeWare Grafik-Programme:
IrfanView gibt es derzeit leider nur für Windows-Systeme. Man kann damit
nicht nur Bilder ansehen (Viewer), sondern in alle gängigen Formate umwandeln,
zuschneiden, drehen und mit verschiedenen Filtern bearbeiten.
Gimp ist ein OpenSource Programm zur Bildverarbeitung auf professioneller Ebene.
Man kann es aus dem Internet beziehen und lizenzfrei verwenden.
Läuft auf Linux und Windows.● Es gibt hunderte von PhotoShop Filter-Modulen für alle denkbaren Grafik-Aufgaben. Man kann fast alle problemlos auch mit IrfanView und Gimp verwenden. |
|
|
|
LibPNG ● Color-Name Dictionaries am MIT: Umfassende Sammlung von Daten und Links. ISCC-NBS Farb-Namen (David Mundie) CPAN-(Perl)-Modul Color-Library: Liste der Namen und RGB-Daten von >3000 benannten Farben. |
Wikipedia:
Indizierte Farben,
GIF,
PNG,
APNG,
Grafik-Formate,
Grafik-Standards,
Farbtiefe,
(Color) Lookup Table,
|
|
|