„Wenn man die Bilder für eine GIF-Datei zusammenstellt, weiß man nie genau, was passieren wird“, so Grafik-Designerin Anna Mills. Und genau diese Mischung aus Planen, Ausprobieren und Zufall hat sie gepackt.
Während des Lockdowns fing Anna damit an, in ihrer Freizeit mit den Steuerelemente auf der Zeitleisten-Werkzeugen von Photoshop zu experimentieren. Dabei verfeinerte sie einen persönlichen Stil. Dieser drückt sich darin aus, dass sie GIF-Dateien in einem körnigen, „hibbeligen“ Stop-Motion-Stil gestaltet. Dabei tanzen kunstvolle Buchstaben mit dynamischen Persönlichkeiten auf dem Bildschirm. „Wer mit Photoshop arbeitet, bringt darin seine eigene Persönlichkeit zum Ausdruck“, so Anna, „und ich nutze Photoshop gern, um meine Zeichnungen auseinanderzunehmen und sie mit Bewegung und Farbe neu zu konfigurieren.“
„Beim Erstellen von GIF-Dateien versuche ich, einen analogen Stil einzubringen, damit die Dinge ‚realer‘ wirken, während sie tatsächlich sehr, sehr digital sind“, sagt Anna. In diesem Tutorial stellt sie einige ihrer persönlichen Tricks und Techniken vor – anhand von „The Big Reveal“, einer Kombination aus zwei Designs, die sie als „drehbares Poster“ bezeichnet.
Übernimmt die Tipps und Techniken von Anna. Lade ihre Übungsdatei herunter und leg los mit den GIF-Dateien.
SCHRITT 1/4
Sieh dir die Grundlagen an
Annas drehbares Poster hat zwei Hauptdesigns: Das erste, Poster A, zeigt eine wackelige, handgezeichnete Schrift. Das zweite, Poster B, wird über Poster A aus- und eingerollt. Öffne Annas Übungsdatei in Photoshop und gehe zum Bedienfeld „Ebenen“, um alle Frames und Elemente durchzugehen, die sie für dieses Tutorial freigegeben hat.
SCHRITT 2/4
Bereite deine Frames vor
Poster A besteht aus drei Frames mit leichten Variationen handgezeichneter Buchstaben. Wir bringen sie jetzt in die Zeitleiste. Wähle alle drei Ebenen im Ordner „Poster A frames“ aus. Klicke mit der rechten Maustaste auf > „Exportieren als“ > „JPG“ > „Speichern“. Lade dann deine exportierten JPG-Dateien in einen Stapel („Datei“ > „Skripts“ > „Dateien in Stapel laden“ > „Nach Namen sortieren“). Daraufhin wird eine neue Zeichenfläche angezeigt. Speichere diese Datei unter „Poster A.psd“ und wähle „Fenster“ > „Zeitleiste“ > „Frame-Animation erstellen“ aus. Klicke dann auf das Hamburger-Menü „Zeitleiste“ und wähle „Frames aus Ebenen erstellen“.
Profi-Tipp: Profi-Tipp: Nummeriere die Frames in der Reihenfolge, in der du sie einfügst. So behältst du die Übersicht, wenn du mit längeren Animationen experimentierst.
SCHRITT 3/4
Setze alles in Bewegung
Lege das Tempo der finalen Animation für jeden Frame fest. Anna hat jeweils eine Zeit von 0,1 Sekunden eingestellt, kann aber verschiedene Zeitspannen ausprobieren, um zu sehen, wie sich die Einstellung auf das Ergebnis auswirkt. Nimm als Nächstes bei der Zeitleiste die Einstellung „Unbegrenzt“ vor. Die Animation wird dann in einer Endlosschleife wiedergegeben. Drücke „Wiedergabe“, um eine Vorschau anzuzeigen. Jetzt kannst du deine animierte GIF-Datei exportieren. Gehe abschließend zu „Datei“ > „Exportieren“ > „Für Web speichern (Legacy)“. Wähle „GIF“ und „Speichern“.
SCHRITT 4/4
Abspielen und genießen!
Du hast jetzt eine fetzige, hibbelige GIF-Datei mit drei Frames erstellt. Experimentiere weiter, um etwas Persönliches zu schaffen: Passe die Zeitleisten-Einstellungen an und importiere deine eigenen Elemente in jeden Frame. Oder probiere zum Anpassen deiner Frames die anderen Elemente aus, die Anna freigegeben hat.
Bereit für das nächste Level? Probiere diese zusätzlichen Tipps von Anna aus, um deiner GIF-Datei eine Textur, ein unruhiges Design und mehr hinzuzufügen.
Füge eine analoge Textur hinzu
Anna findet und erstellt gerne papierbasierte Texturen. Anschließend scannt und importiert sie sie in Photoshop. Für dieses Tutorial hat sie eine Papiertextur gescannt und geladen, mit der du experimentieren kannst. In Annas Übungsdatei findest du im Ordner „Additional poster elements“ die Ebene mit dem Namen „Paper texture“. Kopiere sie und füge sie dann in deine Datei „Poster A.psd“ ein, um sie als oberste Ebene zu definieren. Klicke mit der rechten Maustaste auf die Ebene „Paper texture“ und wähle dann nacheinander Optionen für die Füllmethode und dann „Multiplizieren“ aus. So erhältst du einen papierartiges, texturiertes Erscheinungsbild für deine Ebenen.
Sorge dafür, dass die Textur „hibbelig“ wirkt
Zum Erzeugen eines Lo-Fi-Flackereffekts fügt Anna eine zweite Animationsebene hinzu, indem die Papiertextur von Frame zu Frame bewegt wird. Das erfordert Geduld und wird nicht gleich auf Anhieb funktionieren, aber das ist in Ordnung.
Mit dem Werkzeug „Transformieren“ kannst du die Position der Papiertexturebene anpassen, sodass in jedem Frame ein anderer Teil davon angezeigt wird. Die Papiertexturebene sollte größer als die Zeichenfläche sein. Du kannst jeden Frame automatisch aktualisieren, neu exportieren und dann neu zusammensetzen, um eine neue GIF-Datei zu erstellen. Benutze dabei die Werkzeuge aus Schritt 2 und 3. Hurra! Du hast soeben eine hibbelige Textur erstellt.
Füge einen Enthüllungseffekt hinzu
Gehe zum Ebenenordner „Poster B Frames“ und sieh dir an, wie Anna den Effekt des „drehbaren“ Posters erzeugt hat. Mit den Werkzeugen „Transformieren“ und „Zuschneiden“ hat sie in jedem Frame die Poster A und B „verklebt“ und dabei jeweils mit einer dicke schwarzen Linie versehen. „Je mehr Frames du hinzunimmst, desto flüssiger läuft die finale Animation ab“, erklärt Anna. Umgekehrt gilt: Je weniger Frames, desto abgehackter wirkt die Animation. Exportiere die abschließende GIF-Datei aus ihren 15 Frames, indem du Schritt 2, 3 und 4 (siehe oben) mit den bereitgestellten „Poster B“-Frames wiederholst.
Zum Schluss: Spiegeln und umkehren
Um den Enthüllungseffekt in umgekehrter Richtung zu erzeugen, duplizierst du einfach deine Frames aus dem vorherigen Schritt. So geht's: Wähle alle Frames in deiner Timeline aus und öffne das Hamburger-Menü > „Frames kopieren“ > „Frames einfügen“ > „Nach Auswahl einfügen“ > „Umkehren“. Wähle dann die Einstellung „Unbegrenzt“ aus. Gehe abschließend zu „Datei“ > „Exportieren“ > „Für Web speichern (Legacy)“. Wähle „GIF“ aus und speichere die Datei. Ein dreifaches Hurra auf dich! Du hast gerade eine Animation mit mehreren Ebenen erstellt.
Experimentiere weiter mit Annas Techniken. Gehe in ihren Ebenenordner „Additional elements to play with“, um ihre Frames anzupassen, oder gestalte selbst ein drehbares Poster.
ÜBER DIE KÜNSTLERIN
Grafik-Designerin Anna Mills lebt und arbeitet in Bristol. Ihre illustrativen Buchstabenformen springen dynamisch auf der Seite herum und nehmen dabei verschiedene menschliche Eigenschaften an. Das Balancieren zwischen analogen und digitalen Prozessen gehört zu Annas Lieblingsritualen beim Animieren hibbeliger Wörter und Buchstaben. Folge ihr auf Instagram unter @annam.lls.
