Grafikdesign II (Raster- und Vektorgrafiken)

In dieser Unterrichtsstunde wurde der Unterschied zwischen Raster- (bzw. Pixel-) und Vektorgrafiken erklärt und festgehalten, weshalb vektorbasierte Grafiken eine absolute Pflicht für jede moderne Website darstellen. Um überhaupt Vektorgrafiken zeichnen zu können, wurde zu Beginn der Stunde das Programm Adobe Illustrator vorgestellt und die wichtigsten Werkzeuge wie z.B. der Zeichenstift sowie die weitere Programmoberfläche erklärt. Nachdem auch über Pfade und dessen Unterschied zu herkömmlichen Pinselstrichen gesprochen wurde, konnte das Warnsymbol, welches in der letzten Einheit als Einbettgrafik genutzt wurde, innerhalb von Adobe Illustrator nachgezeichnet werden. Dabei wurden unterschiedliche Formen benutzt und auch selbst Pfade gezeichnet bzw. eigene Pfadkorrekturen vorgenommen. Im Anschluss daran wurde die Datei neben dem Adobe Illustrator Dateiformat AI auch noch als Scaleable Vector Graphic SVG exportiert, sodass man die Grafik zusätzlich in einer Website weiterverwenden könnte. Um das Ganze selbst auszuprobieren, wurde noch eine eigene EPS-Datei des Warnsymbols angelegt, um diese anschließend mit Adobe Photoshop zu einer transparenten PNG-Grafik im RGB-Farbmodus umzuwandeln. Daraufhin musste schlussendlich eine eigene kleine HTML-Homepage programmiert werden, in welcher die SVG-Version der PNG-Version des Warnsymbols gegenübergestellt wurde und den Qualitätsverlust bei einer etwaigen Seitenvergrößerung klar sichtbar machte.


Kompetenzen

  1. Ich kenne den Unterschied zwischen einer Raster- und Vektorgrafik und kann deren Unterschiede benennen.
  2. Ich weiß wofür Adobe Illustrator verwendet wird und aus welchen Elementen die Programmoberfläche besteht.
  3. Ich kenne die verwendeten Werkzeuge und kann mit ihnen umgehen.
  4. Ich kann in Illustrator eigene Formen erstellen und diese nachträglich bearbeiten.
  5. Ich kann mit Ebenen arbeiten und verstehe das Prinzip dahinter.
  6. Ich verstehe wie man mit Pfaden arbeitet und kann diese nachträglich bearbeiten.
  7. Ich weiß wie man Effekte in Illustrator anwendet und kann damit meine Formen und Pfade verändern.
  8. Ich kann eine Illustrator-Datei im SVG-Dateiformat abspeichern und diese Datei in HTML weiterverwenden.
  9. Ich kann eine HTML-Homepage mit den notwendigen Tags programmieren und eine CSS-Datei für das Design erstellen.


Vertiefung



Unterrichtsmaterialien


, , , , , , , , , , ,