Grafikformate

Nicolas Ruh

0 0.5 1 1.5 2 2.5 30

0.5

1

1.5

2

2.5

xt-Diagramm

Grundideen

Rastergrafik Vektorgrafik

Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts unten)

Die Farbe jedes Pixels wird als Zahlenwert angegeben

Für Farbbilder gibt es je eine Zahl pro Kanal (z.B. RGB = rot, grün, blau)

Die Farbtiefe beschreibt, wie viele verschiedene Farben einem Pixel zugeordnet werden können

Ein Bild besteht aus geometrischen Objekten (z.B. Linie, Kreis, Quadrat), allgemeiner: Kurven

Art des Objekts und benötigte Parameter werden als Text gespeichert

Der Computer berechnet das Bild aus diesen Angaben und kann es dann zeichnen/anzeigen

Höhe: 11 Pixel Breite: 11 Pixel Pro Pixel 1 Bit

1 = weiss 0 = schwarz

1 1 1 1 1 1 1 1 1 1 1

1 1 1 1 1 0 1 1 1 1 1

1 1 1 1 0 0 0 1 1 1 1

1 1 1 0 0 0 0 0 1 1 1

1 1 0 0 0 0 0 0 0 1 1

1 0 0 0 0 0 0 0 0 0 1

1 1 0 0 0 0 0 0 0 1 1

1 1 0 1 1 0 1 1 0 1 1

1 1 0 1 1 0 1 1 0 1 1

1 1 0 0 0 0 1 1 0 1 1

1 1 0 0 0 0 1 1 0 1 1

Rastergrafik

Rastergrafik Was zeigt dieses 6x6 Pixel grosse Bild?

001100001100111111111111001100001100

0 0 1 1 0 0

0 0 1 1 0 0

1 1 1 1 1 1

1 1 1 1 1 1

0 0 1 1 0 0

0 0 1 1 0 0

Höhe: 6 Pixel Breite: 6 Pixel Pro Pixel 1 Bit

1 = weiss 0 = schwarz

001 100 001

111 111 111

001 100 001

Rastergrafik mit Farben Was zeigt dieses 3x3 Pixel grosse Bild?

001100001100111111111111001100001100

001 100 001

111 111 111

001 100 001

Höhe: 3 Pixel Breite: 3 Pixel Pro Pixel 3 Bit (RGB)

_ _ _

Farben im Binärsystem• Eine bestimmte Farbe bekommt man durch die

Mischung von Grundfarben, meist RotGrünBlau

• Für jede Farbe gibt es einen Wert, meist benutzt man 8 Bit/1Byte pro Farbkanal jede Farbe hat einen Wert zwischen 0 und 255

(binär: 0000000 bis 11111111; hexadezimal: 00 bis FF)

also 24 Bit pro Farbe, d.h. 224 (>16.7 Mio) Farben• Beispiele:111111110000000000000000 = FF0000 = 25500 = reines Rot000011110000111100001111 = 808080 = 127127127 = Grau

-------- -------- --------

Auflösung hängt davon ab, auf wie viel Fläche die

vorhandenen Pixel verteilt werden Dpi (dots per inch) 1 inch = 1 zoll = 2,54 cm

Z.B.: 10 x 10 Pixel auf 2,54 x 2,54 cmAuflösung = 10 dpi

Wenn die Auflösung zu niedrig ist für das Ausgabemedium, werden Pixel dazu erfunden unscharf

Auflösung: Ein Bild wirkt einigermassen scharf bei

am Bildschirm: 72 - 150 dpi ausgedruckt: 200 - 600 dpi

zum Drucken ist also eine ca. 4 mal höhere Auflösung erforderlich!

Rastergrafiken .bmp (Windows, unkomprimiert) .jpg (kompr. mit Farbverläufen, Photos) .gif (kompr. mir reduzierten Farben, Web) .png (kompr. mit allen Tricks, neu)

Grundideen

Rastergrafik Vektorgrafik

Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts unten)

Die Farbe jedes Pixels wird als Zahlenwert angegeben

Für Farbbilder gibt es je eine Zahl pro Kanal (z.B. RGB = rot, grün, blau)

Die Farbtiefe beschreibt, wie viele verschiedene Farben einem Pixel zugeordnet werden können

Ein Bild besteht aus geometrischen Objekten (z.B. Linie, Kreis, Quadrat), allgemeiner: Kurven

Art des Objekts und benötigte Parameter werden als Text gespeichert

Der Computer berechnet das Bild aus diesen Angaben und kann es dann zeichnen/anzeigen

Wie viel Information ist nötig?

Anfangs- und Endpunkt definieren die Linie eindeutig

Mittelpunkt und Radius definieren den Kreis eindeutig

Die Eckpunkte definieren das Polygon eindeutig

Vektorgrafik

Mit allgemeinen Kurven (z.B. Bezier Kurven) und noch mehr Parametern kann man jede beliebige Form berechen

kann zu extrem geringen Dateigrössen führen

Vektorgrafiken sind beliebig skalierbar

26 Kb

26 Kb

Reine Vektorgrafikformate Sind nicht weit verbreitet, meist proprietär, in

Verbindung mit einem Editor – z.B. Adobe Illustrator (.ai)

Ausnahme: SVG (scalable vector graphics) Benutzt werden Vektorgrafiken aber oft in

Kombination, z.B. einzelne Ebenen in Photoshop Vektor-Fonts Zeichnungen in Word oder Powerpoint in Druckformaten (PDF, EPS)

Was zeigt Rätsel.svg?<svg version="1.1“

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/“

x="0px" y="0px" width=“600px" height=“600px" viewBox=“0 0 600 600“

enable-background="new 0 0 600 600" xml:space="preserve“><defs> </defs>

<rect fill="#FF0000" stroke="none" x="0" y="0" width="400"

height="400"/>

<polygon fill="#FFFFFF" stroke="#FFFFFF" points="350,250 50,250

50,150 350,150"/>

<polygon fill="#FFFFFF" stroke="#FFFFFF" points="250,350 150,350

150,50 250,50"/></svg>

Rätsel.svg

Vektorgrafikformate .svg (Browser) .ai (Adobe Illustrator) .psd (einzelne Ebenen in Photoshop) .eps/.pdf (Druckerformate, teilweise VG) .wmf/.emf (Microsoft Programme)

Formatentscheidungen Sie wollen mit ihrer Digitalkamera ein Photo

aufnehmen, um dann Sie dann im Internet einen Abzug in Postergrösse zu bestellen. Wie gehen Sie vor?

Ein Freund von ihnen hat gehört, dass Vektorgrafiken wenig Speicherplatz brauchen und trotzdem skalierbar sind. Er hat ein Logo für seine Webseite gezeichnet (von Hand) und fragt Sie, wie er es in ein Vektorformat bekommt. Was raten Sie ihm?

Sie wollen ihren Freunden ein paar Urlaubsbilder per E-mail schicken. Wie gehen Sie vor?

Für die Maturazeitung verfassen Sie einen Artikel, in dem sie auch einige statistische Grafiken zeigen wollen. Worauf achten Sie?