Kombinieren Sie Bilder aus Adobe Stock mit CSS, um animierte Bilder für eine Web-Seite zu erstellen.
Geeignete Fotos finden.
Rufen Sie Adobe Stock auf, und suchen Sie nach geeigneten Bildern für Ihre Animation. Auf Adobe Stock können Sie anhand verschiedener Kriterien suchen. Sie können beispielsweise Stichwörter eingeben, die den Inhalt des gewünschten Fotos beschreiben.
Finden Sie ein Foto, das Ihnen gefällt, und laden Sie eine Vorschau herunter. Sie können es auch gleich in einer Creative Cloud-Bibliothek speichern.
Suchen Sie nach einem weiteren Foto, das einen Nachthimmel voller Sterne zeigt. Speichern Sie auch dieses Foto.
Himmel maskieren.
Wechseln Sie zu Photoshop. Entfernen Sie mit einer Kombination aus Schnellauswahl-Werkzeug und Ebenenmasken den Himmel aus dem Foto mit der Skyline. Speichern Sie das Foto als PNG-Datei mit Transparenz. tr
Fügen Sie hinter der Skyline einen leicht transparenten Verlauf hinzu, um den Lichterschein der Stadt gegen den Nachthimmel zu simulieren.
Erstellen Sie dann erneut eine PNG-Datei über den Befehl „Exportieren als“. Vergewissern Sie sich, dass „Transparenz“ aktiviert ist.
Weitere Sterne hinzufügen.
Vergrößern Sie die Arbeitsfläche in Photoshop, bis das Foto mit den Sternen so groß ist, dass es gedreht werden kann, ohne dass seine Ränder sichtbar werden. Wechseln Sie zum Kopierstempel, und füllen Sie die Arbeitsfläche mit Sternen, die vom Originalbild aufgenommen werden.
Über CSS in Bewegung setzen.
Fügen Sie der CSS-Regel „#stars“ eine Animationseigenschaft hinzu, und legen Sie die Werte fest. Die Sterne bewegen sich langsam und kontinuierlich, wenn Sie die Dauer auf 210 Sekunden setzen, den Animationsstil auf linear und die Anzahl der Schleifen auf unbeschränkt (infinite).
Das Ergebnis.
Durch die Kombination von Adobe Stock-Bildern und CSS haben Sie eine ansprechende Animation für Ihre Website erstellt.
Für Ihr nächstes Projekt könnte es sich lohnen, auch in dieser kuratierten Sammlung von Adobe Stock nach geeigneten Elementen zu suchen.
