So erstellen Sie ein GIF in PhotoShop aus Video

Wenn Sie hier angekommen sind und sich gefragt haben, wie Sie mit Photoshop ein GIF erstellen können, liegt dies wahrscheinlich daran, dass das Video, das Sie auf Ihre Website hochgeladen haben, die Ladezeit verlangsamt hat. Nun, Sie sind an der richtigen Stelle. In dieser Anleitung zeigen wir Ihnen, wie Sie aus Videomaterial ein GIF in Photoshop erstellen. Es wird auf Ihrer Website großartig aussehen und ist viel besser auf Geschwindigkeit optimiert als eine Videodatei!

Mit Hilfe eines GIFs können Sie jede Art von Video auf einer Website in einer Schleife präsentieren. Es kann ein Clip aus Werbematerial, eine Bildschirmaufnahme für ein Tutorial oder so ziemlich alles sein, was Sie wirklich wollen.

Für dieses Tutorial benötigen Sie Videomaterial und Adobe Photoshop. Wenn Sie kein Photoshop-Abonnement haben, können Sie eine kostenlose Testversion durchführen. Folglich können Sie feststellen, dass Photoshop eine große Hilfe für das Webdesign ist! Wenn Ihr Video sehr lang ist, möchten Sie es vielleicht zuerst in einem Videoeditor wie iMovie oder Adobe Premiere schneiden. Photoshop bietet beim Importieren auch eine Zuschneideoption, aber ein Videoeditor ist besser, wenn das Originalmaterial extrem lang ist.

Lass uns anfangen.

Endergebnisvorschau

Dies ist das Endergebnis des GIFs, das wir für dieses Tutorial erstellt haben, perfekt für einen Abschnitts- oder Modulhintergrund.

Importieren Sie zunächst das Video in Photoshop

Um den Videoclip in Photoshop zu importieren, müssen Sie sich zuerst im Photoshop-Editor befinden. Klicken Sie dort auf Datei > Importieren > Videoframes in Ebenen. Wählen Sie das gewünschte Video aus und klicken Sie auf Öffnen.

Im Popup-Dialog haben Sie zwei Möglichkeiten; 1. Von Anfang bis Ende – um das Video vollständig zu verwenden oder 2. Nur ausgewählter Bereich – um die Trimmen-Option zu verwenden und nur einen Abschnitt des Videos zu verwenden.

Darunter befindet sich eine Option, um den Import auf eine ausgewählte Anzahl von Frames zu beschränken. Wählen Sie eine kleine Zahl, wenn das Video kürzer ist, und eine größere Zahl, wenn das Video länger ist. Dies kann einige Versuche und Irrtümer erfordern, bis Sie den richtigen Ablauf haben. Filmmaterial mit kleinen oder langsamen Änderungen hat beispielsweise viele Frames, die fast genau gleich aussehen. Auf der anderen Seite, wenn das Filmmaterial schnell mit vielen visuellen Änderungen ist, kann es, wenn Sie zu viele Frames herausnehmen, sprunghaft aussehen.

Für dieses Tutorial wählen wir „Von Anfang bis Ende“ und „Auf alle 3 Frames beschränken“. Stellen Sie sicher, dass auf „Frame-Animation erstellen“ geklickt ist.

Nehmen Sie Anpassungen am Filmmaterial vor

Dies ist der perfekte Zeitpunkt, um alle gewünschten Anpassungen an Ihrem Videomaterial vorzunehmen, vom Zuschneiden der Größe bis zum Anpassen der Farbstufen. Beispielsweise könnte sich ein unansehnliches Objekt in der Ecke des Videos befinden oder die volle Höhe des Videos ist zu groß für die Stelle, an der Sie es in Ihrem Website-Design platzieren möchten. Wenn das Videomaterial zu stark gesättigt ist, können Sie alternativ das Anpassungsfenster verwenden, um die Sättigung auf allen Ebenen gleichzeitig anzupassen.

Für die Kreativen da draußen werden durch Anpassungen an verschiedenen Ebenen alle möglichen Effekte für Ihr GIF erzeugt. Was Sie nicht tun können, ist, Hintergründe zu entfernen oder Werkzeuge zu verwenden, die jeweils nur auf einer Ebene arbeiten.

Profi-Tipp: Stellen Sie sicher, dass Sie bei jeder Anpassung alle Ebenen ausgewählt haben.

So beschneiden Sie alle Ebenen auf einmal

Wählen Sie alle Ebenen aus, indem Sie auf Ebene 1 klicken und dann bei gedrückter Umschalttaste auf die oberste Ebene klicken. Wählen Sie das Rechteckige Auswahlwerkzeug und wählen Sie den Bereich des Videos aus, den Sie behalten möchten (nicht den, den Sie herausnehmen möchten). Klicken Sie auf Bild > Zuschneiden und die Bereiche außerhalb der Auswahl verschwinden. In unserem Video wählen wir den gesamten Videobereich aus und lassen oben ein wenig unmarkiert. Wir möchten das gesamte Video weniger groß machen und den weißen Rand des Horizonts entfernen.

So passen Sie die Farben im GIF an

Wenn alle Ebenen ausgewählt sind, klicken Sie im Menü "Panels" auf die Registerkarte "Anpassungen". Sie können jedes der Anpassungswerkzeuge verwenden und sie auf die Ebenen in Ihrem GIF anwenden. Sie können die Farben zum Beispiel in Schwarzweiß umwandeln oder ihm einen Duoton-Effekt verleihen. Wir verwenden die Schwarz-Weiß-Anpassung mit einem Farbton, um die Farbe unseres Videos etwas künstlerischer zu gestalten. Dies ist perfekt für einen Hintergrund, der dem Rest des Inhalts nicht im Weg steht. Sie können jeden beliebigen Farbton verwenden und die verschiedenen Farbstufen nach Belieben anpassen. Nur ein Ratschlag: Wenn Sie Farbanpassungen hinzufügen, wird Ihre endgültige Datei größer sein, als wenn Sie dies nicht tun.

Dieses GIF wurde mit 211 MB ohne Farbfilter und mit 312 MB mit Farbanpassungen heruntergeladen. Wenn Sie wirklich die Farbanpassungen wünschen, müssen Sie Frames reduzieren, um die endgültige Datei zu verkleinern. Mehr dazu im nächsten Abschnitt.

Verwenden Sie die Timeline, um die Frames zu bearbeiten

Mit dem Zeitleistenfenster können Sie die Frames bearbeiten, um die endgültige Größe der GIF-Datei zu verringern. Zum Beispiel zusätzliche Frames am Ende des Clips, die einfach zu verzögern scheinen oder einen statischen Abschnitt erzeugen. Je mehr Rahmen Sie herausnehmen können, desto besser! Aber seien Sie vorsichtig, wenn Sie zu viele Frames herausnehmen und der Endeffekt sprunghaft wird. Nehmen Sie sich Zeit, um zu überprüfen, wie die Schleife nach dem Löschen einiger Frames aussieht.

Um auf das Timeline-Fenster zuzugreifen und zu sehen, wie das GIF in einer Schleife arbeitet, klicken Sie auf Window > Timeline. Im unteren Bereich Ihres Bildschirms wird ein langes horizontales Fenster geöffnet. In der unteren linken Ecke befinden sich einige Bedienelemente. Wählen Sie die Loop-Option als 'Forever' und drücken Sie die Play-Taste, um zu sehen, wie das GIF aussieht. In unserem Fall sieht unser GIF ziemlich gut aus, ist aber immer noch zu lang. Bei über 200 Bildern und einer Farbanpassung ist die endgültige Datei satte 312 MB groß. Sie können die Größe Ihrer endgültigen Datei überprüfen, indem Sie die Schritte im Abschnitt "Als GIF speichern" unten ausführen. Nachdem Sie einen Blick darauf geworfen haben, drücken Sie einfach auf Abbrechen, anstatt zu speichern. Sie können die Dateigröße auch mit den Optionen für das Exportieren für das Web verringern.

So löschen Sie Frames, um die GIF-Dateigröße zu verkleinern

Um unser GIF viel kleiner zu machen, nehmen wir die letzten 200 Frames heraus. Das komplette Video hat einen Abschnitt, in dem sich die Drohnenkamera dreht und nach links in Richtung des Parks hinter dem Strand schwenkt. Wir brauchten es nicht. Jetzt wiegt unser GIF 160 MB. Immer noch recht groß. Wir nehmen keine Frames mehr heraus, weil es sprunghaft wird, also lassen wir es so, wie es ist, um es später mit den Optionen "Für Web speichern" zu optimieren.

Um Frames zu löschen, können Sie einen auswählen und auf das Papierkorbsymbol drücken, das sich unter den Wiedergabefunktionen des Timeline-Fensters befindet. Ebenso können Sie eine aufeinanderfolgende Gruppe von Frames auswählen, indem Sie auf einen klicken und dann Frames davor oder danach, indem Sie Umschalt+Klick drücken. Wenn Sie das Filmmaterial nicht vom Anfang oder Ende des GIFs abschneiden möchten, sondern es kürzer machen möchten, löschen Sie alternative Frames, indem Sie auf eines drücken und dann bei gedrückter Befehlstaste auf jedes zweite Frame klicken.

Wir lieben es, wie Sie beim Erstellen eines GIFs in Photoshop mit Video Abschnitte des Filmmaterials sowohl beim Importieren als auch danach ausschneiden können! Also praktisch.

So ändern Sie die Geschwindigkeit des GIFs

Das Zeitleistenfenster bietet Ihnen auch die Möglichkeit, das GIF zu verlangsamen oder zu beschleunigen. Unter jedem Frame in der Timeline befindet sich ein Geschwindigkeitsregler. Die Standardmessung ist 'keine Verzögerung' oder '0', aber es kann vorkommen, dass das von Ihnen verwendete Video bereits eine Geschwindigkeitsanpassung hatte. Dies ist bei unserem Video der Fall. Wenn Sie sich den Screenshot oben ansehen, in dem wir Frames löschen, können Sie sehen, dass unsere Frames eine Verzögerung von 0,04 Sekunden haben. Wenn wir das GIF in der Vorschau anzeigen, sieht es so aus, als wäre es beschleunigt. Das wollen wir nicht.

Wir wählen alle Frames in der Timeline aus, indem wir auf die drei Linien in der oberen linken Ecke des Timeline-Fensters klicken und auf 'Alle Frames auswählen' klicken. Auf einem der Frames klicken wir auf den kleinen Abwärtspfeil und wählen „keine Verzögerung“. Dadurch wird unser GIF natürlich fließen. Um ein GIF zu erstellen, das wie in Zeitlupe aussieht, wählen Sie einen beliebigen Wert über 1 Sekunde.

Als GIF speichern und optimieren

Wenn alles fertig ist, ist es an der Zeit, das Projekt als GIF zu speichern. Klicken Sie auf Datei > Exportieren > Für Web speichern (Legacy) und wählen Sie die GIF-Option im Popup-Dialogfeld. Überprüfen Sie die Größe der Datei und betrachten Sie ihre Ausgabe. Es gibt ein paar Dinge, die Sie tun können, um die Dateigröße zu reduzieren.

• Reduzieren Sie die Farbanzahl.
• Reduzieren oder entfernen Sie das Dither.
• Reduzieren Sie die Höhe und Breite.

Um zu überprüfen, wie sich die Anpassungen auf Ihr GIF auswirken, klicken Sie auf die Schaltfläche Vorschau. Verwenden Sie die Registerkarten 2-Up und 4-Up, um verschiedene Optionen anzuzeigen. Möglicherweise müssen Sie zurückgehen und weitere Frames entfernen, wenn sie immer noch zu groß sind. Zielen Sie auf eine Dateigröße unter 20 MB. Wenn Sie ein GIF für einen Abschnitt in voller Breite erstellen, müssen Sie die Frames wirklich reduzieren, um eine gute Größe für das Web zu erhalten.

Als Faustregel gilt, dass Ihre GIF-Dateien nicht größer als etwa 20 MB sein sollten. Mehr ist einfach zu groß. Wenn Sie es schaffen, es unter 10 MB zu verkleinern, ohne zu viel Qualität zu verlieren, haben Sie einen Gewinner.

Am Ende haben wir mehr Frames aus unserem GIF gelöscht, um es auf 18 MB zu reduzieren. Dann haben wir es durch GIFCompressor geschickt und es um 55% reduziert. GIFCompressor ist ein kostenloses Online-Tool, das die GIF-Größe ohne Qualitätsverlust reduziert. Sie können ein GIF mit einer Größe von bis zu 50 MB hochladen.

Abschluss

Wie Sie sehen, ist es ziemlich einfach, ein GIF in Photoshop aus Videomaterial zu erstellen. Die einzige Einschränkung ist die Länge des Videos, mit dem Sie beginnen, und wie viele Frames Sie entfernen. Wenn Sie nicht genug entfernen, wird die endgültige Datei wirklich riesig, und das wird überhaupt nicht helfen. Es kann einige Probeläufe dauern, bis ein GIF endlich so aussieht, wie Sie es möchten. Wenn Sie wie in diesem Handbuch GIFs von Screenshots für Tutorials erstellen, werden Sie den Dreh raus und es wird jedes Mal einfacher.

Ausgewähltes Bild über emojoez / shutterstock.com