Erstellen Sie ein Hintergrundbild für eine bestimmte Bildschirmgröße oder beginnen Sie mit einer voreingestellten Auflösung und passen Sie das Design an. Die Vorschau ist klein; das Bild in voller Größe wird erst erstellt, wenn Sie „Bild herunterladen“ auswählen. Legen Sie daher vor dem Export Größe und Ebenen fest.
Alle Bilder werden lokal in Ihrem Browser erstellt. Text bleibt einfacher lokaler Text in einer Systemschriftart. Es werden keine Dateien hochgeladen, externen Bilder oder externen Schriftarten verwendet.
So verwenden Sie den Hintergrundbild-Editor
- Wählen Sie eine Voreinstellung für die Ausgabeauflösung, zum Beispiel 1920x1080, 1080x1920 oder 1080x1080, oder wählen Sie „Benutzerdefiniert“ und geben Sie Werte für „Ausgabebreite (Pixel)“ und „Ausgabehöhe (Pixel)“ ein.
- Legen Sie die „Primärfarbe“ fest und wählen Sie anschließend eine „Hintergrundfüllung“: einfarbig, linear oder radial. Passen Sie für einen Farbverlauf den „Verlaufswinkel (Grad)“ an oder wählen Sie bei „Verlaufsvoreinstellung“ die Option „Meer“ oder „Abenddämmerung“. Mit „Stopp hinzufügen“ und „Stopp entfernen“ bearbeiten Sie die Verlaufsstopps.
- Um eine Textur hinzuzufügen, wählen Sie „Musterebene einschließen“ und dann einen „Mustertyp“: Punkte, Streifen, Raster, diagonal, Wellen oder Kacheln. Passen Sie bei Bedarf „Mustergröße (Ausgabepixel)“, „Abstand (Pixel)“, „Strichstärke (Pixel)“, „Drehung (Grad)“ und „Musterversatz (Pixel)“ an.
- Um Text hinzuzufügen, wählen Sie „Textebene einschließen“, geben Sie den „Hintergrundbildtext (nur lokal)“ ein und wählen Sie anschließend „Textfarbe“, „Systemschriftart“, „Textgröße (Pixel)“ und „Textausrichtung“. Legen Sie mit „Text X (%)“ und „Text Y (%)“ die Position fest.
- Verwenden Sie „Dekorative Kreise (0–12)“, um Formen hinzuzufügen. Wählen Sie ein „Bildformat“ – PNG, JPG oder WEBP – und anschließend „Bild herunterladen“, um das Hintergrundbild in voller Größe zu erstellen und zu speichern. Auch „Aus Seed generieren“ und „CSS des Basisverlaufs kopieren“ sind verfügbar.
Wählen Sie „Vollbild“, um das Design größer anzuzeigen. Drücken Sie F, um den Vollbildmodus zu aktivieren, Escape, um ihn zu verlassen, und R, um zurückzusetzen. Im Vollbildmodus stehen die angezeigten Optionen „Vollbild beenden“, „Steuerelemente ausblenden“ und „Beenden“ zur Verfügung.
Wann Sie das Tool verwenden können
- Ein Hintergrundbild an eine bestimmte Anzeige anpassen: Legen Sie Breite und Höhe benutzerdefiniert fest oder wählen Sie eine Voreinstellung für einen Desktop- oder Smartphonebildschirm.
- Einen Hochformat-Hintergrund für ein Smartphone erstellen: Beginnen Sie mit 1080x1920 und positionieren Sie dann ein kurzes Textelement mit „Text X (%)“ und „Text Y (%)“.
- Einen schlichten Desktop-Hintergrund gestalten: Verwenden Sie eine einfarbige Füllung oder einen linearen Farbverlauf für einen klaren Hintergrund ohne zusätzliche Bilder.
- Eine visuelle Textur hinzufügen: Aktivieren Sie eine Musterebene, wenn eine einfache Farbe zu leer wirkt, und passen Sie Abstand oder Größe an.
- Einen Hintergrund rund um eine kurze Nachricht gestalten: Fügen Sie eine lokale Textebene hinzu und legen Sie Ausrichtung, Schriftart, Größe, Farbe und Position fest.
- Farbkombinationen ausprobieren: Ändern Sie Primärfarbe, Verlaufseinstellungen und Musteroptionen, bevor Sie eine fertige Version herunterladen.
- Eine wiederverwendbare Verlaufsbasis erstellen: Kopieren Sie das CSS des Basisverlaufs, wenn Sie nur den Verlauf benötigen; Muster, Text und Formen sind darin nicht enthalten.
Tipps für ein besseres Hintergrundbild
Achten Sie darauf, dass das Design bei der geplanten Anzeigegröße gut lesbar bleibt. Mit Textausrichtung und -position können Sie um Symbole herum freie Flächen lassen. Ein dezentes Muster sorgt für Details, ohne den Hintergrund zu dominieren. Als schnelle Ausgangspunkte bietet der Hintergrundbild-Editor außerdem die Verlaufsvoreinstellungen „Meer“ und „Abenddämmerung“.
Für eine genaue Positionierung können Sie „Text X (%)“ und „Text Y (%)“ ausprobieren und nach der Wahl der Ausgabeabmessungen die „Textgröße (Pixel)“ anpassen. Verlaufsstopps an derselben Position erzeugen harte Kanten. Verteilen Sie die Stopps, wenn Sie einen weicheren Übergang möchten. Verwenden Sie „Aus Seed generieren“, um eine Variation mit Seed zu erstellen, oder „CSS des Basisverlaufs kopieren“, um die Beschreibung des Basisverlaufs zu kopieren.
Einschränkungen und Hinweise zur Ausgabe
Die Vorschau entspricht nicht dem Export in voller Auflösung: Das vollständige Bild wird erst erstellt, wenn Sie „Bild herunterladen“ auswählen. Die Ausgabe kann bis zu 33.177.600 Pixel umfassen; eine Ausgabe in 8K hängt von Ihrem Gerät ab. Wenn ein besonders großer Export langsam ist oder nicht abgeschlossen wird, versuchen Sie es mit einer niedrigeren Auflösung.
JPG und WEBP können Pixelwerte verändern. Wählen Sie daher PNG, wenn die generierten Werte erhalten bleiben sollen. „CSS des Basisverlaufs kopieren“ beschreibt nur den Basisverlauf; die Musterebene, der Text und die dekorativen Formen sind nicht enthalten. Aus demselben Grund lässt sich ein Hintergrundbild mit diesen zusätzlichen Ebenen nicht allein anhand dieses CSS nachbilden.
Dieses Tool dient zum Erstellen von Hintergründen und Hintergrundbildern und ist kein Bildbearbeitungsprogramm: Der Text verwendet Systemschriftarten und das Tool nutzt weder hochgeladene Bilder noch externe Schriftarten. Für einen schlichten einfarbigen Hintergrund ist der Generator für einfarbige Hintergründe möglicherweise ein einfacherer Ausgangspunkt.
