Zum Inhalt springen
Der Guide für ein smartes Leben.
VG Wort Pixel
Bewegtes Bild

Angleichungen von Formen

Autoren: Anna Kobylinska, Filipe Pereira Martins und Daniela Schrank • 2.12.2010 • ca. 4:15 Min

Nach diesem Konzept können Sie auch sehr komplexe Grafiken animieren, indem Sie jede Illustrator-Ebene im Hinblick auf den daraus resultierenden SWF-Frame gestalten. Verschachtelte Ebenen müssen Sie gegebenenfalls auf eine Ebenenstufe reduzieren (ohne sie jedoch zu rastern oder vereinfachen zu mü...

image.jpg
Animieren von Angleichungen in Folge: Die Ausgabe der Illustration als SWF-Animation aus dem Adobe Illustrator CS5.
© Internet Magazin

Nach diesem Konzept können Sie auch sehr komplexe Grafiken animieren, indem Sie jede Illustrator-Ebene im Hinblick auf den daraus resultierenden SWF-Frame gestalten. Verschachtelte Ebenen müssen Sie gegebenenfalls auf eine Ebenenstufe reduzieren (ohne sie jedoch zu rastern oder vereinfachen zu müssen), um die Entstehung von unerwünschten Effekten zu verhindern.

Angleichungen von Formen

Eine andere Methode zum Animieren von Illustrator-Objekten bietet die eingebaute Warping-Funktionalität des Programms. Mit dieser Funktion können Sie vor Augen der Zuschauer ein Objekt in ein anderes und wiederum noch mal anderes Objekt transformieren.SCHRITT 1.

Zeichnen Sie zuerst mehrere separate Formen.SCHRITT 2.

Positionieren Sie diese Formen auf einer Ebene übereinander.SCHRITT 3.

Klicken Sie doppelt auf das Angleichen-Werkzeug in der Werkzeugleiste, um den Dialog der Angleichungs-Optionen hervorzurufen. Wählen Sie hier die Einstellung Festgelegte Stufen. Die Anzahl der Stufen bestimmt, wie viele Zwischenschritte das Programm erstellen soll. Bestätigen Sie Ihre Einstellungen.SCHRITT 4.

Wählen Sie die betreffenden Objekte aus und rufen Sie den Befehl Angleichen/Erstellen aus dem Menü Objekt auf. Illustrator blendet die einzelnen Objekte in einem Arbeitsschritt ineinander.SCHRITT 5.

Exportieren Sie die Animation in eine neue Datei vom Typ Flash (*.SWF). Im Abschnitt der allgemeinen Optionen aktivieren Sie die Einstellung Exportieren als: Alle Ebenen als SWF-Frames. Im Abschnitt der erweiterten Einstellungen aktivieren Sie diesmal den Eintrag Angleichungen animieren mit der Option In Folge, und eventuell auch die Einstellung Wiederholschleife. Nach dem Export ist die SWF-Datei sofort einsatzbereit.Mithilfe des Bedienfeldes SVG-Interaktivität in Illustrator CS5 können Sie im Übrigen Ihren Vektorzeichnungen, die Sie als Web-Animationen ausgeben möchten, etwas Interaktivität verleihen. Das Bedienfeld unterstützt eine Vielzahl von Ereignissen, bietet allerdings keine fertigen Aktionen. Diese muss der Benutzer mit JavaScript nachrüsten.

Fazit

Wer Adobe Photoshop CS5 oder Adobe Illustrator CS5 beherrscht, muss nicht auch noch zum Effekt-Spezialisten in Flash Professional CS5 oder in After Effects CS5 werden, um eindrucksvolle Web-Animationen entwerfen zu können. Aus einer gelungenen Illustrator-Grafik oder aus einer Photoshop- Bildkomposition entstehen mit dem richtigen Know-how professionelle Web-Animationen.Formgitter in Photoshop CS5

Die Funktion Marionettenverkrümmung wird mit dem Befehl Formgitter aus dem Menü Bearbeiten aufgerufen. Der Befehl legt die aktive Ebene - beziehungsweise die aktive Auswahl - auf einem Formgitter aus, welches sich unter Zuhilfenahme gelber Stecknadeln befestigen und daraufhin praktisch beliebig verformen lässt. Damit der Menüeintrag zum Anlegen des Formgitters auch wirklich verfügbar ist, darf die aktuelle Ebene nicht gesperrt sein. Die Hintergrundebene muss also für diesen Zweck in eine gewöhnliche Ebene konvertiert werden.Beim Freistellen des Motivs steht es Ihnen frei, Masken zu benutzen. Beim Einsatz des Formgitters kann eine Ebenenmaske zusammen mit der zugehörigen Ebene verformt werden, solange die beiden Elemente miteinander verbunden sind (hierzu muss zwischen der Miniatur der Ebene und der Maskenminiatur im Bedienfeld Ebenen das kleine Verknüpfungssymbol sichtbar sein). Es gibt keinen guten Grund, warum Sie aus den Möglichkeiten, die eine Freistellung mit Masken eröffnet, nicht Nutzen ziehen sollten.Der Schlüssel zum Meistern der Funktion Marionettenverkrümmung besteht in einer gelungenen Freistellung des Motivs und der gekonnten Handhabung des Formgitters. Die Letztere der beiden Aufgaben beinhaltet das Befestigen des Motivs mithilfe von Stecknadeln. Um das Formgitter verformen zu können, müssen Sie daran Kontrollpunkte - gelbe Stecknadeln - anheften.

image.jpg
Verformen des Formgitters für eine Web-Animation in Photoshop CS5: Wenn Sie die betreffende Ebene vorab in ein SmartObject umwandeln, können Sie die Transformation verlustfrei nachbearbeiten, weil sich das Programm die Position der Stecknadeln merkt.
© Internet Magazin

Zum Platzieren einer Stecknadel genügt ein strategisch positionierter Klick in eine beliebige Stelle im Rahmen des Formgitters. Je feiner das Formgitter, desto mehr Stecknadeln passen dicht nebeneinander. Zu viele Kontrollpunkte können aber auch die Korrektur erschweren. Die verschiedenen Parameter des Formgitters können Sie in der Steuerungsleiste einstellen.Die Wahl der ursprünglichen Verteilung der Stecknadeln bleibt vollends Ihnen überlassen. Genau diese Aufgabe gestaltet sich allerdings etwas trickreich.Die Kontrollpunkte des Formgitters - die gelben Stecknadeln - können einen von zwei Zuständen einnehmen: Entweder Sie befestigen das Gitter (gelbe Stecknadel) oder Sie verformen es (eine ausgewählte und somit aktive Stecknadel hat einen schwarzen Punkt in der Mitte).Um das Gitter verformen zu können, müssen einige Stecknadeln aktiviert sein; alle anderen, inaktiven, Stecknadeln befestigen das Gitter an seiner aktuellen Position. Um Teile des Motivs vor der Transformation zu schützen, müssen Sie diese mit inaktiven Stecknadeln an die Leinwand anheften und so von den übrigen Bereichen des Bildes abgrenzen. Aktivierte Stecknadeln verformen das Formgitter und werden daher zur Unterscheidung mit einer schwarzen Markierung gekennzeichnet. Zum Aktivieren von mehreren Kontrollpunkten gleichzeitig halten Sie die Shift- bzw. die Umschalttaste gedrückt während Sie es mit der Maus anklicken.Bereits gesetzte Stecknadeln können Sie mit der Delete- beziehungsweise Entfernen-Taste löschen; die damit assoziierte Verformung wird dadurch zurückgesetzt, ohne die übrigen Stecknadeln zu beeinflussen.Weitere Parameter der Marionettenverkrümmung lassen sich mithilfe der schwebenden Optionsleiste einstellen. Sie können hier unter anderem die Elastizität und die Dichte des Formgitters festlegen. Die Elastizität des Gitters kann mit Einträgen aus dem Menü Modus in drei Abstufungen festgelegt werden.Auch für das Einstellen der Dichte des Formgitters stehen Ihnen drei Optionen zur Verfügung: Weniger Punkte, Normal und Mehr Punkte. Mit der Option Weniger Punkte stellen Sie ein grobmaschiges Formgitter ein, welches sich bevorzugt für Korrekturen wie das Beheben einer Linsenverzerrung eignet.Bei einem Porträt sind Sie mit der feinmaschigeren Einstellung Normal in der Regel viel besser bedient. Zum Anpassen von Details empfiehlt sich die Einstellung Mehr Punkte, um dem Motiv den letzten Schliff zu verleihen. Ein weiterer Parameter erlaubt es Ihnen, den äußeren Rand des Formgitters zu erweitern oder zu reduzieren. Dadurch können Sie sowohl realistische als auch karikaturartige Effekte erzeugen.Sollten sich einmal mehrere Teilbereiche des Gitters überlagern, können Sie die Reihenfolge dieser Elemente leicht anpassen. Hierzu aktivieren Sie genau einen der Kontrollpunkte des Formgitters; die benötigten Schaltflächen, die das Gitter tiefer oder höher in diesem Stapel anordnen, finden Sie in der Optionsleiste. Mit dieser Methode können Sie etwa festlegen, wie die Beine des Ponys übereinander zum Liegen kommen.