Grafikformate Nicolas Ruh.

Präsentation zum Thema: "Grafikformate Nicolas Ruh."—  Präsentation transkript:

1 Grafikformate Nicolas Ruh

2

3

4

5 Flagge der Marshall Islands

6 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

7 Rastergrafik Höhe: 11 Pixel Breite: 11 Pixel Pro Pixel 1 Bit 1 = weiss
Höhe: 11 Pixel Breite: 11 Pixel Pro Pixel 1 Bit 1 = weiss 0 = schwarz Farbtiefe 1 Zeichen, also 1 Buchstaben

8 Rastergrafik Was zeigt dieses 6x6 Pixel grosse Bild? Höhe: 6 Pixel Breite: 6 Pixel Pro Pixel 1 Bit 1 = weiss 0 = schwarz 1

9 Rastergrafik mit Farben
Was zeigt dieses 3x3 Pixel grosse Bild? Höhe: 3 Pixel Breite: 3 Pixel Pro Pixel 3 Bit (RGB) _ _ _ 001 100 111 001 100 111

10 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: bis ; hexadezimal: 00 bis FF) also 24 Bit pro Farbe, d.h. 224 (>16.7 Mio) Farben Beispiele: = FF0000 = = reines Rot = = = Grau

11 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 cm Auflösung = 10 dpi Wenn die Auflösung zu niedrig ist für das Ausgabemedium, werden Pixel dazu erfunden  unscharf

12 Auflösung: am Bildschirm: 72 - 150 dpi ausgedruckt: 200 - 600 dpi
Ein Bild wirkt einigermassen scharf bei am Bildschirm: dpi ausgedruckt: dpi  zum Drucken ist also eine ca. 4 mal höhere Auflösung erforderlich!

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

14 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

15 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

16 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

17 26 Kb

18 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)

19 Was zeigt Rätsel.svg? <svg version="1.1“
xmlns=" xmlns:xlink=" xmlns:a=" x="0px" y="0px" width=“600px" height=“600px" viewBox=“ “ enable-background="new " 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, , ,150"/> <polygon fill="#FFFFFF" stroke="#FFFFFF" points="250, , ,50 250,50"/> </svg>

20 Rätsel.svg

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

22 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

23 Die üblichsten Grafikformate (.jpg & .gif)
Komprimieren die Information reiner Rastergrafiken Nehmen ggf. Informationsverlust in Kauf (meist variabel) Ansätze zum (verlustbehafteten) Komprimieren: mehrere Pixel zusammenfassen Speicherplatz sparen bei der Repräsentation von Farben Dabei geht es immer darum, möglichst die Informationen zu verlieren, die (optisch) keinen grossen Unterschied machen

24 JPG in Bildern

25 GIF in Bildern

26 Probleme & Spezialitäten

27 JPG & GIF verstehen: Pixel zusammenfassen Farben repräsentieren
Besonderheiten Anwendungsgebiet

28 Zusammenfassung Ein Bild besteht aus Pixeln (Rastergrafik)
Auflösung, Farbraum, Farbtiefe, Transparenz? (ggf.) verlustbehaftete Komprimierung: Farben indizieren (.gif) Farbtiefe (in LAB-Farbraum) reduzieren (.jpg) Blöcke gleicher Pixel zusammenfassen (.gif) Farbverläufe zusammenfassen (.jpg) Ein Bild besteht aus geometrischen Objekten, bzw. Kurven (Vektorgrafik) Wie beschreibt man die Formen, welche Parameter gibt es?

29 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 optimalerweise vor? Ein Freund von ihnen hat gehört, dass Vektorgraphiken 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 umwandelt. 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?