So erstellen Sie ein animiertes Bild für Ihre Medium-Publikation

Von CSS zu GIF

Dieses erstaunliche GIF wurde hier gefunden

Uns hat die Idee gefallen, ein animiertes Cover für unsere Publikation zu haben. Mit Medium können Benutzer das Publikationslayout nicht vollständig anpassen. Sie können jedoch mit einigen visuellen Elementen experimentieren, um originelle Ergebnisse zu erzielen und Ihre Publikation hervorzuheben.

In diesem Artikel zeigen wir Ihnen, wie wir unseren animierten Publikationskopf erstellt haben. Wir werden auch einige Tipps und Richtlinien zur Verwendung von GIF-Dateien auf Medium veröffentlichen.

GIFs zu Medienpublikationen

Mit Medium können Sie zwei Bilder in Ihren Veröffentlichungsheader hochladen: eines ist das Hintergrundbild und das andere das Logo.

In beiden Fällen wird das GIF-Format unterstützt, sodass Sie Ihr Publikations-Cover mit einigen schönen Animationen füllen können.

Hier sind zwei inspirierende Beispiele:

  • Backchannel (GIF als Hintergrundbild)
  • Magenta (GIF als Logo Bild)

Von CSS zu GIF

GIFs können mit vielen Tools erstellt werden. Der Weg, den wir gegangen sind, ist vielleicht nicht der einfachste, aber wir wollten ein Element verwenden, das bereits auf unserer Website vorhanden ist, und es für das Medium-Cover anpassen.

Die Animation auf unserer Website wurde mit CSS erstellt. Daher haben wir beschlossen, den vorhandenen Code zu optimieren und einen Weg zu finden, ihn in ein GIF umzuwandeln.

Aktuelles animiertes Cover von Radar

Schritt 1 - HTML und CSS

Der erste Schritt bestand darin, den vorhandenen Code anzupassen und eine HTML-Seite mit unserer Animation und demselben Hintergrund wie das Hintergrundbild zu erstellen, das wir in unserer Publikation verwenden wollten.

Wenn Sie mit ähnlichen Wortanimationseffekten spielen möchten, können Sie sich diesen Stift von Amrit Leone ansehen.

Schritt 2 - Zeichnen Sie den Bildschirm auf

Quicktime Player verfügt über eine praktische Bildschirmaufzeichnungsfunktion, mit der Sie den Bereich des Bildschirms auswählen können, den Sie aufzeichnen möchten. Das Video wird mit etwa 30 Bildern pro Sekunde aufgenommen. Daher sollte Ihre Animation nicht länger als 15 Sekunden sein (15 Sekunden = 450 Bilder).

Wenn Sie Windows verwenden, können Sie auch eine dieser Software für die Bildschirmaufnahme ausprobieren.

Schritt 3 - Transformiere .mov in GIF

Sobald Sie die Aufnahme beendet haben, haben Sie eine MOV-Datei.

Öffnen Sie Photoshop und gehen Sie zu Datei> Importieren> Videorahmen in Ebenen.

Sie können den Teil der Aufnahme auswählen, den Sie importieren und in Ebenen konvertieren möchten. Vergessen Sie nicht, das Kontrollkästchen "Frame-Animation erstellen" zu aktivieren.

Photoshop begrenzt die Frames auf 500, und Sie sollten nicht mehr als das haben, sonst wird die Datei zu schwer.

Wenn Sie das Zeitleistenfenster in Photoshop öffnen, werden alle Bilder angezeigt.

Jetzt müssen Sie nur noch die Frames als GIF exportieren. Gehen Sie dazu zu Datei> Für das Web speichern.

Sie können die Dateigröße reduzieren, indem Sie die Anzahl der Farben im Exportdialog begrenzen.

Es ist wichtig, dass die Abmessungen Ihres GIF doppelt so groß sind, wie Sie es benötigen, da die Größe des Mediums auf die Hälfte reduziert wird.

„Wir gehen davon aus, dass alle Logos Retina sind, was bedeutet, dass das Logo mit der doppelten Größe hochgeladen wird, von der wir annehmen, dass es angezeigt wird. Wenn Sie ein Logo mit einer Breite von 2000 Pixel und einer Höhe von 1000 Pixel hochladen, wird es von "Mittel" als 1000 Pixel breit und 500 Mal hoch interpretiert. "
- Mittlerer Blog

Unser endgültiges GIF hat 475 Frames und ungefähr 2 MB.

Schritt 4 - Laden Sie es auf Medium hoch

Laden Sie Ihr Hintergrundbild und Ihr Logo in Ihre Publikation hoch, und fertig.

Sie haben jetzt ein animiertes Titelbild!

Wir hoffen, Sie finden dies hilfreich. Probieren Sie es aus und teilen Sie uns mit, ob Sie GIFs in Ihrer Medium-Publikation verwenden. Wir würden uns über weitere großartige Beispiele freuen! Um weitere Geschichten zu lesen, klicken Sie einfach auf die Schaltfläche "Folgen".