Vektordaten erstellen und Bilder bearbeiten

Du verstehst den Unterschied zwischen Vektor- und Pixelgrafik und weisst, wann du welche brauchst. In Illustrator zeichnest du mit Zeichenstift, Formen und Pathfinder saubere Pfade, baust Icons auf einem Raster und exportierst sie als SVG, PDF oder PNG. In Photoshop arbeitest du mit Ebenen, Einstellungsebenen und Masken, korrigierst Tonwerte und Farben, stellst Motive frei und retuschierst Störungen. Du rechnest Auflösungen korrekt um und exportierst Bilder in der passenden Grösse und im richtigen Format.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Vektor- und Pixelgrafiken unterscheiden und Auflösungen berechnen

   Kompetenz A

   Du weisst, dass Vektoren aus mathematisch beschriebenen Pfaden bestehen und verlustfrei skalierbar sind, Pixelbilder dagegen eine feste Anzahl Bildpunkte haben. Du rechnest aus, wie gross ein Bild in einer bestimmten Auflösung gedruckt werden kann.

   Situation

   Ein Kunde schickt sein Logo als JPG mit 400 x 150 px und möchte es auf einem Banner mit 3 m Breite drucken lassen.

   Deine Aufgabe

   Erkläre das Problem und schlage eine Lösung vor.

   Gutes Ergebnis

   Bei 400 px auf 300 cm Breite ergibt sich eine Auflösung von ca. 3 ppi. Das Logo wäre extrem pixelig. Lösung: die Originaldatei als AI, EPS, PDF oder SVG anfragen. Gibt es keine, wird das Logo in Illustrator als Vektor nachgezeichnet.

   VektorgrafikPixelgrafik (Rastergrafik)Auflösung (ppi)InterpolationSkalierbarkeit
2. 2

   Mit Zeichenstift, Formen und Pathfinder saubere Vektoren zeichnen

   Kompetenz B

   Du zeichnest mit möglichst wenigen Ankerpunkten präzise Kurven und kombinierst Grundformen mit dem Pathfinder zu komplexen Formen. Du arbeitest mit Konturen, Flächen und Ausrichtungshilfen.

   Situation

   Der Kunde mit dem pixeligen Logo hat keine Vektordatei. Das Logo besteht aus einem stilisierten Berg und dem Firmennamen.

   Deine Aufgabe

   Zeichne das Logo in Illustrator als saubere Vektorgrafik nach.

   Gutes Ergebnis

   Das JPG wird als gesperrte Vorlage platziert. Der Berg entsteht aus einem Dreieck und einem Kreis, die mit dem Pathfinder kombiniert werden, die Kanten werden mit dem Zeichenstift mit nur 12 Ankerpunkten nachgezogen. Die Schrift wird identifiziert, neu gesetzt und in Pfade umgewandelt. Ergebnis: ein Logo, das von der Visitenkarte bis zum Banner gestochen scharf ist.

   Ankerpunkt / GriffZeichenstiftPathfinderKontur / FlächeSchrift in Pfade umwandelnBildnachzeichner
3. 3

   Icons und Grafiken auf einem Raster gestalten und für Web und Print exportieren

   Kompetenz C

   Du baust Icons auf einem Pixelraster mit einheitlicher Strichstärke und exportierst sie als SVG für das Web, PDF für den Druck und PNG für Präsentationen.

   Situation

   Die Website einer Gemeindeverwaltung braucht acht Icons für Themen wie Abfall, Steuern, Schule und Bauen.

   Deine Aufgabe

   Gestalte ein einheitliches Icon-Set und exportiere es.

   Gutes Ergebnis

   Alle Icons auf einer Zeichenfläche von 24 x 24 px mit 2 px Innenabstand, Konturstärke 2 px, abgerundete Ecken. Export als optimiertes SVG (je unter 1 KB) für die Website und als PDF für die Gemeindebroschüre. Dateinamen wie 'icon-abfall.svg'.

   ZeichenflächePixelrasterKonturstärkeSVGAsset-ExportSymbole
4. 4

   In Photoshop nicht-destruktiv mit Ebenen, Einstellungsebenen und Masken arbeiten

   Kompetenz D

   Du veränderst nie direkt das Originalbild, sondern arbeitest mit Einstellungsebenen, Ebenenmasken und Smartobjekten. So kannst du jeden Schritt später anpassen oder rückgängig machen.

   Situation

   Für eine Hotelbroschüre soll der Himmel eines Fotos dramatischer werden und das Gebäude heller, ohne das Original zu verändern.

   Deine Aufgabe

   Bearbeite das Bild so, dass alle Änderungen später noch anpassbar sind.

   Gutes Ergebnis

   Hintergrund als Smartobjekt. Einstellungsebene Gradationskurven mit Maske nur auf dem Gebäude (heller), zweite Einstellungsebene mit Maske auf dem Himmel (mehr Kontrast und Sättigung). Die Maskenränder werden mit weichem Pinsel angepasst. Alle Ebenen sind sauber benannt.

   EbeneEinstellungsebeneEbenenmaskeSmartobjektSchnittmaskenicht-destruktiv
5. 5

   Tonwerte und Farben korrigieren und Bildstörungen retuschieren

   Kompetenz E

   Du korrigierst Helligkeit, Kontrast und Farbstiche mit Tonwertkorrektur und Gradationskurven und entfernst Staub, Kratzer und störende Objekte mit Reparaturpinsel, Kopierstempel und inhaltsbasierter Füllung.

   Situation

   Ein Produktfoto einer Kaffeemaschine für einen Onlineshop ist leicht gelbstichig, flau und hat Fingerabdrücke auf dem Chrom.

   Deine Aufgabe

   Korrigiere und retuschiere das Bild.

   Gutes Ergebnis

   Gradationskurve mit Pipette auf einen neutralen grauen Bereich entfernt den Gelbstich. Tonwertkorrektur setzt Schwarz- und Weisspunkt neu. Fingerabdrücke werden auf einer leeren Ebene mit dem Bereichsreparaturpinsel ('Alle Ebenen aufnehmen') entfernt, Spiegelungen mit dem Kopierstempel bei 50 % Deckkraft beruhigt.

   TonwertkorrekturGradationskurveFarbstichReparaturpinselKopierstempelInhaltsbasierte Füllung
6. 6

   Motive präzise freistellen und Bilder passend exportieren

   Kompetenz F

   Du wählst die richtige Freistellmethode für das Motiv: Objektauswahl, Pfad, Farbbereich oder Auswählen und Maskieren für Haare. Danach exportierst du in passender Grösse, Auflösung und Format.

   Situation

   Für einen Flyer und die Website eines Velogeschäfts sollen ein E-Bike und eine Verkäuferin mit lockigen Haaren freigestellt werden.

   Deine Aufgabe

   Stelle beide Motive frei und exportiere sie für Druck und Web.

   Gutes Ergebnis

   Das E-Bike mit dem Zeichenstift als Pfad, weil harte Kanten und Speichen präzise sein müssen. Die Person mit Objektauswahl und danach 'Auswählen und Maskieren' mit dem Kante-verbessern-Pinsel für die Haare. Export: PSD bzw. TIFF mit Maske in CMYK für den Flyer, PNG-24 mit Transparenz oder WebP mit 1200 px Breite für die Website.

   ObjektauswahlPfad / BeschneidungspfadAuswählen und MaskierenTransparenz (PNG, WebP)Bildgrösse / Neu berechnen

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Timo ist im 1. Lehrjahr als Mediamatiker in der Kommunikation des Wildparks Rotberg im Kanton Solothurn mit 50 Mitarbeitenden. Zur Saisoneröffnung braucht der Park ein Banner am Eingang, neue Wegweiser-Icons und einen Flyer mit dem Luchs als Hauptmotiv. Timo übernimmt die Grafiken und die Bildbearbeitung.

1. Kapitel 1

   Ein Logo mit 500 Pixeln

   Das Logo des Parks existiert nur als JPG mit 500 x 180 px aus einem alten Briefkopf. Timo rechnet aus, dass er für ein 2.5 m breites Banner bei 100 ppi fast 10 000 px Breite bräuchte, also rund das Zwanzigfache. Hochrechnen würde nur unscharfe Kanten liefern. Er erklärt dem Parkleiter, dass das Logo als Vektor neu gezeichnet werden muss, weil es danach in jeder Grösse scharf bleibt.

   Ziel 1

2. Kapitel 2

   Der Hirsch in 38 Ankerpunkten

   Timo legt das JPG als Vorlage in Illustrator und zeichnet den Hirschkopf mit dem Zeichenstift nach. Sein erster Versuch hat 140 Ankerpunkte und wirkt an den Kurven wellig. Beim zweiten Mal setzt er Punkte nur an Ecken und Wendestellen, zieht die Griffe in Kurvenrichtung und kommt mit 38 Punkten aus. Das Geweih baut er aus Grundformen auf und verbindet sie mit dem Pathfinder zu einer einzigen Form.

   Ziel 2

3. Kapitel 3

   Zwölf Icons für den Rundweg

   Für die Wegweiser zeichnet Timo zwölf Icons, darunter Feuerstelle, Spielplatz, WC und Aussichtspunkt, alle auf einem 24-px-Raster mit 2 px Strichstärke und abgerundeten Enden. Für die Website exportiert er sie als SVG, für den Schilderhersteller als PDF. Beim Blick in den SVG-Code entdeckt er ausgeblendete Hilfslinien und leere Gruppen, die die Dateien aufblähen. Er bereinigt die Ebenen vor dem Export, und die Dateien schrumpfen um die Hälfte.

   Ziel 3

4. Kapitel 4

   Grauer Himmel, grüner Stich

   Das beste Luchsfoto ist an einem bedeckten Tag entstanden, wirkt flau und hat einen grünlichen Stich vom Laub. Timo arbeitet nur mit Einstellungsebenen: eine Gradationskurve für den Kontrast, eine zweite für neutrale Farben und eine Ebene mit Maske, die den Himmel getrennt abdunkelt. Die Drähte des Geheges im Vordergrund entfernt er auf einer eigenen leeren Ebene mit Reparaturpinsel und Kopierstempel. Als die Parkleitung den Himmel doch heller möchte, passt er nur diese eine Einstellungsebene an.

   Ziel 4Ziel 5

5. Kapitel 5

   Ein Luchs für Flyer und Website

   Für den Flyer soll der Luchs freigestellt vor einer grünen Fläche stehen. Die Objektauswahl erwischt Ohrpinsel und Fell nur grob, also verfeinert Timo die Kante unter Auswählen und Maskieren mit dem Kantenpinsel. Für den Flyer platziert er die Datei in voller Auflösung, damit sie bei 300 ppi gross genug ist, für die Website exportiert er ein WebP mit 1600 px Breite in sRGB. Das Webbild ist nur 180 KB gross und lädt auch bei schlechtem Empfang im Park schnell.

   Ziel 6

1. 1

   Grundlagen Vektor und Pixel

   ca. 2 Std.

   Du verstehst, warum es zwei Arten von Grafiken gibt und wie Auflösung funktioniert.

   • Ein Logo als JPG und als SVG auf 2000 % vergrössern und vergleichen
   • Fünf Auflösungsrechnungen lösen: Welche Druckgrösse ist mit diesem Bild bei 300 ppi möglich?
   • Eine Tabelle mit Dateiformaten (AI, EPS, PDF, SVG, PSD, TIFF, JPG, PNG, WebP) und ihrem Zweck erstellen

   Trainiert Kompetenz A1A2

   Lernziel1

2. 2

   Zeichenstift und Pathfinder

   ca. 6 Std.

   Du trainierst das wichtigste und schwierigste Werkzeug in Illustrator.

   • Das Bézier-Spiel (z.B. 'The Bézier Game') durchspielen
   • Fünf Alltagsgegenstände aus Grundformen und Pathfinder zusammensetzen
   • Ein bestehendes Logo als Vektor mit möglichst wenigen Ankerpunkten nachzeichnen

   Trainiert Kompetenz B1B2

   Lernziel2

3. 3

   Icon-Set gestalten

   ca. 4 Std.

   Du lernst, mehrere Grafiken einheitlich zu gestalten und sauber auszugeben.

   • Ein Icon-Set mit sechs Icons auf 24-px-Raster zeichnen
   • Export als SVG, PDF und PNG in 1x und 2x vergleichen
   • SVG-Code im Texteditor öffnen und unnötige Elemente erkennen

   Trainiert Kompetenz C1C2

   Lernziel3

4. 4

   Photoshop nicht-destruktiv

   ca. 4 Std.

   Du baust dir einen Arbeitsablauf, bei dem das Original immer erhalten bleibt.

   • Ein Bild mit drei Einstellungsebenen und Masken bearbeiten
   • Dasselbe Bild einmal destruktiv bearbeiten und versuchen, eine Änderung zurückzunehmen
   • Smartobjekt skalieren, filtern und den Filter nachträglich ändern

   Trainiert Kompetenz D1D2

   Lernziel4

5. 5

   Korrektur und Retusche

   ca. 5 Std.

   Du lernst, Bilder technisch zu verbessern und Störungen unsichtbar zu entfernen.

   • Drei Bilder mit Farbstich mit Gradationskurven neutralisieren
   • Ein Produktfoto von Staub, Kratzern und Reflexen befreien
   • Mit inhaltsbasierter Füllung eine störende Person aus einem Platzbild entfernen

   Trainiert Kompetenz E1E2

   Lernziel5

6. 6

   Freistellen und Ausgabe

   ca. 5 Std.

   Du kombinierst alle Techniken und lieferst Dateien für Druck und Web.

   • Ein Objekt mit Pfad und eine Person mit Haaren freistellen
   • Die freigestellten Motive in einer Illustrator-Komposition mit Vektorgrafiken kombinieren
   • Exporte für Druck (CMYK, 300 ppi) und Web (sRGB, WebP) erstellen und Dateigrössen vergleichen

   Trainiert Kompetenz A3B3F1F2

   Lernziel612

Vektorgrafik

Grafik aus mathematisch beschriebenen Pfaden, die ohne Qualitätsverlust skalierbar ist.

Pixelgrafik

Bild aus einem Raster einzelner Bildpunkte mit fester Auflösung.

ppi

Pixel per Inch: Anzahl Bildpunkte pro 2.54 cm im Ausgabeformat.

Ankerpunkt

Punkt auf einem Vektorpfad, an dem Richtung oder Kurve gesteuert wird.

Pathfinder

Illustrator-Funktion, um Formen zu vereinen, zu subtrahieren oder zu schneiden.

Ebenenmaske

Graustufenmaske, die Teile einer Ebene sichtbar oder unsichtbar macht, ohne Pixel zu löschen.

Einstellungsebene

Ebene, die eine Korrektur wie Helligkeit oder Farbe auf darunterliegende Ebenen anwendet, ohne sie zu verändern.

Smartobjekt

Container in Photoshop, der den Originalinhalt erhält und verlustfreies Skalieren und Filtern erlaubt.

Gradationskurve

Werkzeug zur präzisen Steuerung von Helligkeit, Kontrast und Farbe über den gesamten Tonwertbereich.

Passende Module