Glanz: aiMOOC über GPT aiMOOC Action erstellt

2026-07-25T14:25:23Z

aiMOOC über GPT aiMOOC Action erstellt

Neue Seite

{{T}}

{{BR}}
= Vektorgrafik - Kunst =

{{BR}}
= Einleitung =

Eine [[Vektorgrafik]] besteht aus mathematisch beschriebenen [[Punkt|Punkten]], [[Linie|Linien]], [[Kurve|Kurven]] und [[Form|Formen]]. Du kannst sie vergrößern, ohne dass sichtbare Pixel entstehen. In der [[Kunst]] eignet sie sich besonders für [[Logo|Logos]], [[Icon|Icons]], [[Plakat|Plakate]], [[Comic|Comics]], [[Op-Art]], Muster und geometrische Illustrationen.

[[Datei:Bitmap vs vector.svg|500px|rahmenlos|center]]

{{#ev:youtube| https://www.youtube.com/watch?v=4KPSGNarPjI |500|center}}

{{BR}}
== Lernziele ==

Du lernst, wie Vektorgrafiken aufgebaut sind, wie Du Formen gestaltest und wie Du ein eigenes digitales Kunstwerk planst.

# [[Vektorgrafik]] und [[Pixelgrafik]] unterscheiden
# [[Pfad]], [[Knoten]], [[Füllung]] und [[Kontur]] erklären
# Farben, Formen und Ebenen gezielt einsetzen
# ein eigenes Motiv als [[SVG]] gestalten
# Gestaltung und Wirkung begründen

{{BR}}
= Grundlagen =

{{BR}}
== Vektor statt Pixel ==

Eine [[Pixelgrafik]] besteht aus einzelnen Bildpunkten. Eine Vektorgrafik speichert Formen und ihre Eigenschaften. Deshalb bleiben Kanten beim Vergrößern meist scharf.

[[Datei:Vector-based example.svg|450px|rahmenlos|center]]

# [[Vektorgrafik]]: geeignet für Logos, Schriftzüge, Symbole, Karten und klare Illustrationen
# [[Pixelgrafik]]: geeignet für Fotos, Malerei mit vielen Farbnuancen und Bildbearbeitung
# [[Skalierung]]: Vektorformen lassen sich ohne feste Pixelauflösung vergrößern
# [[Export]]: Für Präsentationen oder Webseiten kann eine Vektorgrafik auch als PNG ausgegeben werden

{{BR}}
== Pfade und Knoten ==

Ein [[Pfad]] besteht aus geraden oder gebogenen Abschnitten. [[Knoten]] bestimmen seine Form. Griffe steuern eine [[Bézierkurve]].

[[Datei:Cubic Bézier Curve.svg|450px|rahmenlos|center]]

# [[Ankerpunkt]]: legt eine Position fest
# [[Kurvensegment]]: verbindet Knoten
# [[Bézierkurve]]: ermöglicht weiche, kontrollierbare Linien
# [[Kontur]]: bestimmt Farbe und Stärke des Randes
# [[Füllung]]: bestimmt das Innere einer geschlossenen Form

{{BR}}
== Formen als künstlerisches Material ==

Rechtecke, Kreise, Sterne und freie Pfade können verschoben, gedreht, gespiegelt und kombiniert werden. So entstehen aus einfachen Formen komplexe Bilder.

[[Datei:Modern Geometric Abstraction Pattern.svg|500px|rahmenlos|center]]

[[Datei:Op-art-4-sided-spiral-tunnel-6.svg|450px|rahmenlos|center]]

{{BR}}
= Gestaltung in der Kunst =

{{BR}}
== Farbe und Kontrast ==

Mit [[Farbkontrast|Farbkontrasten]] lenkst Du den Blick. Begrenze Deine Palette, wenn das Bild ruhig und einheitlich wirken soll.

[[Datei:Colorwheel.svg|450px|rahmenlos|center]]

# [[Komplementärkontrast]]: gegenüberliegende Farben wirken spannungsreich
# [[Hell-Dunkel-Kontrast]]: helle und dunkle Flächen schaffen Klarheit
# [[Farbtemperatur]]: warme Farben wirken oft näher, kalte Farben eher ferner
# [[Transparenz]]: überlagerte Formen erzeugen neue Farbräume

{{BR}}
== Komposition ==

Eine gute [[Komposition]] ordnet Formen, Farben und Zwischenräume. Achte besonders auf Blickführung, Größenverhältnisse und den [[Negativraum]].

# [[Symmetrie]]: wirkt geordnet und ruhig
# [[Asymmetrie]]: wirkt lebendig und spannungsvoll
# [[Rhythmus]]: Wiederholungen erzeugen Bewegung
# [[Kontrast]]: Unterschiede machen Wichtiges sichtbar
# [[Reduktion]]: wenige klare Formen können eine starke Aussage bilden

{{BR}}
== Fläche, Kontur und Transparenz ==

Eine Form kann nur gefüllt, nur umrandet oder halbtransparent sein. Durch Überlagerung entstehen Tiefe, Muster und neue Farbmischungen.

[[Datei:SVG example R.svg|500px|rahmenlos|center]]

{{BR}}
= Arbeiten mit einem Vektorprogramm =

{{BR}}
== Inkscape ==

[[Inkscape]] ist ein freies Programm zum Erstellen und Bearbeiten von Vektorgrafiken. Sein wichtigstes Dateiformat ist [[Scalable Vector Graphics|SVG]].

[[Datei:Inkscape Logo.svg|350px|rahmenlos|center]]

{{#ev:youtube| https://www.youtube.com/watch?v=kN7DpfYts9c |500|center}}

{{BR}}
== Ein einfacher Arbeitsablauf ==

# [[Ideenskizze]]: Zeichne Dein Motiv zunächst grob auf Papier.
# [[Grundform]]: Baue das Motiv aus wenigen Kreisen, Rechtecken oder Polygonen.
# [[Pfadbearbeitung]]: Verändere Knoten und Kurven.
# [[Farbgestaltung]]: Wähle eine begrenzte Farbpalette.
# [[Ebenen]]: Ordne Vordergrund, Hintergrund und Details.
# [[Überprüfung]]: Betrachte das Werk klein und stark vergrößert.
# [[Speichern]]: Sichere die bearbeitbare SVG-Datei.
# [[Export]]: Erzeuge bei Bedarf eine PNG-Datei.

{{#ev:youtube| https://www.youtube.com/watch?v=e1Fca7jI9D4 |500|center}}

{{BR}}
== Dateiformate ==

# [[SVG]]: offenes und gut bearbeitbares Vektorformat
# [[PDF]]: geeignet für Austausch und Druck
# [[EPS]]: älteres Vektorformat für professionelle Anwendungen
# [[PNG]]: Pixelgrafik mit möglicher Transparenz
# [[JPEG]]: Pixelgrafik für Fotos, aber ohne transparenten Hintergrund

{{BR}}
= Mini-Projekt: Geometrisches Kunstplakat =

Gestalte ein Plakat aus höchstens acht Grundformen und vier Farben. Verwende mindestens eine Überlagerung, eine Wiederholung und einen deutlichen Blickfang.

[[Datei:Test image landscape WIKIPEDIA.svg|500px|rahmenlos|center]]

# Wähle ein Thema wie Bewegung, Ruhe, Natur oder Zukunft.
# Skizziere drei kleine Entwürfe.
# Setze den besten Entwurf als Vektorgrafik um.
# Prüfe die Wirkung in Schwarz-Weiß und in Farbe.
# Exportiere das Werk als SVG und PNG.
# Begründe drei Gestaltungsentscheidungen.

{{BR}}
= Interaktive Aufgaben =

{{BR}}
== Quiz: Teste Dein Wissen ==

{{MC}}

'''Woraus besteht eine Vektorgrafik hauptsächlich?'''
(Mathematisch beschriebenen Formen und Pfaden)
(!Fest angeordneten Fotopixeln)
(!Gescannten Papierfasern)
(!Einzelnen Tonspuren)

{{E}}
<br>

{{MC}}

'''Welche Eigenschaft ist typisch für Vektorgrafiken?'''
(Sie lassen sich ohne sichtbare Pixelbildung vergrößern)
(!Sie bestehen immer aus Fotografien)
(!Sie können keine Farben enthalten)
(!Sie lassen sich nicht bearbeiten)

{{E}}
<br>

{{MC}}

'''Was ist ein Knoten in einer Vektorgrafik?'''
(Ein bearbeitbarer Punkt eines Pfades)
(!Eine gespeicherte Fotofarbe)
(!Eine Druckerpatrone)
(!Eine Tonspur)

{{E}}
<br>

{{MC}}

'''Wozu dient eine Bézierkurve?'''
(Zum Gestalten kontrollierbarer Kurven)
(!Zum Speichern von Videos)
(!Zum Mischen von Ton)
(!Zum Zählen von Pixeln)

{{E}}
<br>

{{MC}}

'''Was bezeichnet die Füllung?'''
(Die Gestaltung im Inneren einer geschlossenen Form)
(!Die Größe der Arbeitsfläche)
(!Den Namen der Datei)
(!Die Anzahl der Ebenen)

{{E}}
<br>

{{MC}}

'''Was bezeichnet die Kontur?'''
(Den sichtbaren Rand einer Form)
(!Den Hintergrund eines Fotos)
(!Die Lautstärke eines Videos)
(!Die Reihenfolge der Dateien)

{{E}}
<br>

{{MC}}

'''Welches Format ist ein verbreitetes Vektorformat?'''
(SVG)
(!JPEG)
(!MP3)
(!TXT)

{{E}}
<br>

{{MC}}

'''Wofür ist eine Pixelgrafik besonders geeignet?'''
(Für Fotografien mit vielen Farbnuancen)
(!Für beliebig skalierbare Logos)
(!Für reine Tonaufnahmen)
(!Für Tabellen ohne Bilder)

{{E}}
<br>

{{MC}}

'''Was kann eine Wiederholung von Formen erzeugen?'''
(Einen visuellen Rhythmus)
(!Eine geringere Lautstärke)
(!Eine längere Videodauer)
(!Eine unsichtbare Datei)

{{E}}
<br>

{{MC}}

'''Warum werden Ebenen verwendet?'''
(Um Bildobjekte übersichtlich anzuordnen)
(!Um Farben automatisch zu löschen)
(!Um jede Form in ein Foto zu verwandeln)
(!Um den Bildschirm auszuschalten)

{{E}}
<br>

{{BR}}
== Memory ==

<div class="memo-quiz">
{|
|-
| Pfad || Linie aus Ankerpunkten
|-
| Knoten || Bearbeitbarer Punkt
|-
| Füllung || Farbe im Inneren
|-
| Kontur || Sichtbarer Rand
|-
| Skalierung || Größenänderung ohne Qualitätsverlust
|-
| SVG || Offenes Vektorformat
|-
| Bézierkurve || Steuerbare Kurve
|-
| Ebene || Ordnung für Objekte
|}
{{E}}
<br>

{{BR}}
== Drag and Drop ==

<div class="lueckentext-quiz">

{| class="wikitable"
! Ordne die richtigen Begriffe zu.
! Thema
|-
| '''Formenwerkzeug'''
| Erzeugt Kreise, Rechtecke und Sterne
|-
| '''Knotenwerkzeug'''
| Verändert einzelne Punkte eines Pfades
|-
| '''Füllung'''
| Gestaltet das Innere einer Form
|-
| '''Kontur'''
| Gestaltet den Rand einer Form
|-
| '''Ebenenverwaltung'''
| Ordnet Bildobjekte im Vorder- und Hintergrund

|}
{{E}}

<br>
<br />

{{BR}}
== Kreuzworträtsel ==

<div class="kreuzwort-quiz">
{|
|-
| Vektor || Welche Grafikart bleibt beim Vergrößern scharf?
|-
| Knoten || Wie heißt ein bearbeitbarer Punkt eines Pfades?
|-
| Kontur || Wie heißt der Rand einer Form?
|-
| Fuellung || Wie heißt die Farbe im Inneren einer Form?
|-
| Inkscape || Wie heißt ein freies Programm für Vektorgrafik?
|-
| Skalierung || Wie heißt die Veränderung der Größe?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==

<iframe> https://learningapps.org/index.php?s=Vektorgrafik+-+Kunst </iframe>

{{BR}}
== Lückentext ==

<quiz display=simple>
{'''Vervollständige den Text.'''<br>
|type="{}"}
Eine Vektorgrafik besteht aus mathematisch beschriebenen { Formen }.
Ein bearbeitbarer Punkt eines Pfades heißt { Knoten }.
Eine steuerbare Kurve wird häufig als { Bézierkurve } bezeichnet.
Das Innere einer geschlossenen Form heißt { Füllung }.
Der Rand einer Form heißt { Kontur }.
Das offene Vektorformat trägt die Abkürzung { SVG }.
Eine geordnete Sammlung von Bildobjekten kann auf einer { Ebene } liegen.
Die Wiederholung ähnlicher Formen erzeugt einen visuellen { Rhythmus }.
</quiz>

<br>

{{BR}}
= Offene Aufgaben =

{{BR}}
=== Leicht ===

# [[Grundformen]]: Gestalte ein Tier nur aus Kreisen, Rechtecken und Dreiecken.
# [[Farbpalette]]: Erstelle drei Farbpaletten mit jeweils vier Farben und beschreibe ihre Wirkung.
# [[Icon]]: Entwirf ein klares Symbol für ein Schulfach.
# [[Skalierungstest]]: Vergrößere eine Vektor- und eine Pixelgrafik und dokumentiere den Unterschied.

{{BR}}
=== Standard ===

# [[Logoentwurf]]: Entwickle ein Logo für eine fiktive Schul-AG und begründe Form und Farbe.
# [[Tierillustration]]: Zeichne ein Tier mit Pfaden und höchstens zwölf Knoten.
# [[Plakatgestaltung]]: Gestalte ein Veranstaltungsplakat mit Blickfang, Kontrast und klarer Schrift.
# [[Bildanalyse]]: Untersuche eine Vektorgrafik hinsichtlich Form, Farbe, Rhythmus und Negativraum.

{{BR}}
=== Schwer ===

# [[Vektorporträt]]: Reduziere ein Porträt auf wenige Flächen und charakteristische Linien.
# [[Op-Art]]: Entwickle ein optisches Muster, das Bewegung oder räumliche Tiefe vortäuscht.
# [[Informationsgrafik]]: Verwandle ein schulisches Thema in eine verständliche Vektor-Infografik.
# [[Ausstellung]]: Plane eine digitale Klassenausstellung mit Werktiteln, Kurztexten und gemeinsamen Gestaltungskriterien.

{{:Offene Aufgabe - MOOC erstellen}}

{{BR}}
= Lernkontrolle =

# [[Medienwahl]]: Entscheide für ein Klassenfoto, ein Schullogo und eine Landkarte jeweils zwischen Pixel- und Vektorgrafik. Begründe jede Entscheidung.
# [[Gestaltungsanalyse]]: Erkläre, wie Farbe, Größenunterschiede und Negativraum die Blickführung eines Plakats verändern.
# [[Fehlerdiagnose]]: Ein Logo wirkt beim Vergrößern unscharf. Beschreibe die wahrscheinliche Ursache und zwei sinnvolle Lösungen.
# [[Redesign]]: Überarbeite ein überladenes Symbol nach dem Prinzip der Reduktion und begründe, was Du entfernst.
# [[Transfer]]: Entwickle Regeln für ein einheitliches Icon-Set der Schule und wende sie auf drei unterschiedliche Symbole an.

<br>
<br>

{{BR}}
= Lernnachweis =

Für einen Lernnachweis sind folgende Leistungen wichtig:

# eine bearbeitbare Vektordatei im Format SVG
# ein exportiertes Vorschaubild
# sichtbare Nutzung von Pfaden, Knoten, Füllung und Kontur
# bewusster Einsatz von Farbe, Kontrast und Komposition
# eine kurze Dokumentation des Arbeitsprozesses
# eine Begründung wichtiger Gestaltungsentscheidungen
# eine Reflexion zu Stärken und Verbesserungsmöglichkeiten

<br>
<br>

{{BR}}
= OERs zum Thema =

<iframe> https://de.m.wikipedia.org/wiki/Vektorgrafik </iframe>

[[commons:Category:Vector graphics|Freie Vektorgrafiken auf Wikimedia Commons]]

<br>

{{BR}}
= Verknüpfte Lernbereiche =

{| align=center
{{:D-Tab}}
'''[[Vektorgrafik - Kunst]]'''
# [[Vektorgrafik]]
# [[Digitale Kunst]]
# [[Grafikdesign]]
# [[Farblehre]]
# [[Komposition]]
# [[Medienkompetenz]]
# [[Bildbearbeitung]]
# [[Urheberrecht]]
|}

[[Kategorie:Kunst]]
[[Kategorie:Digitale Kunst]]
[[Kategorie:Medienbildung]]
[[Kategorie:Informatik]]
[[Kategorie:Grafikdesign]]
[[Kategorie:Klasse 7-8]]
[[Kategorie:Klasse 9-10]]

{{BR}}
= aiMOOC-Projekte =

[[Kategorie:AI_MOOC]] [[Kategorie:GPT aiMOOC]]
{{MT}}

Vektorgrafik - Kunst - Versionsgeschichte

Glanz: aiMOOC über GPT aiMOOC Action erstellt