Mehr Dynamik für deine Website durch GIFs
Immer wieder werde ich gefragt: Wie kann ich meine Website persönlicher machen? Und vor allem: Dynamischer?
Deswegen habe ich Sophia Dei von Studio Umi gebeten, dir in diesem Artikel zu zeigen, wie du GIFs für deine Website erstellen kannst. Und zwar nicht nur zum Spaß, sondern so, dass das Ganze auch einen Effekt hat - ob du nun dein Branding mehr herausstellen oder gezielt auf bestimmte Produkte hinweisen möchtest. (Spaß macht das Ganze natürlich trotzdem 😉)
GIFs werden gerne abgestempelt als lustige Spielerei im Internet, dabei kann man GIFs auch ganz anders einsetzen. Zum Beispiel als echten Hingucker auf deiner Squarespace-Seite.
In diesem Gastartikel kannst du lesen,
wieso GIFs deiner Website helfen können
wie du ganz leicht deine erste GIF-Datei selbst erstellst
wie das Animieren mit ProCreate funktioniert (anfängerfreundlich!), und
du die GIF-Datei dann auf deiner Website einbindest.
Los geht’s mit Sophias Artikel!
Inhaltsverzeichnis:
GIFs: Viel mehr als lustige zappelnde Bildchen
Vielleicht hast du es schon bemerkt: GIFs und GIF-Sticker sind ein riesen Trend und das, obwohl es das Format GIF jetzt schon seit über 30 Jahren gibt. Wünscht man einem Freund heutzutage “Alles Gute zum Geburtstag” versendet man GIFs auf Whatsapp. Reaktionen auf Nachrichten werden mit GIFs beantwortet. Instagram Storys werden mit GIF Stickern versehen, um die Message noch klarer zu machen.
Eine ganz neue Dimension ihres Erfolgs haben GIFs durch die sozialen Netzwerke erreicht. GIFs sind in nahezu allen großen Social Media Plattformen integriert. Somit ist es einfacher denn je GIFs zu nutzen. Es gibt zwei große GIF Plattformen: Giphy und Tenor. Beide verfügen über Integrationen in Facebook, Instagram, Twitter, Snapchat, iMessage, Whatsapp und Co. Das macht es auch so leicht, GIFs zu teilen.
Ich selber bin als Artist auf Giphy gelistet und habe gemerkt, was für eine große Reichweite man erzielen kann, wenn man dort offiziell gelistet ist. Mit meinen GIFs und GIF Stickern habe ich bereits eine Billionen Views erreicht.
Und das Schöne ist: Um ein GIF zu erstellen, brauchst du keine besonderen Voraussetzungen. Du kannst bereits mit den einfachsten Mitteln starten.
GIFs als Hingucker auf deiner Website
GIFs eignen sich besonders gut für die Einbindung in Websites, da das GIF ein sehr kleines Dateiformat ist.
Du kannst dir ein GIF wie eine Art Container vorstellen. Dieser Container enthält viele kleine Einzelbilder, die dann im Browser nacheinander abgespielt werden. Dadurch entsteht die Illusion von Bewegung.
GIFs sind also nichts anderes als kleine Daumenkinos und um ein GIF selbst zu erstellen musst du “nur” viele kleine Einzelbilder zeichnen.
Wenn du die Möglichkeit hast, würde ich dir immer empfehlen, eigene GIFs auf deiner Website zu verwenden und nicht einfach nur die GIFs der großen GIF-Plattformen zu kopieren. Wie Fotos und Illustrationen unterliegen auch GIFs dem Urheberrecht. Mit eigenen GIFs bist du also auch rechtlich gesehen immer auf der sicheren Seite.
Hierfür eignen sich GIFs besonders
GIFs kannst du auf deiner Website ganz vielseitig einsetzen. Du kannst beispielsweise dein Logo im Header animieren. Dadurch sorgst du auf allen Seiten für ein wenig Bewegung.
GIFs eigenen sich außerdem gut für Icons und Symbole auf deiner Website.
Mit Hilfe von animierten Icons kannst du dein Angebot super einfach visuell darstellen und die Aufmerksamkeit des Betrachters gezielt darauf lenken.
(Anmerkung: So sehen die GIFs dann in Bewegung aus:)
Hast du einen Newsletter oder ein besonderes Angebot? Dann nutze beispielsweise animierte Pfeile, um ordentlich darauf aufmerksam zu machen.
Hier kannst du dir die animierten Pfeile live bei Sophia ansehen
GIFs für die eigene Website selbst erstellen und einbinden
Bist du bereit, loszulegen? Dann krempel die Ärmel hoch und lass uns gemeinsam eigene GIFs für deine Website erstellen.
Auf geht’s in drei Schritten an die GIF-Erstellung.
Was brauche ich für die GIF-Erstellung?
Am einfachsten erstellst du eigene handgezeichnete GIF-Sticker mit der Zeichen-App Procreate.
Um Procreate nutzen zu können, benötigst du ein iPad oder iPhone. Du musst dir nicht das teure iPad Pro zulegen. Du kannst auch mit dem iPad Mini starten. Du solltest nur darauf achten, dass dein iPad nicht zu alt ist. Auf der Webseite von Procreate findest Du eine detaillierte Auflistung, welches iPad man für das Zeichnen mit Procreate benötigt:
12.9-inch iPad Pro (1. bis 4. Generation)
11-inch iPad Pro (1. und 2. Generation)
10.5-inch iPad Pro
9.7-inch iPad Pro
iPad (5. bis 7. Generation)
iPad mini (5. Generation)
iPad mini 4
iPad Air (3. Generation)
iPad Air 2
Du bist dir nicht sicher, welche iPad Vad Variante du hast? Du findest deine iPad Modell Nummer in dem du dein Tablet umdrehst und die Zahl auf der Website von Apple eingibst.
Außerdem würde ich dir einen Stylus* oder den Apple Pencil* empfehlen.
Zusammenfassend benötigst du also folgendes um eigene GIFs zu erstellen:
- Die App Procreate
- iPhone oder iPad
- Einen Apple Pencil oder einen alternativen Zeichenstift
Diese Anleitung habe ich mit Procreate in der Version 5X erstellt. Solltest du in einer älteren Version arbeiten, empfehle ich dir ein Update. Sichere vorher allerdings deine Daten. Sicher ist sicher. 😊
1. Wie zeichne ich in Procreate?
Wähle dir zunächst eine passende Stelle auf deiner Website aus, die ein GIF gebrauchen könnte. In unserem Beispiel schauen wir uns einmal einen Hinweis auf ein Newsletterformular an.
Ich habe mich dafür entschieden ein paar animierte Pfeile zu gestalten. Zunächst zeichne ich dafür die verschiedensten Pfeilarten als grobe Skizze auf die Zeichenfläche in Procreate.
In diesem Schritt achte ich nicht auf besondere Perfektion. Es soll zunächst einmal alles raus aus meinem Kopf.
Aus meinen Skizzen suche ich mir dann eine passende Form heraus, die ich im Anschluss noch einmal perfekt nach zeichne.
Und so gehst du vor:
Erstelle ein neues Dokument in Procreate über das + Symbol rechts oben. Um das Format anzupassen, kannst du auf den kleinen Ordner klicken und unter “Eigene Leinwandgröße” 1080 x 1080 px eingeben. So wird dein GIF nicht zu groß und ist dennoch scharf.
Wenn du auf das Pinsesymbol klickst, kannst du dir verschiedene Brushes aussuchen. Ich verwende für Skizzen gerne den 6B Stift. Diesen findest du bei den Pinseln unter Skizze.
Zeichne nun auf Ebene 1 verschiedene Pfeilformen, die dir in den Sinn kommen. Suche auch gerne nach Beispielen im Internet.
Wähle dir eine Pfeilart aus und versuche diesen auf einer neuen Ebene schön sauber zu zeichnen. Das Ebenenmenü findest du bei den 2 kleinen Vierecken neben dem Farbkreis. Wenn du auf das + Symbol klicks, kannst du eine neue Ebene über deiner 1. Ebene erstellen.
2. Das Animieren in Procreate
Wenn du dich für einen Pfeil entschieden hast, können wir im Anschluss deinem Pfeil Leben einhauchen.
Dafür schaltest du dir den Animationsassistenten in Procreate an. Du findest den Animationsassistenten unter dem Schlüssel - Leinwand. Sobald der Schalter nach rechts geklickt wurde erscheint ein Wiedergabe Fenster unterhalb deiner Leinwand.
Das kleine Bild symbolisiert einen einzelnen Frame. Wenn du jetzt auf Wiedergabe klickst passiert erst einmal nichts. Wir müssen erst weitere Frames hinzufügen, damit sich dein Pfeil bewegt.
Eine der am häufigsten verwendeten Techniken für die Animation von GIF Stickern ist das mehrfache “Abpausen” von Ebenen. Da man beim händischen abpausen nie exakt gleich zeichnet entsteht ein schöner, dezenter Wackeleffekt. In meinem Beispiel habe ich also dieselbe Pfeilart mehrere Male auf einzelnen Ebenen kopiert.
Und so gehst du vor:
Klicke auf Frame hinzufügen. Du siehst nun den vorherigen Frame ganz leicht durchscheinen.
Pause den ersten Pfeil so gut es geht ab. Verwende aber unbedingt den gleichen Pinsel und die gleiche Pinselgröße
Wiederhole den gleichen Vorgang noch zweimal
3. Exportieren als GIF
Wenn du jetzt auf Wiedergabe klickst, bewegt sich dein GIF sehr schnell.
Bevor wir unser GIF exportieren können, sollten wir einmal sehen, wie das finale GIF wirkt.
Stelle unter Einstellungen im Animationsassistenten die Bilder pro Sekunde auf 8. Jetzt ist dein GIF langsamer und damit bereit für den Export.
Und so exportierst du dein GIF:
Klicke auf Bereitstellen und wähle “Animierte GIF” aus
Wähle transparenten Hintergrund aus und klicke auf Exportieren.
Fertig ist dein erstes animiertes GIF!
Importiere das GIF in Squarespace:
In Squarespace kannst du ein GIF einfach wie eine Bilddatei in deine Website einfügen.
Wenn du noch mehr Ideen für animierte Pfeile und einfach Animationstechniken bekommen möchtest, schau dir gerne dieses Videotutorial an.
👉 Sophia Dei, Studio Umi
Falls du Fragen zum Thema GIF Erstellung hast, kannst du mir gerne eine private Nachricht auf Instagram schicken. Du findest mich dort unter @studio_umi
Kostenloser GIF-Guide
Sophia Dei ist Online-Trainerin für GIFs und Animationen und bloggt zu kreativen Themen & Tipps für Procreate und Co. Hier kannst du dich für ihren gratis GIF-Guide anmelden und lernen, wie du eigene GIFs für Instagram erstellst.
