HG´S kleine Grafikkunde

[HumanGrunt]

Also, hier meine kleine Farbenlehre.

Ich möchte mit einer kleinen Einleitung beginnen, die auch als Erklärung meiner Beweggründe für das Team dienen soll (bevor ich mir wieder Ärger einhandel).

Ich habe diesen Thread im Fanart Bereich eröffnet aus zweierlei Gründen.

1. Meiner Meinung nach steht dieser Thread im direkten Zusammenhang mit dem derzeitigen Problem im "BoS Flaggen für alle" Thread. Dort habe ich wie Sharcc es schon erwähnt hat das satte Blau des Originals nicht in das CMYK Farbsystem übertragen können.

2. Wenn jemand Fanart machen möchte oder sich dafür interessiert wird ihm dieser Thread sicherlich einige nützliche Informationen zur Verfügung stellen.


Also Los...

1. Nummero Uno ist das CMYK Farbsystem. CMYK steht für: Cyan, Magenta, Yellow, Key... Ich denke die Bezeichnungen Cyan Magenta und Yellow dürften klar sein, es handelt sich dabei um die Farben mit dementsprechenden Namen. Bei Key handelt es sich um Schwarz. Dieses wird nicht einfach mit B gekennzeichent da das B schon für Blue im RGB Farbmodus reserviert ist. Dieses dient im CMYK Modus nicht zur Farbgebung sondern lediglich um Farben abzudunkeln ohne ihnen dabei einen Farbstich einer der anderen Farben zu geben. CYMK ist das Modell welches sich im Weltweiten Industriedruck durchgesetzt hat und für so gut wie alle Druckprodukte verwendet wird. CMYK ist das Farbsystem welches die wenigsten Farben der 3 Farbsysteme darstellen kann. Daher auch die etwas blasseren Farben bei dem BoS Logo, aber dazu nachher mehr. CMYK ist ein sogenanntes "subtraktives Farbsystem" das heisst. Bringe ich alle Farben (CMY - nicht K)  auf 100% so erhalte ich (zumindest in der Theorie) Schwarz. Bringe ich jedoch alle Farben auf 0% habe ich Weiß. Das mag jetzt vielleicht logisch klingen, ist es aber nicht, ihr werdet nachher verstehen warum. Es ist also im Prinzip wie bei eurem Malkasten Zuhause.

2. Nummer Zwei ist das sogenannte RGB Farbsystem. Dabei handelt es sich um die Farben Rot, Grün und Blau. Dieses Farbsystem nennt man Lichtfarbsystem oder auch additives Farbsystem. Der Grund dafür ist einfach. Mischt man alle Farben deckend ensteht Weiß, also genau umgekehrt, wie bei dem CMYK Farbsystem. Wie bei den Sonnenstrahlen... sieht man sie durch ein Prisma gespalten so erscheinen sie in  vielen bunten Farben... sieht man sie Gebündelt so erscheinen sie Weiß.  Das RGB Farbsystem wir d für so gut die alle Non-Print Produkte verwendet, heisst, für alle Sachen die NICHT in den Druck gehen. Ein paar Beispiele sind: TV, Websites, Videos, Flash Animationen... alles was ihr eben so in eurem täglichen PC und TV Wahn seht (Nein Spielehandbücher sind CMYK).
Es ist zu erwähnen das der auch der RGB Farbraum, trotz seines größeren Spektrums im vergleich zu CMYK lange nicht alle Farben darstellen kann die das Menschliche Auge wahrnimmt.

3. Der Lab Farbraum ist der größte der Farbräume, er deckt alle Farben hab die das Menschliche  Auge überhaupt wahrnehmen kann und noch wesentlich mehr. Trotzdem findet er recht selten Verwendung, schon alleine aus dem Grund weil weder ein Monitor (auch kein HD-Gerät) noch irgendeine Druckmaschine diese Farben ausgeben kann... Also eigentlich ein recht sinnloses Farbsystem wenn man es mal nüchtern sieht.
Aber nichts desto trotz möchte ich es kurz erläutern. Stellt euch das Modell wie einen Zylinder vor. dieser Zylinder hat (logischweise) 3 Achsen. a und b verlaufen Horizontal und kreuzen sich in der Mitte, und L verläuft Vertikal. Alle 3 Achsen kreuzen sich in der Mitte des Zylinders (ich hoffe das war verständlich) "a" steht für die a-Achse. Auf dieser Achse befinden sich alle Grün und Rottöne. "b" steht für die b-Achse, auf dieser findet man die Blau und Gelbtöne wieder. Und "L" steht für Luminanz (Helligkeit). Unabhängig auf welchem wert a oder b liegen regelt L die Helligkeit. ist L = 0 so ist das Ergebnis Schwarz, ist L = 100 ist es weiss... egal welchen wert a und b haben.

Also das ist so das wichtigste was man drauf haben sollte, wenn man einigermassen gute Druckprodukte erstellen will. jeder Drucke-Meister wird euch den Kopf abreissen wenn ihr ihm ein Dokument in RGB oder Lab schickt.^^

So ich hoffe es hat euch gefallen. Über positive und negative sachliche Kritik freue ich mich immer.

Evtl (Falls dieser Thread nicht im Atomendmülllager landet) und es euch gefallen hat werde ich weitere Workshops und Tutorials anhängen...

*edit*

hier ein paar bildchen zum besseren verständniss:

Lab-Farbraum





Grau = CMYK,
Schwarz = RGB,
Das ganze = Lab

[HumanGrunt]

Dateiformate und ihre Vor und Nachteile

Also im Folgenden werde ich die wichigsten Grafikformate und ihre Vor- und Nachteile erläutern so das es für jeden verständlich sein sollte und jeder weiss ich welchen Format er seine Grafiken am besten für seinen Zweck abspeichert. Also fangen wir an mit den Pixelgrafikformaten.

JPEG:

JPEG bedeutet ausgeschrieben Joint Photographic Experts Group. Diese ist das am weitesten verbreitete Format im Internet. Seine Vorteile liegen ganz klar in der starken Kompression (sehr kleine Dateigrößen) und der sensationellen Kompabilität (JPEG lässt sich in nahezu jeden Programm öffnen). Diese sind auch die Hauptgründe weshalb JPEG das vorherrschende Format im www ist. Das war es dann allerdings auch schon mit den Vorteilen. JPEG benutzt eine sehr effektive, allerdings auch eine veraltete Form der Kompression, dadurch lässt sich ein enorme Einbuße bei der Bildqualität leider nicht vermeiden wenn man ein Bild im JPEG Format speichert. Bei jedem Speichern wird dieser Verlust noch verstärkt. Für den professionellen Druck ist das JPEG Format völlig ungeeignet. Ausserdem unterstützt es keine Ebenen, Transparenzen oder sonstige erweiterte Optionen.

Hier der Typische Qualitätsverlust bei mehrmaligen speichern eins Bilde im JPEG Format:

Original:

Mehrmals Gespeichert:



GIF

GIF bedeutet Graphics Interchange Format. Das Gif ist das zweit meist verbreitet Format im Internet. Auch diese Format hat gravierende Vor und Nachteile. Die Vorteile liegen beim Gif ganz klar in seiner Fähigkeit Transparenzen darzustellen und (was bei Bildformaten bis heute einzigartig ist) Animationen darzustellen. Das GIF wurde rein für das Internet von der Firma CompuServe entworfen. Dies hatte den Grund das man auch relativ grosse Bilder sehr schnell übertragen konnte. Gif ist noch wesentlich kleiner als das JPGE Format, damit wollen wir allerdings auch schon zu den Nachteilen kommen. GIF-Bilder sind höchstens mit 256 (1Bit) Farben aufgebaut. Das heisst die Farbtiefe ist sehr begrenz, im Vergleich zu einer 8 Bit JPEG Grafik (16000000 Farben). Allerdings kommen Gifs dadurch auch selten über eine Dateigrösse von 1 MB.

Hier ein typisches Gif, bei genauem hinsehen fällt auf das es aufgrund der 256 Farben körnig aussieht.



BMP:

Naja, ich will das device-independent bitmap hier mal nur der Vollständigkeit halber aufführen. Keine Kompression, das bedeutet gigantische Dateigrössen die schonmal die 1GB marke knacken können. Der Vorteil ist eben nur das diese Format extrem einfach gestrickt ist, was aber für den normalen Grafik Anwender sowieso keine Relevanz hat.

So kommen wir jetzt zu meinen Favourisierten Grafikformaten

PNG:

PNG ist der offiziell Nachfolger des Gif, und bedeutet Portable Network Graphics. Ausserdem ist es viel weniger komplex als TIFF. Die Daten werden verlustfrei komprimiert abgespeichert (im Gegensatz zum verlustbehafteten JPEG-Dateiformat). PNG hat – mit Ausnahme von Animationen – alle Möglichkeiten, die auch GIF kennt, zudem ist die Kompressionsrate im Allgemeinen besser. Dies macht es zu einem sehr zweckmäßigen Format. PNG kann wie GIF Pixel aus einer Farbpalette mit bis zu 256 Einträgen verarbeiten. Darüber hinaus ist die Speicherung von Graustufenbildern mit 1, 2, 4, 8 oder 16 Bit und Farbbildern (RGB) mit 8 oder 16 Bit pro Kanal (also 24 beziehungsweise 48 Bit pro Pixel) möglich. Das heisst, es unterliegt nicht mehr der 256 Farben Beschränkung, wird diese allerdings überschritten wird logischerweise auch die Dateigrösse höher.
PNG-Dateien können Transparenzinformationen enthalten, entweder in Form eines Alphakanals oder für jede Farbe der Farbpalette. Ein Alphakanal ist eine zusätzliche Information, die für jedes Pixel angibt, wie viel vom Hintergrund des Bildes durchscheinen soll. PNG unterstützt Alphakanäle von 8 oder 16 Bit, was 256 beziehungsweise 65536 Abstufungen der Transparenzstärke entspricht. Bei GIF ist nur möglich, einen einzigen der Paletteneinträge als vollständig transparent zu deklarieren. Das PNG-Format erlaubt somit, unabhängig vom Hintergrund die Kanten von Text und Bildern zu glätten. Man kann echte Schlagschatten verwenden, die im Hintergrund ausblenden oder Bilder erzeugen, die beliebig geformt sind - wenn das Programm zur Anzeige der Bilder PNG-fähig ist.

Hier ein kleins Beispiel:






TIFF:

TIFF heisst Tagged Image File Format. Zusammen mit Encapsulated Postscript (EPS = Vektorgrafikformat) ist es das wichtigste Format zum Austausch von Daten in der Druckvorstufe(Ausser natürlich das PDF, das liegt unumstritten vorne). Heisst, fast alle Daten werden in TIFF zu Druckereien geschickt. Das TIFF Format ist sehr Vielseitig und flexibel, es bietet mehrere Kompressionsarten an. Unter anderem die JPG Kompression, die Reduzierung auf 256 Farben und gar keine Kompression... Auch noch viele mehr. Größter Nachteil von TIFF ist seine Komplexität. Die Vielfalt möglicher gültiger TIFF-Dateien kann von keinem einzelnen Programm unterstützt werden. In der Spezifikation des Dateiformats ist deswegen eine Untermenge gültiger TIFF-Dateien definiert, die jedes TIFF-fähige Programm verarbeiten können sollte, genannt "Baseline TIFF".

Kommen wir nun zu dem einzigen wirklich universellen Format für Vektoren:

EPS:

EPS bedeutet Encapsulated Postscript. Vektordaten sind im gegensatz zu Pixeldaten (Achtung jetzt kommt was logisches) keinen Pixlen unterworfen. Es sind  wenn man so will "Kurven".  Der ganz klare Vorteil hier bei liegt darin das ich die Grafik beliebig vergrössern und verkleinern kann ohne auch nur den geringsten Qualitätsverlust zu haben. Ausserdem sind Vektorgrafiken immer sehr klein, von ihrer Dateigrösse her. Der grosse Nachteil liegt darin das Vektoren für ungeübte sehr schwer zu bearbeiten, geschweige denn zu erstellen sind. Das Format EPS wird aber für die meisten von euch sowieso nicht von belang sein, da man es zum zeigen im Netz sowieso wieder in Pixel umwandeln muss und dann hat das EPS wiederum seinen sinn verloren. Es ist lediglich zum Druck gut.

Beispiel für eine Vektorgrafik:




Und nun, zu guter letzt ein Format das komplett aussen vor ist:

RAW:

zu RAW gibt es nicht viel zu sagen. Es heisst einfach nur "Rohdaten". Das sind die Daten die direkt von einer guten Spiegel-Reflex Kamera kommen. Total unverfälschte, Unkomprimierte Daten die natürlich hervorrangend zu bearbeiten sind. allerdings schlägt sich das auch in de Dateigrösse nieder, die nicht selten mal die 100 mb Grenze knackt.

Das waren die wichtigsten Formate, ich werde diese nun im folgen kurz mit ihren Vor- und Nachteilen aufzählen:

JPEG
Vorteile:
-niedrige Dateigrössen
-weit verbreitet und sehr kompatibel
Nachteile:
-sehr schlechte Bildqualität
-für den Druck ungeeignet

GIF
Vorteile:
-niedrige Dateigrössen
-weit verbreitet und sehr kompatibel
-Transparenzen und Animationen möglich
Nachteile:
-Nur 256 Farben möglich
-für den Druck ungeeignet

BMP
Vorteile:
-einfach aufgebaut
Nachteile:
-Sehr gross
-Auf einem Macintosh Rechner nicht lesbar

PNG
Vorteile:
-relativ niedrige Dateigrössen
-sehr gutes und verlustfreies Kompressionssystem
-sehr komplexe Transparenzen möglich
Nachteile:
-Bei über 256 Farben steigt die Dateigrösse beträchtlich

TIFF
Vorteile:
-sehr felxibel
-wahlweise mit oder ohne Kompression
-verlustfreie Kompression
Nachteile:
-keine transparenzen

EPS
Vorteile:
-Vekotrounterstützung
-absolut verlustfreie Skalierung
-kleine Dateigrössen
Nachteile:
-Schwer zu bearbeiten

RAW:
Wenn die Dateigrösse nicht Wäre, ausser Konkurenz.


So das war meine kleine Dateiformatlehre.. ich hoffe ich konnte euch damti etwas weiter helfen und einen Eindruck vermitteln was die verschieden Formate zu Leisten im Stande sind.

[F0lem]

pinned 

[HumanGrunt]

soooo liebe Leute, heute befassen wir uns unter anderem mit dem Mythos Vektorgrafik. Was ist das? Was bringt mir das? Warum tut es das? alles Fragen die ich euch beantworten werde...

Vektorgrafiken können im Gegensatz zu Rastergrafiken ohne Qualitätsverlust stufenlos skaliert und verzerrt werden. Außerdem bleiben bei Vektorgrafiken die Eigenschaften einzelner Linien, Kurven oder Flächen erhalten und können auch nachträglich noch verändert werden. Bei Rastergrafiken (Pixelgrafiken) ist die nicht möglich. Einmal gerastert sind die Werte fest im Bild integriert.
Reine Vektorgrafiken galten lange Zeit als ungeeignet für die Darstellung von fotorealistischen Grafiken, da diese sich anfangs kaum vernünftig bearbeiten lassen haben. Von Transparenzen und Verläufen ganz zu schweigen.. Mittlerweile bieten gängige Vektorgrafikprogramme jedoch Funktionen an, die es erlauben, Vektorzeichnungen zusammen mit AntiAlias-Effekten, feinen Farbverläufen und Transparenzen zu speichern und so fotorealistische Ergebnisse zu erzeugen. Die generierten Grafiken bleiben dabei trotzdem skalierbar und veränderbar.

Heutige Bildschirme werden ausschließlich mit Rastergrafiken angesteuert. Daher müssen Vektorgrafiken vor der Ausgabe umgewandelt werden; dies nennt man Rasterung. Ein vektororientiertes Ausgabegerät ist der Plotter(wer nicht weiss was ein plotter ist: .

Die Erstellung von Vektorgrafiken erfolgt meist mittels eines Vektorgrafikprogramms (Adobe Illustrator oder Adobe Freehand (früher Macromedia Freehand)) oder direkt mit einer Auszeichnungssprache. Rastergrafiken können mit gewissen Einschränkungen in Vektorgrafiken umgewandelt werden (Vektorisierung). Beim Vorgang er Vektorisierung muss die komplette Grafik normalerweise per Hand nachgezogen werden und einefärbt werden. Die neue Illustrator version bietet zwar die Funktion "Interaktiv Appausen" die normalerweise eine Rastergrafik in einne Vektorgrafik umwandeln soll, allerdings funktioniert das nur mit sehr einfachen Grafiken, wie etwa einem "Durchfahrt verboten" Schild oder ähnlichem... ausserdem ist das Ergebniss selbst bei so einfachen Grafiken mehr als Fragwürdig...


Um das ganze etwas zu verdeutlichen zeige ich euch anhand eines einfaches beispiels den Vorgang des vektorisierens:

Schritt 1: Die Vorlage muss ausgewählt und in das Vektorprogramm geladen werden:



Schritt 2: Wir ziehen jede linie und jedes Detail (das wir auch haben wollen) mit dem Zeichenstift (Name des Werzeugs in Illustrator) nach.



Das sollte wenn es fertig ist und die vorlage ausgeblendet ist etwas so aussehen:



Schritt 3: Die Vektorgrafik wird eingefärbt und sollte dann in etwas so aussehen:



Im vergleich zu der vorlage in den verschieden vergrösserungen sollte der Vorteil eines Vektors klar ersichtlich werden:

100%


600%


1200%



Wer Lust hat das selber zu probieren, hier ein Freeware Vektor Programm: http://www.winfuture.de/news,18863.html

[Mr.Wolna]

Mann,ich danke dir von ganzen herzen für diesen Theard glaubs oder nicht nach sowasss suche ich schon seit Jahren, das wir mir sehr weiterhelfen in meinen FO Modding werdegang! Mach weiter so

[RunningJack]

Und falls ich es anmerken darf, gibt es hier: http://vectormagic.stanford.edu/ ein online Vektor Programm, mit dem man seine nicht-Vektor Bilder hochladen kann, die dann in eine Vektorgrafik konvertiert werden.
Man kann aber keine Wunder erwarten 

[Mr.Wolna]

ich frage mich grad warum sich APNG nicht durchsetzen kann.

[Lexx]

Du hast hiermit offiziell den Grabschänder-Perk erhalten.

[Mr.Wolna]

Du hast hiermit offiziell den Grabschänder-Perk erhalten.

Danke sehr hilfreiche Antwort. 

[Lexx]

Deine Frage war nicht unbedingt als "ich möchte gerne von euch wissen..." formuliert, sondern kam wie das Übliche "Ich schreib jetzt einfach mal irgendwas" rüber.

Desweiteren... http://de.wikipedia.org/wiki/Apng

[Mr.Wolna]

Lexx dieser Satz als Antwort, hätte es auch getan.

Mangels Unterstützung durch die meisten aktuellen Webbrowser ist es sinnvoll, APNG-Bilder in Internetseiten parallel mit ihren GIF-Pendants einzubinden.

Falls du mich falsch verstanden hast, wegen meiner üblichen beschiedenen Formulierungen, tuts mir Leid.

[Coraline]

Das Würfelbild ist der Hammer! Springt einem ja fast ins gesicht

[Fallout80]

Viele Grafiken werden leider nicht angezeigt..

Fehler bei mir oder im Forum?

[Lexx]

Der Thread ist von 2007... In 6 Jahren kann es schon passieren, dass extern hochgeladene Bilder nicht mehr online sind.