Anzeige
Tutorialbeschreibung

Grafikbearbeitungs-Workshop Teil 1 - Grafikformate und Farbsysteme

Grafikbearbeitungs-Workshop Teil 1 - Grafikformate und Farbsysteme

Ziele dieser Dokumentation: Unterschiede zwischen JPG, GIF, PNG und Farbtiefe; Unterschiede zwischen BMP und Vektorgrafiken; Wissen, wann JPG und wann GIF anzuwenden sind und an Beispielen selber ausprobieren; Allgemeines über Grafiken und deren Aufbau

 


Ziele dieser Dokumentation:
- Unterschiede zwischen JPG, GIF, PNG und Tief kennen
- Unterschiede zwischen BMP und Vektorgrafiken kennen.
- Wissen, wann JPG und wann GIF anzuwenden sindund an Beispielen selber ausprobieren.
- Allgemein mehr über Grafiken und deren Aufbau etc. wissen.

Inhalt:
Kapitel 1:JPG oder GIF?
Kapitel 2:Speicherbedarf von Bildern
Kapitel 3:Farbsysteme
Kapitel 4:Bitmap oder Vektor? Was ist das überhaupt?
Kapitel 5:Kurze Beschreibung aller Grafikformate

1. JPG oder GIF? Zuerst ein gutes Beispiel, um den Unterschied zwischen JPEG und GIF zu zeigen:

Bilder


Ein wunderschöner Regenbogen, nicht?
Das gleiche Bild:

Bilder



GIF (343 Byte) => GIF: Transparenz? - Ja!

Bilder


JPG (752 Byte) => JPG: Transparenz? - Nein!

Bilder

Die Frage nach dem idealen Format für das Bild ist von Inhalt abhängig.

Wenn das Bild viele Farben (Verläufe) enthält und nur wenige Flächen mit der gleichen Farbe, wird JPG das richtige Format sein. Wenn jedoch große Flächen mit der gleichen Farbe vorhanden sind und nur wenige Farbabstufungen vorhanden sind,wird sich GIF als effizienter erweisen. Originalbild unbedingt aufbewahren!

Transparenz

Manche grafischen Objekte kommen erst richtig zur Geltung, wenn sie sich harmonisch in das Umfeld einbetten. Am besten geht das, wenn der Farbhintergrund transparent ist. Das GIF-Format bietet die Möglichkeit, eine Farbe transparent darzustellen. So können Teile einer Grafik sozusagen "durchsichtig" erscheinen und der Hintergrund schimmert durch. ACHTUNG: Transparenz ist nicht = durchsichtig. Objekte können auch Transparenz enthalten und in JPG abgespeichert werden. Allerdings nicht durchsichtig. Hier noch die Vor- und Nachteile von GIF und JPG.

Vor- und Nachteile von GIF und JPG:

   

JPEG

 

GIF

         

Farbanzahl:

  16,7 Millionen   Maximal 256
   

Bilder

   

Dateigröße beeinflusst durch... :

  Größe der Bilddetails, Komprimierungsfaktor   Anzahl der Bilddetails, Anzahl der Farben
         

Vorteile:

  Starke Verkleinerung von Bilddaten mit vielen Farben (z. B. Fotos); Hohe Farbtreue, naturgetreu   Gute Ergebnisse bei flächigen Motiven mit wenig Farben, wie Logos; Transparenz einstellbar; Animation möglich.
         

Nachteile:

  Verlust der Bilddetails, deutlich sichtbare Bildklumpen, unscharfe Kanten.   Farbreduktion auf max. 256 Farben, geringe Farbtreue.

2 Speicherbedarf von Bildern

Der Speicherbedarf eines Bildes setzt sich aus 3 Teilen zusammen:

Anzahl der Bildpunkte vertikal * Anzahl der Bildpunkte horizontal * Farbtiefe / 8 = X Bytes

Dies ist so zu erklären, dass ein jeder Bildpunkt seinen Speicherplatz braucht, da er die Informationen über die Farbe abspeichern muss. Die Farbtiefe ist somit mitentscheidend, da z. B. bei 256 möglichen Farben weniger abgespeichert werden muss als bei 16.7 Mio. Farben.

Hier noch eine Beispielsrechnung:

Bildhöhe: 15cm Auflösung: 150dpi
Bildbreite: 10cm Farbtiefe: 16.7 Mio. Farben (24 Bit)
Breite [Pixel] = 10cm * 1Inch / 2.54cm * 150dpi = 591 Pixel
Höhe [Pixel] = 15cm * 1Inch / 2.54cm * 150dpi = 886 Pixel
Speicher = 591 * 886 * 24 / 8 = 1’570’878 Byte = 1,57 Mbyte

3 Farbsysteme

Für die Verarbeitung von Farbinformationen im Computer sind verschiedene Farbsysteme definiert worden.Am häufigsten kommt das RGB-System vor. Die Abkürzungen stehen für Rot, Grün, Blau. Nimmt man von jedem Anteil 100 %, erhält man die Farbe Weiß. 0% jeden Anteils ergeben die Farbe Schwarz. So lange die drei Farbanteile die gleichen Werte haben, entsteht eine Graustufe. Da die Summe der vollen Farbanteile die Farbe Weiß ergibt, nennt man das Farbsystem ein additives Modell. Es ist wahrscheinlich nicht zuletzt deshalb das im Computeralltag am meisten verwendete Farbsystem, weil es der Natur der Bildröhre entspricht. Treffen dort nämlich keine Elektronen auf, bleibt die Mattscheibe auch schwarz.

Bilder

Ein weiteres Farbsystem ist das CMY-Farbsystem. Die Abkürzungen stehen hier für Cyan, Magenta und Yellow. Nimmt man von jedem Anteil 100 %, ergibt das Schwarz. Ein Mischungsverhältnis von 0:0:0 bildet hingegen Weiß. Auch hier entsteht eine Graustufe, wenn alle Farbanteile den gleichen Wert besitzen. Da das Fehlen aller Farben Weiß ergibt, nennt man dieses System auch "subtraktives Modell". Es ist wahrscheinlich nicht zuletzt deshalb das im Druckereialltag am meisten verwendete Farbsystem, weil es der Natur des Papiers entspricht. Dieses ist ja von sich aus weiß und wird erst durch die aufgebrachten Farben bunt: sind alle Farben voll aufgedreht, dann ergibt sich fast schwarz. Fast deshalb, weil es so ganz perfekt nicht ist, sondern eher ein schmutziges Olivgraugrün.

Hier kommt eine Variante des CMY-Systems, das um die Komponente K erweiterte CMYK-System ins Spiel. K steht für Schwarz, ist unter anderem recht nützlich, um Farbe bei großen schwarzen Flächen zu sparen oder eben erst mal richtiges Schwarz zu bekommen.

Bilder

3.1 Tiefe Farben

Die Farbtiefe beschreibt die Anzahl der maximal gleichzeitig nutzbaren Farben. Achtung, nicht verwechseln mit der Anzahl der genutzten Farben! Die Farbtiefe ergibt sich aus der Anzahl der Bits die pro Pixel zur Verfügung stehen, also 2 hoch Anzahl der Bits.

Theoretisch sind auch andere Farbtiefen möglich, so gibt es bei einigen Formaten mögliche Farbtiefen von zum Beispiel 3 oder 5 Bit. Diese Farbzahlen sind jedoch eher selten. Mit der Erhöhung der Farbtiefe erhöht sich auch die Menge der zu speichernden Information pro Punkt. Ein Bild wird zwangsläufig mehr Platz belegen, wenn die Farbtiefe höher wird - eine mögliche Komprimierung mal außer Acht gelassen.

Bei der Darstellung von Grafiken mit bis zu 256 Farben oder 8 Bit erfolgt die Speicherung in derartiger Häufigkeit als so genannte Palettenbilder, dass schon von immer die Rede sein kann. Ein Pixel mit dem Wert 93 sagt uns also nicht direkt etwas über die Farbe dieses Punktes, sondern nur, dass der Computer doch bitteschön an Stelle 93 in einer Tabelle nachzusehen hat. Das dort vorhandene Tripple aus Rot-, Grün- und Blauwert bestimmt dann die Farbe des Bildpunktes.

Farbtiefe

Anzahl Farben

Anmerkung:

Speicherbedarf (Bytes / Pixel)

Verwendungsbeispiele

1 Bit

2 Farben

2 Zustände: 0 oder 1 (Schwarz oder Weiss)

1/8

Schwarzweiß Bilder

4 Bit

16 Farben

binär: 0000 - 1111

1/2

Farbtiefe von alten Grafikkarten

8 Bit

256 Farben

8 Bit = 1 Byte = 256

1

Standard-VGA-Farbtiefe, Standard bei farbreduzierten Bilddateien (GIF) für das WWW

24 Bit

16,7 Mio. Farben

3 volle Farbkanäle:
256 mal 256 mal 256

3

"TrueColor" (echte Farben) für Grafikkarten und Bilddateien

32 Bit

16,7 Mio. Farben

3 Farbkanäle und ein Sonderkanal

4

Der Sonderkanal wird für programmabhängige Sonderfunktion verwendet (häufig auch als "Alpha-Kanal" zur Definition von Transparenzen).

4. Bitmapvs. vektororientiert

4.1 Bitmaps (pixelorientierte Darstellung)

Das Bild wird in eine Matrix von Punkten unterteilt - so genannte Pixel. Alle Pixel sind dabei gleich groß und erhalten eine Farbe zugewiesen. Bitmaps können gut mit Mosaiken verglichen werden, jedes Pixel entspricht einem Steinchen.

Bei ausreichender Auflösung verschmelzen die Pixel zu einem ganzen Bild, ohne dass das Auge die Unterteilung in kleine Quadrate bemerkt. Einen ähnlichen Effekt erhalten wir bei einem Mosaik, wenn wir es aus einer gewissen Distanz betrachten. Wir erkennen dann auch nicht mehr die einzelnen Steinchen, sondern nur noch ein ganzes Bild.

4.2 Vektorgrafiken

Im Unterschied zu Bitmap-Grafiken werden bei den Vektor- oder auch objektorientierten Grafiken nicht einzelne Bildpunkte gespeichert, sondern mathematische Formeln für geometrische Figuren. Wie eine Funktion einen Kurvenverlauf definiert, legen bei der Vektorgrafik Funktionen die Umrisse und Füllungen der Bildbestandteile fest. Ein Kreis wird zum Beispiel gespeichert, indem sein Mittelpunkt, sein Radius, sowie die Strichstärke und Farbe gespeichert werden. Die Grafikdatei enthält also Befehle, die der Computer ausführen muss, um das Bild zu zeichnen. Eignet sich nicht für naturgetreue Bilder, da diese zu komplex sind um in mathematische Formeln aufgeteilt zu werden.

4-farb-Druck

Es ist unmöglich im Druckprozeß alle Farben zu drucken die unser Auge unterscheiden kann, da es sich um Millionen von Druckgängen handeln würde. Man hat aber herausgefunden, dass man mit 3 Farben den größten Teil darstellen kann. Um aber Schwarz ohne Farbstich darstellen zu können, wird als vierte Farbe Schwarz mitgedruckt, hier spricht man dann von CMYK (K steht für Schwarz, weil B für Black schon bei Blue (RGB) verwendet wird).

Bilder

So, Teil 1 meines Workshops ist nun fertig =) Wenn ihr den Text irgendwo verwendet (upload, vortrag etc.), schickt mir doch kurz eine PM. THX
greez: Gorbatschow

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Kreativ-Box
  • 11.12.2014 - 21:20

Eigentlich ganz gut erklärt,... ein paar Punke muss ich noch ein 2.tes mal durchlesen um es wirklich zu verstehen und zu verinnerlichen.

Portrait von MaoMao
  • 15.01.2013 - 20:35

Herzlichen dank für die mühe!

Portrait von robert444
  • 29.10.2012 - 08:22

Den Unterschied von CMYK und RGB war mir zwar bekannt, jedoch die genaue Definition von JPG und GIF nicht. Danke.

Portrait von MGIMP
  • 20.12.2011 - 16:17

Hat mir sehr weitergeholfen dieses Tut, nun weis ich den unterschied von CMY und RGB

Portrait von Mareia
  • 25.10.2011 - 15:29

Danke! Jetzt kenn ich den Unterschied zwischen RGB / CMYK.

Portrait von Mareia
  • 25.10.2011 - 15:29

Danke! Jetzt kenn ich den Unterschied zwischen RGB / CMYK.

Portrait von Mareia
  • 25.10.2011 - 15:29

Danke! Jetzt kenn ich den Unterschied zwischen RGB / CMYK.

Portrait von leenamatic
  • 27.09.2011 - 22:08

sehr gut erklärt und leicht zu verstehen.
Vielen Dank!

Portrait von nathalee
  • 07.09.2011 - 21:42

So versteh auch ich am Ende noch was von Grafiken... Vielen Dank!

Portrait von alexooo90
  • 23.03.2011 - 09:24

sehr gut bringt mir ein bischen mehr licht ins dunkel

Portrait von Shianni
  • 02.03.2011 - 08:45

Lieb von dir. Danke für das Tutorial!

Portrait von johanna52
  • 25.02.2011 - 10:07

danke, gut erklärtes Tut

Portrait von snusi
  • 17.02.2011 - 14:34

jea coll verständliches tutorial danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.02.2011 - 23:08

Als eine kurze Einführung in die Grundkenntnisse ist es super. Besonders das Prinzip der Vektorgraphiken ist kurz aber einleuchtend erklärt.

Portrait von Schili1
  • 08.01.2011 - 06:35

Gut beschrieben. Gutes Grundwissen, auf das man immer wieder zurück greifen kann.

Portrait von steffi007
  • 30.09.2010 - 13:38

sehr verständlich, danke.

Portrait von geckos
  • 01.03.2010 - 07:26

sehr gut erklärt für jemand, der am anfang steht oder su gut wie noch keine kenntnisse besitzt. für "fortgeschrittnene" eher bedingt geeignent.

Portrait von ladon
  • 24.02.2010 - 08:20

sehr aufschlussreich! Danke sehr.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.01.2010 - 12:25

Gute Einführung in der Grundlagen der Farbsysteme (RGB / CMYK) - hat mir für den Einstieg geholfen - Danke.

Grüße Mike

Portrait von Tasha_89
  • 26.01.2010 - 17:20

Danke, hilfreich fürs Grundverständniss.

x
×
×