3 Möglichkeiten, um animierte GIF-Screenshots von Designarbeiten für Ihr Portfolio zu erstellen

Nachdem Ihr neuestes Webdesign-Projekt abgeschlossen ist, ist es an der Zeit, es zu präsentieren und Ihrem Portfolio hinzuzufügen. Ihre Website-Besucher (und potenziellen Kunden!) werden Ihre großartige Arbeit in Aktion sehen wollen. Gute Bilder sind der Schlüssel, und im digitalen Raum wird es Zeiten geben, in denen Sie die Projektfunktionalität veranschaulichen möchten. Es kann die perfekte Lösung sein, es mit animierten Screenshots zu zeigen.

Ich bin sicher, Sie haben die coolen, einfachen animierten Screenshots gesehen, die uns zeigen, wie Apps oder Websites funktionieren. GIFs von Bildschirmaufnahmen geben dem Benutzer eine bessere Vorstellung davon, wie bestimmte Aufgaben ausgeführt werden, und zeigen gleichzeitig, welche Funktionen verfügbar sind. Video ist sicherlich eine Option und hat definitiv einen wichtigen Platz im Web. Ausführliche Produktvideos oder Fallstudien profitieren definitiv von einem Videoformat. Eine einfachere, dateigrößenbewusstere Wahl wie ein animiertes Screenshot-GIF ist jedoch möglicherweise genau das, wonach Sie suchen.

Warum animierte Screenshots für Ihr Portfolio wichtig sind

Egal, ob Sie es „GIF“ oder „JIF“ aussprechen, es ist wichtig, sich daran zu erinnern, dass GIFs mehr sein können als nur lustige Katzen und Filmclips mit einem cleveren Slogan. Animierte GIFs Ihrer Projekte sollten auffällig und sorgfältig geplant sein, um die Funktionalität des Designs zu zeigen. Das Animieren von Schnittstellenelementen ist sowohl ein funktionaler als auch ein ästhetischer Zweck, daher zeigt eine GIF-Datei dies. Wie wäre es, wenn Sie das Menü und die Optionen, die Ihre Arbeit bietet, demonstrieren? Wie wäre es, zu zeigen, wie Scrollen funktioniert? Das Zeigen von Funktionalität hilft dem Benutzer klar zu sehen, wie die App oder Website ihm helfen kann.

Tools zum Erstellen von GIFs

Es gibt keinen besseren Weg, Ihre harte Arbeit zu demonstrieren, als mit einem der folgenden Tools zum Erstellen von GIFs. Die folgenden Beispiele zeigen, wie es aussieht, wenn ein Benutzer auf eine Option tippt, weitere Details anzeigt und dann scrollt, um weitere Inhalte anzuzeigen.

Hinweis : In diesem Lernprogramm gibt es keine visuellen Designanweisungen. Diese Tipps gehen davon aus, dass das Website- oder Anwendungsdesign für Ihr Portfolio-Projekt bereits fertig ist.

So erstellen Sie animierte GIF-Screenshots in Adobe Photoshop

Meiner Meinung nach sind Adobe Photoshop und Adobe After Effects die besten Tools für diesen Job. Beide ermöglichen eine große Kontrolle über das Endprodukt. Ich persönlich mag Photoshop zum Erstellen von GIF-Bildschirmaufnahmen (und die meisten Designer sind damit sehr vertraut), also wird das folgende Beispiel so aufgebaut. Lass uns anfangen!

Bildlauffunktion wird angezeigt

Dieses Design wurde in Adobe XD erstellt, dann aber mit entsprechend benannten Ebenen nach Photoshop exportiert. Das Beispiel hat eine Ebene namens „MinTour Locations List“ für die Listenseite, „Sculpture Garden Listing“ für die Detailseite, und der Teil, der sich außerhalb der anfänglichen Bildlaufansicht befindet, heißt „Sculpture Garden Listing Overflow“.

Teil eins

1. Timeline-Setup und Standortliste

Die Timeline-Funktion wird verwendet, um die verschiedenen Bildschirme für das Endprodukt zu erstellen. Stellen Sie sicher, dass das Zeitleistenfenster geöffnet ist, indem Sie zu Fenster > Zeitleiste gehen.

Hier ist die Auflistungsseite; Der Benutzer beginnt hier, tippt auf einen Ort und gelangt zur Detailseite, auf der er scrollen kann, um weitere Details anzuzeigen.

Sie werden sehen, dass bereits ein erster Keyframe erstellt wurde. Stellen Sie sicher, dass die richtigen Ebenen angezeigt werden, damit die richtige Ansicht im Keyframe angezeigt wird.

Optional: Wenn Sie anzeigen möchten, wo der Benutzer tippt, wird dies manchmal mit einem Punkt angezeigt. Fügen Sie dazu einen zusätzlichen Rahmen mit dem Punktbereich hinzu.

2. Individuelle Ortsangaben

Die Möglichkeit, mit Ebenen zu organisieren, ist ein großer Vorteil und hilft Ihnen, alles in Ordnung zu halten, während Sie Ihr Bildschirmaufnahme-GIF erstellen. Gehen Sie zu den Optionen im Zeitleistenfenster und wählen Sie „Neuer Frame“. Das Gleiche gilt hier – stellen Sie sicher, dass die richtigen Ebenen ausgeblendet/angezeigt werden. In diesem Fall musste die einzelne Auflistung angezeigt werden, sodass die Ebene der Standortliste ausgeblendet ist.

3. Einzelne Standortdetails scrollen Inhalt

Die individuelle Auflistungsseite für den Skulpturengarten hat mehr Inhalt, daher sollte der Scrollbereich dem Benutzer angezeigt werden. Dies befand sich auf einer separaten Ebene, daher habe ich einen neuen Rahmen erstellt, um diesen Überlaufinhalt anzuzeigen.

4. Wählen Sie die Dauer

Dies kann einige Experimente erfordern, aber die Wahl der Dauer für jeden Frame ist wichtig. Sie möchten, dass der Benutzer genug Zeit hat, um jeden Frame zu sehen, aber er sollte auch nicht zu lange warten müssen, bevor er den nächsten sieht.

Ich habe für jeden Frame Werte eingegeben, insgesamt fünf Sekunden für die gesamte Animation.

5. Vorschau

Es ist gut, einen Blick auf das zu werfen, was bisher passiert ist. In der unteren Reihe des Zeitachsenfensters befindet sich eine Wiedergabeschaltfläche. Probieren Sie Dinge aus und sehen Sie, ob es etwas gibt, das verbessert werden kann.

(Optional) Tween-Steuerung

Die Dinge sind richtig angeordnet, aber sie wirken etwas sprunghaft. Screenshot-Animationen können angepasst werden, damit die Dinge etwas flüssiger erscheinen. In den Timeline-Optionen gibt es eine „Tween“-Option. Um automatisch eine reibungslose Animation zwischen dem aktuellen und dem vorherigen Frame zu erstellen, können automatisch weitere Frames eingefügt werden.

Von der Auflistung bis zum Listenüberlauf wurde Tween hinzugefügt, damit es eher wie eine Bildlaufaktion aussieht. Diese neuen Frames wurden auf eine sehr kurze Dauer von 0,05 Sekunden eingestellt (das Scrollen in einer App geht relativ schnell).

Wenn Sie möchten, dass dies in Photoshop wiederholt wird, stellen Sie sicher, dass „Für immer“ ausgewählt ist. Wenn es eine festgelegte Anzahl von Schleifen gibt, kann dieser Wert eingegeben werden.

6. Speichern der Bildschirmaufnahme GIF (nur Bildschirmablauf)

Wenn Sie dies nur als animierten Bildschirmfluss einfügen möchten, ist das Speichern der letzte Schritt. Zu diesem Zeitpunkt wird die Screenshot-Animation erstellt, sie muss nur noch im richtigen GIF-Format gespeichert werden. Sie sind vielleicht daran gewöhnt, ein statisches Bild zu speichern, aber das Speichern einer Bildfolge ist anders. Gehen Sie zu Datei > Für Web speichern, um diese GIF-Datei zu speichern.

Hier sehen Sie alle Einstellungen, die Sie für Ihr GIF benötigen. Denken Sie daran, dass Sie auf die Anzahl der Farben beschränkt sind, damit wir die Dinge vor dem Export optimal aussehen lassen. 256 ist höchstwahrscheinlich die beste Option, da Websites und Anwendungen in der Regel eine große Farbpalette haben, aber wenn Ihr Design dies zulässt, können Sie vereinfachen (was die Dateigröße gering hält).

Es gibt auch einige „Animations“-Einstellungen in der unteren rechten Ecke; Sie können Looping wählen, wenn Sie möchten, dass dies endlos wiederholt wird. Sie können auch eine festgelegte Anzahl von Schleifen wiederholen, wenn Sie möchten. Speichern Sie es am gewünschten Ort, und schon kann es losgehen!

Teil zwei: Geschichtete Bildschirme auf einem Gerät

Wenn Sie sich entschieden haben, fortzufahren, sind einige zusätzliche Schritte erforderlich, um es zu schichten, damit es auf dem Telefon realistischer aussieht. Wählen Sie im Zeitleistenfenster „Frames auf Ebenen reduzieren“. Jeder Frame wird in eine flache Ebene konvertiert, die am Ende 26 Frames umfasst (es gibt also 26 Ebenen).

Sobald dies gespeichert ist, muss das Telefonbild zur Datei hinzugefügt werden. Um dies zu berücksichtigen, muss eine gewisse Größenanpassung der Bildgröße vorgenommen werden.

1. Passen Sie die Leinwandgröße für Ihren animierten Screenshot an

Das Hintergrundbild hat eine Größe von 1300 x 920, daher muss die Leinwandgröße genau darauf angepasst werden. Gehen Sie zu Bild > Leinwandgröße und geben Sie die richtigen Abmessungen ein.

2. Bereiten Sie Ebenen vor, die auf dem Telefonbildschirm platziert werden sollen

Erstellen Sie als Nächstes eine neue Ebene für das Hintergrundbild, damit die Animation darüber gelegt werden kann. Hier sind Frame-Layer „Alle auswählen“ hilfreich.

3. Rahmen doppelt prüfen

Dies ist ein guter Zeitpunkt, um sicherzustellen, dass die Rahmen noch so sind, wie Sie es geplant haben. Wenn Sie die Animation über das Zeitleistenfenster abspielen, sehen Sie die animierte Sequenz.

4. Neigen Sie die Bildschirme

Es ist wichtig, dass alle Rasterebenen ausgewählt werden, damit sie alle auf einmal geneigt werden können, um einheitlich zu bleiben. Bearbeiten > Transformieren > Neigen ist, wo dies getan wird.

Es erfordert ein wenig Experimentieren, aber passen Sie die Ecken so an, dass sie mit den Begrenzungen des Bildschirms übereinstimmen, wodurch die Illusion entsteht, dass der Bildschirm mit der Animation beleuchtet wird.

5. Bildanpassungen und Speichern Ihrer GIF-Bildschirmaufnahme

Jetzt ist es an der Zeit, Anpassungen vorzunehmen. Farbe, Kontrast oder andere letzte Feinschliffe sollten vor dem Speichern vorgenommen werden. Das Speichern der Animation ist dasselbe wie in Teil 1, Schritt 6.

In diesem Beispiel wurde der Hintergrund entsättigt und der Kontrast erhöht, um die Animation wirklich hervorzuheben. Jetzt scheint es auf einem echten Gerät zu sein!

Giphy

Wenn Photoshop nicht Ihr bevorzugtes Werkzeug ist, gibt es ein kostenloses und einfaches Werkzeug namens Giphy. (Neben der professionellen Verwendung können Sie auch viele lustige GIFs erstellen!)

Wenn Sie „Slideshow“ wählen, ist dies eine gute Option zum Erstellen eines Animations-Screenshots. Um dies zu nutzen, müssen Sie einzelne Dateien der Bildschirme gespeichert haben. Sie ziehen dann Standbilder per Drag-and-Drop und der Vorgang beginnt.

Sobald die Dateien hochgeladen sind, wählen Sie „Diashow erstellen“. Wenn Sie die Bilder zusammengefügt haben, können Sie die Datei herunterladen. So einfach ist das!

Nimm es auf

Diese App ist ziemlich einfach; Es zeichnet die Aktion auf, die auf Ihrem Computerbildschirm stattfindet, lädt die Aufzeichnung auf die Recordit.io-Website hoch und erstellt einen teilbaren Link mit der Option, das GIF herunterzuladen.

Wenn Recordit auf Ihrem Computer installiert wurde, erscheint ein Symbol in der Taskleiste. Wenn Sie diese Option ausgewählt haben, können Sie sie auf den Bereich Ihres Bildschirms ziehen und auswählen, den Sie aufnehmen möchten. Das war perfekt, als ich in Adobe XD in den Vorschaumodus ging und einen Prototyp zur Demonstration verwenden konnte.

Nachdem Sie den einzuschließenden Bereich ausgewählt haben, wird eine Aufnahmeschaltfläche angezeigt. Wenn Sie auf „Aufzeichnen“ klicken, zeichnet Recordit alles auf, was auf Ihrem Bildschirm passiert, innerhalb der von Ihnen erstellten Grenzen. Wenn Sie mit der Aufnahme fertig sind, wählen Sie einfach „Stop“.

Es dauert einige Sekunden, aber nachdem die Aufnahme gestoppt wurde, wird ein Popup mit einem Link angezeigt, der Sie zur Aufnahme führt, die auf der Recordit.io-Site gehostet wird.

Animierte GIFs von Screenshots sind eine großartige Möglichkeit, den Benutzerfluss und die Funktionsweise Ihrer Designprojekte zu zeigen. Video hat auch seinen Platz, aber GIFs können sehr schnell erstellt und einfach zu Ihrem Online-Portfolio hinzugefügt werden.

Kostenloses Arbeitsblatt: Zielgruppe und Kundenpersönlichkeit

Suchen Sie nach einem umsetzbaren Leitfaden, der Ihnen hilft, Ihre Inhalte zugänglich und ansprechend zu halten? Dieses dreiseitige interaktive PDF hilft Ihnen, Ihr Publikum zu finden, Ihre Inhalte zu prüfen und einen Spielplan für das Wachstum Ihres Unternehmens zu erstellen.

Wenn Ihnen dieser Artikel gefallen hat, könnten Ihnen auch diese gefallen:

• So erstellen Sie SVG-Animationen mit CSS
• So erstellen Sie eine WordPress-Videogalerie
• So verwenden Sie Skip-Links, um Ihre WordPress-Site zugänglicher zu machen