Wie erstellt man animierte GIFs von Prototyp-Mockups, wie die auf Dribbble?

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

Wie man ein Projekt und Kompositionen erstellt

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 aufzunehmen. iphonecomp, um sowohl den Hintergrund als auch GUIcomp zu halten.

Die zweite Komposition mit GUI-Animationen sollte die gleiche Größe wie der Bildschirm haben oder zumindest das gleiche Seitenverhältnis haben. Später, wenn Sie es auf dem Bildschirm platzieren, kann es sich strecken und seltsam aussehen, wenn das Seitenverhältnis ausgeschaltet ist.

Importieren von Bildern in AE

After Effects hat ein ziemlich gutes System zum Importieren von .psd-Dateien, aber ich verwende es nicht gerne, denn wenn Sie die .psd-Datei verlegen, verschieben oder umbenennen, kann After Effects sie nicht finden und Sie müssen das Filmmaterial für jede ersetzen Schicht separat.

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

So importieren Sie Bilder in ein Projekt

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

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

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

Welche Objekte sollten Sie als separate Bilddateien speichern?

Im Wesentlichen 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, der über die erste Schaltfläche ging, also musste ich sie separat speichern.}

Hier ist eine Aufschlüsselung, wie ich meine Bilddateien in Photoshop gespeichert habe, bevor ich sie in AE importiert habe.

Animation 101

Positionsanimation:

1. Positionsanimation:
   • Wählen Sie Ihr Objekt in der Liste auf der linken Seite der Zeitachse aus.
   • Drücken SieP
   • Klicken Sie auf das Stoppuhr-Symbol, das sich jetzt unter Ihrer ausgewählten Ebene befindet. Dadurch wird automatisch der erste Keyframe hinzugefügt, wo immer sich Ihre Zeitanzeige befindet (es ist die rote Linie in der Zeitleiste).
   • 
   • Verschieben Sie die Zeitanzeige in der Zeitleiste 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 die es verschoben werden soll (Sie können auch verwenden Shift+arrow keys, genau wie in Photoshop, oder indem Sie die Zahlenwerte ziehen. ).
   • Ein weiterer Keyframe erscheint in der Timeline und jetzt haben Sie eine Animation.
   • 
   • Sie können die Animation abspielen, indem Sie drückenspace

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

Fortsetzung von Animationen nach einer Pause.

ein Szenario: Sie haben etwas von A nach B animiert und möchten X Millisekunden anhalten und sich dann von B nach C bewegen.

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 an dieser Position kein Keyframe befindet

Da Keyframe Nr. 2 und die neu erstellte Keyframe Nr. 3-Transformation dieselben Werte haben, gibt es jetzt eine Pause zwischen diesen beiden Keyframes. Dann können Sie normal weiter animieren, indem Sie sich in der Zeitleiste vorwärts bewegen und die Werte erneut ändern.

Animieren anderer Dinge wie Rotation oder Opazität

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

Verwenden Sie einfach die Zahlenschieberegler, die angezeigt werden, wenn Sie die unten stehenden Hotkeys drücken.

Hotkeys für verschiedene Transformationsmethoden:

• P- Stellung
• T- Deckkraft
• R- Rotation
• S- Skala
• A- Ankerpunkt

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

Wie man Objekte anderen Objekten unterwirft

Im Comp-Panel sehen Sie für jedes Objekt eine Parent-Dropdown-Liste.

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

Wenn Sie dann das übergeordnete Element verschieben, werden Sie feststellen, dass sich das untergeordnete Element jetzt mitbewegt. Gleiches gilt für Animationen, die Sie an das Parent-Element anhängen.

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

Verleihen Sie Ihrer Animation Elastizität

Vielleicht ist Ihnen also aufgefallen, dass die Schaltflächenanimation nicht an einer Wand stoppt, sondern sehr elastisch stoppt.

Um dies zu erreichen, kann After Effect Expressions verwendet werden (es kann noch viel mehr).

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

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

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

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

Auch hier zu finden.

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 weitere Sache, die dazu führen kann, dass die Animation viel weniger linear erscheint, genau wie das Expression-Skript oben.

Ich habe Ease Ease in diesem "Touch Indicator Circle" verwendet, damit es etwas 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 Ease, weil ich faul bin...

Bilder oder ist nicht passiert...

Hier ist eine einfache Positionsanimation, die zeigt, wie die Beschleunigung und dieses spezielle Ausdrucksskript einen großen Einfluss auf die Animation haben können.

Platzieren von animiertem Comp/Footage auf einem Bildschirm

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

1. Platzieren Sie die GUI-Komposition innerhalb der iPhone-Komposition, genauso wie Sie Bilder in einer Komposition platzieren.
2. Doppelklicken Sie im Projektfenster auf „iPhone comp“.
3. Wählen Sie GUI-Komp
4. Aus dem oberen MenüEffects > Distort > Corner pin
5. Ziehen Sie dann einfach jede Ecke so, dass sie mit den Ecken des Gerätebildschirms übereinstimmt.

Exportieren nach .gif

AE hat dafür keine native Methode, aber keine Sorge, es gibt Möglichkeiten.

Ich mache das am liebsten:

1. Klicken Sie auf eine Komposition in derProjects panel
2. Composition > Add to render queue Cmd+Ctrl+M
3. Dann wählen Sie unten, wo sich die Timeline normalerweise befindet, aus, was exportiert werden soll und wohin.
   • Normalerweise exportiere ich eine verlustfreie .mov-Datei
   • Wenn Sie auf "Rendereinstellungen" klicken, können Sie eine Framerate auswählen, andernfalls wird die Comp-Framerate verwendet
4. Drücken Sie dann einfach in der oberen rechten Ecke oder in diesem Bereich auf Rendern.
5. Suchen Sie die exportierte Datei und öffnen Sie sie in Photoshop.
6. Fürs Web speichernCmd+Shift+Alt+S
   • Als .gif speichern

So schlimm ist es ehrlich gesagt nicht...

Als Videodatei exportieren

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

Das machst du so:

1. Speichern Sie Ihre Projektdatei.
2. Klicken Sie auf eine Komposition im Projects panel( falls 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 er standardmäßig direkt neben der Projektdatei angezeigt.

So ersetzen Sie Filmmaterial

Also kann AE Ihre Dateien nicht finden? Mach das:

• Klicken Sie im Projektfenster mit der rechten Maustaste auf eines der fehlenden Aufnahmen
• Von der ListeReplace footage > File...
• Suchen Sie Ihr Filmmaterial und Ihre Sachen

Andere nützliche Hotkeys

• U- Zeigt alle verwendeten Keyframes in der Komposition an (wenn Sie nichts ausgewählt haben). Sehr nützlich, wenn Sie beispielsweise mehrere Keyframes gleichzeitig verschieben müssen.
• U( Doppeltippen ) - 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 Zeitmarke an den Anfang der Zeitachse.
• 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 finden Sie unter here.

DIES IST EINE KOSTENLOSE ANIMIERTE MOCKUP-PSD-DATEI einer Website, die nach unten scrollt, und einer Menüanimation, die in Photoshop vollständig bearbeitet und animiert ist. Lächerlich einfach zu bearbeiten und herumzuspielen. Sie können die Datei hier kostenlos herunterladen . Ich habe auch ein Tutorial-Video, wie es ist einfach, dieses Freebie zu bearbeiten.

Wenn Sie sich die Kommentare zu diesem bestimmten Beitrag ansehen, sagt der Typ, er habe Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html verwendet

Dazu gibt es zwei Möglichkeiten.

1. Erstellen Sie die gewünschten Animationen in einem Animationsprogramm (zu dem After Effects gehört) neu / erstellen Sie ein Mockup und exportieren Sie es dann als animiertes GIF. Offensichtlich (wie Sie bemerkt haben) beinhaltet dies auch das Erstellen von "falschen" Berührungen und anderen Interaktionen, um zu demonstrieren, was vor sich geht.

2. Erstellen Sie einen funktionsfähigen Prototyp und zeichnen Sie dann die Ausgabe von Ihrem Gerät über AppleTV oder ähnliches über den HDMI-Ausgang auf, während sie an Ihren Fernseher weitergeleitet wird.

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

Aber Option 2 hat ENORME Vorteile gegenüber Option 1. Nicht zuletzt lernen Sie einige grundlegende Programmierungen.

Weitaus größer ist jedoch, dass Sie mit einigen sehr einfachen interaktiven Programmierfähigkeiten in der Lage sein werden, Variationen und alternative Ansätze viel schneller zu durchlaufen als jemand, der Animationssoftware verwendet.

Und Sie haben etwas, das wirklich interaktiv ist, um Ihr Design zu demonstrieren. Außerdem wurde das Artwork tatsächlich in einer interaktiven Umgebung auf dem Gerät getestet, sodass es bereits sicher ist, dass es pixel- und farblich perfekt ist.

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

Nicht, wenn Sie ein iPad haben.

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 dem Lernen von processing.org weiter, da Sie darin ähnlich interessante Mockups erstellen können:

http://processing.org/

Die Verarbeitung verwendet eine andere Skriptsprache namens Javascript. 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-Mockup eingefügt, das ich online gefunden habe, und die .mov-Datei gespeichert. Befolgen Sie die Anweisungen in diesem Video: http://youtu.be/VeZGwjVwDrc

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

Wenn Sie bei Keynote bleiben und es als Quicktime-Format exportieren möchten, kann es meiner Meinung nach nicht schaden, es zu versuchen:

GIF Brewery

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

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

Darüber hinaus enthält GIF Brewery viele weitere Funktionen, um Ihrer Kreativität Ausdruck zu verleihen. Sie können Beschriftungen hinzufügen, um Dialoge neu zu erstellen, oder mehrere Bildfilter hinzufügen.

Ich liebe wirklich alle Anweisungen von @Joonas.