FREE

Objekt Animation

Kategorie: Tutorial
Info: 2D Objekt Animation mit einfachen Mitteln realisiert
File(s): PSD
Software: Photoshop

Premium Downloads

Ob als Gimmick auf der Webseite oder im Werbebanner, eine Animation ist immer ein Eyecatcher. Wenn die gewünschten Ergebnisse zu einer coolen Animation nicht in einem 3D Tool erzielt werden können, lässt sich manch aufwendig scheinende Animation auch mit ein wenig Basteln und Improvisation in 2D realisieren.

 

Das in den folgenden Schritten erklärte Tutorial soll ein Ideengeber sein. Das Objekt (Moleskine Planner) im Beispiel kannst Du natürlich mit jedem anderen Gegenstand der auf den Teller passt ersetzen. Entstandene Ergebnisse lassen sich ideal z.B. als Produktpräsentation verwenden.

Unser Set Ausstattung:

Schritt 1

Der Drehteller steht im Beispiel unter einer direkten Lichtquelle vor einem hellen Hintergrund. Um im Nachhinein das Objekt besser Freistellen zu können kann ein farbiges Blatt, das es vom Untergrund separiert, untergelegt werden.

 

Schritt 2

Um eine flüssige Animation zu erreichen benötigst Du mindestens 16 Einzelbilder. Umso mehr Einzelbilder, umso ruhiger und schöner die Animation. Lege die 16 Zündhölzer (wenn Du keine Zündhölzer im Haus hast, kannst Du auch mit Tesa-Streifen markieren) in gleichen Abständen an den Rand des Drehtellers. Sie dienen als Abstandsmarkierung beim Fotografieren. Das Objekt steht mit seiner vertikalen Achse direkt auf dem Mittelpunkt des Drehtellers. So dreht sich das Objekt in der Animation flüssig.

 

Tipp: Wenn Du kein Tischstativ zur Hand hast reichen auch ein paar Bücher um im gewünschten Winkel zu fotografieren. Du solltest nicht aus der Hand fotografieren, da die Korrektur im Nachhinein zu aufwendig oder unmöglich ist. Wenn es die Lichtverhältnisse hergeben am Besten ohne Blitz fotografieren.

Schritt 3

Such Dir die Frontalansicht des Objekts als erstes Bild der Serie. Dreh den Teller nach dem Du ein Bild gemacht hast zum nächsten Zündholz. Jedes Zündholz ein Bild. Am Ende solltest Du 16 Einzelbilder im Kasten haben. Zur Sicherheit mach direkt noch eine Serie.

Schritt 4

Öffne alle 16 Bilder der besten Serie in Photoshop. Das letzte Bild der Serie liegt im Stapel ganz oben. Zieh alle Bilder in der richtigen Reihenfolge in dieses Bild und speichere die PSD ab. Ebene 15 sollte das erste Bild mit der Frontalansicht des Objektes sein, die Hintergrundebene das letzte Bild der Serie. Mit einem Doppelklick auf die Hintergrundebene wird es zu Ebene 0.

 

Schritt 5

Mit Hilfe von Hilfslinien suchst Du Dir die Mitte des Objektes in Ebene 15. Richte alle anderen Ebnen nun nacheinander danach und zueinander aus. Benutze dazu auch die Deckkraft der Ebenen.

 

Wähle nun alle Ebene mit gehaltener Umschalt-Taste aus. Mit Strg+T drehst du alle Ebnen gleichzeitig auf den richtigen Horizont. Im Beispiel ist kann die Arbeitstischkante als Anhaltspunkt genommen werden.

 

Schritt 6

Die gefühlt zeitaufwändigste Arbeit ist wohl das Freistellen aller 16 Ebenen. Mit Hilfe von Ebenenmasken und Deinem Lieblingsfreistell-Werkzeug befreist Du das Objekt von seinem Hintergrund. Je nach gewünschter Größe der folgenden Animation muss mehr oder weniger detailiert Freigestellt werden. Im Beispiel soll eine Animation von ca. 250 x 250 px entstehen. Es kann also grob gearbeitet werden und es muss nicht jedes Detail zu sehen sein.

Tipp: Am besten ist es in der originalen Dokumentgröße der Rohbilder freizustellen. Um Ränder in der Animation vorzubeugen kannst Du bis zu 4 Pixel in das Objekt hinein freistellen. Diese Veränderungen fallen in der späteren Animation nicht auf. Gibt es dunkle Bereiche im Bild die schlecht erkennen lassen wo das Objekt endet, lege als oberste Ebene eine Einstellungsebene „Helligkeit/Kontrast…“ an.

 

Schritt 7

Lege alle Ebenen in einen Ordner. Wähle dazu die Ebenen mit gehaltener Umschalt-Taste aus und drücke Strg+G. Öffne mit Strg+N ein neues Dokument mit der gewünschten Größe der späteren Animation. Zieh den Ordner mit den Einzelbildern in das neue Dokument und Skaliere den kompletten Ordner per Strg+T auf Dokumentgröße.

Wähle den Ordner an und wähle als Füllmethode „Normal“ aus. Fülle die Hintergrund Ebene mit der Farbe die später als Hintergrund dienen soll. Öffne nun den Ordner mit den Einzelbildern. Mithilfe von Einstellungsebenen kannst Du nun Farb- und Kontrastkorrekturen an den Einzelbildern vornehmen ohne dass der Hintergrund, oder darunter liegende Ebenen damit verändert werden.

Schritt 8

Nach allen Korrekturen blende die Einzelbilder aus. Öffne im Hauptmenu > Fenster > Animation und wähle den Reiter Animation(Frames). Erstelle 16 Frames in der Zeitleiste. Wähle das erste Frame in der Zeitleiste und blende die Ebene mit dem ersten Bild ein. Wähle nun das zweite Frame in der Zeitleiste und blende die Ebene mit dem zweiten Bild der Animation ein. Das wiederholst Du nun für jedes Bild. Wähle mit gehaltener Umschalt-Taste alle Frames in der Animations-Zeitleiste aus. Wähle als Dauer in einem Frame eine Zeitverzögerung von 0,1 Sekunde. Jetzt lass die Animation ablaufen.

 

Schritt 9

Mit Strg+Umschalt+Alt+S, oder im Hauptmenu > Für Web- und Geräte speichern, speicherst Du die Animation als GIF. Soll die Animation transparent sein, blende in der Animation die Hintergrundebene aus. Wähle im Speicher-Dialog trotzdem eine Hintergrundfarbe (z.B. die Deiner Webseite). So verhinderst Du Ausfransen und Ränder in deiner Animation.

 

Das Ergebnis als GIF-Animation:


Willst Du die Animation in einer Flashdatei anwenden, speicherst Du mit Strg+Umschalt+Alt+S jedes Frame ohne Hintergrund als transparentes PNG-24.

Tipp: Hast Du die Sequenz fortlaufend nummeriert importiert Flash die Bilder automatisch als Bildsequenz in der Zeitleiste.

Hat dir dieser Artikel gefallen?
1723 Votes


Wir freuen uns über deine Bewertung zu diesem Artikel. Du hast
damit Einfluss auf zukünftige Inhalte und steigerst so die Qualität von templay.de!

Kommentare
tomair
Hat super funktioniert Danke für die Anregung.

Kommentar schreiben (Bitte alle Pflichtfelder ausfüllen)


reh-design.de - webnext.de - templay.de

© 2017 templay | templay.de ist ein Projekt von Reh-Design.de und Webnext.de