Graphiken und Bilder. Grundlagen

Transkript

1 Graphiken und Bilder Grundlagen

2 Bilder und Graphiken Graphiken lassen sich auf geometrische Grundformen reduzieren Bilder sind vor allem photorealistische Abbildungen Datenformate für Bilder und Graphiken heißen Graphikformate Vektorgraphik und Rastergraphik

3 Rastergraphik (Pixelbilder) speichert Farbinformationen, evtl Transparenz und Rastertonfarbkanäle je Pixel keine Informationen über graphische Formen! verschiedene Farbmodelle: RGB (additiv), CMY (subtraktiv), HSV, HLS (perzeptionsorientiert)

4 Graphikformate - Rastergraphik Bitmap.bmp - schwache Komprimierung Graphics Interchange Format.gif - weit verbreitet für Graphiken, kann Animationen (animated gif), JPEG.jpg,.jpeg - weit verbreitet für Bilder Portable Networks Graphics.png - im Web weit verbreitet, Ersatz für.gif

5 Vektorgraphik aus graphischen Primitiven zusammengesetzt lassen sich ohne Qualitätsverlust beliebig skalieren CAD-Programme, 3D-Computergraphik, TrueType-Schriften zum Vergleich:

6 Graphikformate - Vektorgraphik Adobe Illustrator.ai PostScript.ps Freehand.fh10 Scalable Vector Graphics.svg Macromedia Flash.swf

7 Eingabe von Graphiken mit Programm erstellen, dabei meist mit Maus, Graphiktablett: Pixel- und Vektorgraphiken Scannen: Pixelgraphiken fotografieren mit digitalem Fotoapparat: Pixelgraphiken

8 Ausgabe von Graphiken auf dem Bildschirm: Monitore z.z. nur mit Rastergraphik angesteuert, nicht skalierbar auf dem Drucker: dpi (z.b. Dichte der Tintentropfen) als Rastergraphik, auf dem Plotter als Vektorgraphik auf Webseiten: meist Rastergraphik, da Ausgabe auf Bildschirm, anders bei Druckvorlagen!

9 Auflösung absolute Auflösung ist Anzahl der vorhandenen Bildpunkte und bestimmt mögliche Wiedergabequalität (Pixel, Megapixel), auch die Datenmenge relative Auflösung ist Dichte der Bildpunkte (dpi, ppi), keine Aussage über Qualität physikalische (geräteabhängige) vs. logische (im BS einstellbare) Auflösung

10 Bildschirm Kathodenstrahlröhrenbildschirm: Lochmaske, 3 Strahlen, die abgelenkt werden, physikalische Auflösung abhängig von Lochmaske Flüssigkristallbildschirm: Flüssigkristalle, die die Polarisation des Lichtes beeinflussen, Moleküle der Kristalle werden durch elektrische Spannung beeinflusst, physikalische Auflösung abhängig von Anordnung der Kristalle

11 Merken man kann eine Vektorgraphik in ein Pixelbild umwandeln, aber ein Pixelbild nicht zurück die originale Vektorgraphik dpi zum Nachlesen: 72dpi72dpi Tutorials: computergrafik.entertrain.de/

12 Graphikformate für Webseiten GIF und JPEG haben sich durchgesetzt, neuerdings auch PNG pixelorientierte Formate SVG vektororientiertes Format

13 Das GIF-Format hohe Kompression, verlustfrei spart Geld und Zeit bei Übertragung max. 256 Farben pro Datei

14 Kompression Kompression ist ein Verfahren zur Reduktion des Speicherbedarfs von Daten es wird eine Repräsentation bestimmt, mit der sich die gleichen Daten in kürzerer Form darstellen lassen - Kodierung verlustfrei: nach Dekompression wieder Originaldaten

15 Farbwahrnehmung optische Illusionen

16 Bilder auf Webseiten object=tx &nav=3 Bild speichern, Größe der Datei ansehen!

17 Aufgabe 3 Entwerfen Sie einen Startbildschirm für Squeak-Etoys. Er soll ein Hintergrundbild, eine Textbox mit einem Einführungs- bzw. Begrüßungstext und 3-4 kleine Projektfenster enthalten. Die Größe der Textbox ist frei wählbar, den Text müssen Sie natürlich nicht formulieren. Die Projektfenster haben eine Standardgröße von 100x80 Pixeln. Man kann in Squeak ein Hintergrundbild laden, indem man das Bild über Suche aus dem Verzeichnisbaum auswählt und dann Hintergrund anklickt. Squeak ist ein Open-Source-Projekt, das vom freiwilligen Engagement vieler Leute lebt. Es wäre schön, wenn wir am Schluß Entwürfe haben, die wir in Squeak übernehmen können. Selbstverständlich mit den Copyright-Angaben des Autors.

18 Squeak installieren -->Download Squeak Installationsprogramm starten unter Windows: Squeak.exe starten auf dem Mac: zum Starten Datei mit Endung.image auf Datei Squeak ziehen

19 Bild als Hintergrund einbinden Navigator-Klappe öffnen auf Suchen klicken und Maustaste lange gedrückt halten Datei suchen auswählen gewünschtes Bild anklicken, dann auf Hintergrund

20 Projektfenster erzeugen Navigator-Klappe, auf Neu klicken das kleine Fenster verschieben, indem man die Smarties dieses Fensters holt (Alt-linke Maustaste bzw. Apfel- Maustaste) mit braunem bzw. schwarzem Smartie verschieben

21 Textfenster erzeugen Text kann in verschiedenen Formen dargestellt werden Lagerklappe öffnen: z.b. Buch, Spielwiese, Behälter... mit der Maus auf den Bildschirm ziehen Smarties dafür holen, rotes Smartie zum Ändern des Layouts