Vektorgrafiken für die Animation vorbereiten.

Lerne, wie du Grafiken in Illustrator organisierst, um sie einfacher in After Effects zu animieren.

Veröffentlicht am 15. Juli 2026

00:01

Einführung

[Jess Libby]: Ich zeige dir, wie du eine Illustrator-Grafik vorbereitest und in After Effects importierst und wie du Ebenen in Formen umwandelst, um noch mehr Kontrolle zu haben.

Ich bin Jess, Motion-Designerin und Art-Direktorin, spezialisiert auf After Effects.

Legen wir los.

00:12

Das Illustrator-Projekt organisieren

Öffne zuerst die mitgelieferte Grafik in Illustrator.

Stelle sicher, dass der Dokumentfarbmodus auf RGB eingestellt ist.

Oben im Dateinamen siehst du, dass das Dokument in CMYK vorliegt.

CMYK-Farben werden für den Druck verwendet.

Drucker verwenden eine bestimmte Mischung aus den Farben Cyan, Magenta, Gelb und Schwarz, um eine Farbe zu erstellen.

Für Bildschirme wird jedoch eine Mischung aus rotem, grünem und blauem Licht verwendet.

Deshalb kann der CMYK-Farbmodus nicht präzise in einen RGB-Farbraum konvertiert werden.

Die Unterschiede sind subtil, aber du kannst sehen, dass die RGB-Datei rechts etwas gesättigter und farbintensiver ist als die CMYK-Datei links.

Da der finale Output für Bildschirme gedacht ist, sollten wir in RGB arbeiten.

Wir korrigieren das in Illustrator.

Öffne dazu „Datei“, „Dokumentfarbmodus“, „RGB-Farbe“.

Alles, was zusammen animiert werden soll, sollte gruppiert werden und auf einer eigenen Ebene liegen.

Da ich möchte, dass sich alle Formen, die diese Blume bilden, zusammen bewegen, wähle ich diesen Teil der Grafik aus und gruppiere ihn mit der Tastenkombination Strg+G (Windows) bzw.

Befehl+G (macOS).

Sieh dir das Bedienfeld „Ebenen“ auf der rechten Seite des Bildschirms an.

Falls du es nicht findest, navigiere zu „Fenster“ am oberen Bildschirmrand und aktiviere „Ebenen“.

Alle Teile der Grafik befinden sich auf derselben Ebene.

Wir müssen sie auf verschiedene Ebenen aufteilen, damit sich einzelne Teile in After Effects animieren lassen.

„Ebene 1“ ist markiert.

Wähle über den Menü-Button im Bedienfeld „Ebenen“ rechts oben „Ebenen für Objekte erstellen (Sequenz)“.

Markiere die neuen Ebenen jetzt mit Umschalt-Klick.

Klicke und ziehe sie aus Ebene 1 heraus.

Dadurch werden alle Teile der Grafik auf eigene Ebenen aufgeteilt.

Gruppierte Grafiken bleiben zusammen auf einer Ebene.

Benenne die Ebenen um, um alle Teile schnell finden zu können und gut organisiert zu bleiben.

Doppelklicke dazu einfach auf den Ebenennamen, und tippe den neuen Namen ein.

Ich beschleunige diesen Prozess.

Jetzt bist du bereit zum Speichern.

Navigiere zu „Datei“, „Speichern unter“.

Benenne die Datei um.

Ich ändere den Namen in „Dog-Layered.ai“ und klicke auf „Speichern“.

Bei den Einstellungen lassen wir alle Standardwerte unverändert.

Klicke einfach auf „OK“.

Öffne After Effects, und starte ein neues Projekt.

02:29

Die Vektorgrafik importieren

Um die Grafik in After Effects zu importieren, doppelklicke auf das Projektfenster links, navigiere zur Datei, und wähle im Dropdown-Menü unter „Importieren als“ die gewünschte Option.

„Footage“ bedeutet, dass die Grafik auf einer einzigen Ebene importiert wird.

Das mache ich rückgängig und importiere sie erneut.

Mit „Komposition“ wird eine neue Komposition mit Ebenen erstellt.

Der Begrenzungsrahmen jeder Ebene hat die Größe der Illustrator-Zeichenfläche.

Ich mache auch diesen Import rückgängig.

Ich doppelklicke auf das Projektfenster, damit ich die Datei erneut importieren kann, und wähle „Komposition – Ebenengrößen beibehalten“.

Diese Einstellung wird hier super funktionieren.

Der Begrenzungsrahmen jeder Ebene entspricht jetzt genau der Grafik auf dieser Ebene.

Jetzt liegt uns eine Komposition im Projektfenster vor und ein Ordner mit allen Ebenen aus Illustrator.

Öffne die importierte Komposition per Doppelklick.

Du kannst Illustrator-Ebenen in Formen konvertieren, um sie zu bearbeiten, Pfade zu animieren und noch mehr Optionen zu haben.

Klicke mit der rechten Maustaste auf die Grasebene „Bunch 3“, wähle „Erstellen“ und „Formen aus Vektorebene erstellen“.

Die Ebene wird in Formen konvertiert.

Die ursprüngliche Illustrator-Ebene befindet sich noch darunter.

Sie ist nur ausgeblendet und kann mit dem kleinen Augensymbol links neben der Ebene eingeblendet werden.

Wenn du die Ebene aufklappst, siehst du weitere Eigenschaften.

Die Grafik kann auch in Illustrator bearbeitet werden – sie wird dynamisch in After Effects aktualisiert.

Wähle im Kontextmenü einer der Illustrator-Ebenen „Öffnen“, „Original bearbeiten“.

Die Grafik sollte sich in Illustrator öffnen.

Klicke auf das Grasbüschel rechts – das ist „Bunch 1“ –, und ändere die Farbe.

Speichere die Datei mit Strg+S (Windows) bzw.

Befehl+S (macOS).

Zurück in After Effects siehst du, dass die Farbe aktualisiert wurde.

Ein Vorteil beim Erstellen von Grafiken in Illustrator ist,

04:29

Gestochen scharfe Vektorgrafiken mit SVG-Dateien

dass du Vektorgrafiken erstellen kannst, wodurch sich die Grafiken skalieren lassen, ohne an Qualität zu verlieren.

Wenn ich diesen Schmetterling in After Effects hochskaliere, siehst du, dass die Grafik unschärfer wird.

Wir müssen After Effects mitteilen, dass dies eine Vektorebene ist.

Das mache ich, indem ich „Optimieren“ aktiviere.

Das findest du in dieser Spalte mit dem Symbol, das wie eine Sonne aussieht.

Möglicherweise musst du über den Button „Schalter/Modi“ unten im Zeitleistenfenster diesen Schalter erst aktivieren.

Aktiviere „Optimieren“, um die Grafik wieder scharf zu bekommen.

Auch SVG-Dateien lassen sich speichern und importieren.

Öffne die Datei „Dog-Layered.ai“ in Illustrator, navigiere zu „Speichern unter“, und wähle im Dropdown-Menü „Dateityp“ „SVG“ aus.

Zurück in After Effects importierst du die SVG-Datei.

Doppelklicke auf das Projektfenster, und wähle die SVG-Datei aus, die du gerade gespeichert hast.

Wenn du „Footage“ wählst, wird die SVG-Datei – genau wie die Illustrator-Datei – als flache Einzeldatei importiert, die du optimieren kannst.

Klicke mit der rechten Maustaste, und wähle „Formen aus Vektorebene erstellen“, genau wie du es mit den Ebenen der Illustrator-Datei getan hast.

Wenn du die Datei jetzt erneut als Komposition importierst, wird sie sofort mit vollständig bearbeitbaren Formen importiert.

Du kannst die Ebene aufklappen und auf die Formeigenschaften zugreifen, die du bereits kennst.

Alles ist da, editierbar und bereit zum Animieren.

Die SVG-Datei wurde als einzelne Ebene importiert, wobei die Ebenennamen verloren gegangen sind.

Wenn du also eine komplexe Datei mit vielen Ebenen hast, verwende das Illustrator-Dateiformat, um sie vorab zu organisieren.

Vektorgrafiken waren schon immer die natürliche Wahl für Motion-Design, und dank diesem Workflow kannst du sie schnell animieren.

Denke daran, Ebenen zu benennen und deine Grafiken auf RGB zu setzen.

Vielen Dank fürs Zuschauen.

Hinweis: Die zur Verfügung gestellten Medien aus Adobe Stock dürfen nur zu Übungszwecken verwendet werden. Bedingungen beachten.

Zusammenfassung.

Das Illustrator-Projekt organisieren.

Wenn du deine Ebenen schon beim Vorbereiten der Vektordatei benennst, kannst du sie in After Effects leichter animieren. Fasse Objekte, die du gemeinsam animieren willst, zu Gruppen zusammen, und platziere sie auf derselben Ebene. Gib den Ebenen dann aussagekräftige Namen, damit du den Überblick behältst.

Die Vektorgrafik importieren.

Wähle beim Importieren der Illustrator-Datei die Option „Komposition“, um die Ebenen unverändert zu übernehmen. Bearbeite die Ausgangsgrafik in Illustrator. Sie wird danach in After Effects automatisch aktualisiert.

Gestochen scharfe Vektorgrafiken mit SVG-Dateien.

Aktiviere „Optimieren“, damit vergrößerte Grafiken ihren Detailgrad beibehalten. Importiere SVG-Dateien nach Bedarf als Einzeldatei oder als editierbare Form.

Tutorial und Illustration:: Jess Libby

Probiere diese Tutorials mit After Effects aus

Spezialeffekte und Grafikanimationen erstellen

Alle Abos anzeigen

Cookie Settings

General information

Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage and local shared objects, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.

If enabled:

We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud

If disabled:

We won’t be able to remember you from session to session so the experience may not be tailored to your interests
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you