grafikformate nicolas ruh. grundideen rastergrafik vektorgrafik ein bild besteht aus pixeln...
TRANSCRIPT
![Page 1: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/1.jpg)
Grafikformate
Nicolas Ruh
0 0.5 1 1.5 2 2.5 30
0.5
1
1.5
2
2.5
xt-Diagramm
![Page 2: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/2.jpg)
![Page 3: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/3.jpg)
![Page 4: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/4.jpg)
![Page 5: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/5.jpg)
![Page 6: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/6.jpg)
![Page 7: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/7.jpg)
![Page 8: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/8.jpg)
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
![Page 9: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/9.jpg)
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
![Page 10: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/10.jpg)
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
![Page 11: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/11.jpg)
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)
_ _ _
![Page 12: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/12.jpg)
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
-------- -------- --------
![Page 13: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/13.jpg)
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
![Page 14: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/14.jpg)
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!
![Page 15: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/15.jpg)
Rastergrafiken .bmp (Windows, unkomprimiert) .jpg (kompr. mit Farbverläufen, Photos) .gif (kompr. mir reduzierten Farben, Web) .png (kompr. mit allen Tricks, neu)
![Page 16: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/16.jpg)
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
![Page 17: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/17.jpg)
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
![Page 18: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/18.jpg)
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
![Page 19: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/19.jpg)
26 Kb
![Page 20: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/20.jpg)
Reine Vektorgrafikformate Sind nicht weit verbreitet, meist proprietär Ausnahme: SVG (scalable vector graphics) Benutzt werden Vektorgrafiken aber oft in Kombination,
z.B. einzelne Ebenen in Photoshop, Pixlr, ... Zeichnungen in Word oder Powerpoint in Druckformaten (PDF, EPS)
![Page 21: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/21.jpg)
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="595px" height="842px" viewBox=“0 0 595
842“ enable-background="new 0 0 595 842" xml:space="preserve“><defs> </defs><polygon fill=“#FF0000" stroke="#FFFFFF" points="400,400 400,400
0,400 0,400 0,0 0,0 400,0 400,0 "/><polygon fill="#FFFFFF" stroke="#FFFFFF" points="350,245 350,245
50,250 50,250 50,150 50,150 350,150 350,150 "/><polygon fill="#FFFFFF" stroke="#FFFFFF" points="250,350 250,350
150,350 150,350 150,50 250,50 250,50 "/></svg>
![Page 22: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/22.jpg)
Rätsel.svg
![Page 23: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/23.jpg)
Vektorgrafiken .svg (Browser) .ai (Adobe Illustrator) .psd (einzelne Ebenen in Photoshop) .eps/.pdf (Druckerformate, teilweise VG) .wmf/.emf (Microsoft Programme)
![Page 24: Grafikformate Nicolas Ruh. Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts](https://reader034.vdocuments.site/reader034/viewer/2022051515/55204d7049795902118c0fcc/html5/thumbnails/24.jpg)
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?