1 / 24

Grafikformate

Grafikformate. Nicolas Ruh. 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)

nasim-white
Download Presentation

Grafikformate

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Grafikformate Nicolas Ruh

  2. 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

  3. Rastergrafik • Höhe: 11 Pixel • Breite: 11 Pixel • Pro Pixel 1 Bit • 1 = weiss • 0 = schwarz

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

  5. Rastergrafik mit Farben • Was zeigt dieses 3x3 Pixel grosse Bild? 001100001100111111111111001100001100 • Höhe: 3 Pixel • Breite: 3 Pixel • Pro Pixel 3 Bit (RGB) • ___

  6. 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 Rot 000011110000111100001111 = 808080 = 127127127 = Grau ------------------------

  7. 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

  8. 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!

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

  10. 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

  11. 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

  12. 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

  13. 26 Kb

  14. Reine Vektorgrafikformate • Sind nicht weit verbreitet, meist proprietär • Ausnahme: SVG (scalablevectorgraphics) • Benutzt werden Vektorgrafiken aber oft in Kombination, z.B. • einzelne Ebenen in Photoshop, Pixlr, ... • Zeichnungen in Word oder Powerpoint • in Druckformaten (PDF, EPS)

  15. Was zeigt Rätsel.svg? <svgversion="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> <polygonfill=“#FF0000" stroke="#FFFFFF" points="400,400 400,400 0,400 0,400 0,0 0,0 400,0 400,0 "/> <polygonfill="#FFFFFF" stroke="#FFFFFF" points="350,245 350,245 50,250 50,250 50,150 50,150 350,150 350,150 "/> <polygonfill="#FFFFFF" stroke="#FFFFFF" points="250,350 250,350 150,350 150,350 150,50 250,50 250,50 "/> </svg>

  16. Rätsel.svg

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

  18. 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?

More Related