Wie erstelle ich animierte GIFs von Prototyp-Mockups, wie die auf Dribbble?

Ich bin mir sicher, dass Sie Dribbbler gesehen haben, die animierte Modelle ihrer Designs hochgeladen haben.

Hier ist ein Beispiel:

Ich kann in Photoshop Modelle erstellen und ihnen sogar einfache Tween-Animationen zuweisen, aber ich kann meine GIFs niemals so aussehen lassen wie in diesem Beispiel.

Womit erstellen Dribbbler diese Animationen?

Beachten Sie, dass die Animationen auch Berührungspunkte und perfekte Bewegung enthalten. Ich möchte meine Photoshop-Modelle konvertieren, um dasselbe zu tun.

Wie kann ich ein animiertes Beispiel für meine Modelle erstellen, ähnlich den von Dribbblern erstellten?

Dinge, die Sie wissen müssen, um so etwas in After Effects zu erstellen:

Wie erstelle ich ein Projekt und Kompositionen?

Wenn Sie AE starten, können Sie drücken Cmd+N, um ein neues Projekt mit einer darin enthaltenen Komposition zu erstellen.

Wenn Sie bereits ein Projekt geöffnet haben, wird durch Drücken von Cmd+Nnur eine neue Komposition erstellt.

In diesem Projekt habe ich 2 Kompositionen verwendet. GUIcomp, um die GUI und ihre Animationen zu speichern. iphonecomp, um sowohl den Hintergrund als auch GUIcomp.

Die zweite Komposition mit GUI-Animationen sollte die gleiche Größe wie der Bildschirm haben oder mindestens das gleiche Seitenverhältnis haben. Wenn Sie es später auf dem Bildschirm platzieren, wird es möglicherweise gedehnt, um seltsam auszusehen, wenn das Seitenverhältnis deaktiviert ist.

Importieren von Bildern in AE

After Effects verfügt über ein ziemlich gutes System zum Importieren von .psd-Dateien, ich verwende es jedoch nicht gern, da After Effects die .psd-Datei nicht finden kann und Sie das Filmmaterial für jede Datei ersetzen müssen, wenn Sie sie verlegen, verschieben oder umbenennen Schicht getrennt.

Wenn Sie beispielsweise einen Ordner mit Bildern in die Projekte importieren. Benennen Sie den Bildordner um, Sie müssen nur ein Bildmaterial ersetzen und alle fehlenden Bilder werden wiederhergestellt (solange sich alle fehlenden Bilder in demselben Ordner befinden). Auch auf diese Weise gibt es weniger Unordnung.

So importieren Sie Bilder in ein Projekt

Klicken Sie mit der rechten Maustaste in das Projektfenster und wählen Sie: Import > Multiple files

... oder Sie können einfach Dateien in dieses Bedienfeld ziehen

Ich habe Slicy verwendet , um meine Bilder aus Photoshop zu exportieren.

Welche Objekte sollten Sie als separate Bilddateien speichern?

Grundsätzlich möchten Sie alle sich bewegenden Objekte separat speichern. Möglicherweise müssen Sie auch einige statische Objekte separat speichern.

^{In diesem Projekt hätte ich möglicherweise die Kopf- und Fußzeile als eine speichern können, aber die Kopfzeile hatte einen Schatten über der ersten Schaltfläche, sodass ich sie separat speichern musste.}

Hier ist eine Auflistung, wie ich meine Bilddateien in Photoshop gespeichert habe, bevor ich sie in AE importierte.

101 animieren

Positionsanimation:

1. Positionsanimation:
   • Wählen Sie Ihr Objekt in der Liste auf der linken Seite der Zeitleiste aus.
   • Drücken Sie P
   • Klicken Sie auf das Stoppuhrsymbol, das sich jetzt unter der ausgewählten Ebene befindet. Dadurch wird automatisch der erste Keyframe an der Stelle hinzugefügt, an der sich Ihre Zeitanzeige befindet (rote Linie in der Timeline).
   • 
   • Bewegen Sie die Zeitanzeige in der Timeline nach vorne. Ziehen Sie es oder Cmd+{Arrow left or right}oderCmd+Shift+{Arrow left or right}
   • Ziehen Sie Ihr Objekt im Kompositions-Viewer an die Position, an der Sie es verschieben möchten (Sie können es auch verwenden Shift+arrow keys, genau wie in Photoshop, oder indem Sie die Zahlenwerte ziehen.).
   • Ein weiterer Keyframe wird in der Timeline angezeigt und Sie haben jetzt eine Animation.
   • 
   • Sie können die Animation abspielen, indem Sie drücken space

Bewegen Sie die Keyframes näher zueinander, um die Animation zu beschleunigen, oder weiter voneinander entfernt, um sie zu verlangsamen.

Animationen nach einer Pause fortsetzen.

Ein Szenario: Sie haben etwas von A nach B animiert und möchten eine Pause von X Millisekunden einlegen und dann von B nach C wechseln.

Wenn Sie B animiert haben, gehen Sie in der Timeline vorwärts und klicken Sie auf das Keyframe-Symbol auf der linken Seite, hier:

Es sollte ausgegraut aussehen, also keine Sorge. Das bedeutet nur, dass sich in dieser Position kein Keyframe befindet

Da Keyframe Nr. 2 und die neu erstellte Keyframe Nr. 3-Transformation dieselben Werte haben, besteht zwischen diesen beiden Keyframes eine Pause. Anschließend können Sie die Animation normal fortsetzen, indem Sie sich in der Timeline vorwärts bewegen und die Werte erneut ändern.

Animieren Sie andere Dinge wie Rotation oder Deckkraft

Ich wollte dir nur diese Zeit nehmen, um dir zu sagen, dass sie alle genau wie Positionsanimationen funktionieren (... abzüglich des Ziehens).

Verwenden Sie einfach die Zahlenregler, die angezeigt werden, wenn Sie die folgenden Hotkeys drücken.

Hotkeys für verschiedene Transformationsmethoden:

• P - Stellung
• T - Deckkraft
• R - Drehung
• S - Waage
• A - Ankerpunkt

Wählen Sie einfach ein Objekt aus, drücken Sie einen dieser Hotkeys und beginnen Sie mit der Animation. Wenn Sie nichts auswählen, werden die Transformationsmethoden für jedes Objekt in der Komposition angezeigt.

Wie man Objekte anderen Objekten unterordnet

Im Comp-Bedienfeld sehen Sie eine Übergeordnete Dropdown-Liste für jedes Objekt.

Sie können es verwenden, um ein übergeordnetes Objekt für ein Objekt zu definieren.

Wenn Sie dann das übergeordnete Element verschieben, werden Sie feststellen, dass das untergeordnete Element jetzt mit verschoben wird. Gleiches gilt für Animationen, die Sie an das übergeordnete Element anhängen.

Wenn Sie das übergeordnete Objekt zum Drehen animieren, folgt das untergeordnete Objekt ...

Hinzufügen von Elastizität zu Ihrer Animation

Vielleicht haben Sie bemerkt, dass die Schaltflächenanimation nicht an einer Wand anhält, sondern auf sehr elastische Weise anhält.

After Effect Expressions können verwendet werden, um dies zu erreichen (es kann auch viel mehr).

Um ein Expression-Skript auf eine Animation anzuwenden, müssen Sie Alt+{mouse click}die Stoppuhr drücken und in das Skript einfügen.

Der Ausdruck, den ich in meiner Schaltflächenanimation verwendet habe

Die ersten 3 Variablen amp, freq, decaykönnen bearbeitet werden, um unterschiedliche Ergebnisse zu erzielen.

Sie können dasselbe Skript auf bewegungsbasierte Animationen anwenden. Beispielsweise ist die Deckkraftanimation nicht betroffen.

Kann auch hier gefunden werden.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}

Lockerung....

Dies ist also eine andere Sache, die die Animation viel weniger linear erscheinen lässt, genau wie das obige Expression-Skript.

Ich habe in diesem "Touch Indicator Circle" "Ease Ease" verwendet, damit es ein bisschen menschlicher aussieht als Bewegung.

Sie können einen oder mehrere Keyframes auswählen und mit der rechten Maustaste auf einen davon klicken.

Dann aus der Liste: Keyframe assistant > Easy Ease

Ich benutze oft Easy Easy, weil ich faul bin ...

Bilder oder nicht passiert ...

Hier ist eine einfache Positionsanimation, die zeigt, wie das Beschleunigen und dieses spezielle Ausdrucksskript einen enormen Einfluss auf die Animation haben können.

Platzieren von animiertem Comp / Footage auf einem Bildschirm

Nachdem die GUI animiert ist, ist es Zeit, sie auf dem Bildschirm des Geräts zu platzieren.

1. Platzieren Sie GUI-Kompositionen in iPhone-Kompositionen, genau wie Sie Bilder in einer Komposition platzieren.
2. Doppelklicken Sie im Projektfenster auf iPhone comp
3. Wählen Sie GUI comp
4. Aus dem oberen Menü Effects > Distort > Corner pin
5. Ziehen Sie dann einfach jede Ecke, um sie an die Ecken des Gerätebildschirms anzupassen.

Exportieren nach .gif

AE hat keine native Methode, um dies zu tun, aber keine Sorge, es gibt Möglichkeiten.

Am liebsten mache ich das:

1. Klicken Sie auf eine Komposition in der Projects panel
2. Composition > Add to render queue Cmd+Ctrl+M
3. Dann wählen Sie unten, wo sich die Timeline normalerweise befindet, was und wohin exportiert werden soll.
   • Ich exportiere normalerweise einen verlustfreien .mov
   • Wenn Sie auf "Rendereinstellungen" klicken, können Sie eine Framerate auswählen, andernfalls wird die Comp-Framerate verwendet
4. Dann drücken Sie einfach auf rendern in der oberen rechten Ecke oder in diesem Bereich.
5. Suchen Sie die exportierte Datei und öffnen Sie sie in Photoshop.
6. Für das Web speichern Cmd+Shift+Alt+S
   • Speichern als .gif

Es ist ehrlich gesagt nicht so schlimm ...

Als Videodatei exportieren

Obwohl Ihnen die obige Methode zeigt, wie Sie eine verlustfreie Datei exportieren, sollten Sie Videodateien nicht auf diese Weise exportieren.

Das machst du so:

1. Speichern Sie Ihre Projektdatei.
2. Klicken Sie auf eine Komposition in der Projects panel(wenn Sie mehr als eine haben)
3. Composition > Add to adobe media encoder queue Cmd+Alt+M
4. Ziehen Sie eine Voreinstellung aus der rechten Spalte in die linke Spalte
5. Drücke Start.
6. Wenn Sie keinen Exportordner auswählen, wird dieser standardmäßig direkt neben der Projektdatei angezeigt.

So ersetzen Sie Filmmaterial

Also kann AE Ihre Dateien nicht finden? Mach das:

• Klicken Sie mit der rechten Maustaste auf eines der fehlenden Footage im Projektfenster
• Von der Liste Replace footage > File...
• Suchen Sie Ihre Aufnahmen und Sachen

Andere nützliche Hotkeys

• U- Zeigt alle verwendeten Keyframes im Comp an (wenn Sie nichts ausgewählt haben). Sehr nützlich, wenn Sie beispielsweise mehrere Keyframes gleichzeitig verschieben müssen.
• U( Doppelklick ) - Zeigt alles an, was geändert wurde.
• E( Doppeltippen ) - Zeigt alle verwendeten Ausdrücke an.
• J - Wechselt zum vorherigen Keyframe.
• K - Wechselt zum nächsten Keyframe.
• space - Spielt comp
• Ioder homeTaste - Verschiebt die aktuelle Zeitanzeige auf der Zeitachse an den Anfang.
• Cmd+K - Aktuelle Kompositionseinstellungen.
• Cmd+I - Dateien importieren.
• Alt+{Arrow keys left and right} - Wählen Sie Keyframes aus und drücken Sie die Hotkeys, um sie zu verschieben.
• Alt+Shift+{Arrow keys left and right} - Wählen Sie Keyframes aus und drücken Sie die Hotkeys, um sie zu verschieben.

Die Projektdateien können gefunden werden here.

Dies ist eine kostenlose BELEBTE Mockup .psd - Datei eines dow Scroll - Website und ein Menü Animation vollständig bearbeiten und in Photoshop lächerlich einfach zu bearbeiten animiert und spielen , um, können Sie die Datei herunterladen hier , ich auch ein Tutorial - Video haben , wie ist einfach, dieses Werbegeschenk zu bearbeiten.

In den Kommentaren zu diesem bestimmten Beitrag heißt es, er habe Adobe After Effects verwendet: http://www.adobe.com/de/products/aftereffects.html

Hierfür gibt es zwei Möglichkeiten.

1. Erstellen Sie die gewünschten Animationen in einem Animationsprogramm (von denen After Effects eines ist) neu bzw. erstellen Sie ein Modell, und exportieren Sie es dann als animiertes GIF. Offensichtlich (wie Sie bemerkt haben) werden dabei auch "falsche" Berührungen und andere Interaktionen erzeugt, um zu demonstrieren, was vor sich geht.

2. Erstellen Sie einen funktionalen Prototyp und zeichnen Sie die Ausgabe von Ihrem Gerät über AppleTV oder ähnliches über den HDMI-Ausgang auf, während sie an Ihr Fernsehgerät übertragen wird.

Beide sind unglaublich zeitaufwändig und reisen für sich.

Aber Option 2 hat ENORMOUS-Vorteile gegenüber Option 1. Nicht zuletzt lernen Sie einige grundlegende Programmierkenntnisse.

Weitaus wichtiger ist jedoch, dass Sie mit einigen sehr einfachen interaktiven Programmierfähigkeiten Variationen und alternative Ansätze viel schneller durchlaufen können als mit Animationssoftware.

Und Sie haben etwas, das wirklich interaktiv ist, um Ihr Design zu demonstrieren. Außerdem wurde die Grafik tatsächlich in einer interaktiven Umgebung auf dem Gerät getestet, sodass Pixel und Farbe bereits perfekt sind.

Aber warte, ich weiß. Du hast Angst. Es wird schwer, oder?

Nicht, wenn du ein iPad hast.

Codea ist der billigste und schnellste Weg, um triviale (und SEHR komplexe) Animationen und Interaktivität in der einfachsten und saubersten Skriptsprache der Welt zu erstellen ... Lau.

http://codea.io

Wenn Sie kein iPad haben, besorgen Sie sich eines.

Machen Sie bis dahin mit learning processing.org weiter, da Sie in der Lage sein werden, ähnlich interessante Modelle zu erstellen:

http://processing.org/

Für die Verarbeitung wird eine andere Skriptsprache namens Javascript verwendet. Es ist ähnlich einfach, aber bei weitem nicht so elegant wie Lua.

Sie können die Animation der Benutzeroberfläche auch mit Keynote erstellen. Es ist ziemlich einfach und perfekt zum Erstellen von UI-Animationen. Ich habe dann After Effects verwendet, um das Video einfach in das Telefon zu legen.

Schritt 1: Ich habe zuerst die UI-Animation auf Keynote erstellt und diese erstellt: http://vimeo.com/108991829

Schritt 2: Ich habe das Video dann in ein iPhone-After-Effects-Modell eingefügt, das ich online gefunden und die MOV-Datei gespeichert habe. Befolgen Sie die Anweisungen in diesem Video: http://youtu.be/VeZGwjVwDrc

Schritt 3: Mit Hilfe von Photoshop und nach den Anweisungen habe ich dies gemacht.

Wenn Sie sich an Keynote halten und es als Quicktime-Format exportieren möchten, kann es möglicherweise nicht schaden, Folgendes zu versuchen:

GIF Brewery

Mit GIF Brewery können Sie kurze Clips aus Ihren Videodateien in GIFs konvertieren. Ganz gleich, ob Sie das neueste Katzen-GIF erstellen oder eine Vorschau eines längeren Videos bereitstellen möchten, die GIF-Brauerei ist genau das Richtige für Sie.

Sie müssen keine Frames mehr aus Ihren Filmen extrahieren und mit Ebenen in Adobe® Photoshop® fummeln. Lassen Sie stattdessen die GIF-Brauerei die mühsame Arbeit für Sie erledigen.

Darüber hinaus enthält die GIF-Brauerei zahlreiche weitere Funktionen, die Ihre Kreativität zum Ausdruck bringen. Sie können Beschriftungen hinzufügen, um den Dialog neu zu erstellen, oder mehrere Bildfilter hinzufügen.

Ich liebe alle Anweisungen von @Joonas.