Das animierte GIF wurde 1987 von CompuServe eingeführt und ist heute so beliebt wie nie zuvor. Die GIF-Animation hat im Laufe der Jahre viele Phasen durchlaufen. Es wurde geliebt, gehasst und dann wieder geliebt. Heute denke ich, dass die GIF-Animation ihren Platz als nützliche Möglichkeit gefunden hat, kurze und unterhaltsame Animationen online zu verteilen. Vor kurzem wurde ich von einer GIF inspiriert, die ich auf Twitter gesehen habe, und dachte, das Konzept würde ein unterhaltsames Tutorial machen. Ich habe mich mit unserem Fotografie-Editor bei Tuts + zusammengetan, um ein Cross-Site-Tutorial zu organisieren, in dem gezeigt wird, wie Stop-Motion-Fotografie aufgenommen und diese Fotos dann zu einer animierten GIF in Photoshop zusammengefügt werden. In diesem Lernprogramm zeigen wir Ihnen, wie Sie Photoshop verwenden, um die Fotos, die wir im Fotografie-Teil dieses Lernprogramms aufgenommen haben, schnell zusammenzustellen und unsere Animation zu erstellen. Lass uns anfangen!
Bevor Sie beginnen, besuchen Sie unsere Foto-Website, um zu erfahren, wie die in diesem Tutorial verwendeten Fotos aufgenommen wurden.
Wenn Sie die mit diesem Tutorial gelieferten Bildsequenzen herunterladen, müssen Sie diesen Schritt nicht durchführen, da ich die Bilder bereits für Sie umbenannt habe. Wenn Sie Ihre eigenen Fotos aufgenommen haben oder Ihre eigenen Bilder verwenden, stellen Sie sicher, dass Sie ähnliche Techniken verwenden.
Nun, da wir alle Fotos für dieses Tutorial aufgenommen haben. Der nächste Schritt ist die Vorbereitung der Bilder. Die schnellste Möglichkeit, die GIF-Animation zu erstellen, besteht darin, zwei separate Bildgruppen zu erstellen und sie als Bildsequenz in Photoshop zu öffnen / importieren. Eine Bildsequenz ist im Wesentlichen ein Ordner mit Bildern, wobei jedes Bild in sequenzieller Reihenfolge benannt wird.
In diesem Fall habe ich alle Bilder vom Fotografen umbenannt als 0001.jpg, 0002.jpg, 0003.jpg und so viertens. Im ersten Satz, 0001.jpg enthält keinen Bogen. Im zweiten Satz ist der Bogen vollständig eingebunden 0001.jpg. Sie können unten sehen, wie ich das gemacht habe.
Löschen Sie in der zweiten Bildsequenz 0001.jpg und 0045.jpg aus dem Ordner. Wir machen dies, damit sich diese Frames in der endgültigen Animation nicht wiederholen.
Nachdem wir unsere Bildsequenzen vorbereitet haben, ist der nächste Schritt das Öffnen der ersten Bildsequenz. Sie können dies tun, indem Sie einfach zu gehen Datei > Öffnen. Navigieren Sie zu dem Verzeichnis, in dem Ihre erste Bildsequenz gespeichert ist. Klicke auf 0001.jpg und wähle das aus Bildsequenz Kontrollkästchen Klicken Öffnen. Dadurch werden alle Ihre Bilder als Sequenz in Photoshop geladen. Versuchen Sie nicht, alle Bilder im Verzeichnis auszuwählen. Sie müssen nur den ersten auswählen.
Jetzt wollen Sie Ihre einstellen Bildrate. Stellen Sie es auf 17, Da dies die Framerate ist, haben wir diese Animation während des Fotografierabschnitts dieses Tutorials aufgenommen. Wenn Sie eine andere Bildrate bevorzugen, können Sie dies gerne tun.
Die erste Bildsequenz sollte jetzt als. In Photoshop geladen werden Videoebene. Ihre Layer-Panel und Zeitleistenfenster sollte jetzt ähnlich wie in den folgenden Screenshots aussehen. Um Ihre Timeline und Layer Panels zu öffnen, gehen Sie zu Fenster > Schicht oder Fenster > Zeitleiste.
Nun wollen wir einen kleinen Puffer zwischen der ersten und der zweiten Bildsequenz erstellen. Wir werden dies durch Einfügen tun 0045.jpg von der ersten Bildfolge. Dadurch wird der Animation eine kurze Pause hinzugefügt, nachdem der Bogen fertig gebunden ist. Gehe zu Datei > Platz und wählen Sie 0045.jpg.
Dieses Bild wird jetzt zu Ihrem hinzugefügt Zeitleiste. Reduzieren Sie die Dauer des Clips in der Timeline wie gezeigt, indem Sie einfach die Ziehpunkte ziehen, um ihn zu verkürzen.
Nun werden wir die zweite Bildsequenz platzieren, indem wir zu gehen Datei > Platz. So wie Sie es mit der ersten Sequenz in gemacht haben Abschnitt 2.1, zur zweiten Bildsequenz wechseln, auswählen 0002.jpg und wähle das aus Bildsequenz Kontrollkästchen Diese Sequenz sollte jetzt zu Ihrem hinzugefügt werden Zeitleiste.
Nachdem wir nun beide Bildsequenzen hinzugefügt haben, möchten wir zwischen dem Ende dieser Sequenz und dem Anfang der ersten einen kurzen Puffer hinzufügen, da diese GIF so eingestellt wird, dass sie kontinuierlich wiederholt wird. So wie du es getan hast Abschnitt 2.3, gehe zu Datei > Platz und wählen Sie 0001.jpg von der ersten Bildsequenz und reduzieren Sie die Dauer in der Zeitleiste, wie gezeigt. Genau wie in Abschnitt 2.3, Dies gibt unserer Animation eine kurze Pause, bevor sie wiederholt wird.
An dieser Stelle können Sie Ihre Animation testen, indem Sie auf die Wiedergabeschaltfläche klicken. Wenn es für Sie richtig aussieht, müssen Sie jetzt nur noch die Animation als GIF speichern.
Gehe zu Datei > Speichern Sie für Web.
Exportieren Sie die Datei als GIF, legen Sie das fest Schleifenoptionen zu Für immer. Ich habe die Einstellungen in der Abbildung unten verwendet.
Denken Sie daran, dass die Dateigröße in einer GIF-Animation eine wichtige Rolle spielt. Sie möchten die Dateigröße so weit reduzieren, dass sie im Web geteilt werden kann, aber nicht genug, damit die Qualität des endgültigen Bildes schlecht aussieht. Das Speichern Sie für Web Ein Dialog zeigt Ihnen genau, wie groß Ihre Datei in der unteren linken Ecke Ihres Bildschirms sein wird. Sie können anpassen Farben, Dithering, Web Snap, oder eine der anderen Einstellungen, damit Ihr Bild genau richtig aussieht.
Photoshop ist ein extrem leistungsfähiges Werkzeug, mit dem Sie erstaunliche GIF-Animationen erstellen können. In diesem Tutorial haben wir Ihnen gezeigt, wie Sie nicht nur aus einer Fotoserie eine GIF-Animation erstellen, sondern auch, wie Sie die Fotografie aufnehmen. Sie können diese Techniken auch verwenden, um Ihre eigenen Stop-Motion-GIF-Animationen zu erstellen. Die Möglichkeiten sind endlos.