Skip to content

Hintergründe, Muster und Verläufe

Wenn nichts ausgewählt ist, legt das Panel Background den Hintergrund des aktuellen Bestandteils fest. Derselbe Bereich baut dekorative Overlays und einen Verlauf mit mehreren Stopps, den du auf einen Hintergrund oder auf die Füllung eines beliebigen Objekts anwenden kannst.

Kurzüberblick

  1. Hebe die Auswahl auf und öffne dann den Tab Background (Alt+3) oder den Abschnitt Background im Eigenschaften-Panel.
  2. Wähle solid, gradient oder image für den Seitenhintergrund.
  3. Öffne Patterns (Alt+7), um ein geometrisches, ein Text-, ein Icon- oder ein Bildmuster über die Arbeitsfläche zu legen.
  4. Öffne die Karte Gradient oder den Verlaufstab eines Füllfelds, um einen Verlauf mit mehreren Stopps für einen Hintergrund oder ein Objekt zu bauen.
  5. Passe die jeweils eigenen Steuerungen für Farbe, Deckkraft und Abstand an, bis es stimmig wirkt.

Ausführliche Referenz

Seitenhintergrund

ModusHinweise
SolidEine einzelne flächige Farbe
GradientDerselbe Verlaufseditor mit mehreren Stopps, der auch für Objektfüllungen dient, siehe unten
ImageHochladen oder aus deiner Bibliothek wählen, mit einem Anpassungsmodus und, bei beschnittenen Anpassungen, einem Positionsanker

Anpassungsmodi für einen Bildhintergrund:

ModusVerhalten
FillSkaliert das Bild so, dass es die Arbeitsfläche bedeckt, und schneidet Überstehendes ab
FitSkaliert das Bild so, dass es vollständig in die Arbeitsfläche passt, ohne Beschnitt
CropFüllt die Arbeitsfläche von einem gewählten Anker aus: oben links, oben mittig, oben rechts, mittig, unten links, unten mittig oder unten rechts
TileWiederholt das Bild in seiner nativen Größe

Bildhintergründe bringen außerdem Regler für Helligkeit, Kontrast und Sättigung mit, eine Unschärfestärke, eine Voreinstellung für Graustufen/Sepia/Invertieren und ein Farb-Overlay mit eigener Deckkraft.

Geometrische Muster

Zwölf kachelnde Muster legen sich als dekorative Ebene über die Arbeitsfläche:

Muster
Diagonale Linien, Raster, Punkte, Rauten, Wellen, Sterne, Schraffur, Schachbrett, Dreiecke, Sechsecke, Kreise, Halbverblassung
SteuerungBereichStandard
FarbeBeliebige FarbeWeiß
Deckkraft5-100%30%
Abstand0,5x-5x1x
Unschärfe0-20 px0

Ein geometrisches Muster wird als ein einzelnes gesperrtes Overlay eingefügt, das die Seite hinter deinem Inhalt füllt. Ein Klick auf eine andere Musterkarte ersetzt das aktuelle Overlay, statt ein zweites darüberzustapeln, und die Steuerungen für Farbe, Deckkraft und Abstand kacheln das aktive Overlay neu, während du sie ziehst.

Kachelnde Overlays

Über die 12 geometrischen Muster hinaus kann der Abschnitt Patterns auch Text, Icons oder Bilder als wiederholendes Overlay kacheln:

TypWas gekachelt wirdZusätzliche Steuerungen
TextmusterEin wiederholtes Wort oder eine Phrase, beliebige SchriftZeilen, Spalten, Abstand, Winkel, Buchstabenabstand
Icon-MusterBis zu 8 Icons aus der Icon-Bibliothek, im Einzel-, Doppel- oder gemischten ModusRotation, Unschärfe und Skalierung je Icon
BildmusterBis zu 8 hochgeladene oder BibliotheksbilderZufällige Rotation, Unschärfe, Skalierung und Positionsstreuung für einen verstreuten Look

Alle drei teilen sich Farbe (wo relevant), Deckkraft, Anzahl der Zeilen und Spalten, Abstand und Rotationswinkel, und jedes wird als ein gruppiertes Objekt eingefügt, das du entfernen und neu anwenden kannst. Jeder Typ hat außerdem seinen eigenen Button Remove, und ein erneutes Anwenden baut die Gruppe aus den aktuellen Einstellungen neu auf.

Rasterlayout

Eine separate Karte Grid baut ein Platzhalter-Raster aus Zellen, nützlich als Ausgangslayout für eine Collage statt als Textur:

SteuerungBereichStandard
Spalten1-123
Zeilen1-122
Abstand0-40 px4 px
Eckenradius0-50 px0
Zellen-Deckkraft0-100%100%

Sechs schnelle Voreinstellungen decken gängige Layouts von 2x1 bis 4x4 ab.

Verläufe

Ein Verlaufseditor mit mehreren Stopps wird von Seitenhintergründen und der Füllung jedes beliebigen Objekts gemeinsam genutzt:

SteuerungOptionen
TypLinear, radial, angular, Raute
Stopps2 oder mehr, jeder mit eigener Position, Farbe und Deckkraft; entlang der Leiste ziehen oder Stopps hinzufügen und entfernen
FlipKehrt die Reihenfolge der Stopps um
RotateDreht den Verlauf jeweils um 90 Grad
PresetsEine kuratierte Auswahl fertiger Farbpaare und -trios
PipetteNimmt eine Farbe von einer beliebigen Stelle des Bildschirms auf, sofern der Browser das unterstützt

Öffne den Verlaufseditor über den Verlaufstab eines Füllfelds, wenn ein Objekt ausgewählt ist, oder über die Karte Gradient im Background-Panel, wenn nichts ausgewählt ist. Die Karte Gradient im Background-Panel ist eine schlanke Steuerung: Sie zeigt eine Live-Vorschau plus die Buttons Apply und Remove und spiegelt den Verlauf, der gerade im Farbwähler des rechten Panels geladen ist.

Schritt für Schritt

Ein Poster-Hintergrund mit Verlauf

  1. Klicke auf eine leere Stelle der Arbeitsfläche, um die Auswahl aufzuheben, und öffne dann den Tab Background (Alt+3).
  2. Öffne die Karte Gradient. Sie zeigt eine Live-Vorschau neben einem Button Apply und einem Button Remove.
  3. Baue den Verlauf im Verlaufstab des Farbwählers im rechten Panel: Lege den type fest (linear, radial, angular oder Raute), ziehe Stopps entlang der Leiste und gib jedem Stopp eine eigene Farbe und Deckkraft. Nutze Rotate, um einen linearen Verlauf zu drehen, oder Flip, um die Reihenfolge der Stopps umzukehren.
  4. Klicke zurück in der Karte Gradient auf Apply. Der Verlauf füllt den Seitenhintergrund und die Kartenvorschau wird passend aktualisiert.
  5. Zum Zurücksetzen klicke auf Remove (das X neben Apply). Der Hintergrund fällt auf die letzte einfarbige Farbe zurück.

Ein dezentes Muster hinter Text

  1. Öffne bei aufgehobener Auswahl Patterns (Alt+7).
  2. Klicke auf eine Musterkarte wie Dots oder Grid. Sie kachelt über die ganze Seite als gesperrtes Overlay, das hinter deinem Inhalt sitzt.
  3. Setze Color nah an die Hintergrundfarbe, damit die Textur ruhig bleibt.
  4. Senke Opacity auf ungefähr 10-20%, damit Text und Fotos lesbar bleiben.
  5. Nutze Spacing (0,5x bis 5x), um die Kachel enger oder lockerer zu setzen. Ein Klick auf eine andere Musterkarte ersetzt das aktuelle Overlay, statt ein zweites darüberzustapeln.

Ein wiederholendes Text-Wasserzeichen

  1. Öffne den Tab Background (Alt+3) und suche die Steuerungen für Text pattern.
  2. Tippe das Wort oder die Phrase ein (Standard ist BRAND), wähle dann eine font, eine size und eine weight.
  3. Lege die rows und columns des Rasters, einen gap und einen angle fest (die Standardneigung ist -45 Grad für ein diagonales Wasserzeichen).
  4. Setze die color und ziehe die opacity niedrig (Standard ist 20%).
  5. Klicke auf Apply. Das Wasserzeichen wird als eine auswählbare Gruppe eingefügt, die du verschieben oder löschen kannst, und Remove entfernt es.

Eine verstreute Bildkachel

  1. Öffne im Tab Background die Steuerungen für Image pattern.
  2. Füge bis zu 8 Bilder über den Tab Gallery hinzu oder ziehe Dateien auf den Tab Upload.
  3. Lege die size der Kachel, die rows, columns und den gap fest.
  4. Aktiviere Randomize, um die Kacheln zu verstreuen: Das ergänzt eine zufällige Rotation (plus/minus einen gewählten Bereich), eine zufällige Unschärfe, eine zufällige Skalierung bis herunter auf 0,5x und eine Positionsstreuung, sodass sich die Bilder nicht auf einem starren Raster ausrichten.
  5. Klicke auf Apply, um das Muster als eine Gruppe einzufügen. Remove entfernt es.

Häufige Aufgaben

ZielWie
Einfarbige SeitenfarbeAuswahl aufheben, Background öffnen, eine einfarbige Farbe wählen
Verlaufsfüllung auf einem ObjektObjekt auswählen, Verlaufstab seines Füllfelds öffnen, den Verlauf dort bauen
Einen Verlauf als Seitenhintergrund wiederverwendenIm Farbwähler bauen, dann Background > Karte Gradient > Apply
Zarte Marken-TexturPatterns, geringe Deckkraft, eine Farbe nahe dem Hintergrund, weiterer Abstand
Diagonales WasserzeichenTextmuster mit einem Neigungswinkel und geringer Deckkraft
Ausgangsraster für eine Foto-CollageKarte Grid, Spalten und Zeilen festlegen, dann Bilder in die Zellen ziehen

Fehlerbehebung

Der Verlauf wirkt streifig

Ein breiter Verlauf mit zwei Stopps über einer großen Fläche kann sichtbare Stufen zwischen den Farben zeigen. Füge einen Zwischenstopp hinzu oder rücke die beiden Endfarben im Farbton näher zusammen, um den Übergang zu glätten.

Ein Muster lässt ein kleines Design unruhig wirken

Eine Kachel, die in voller Größe gut liest, kann zu Rauschen werden, sobald das Design herunterskaliert wird. Erhöhe den Spacing, damit das Motiv größer und sparsamer wird, senke die Deckkraft oder wähle ein schlichteres Muster (Punkte oder diagonale Linien statt Sterne oder Sechsecke).

Das Muster verblasste, als ich die Unschärfe erhöht habe

Die Unschärfesteuerung des geometrischen Musters weicht das Overlay auf, indem sie mit steigendem Wert dessen Deckkraft absenkt, nicht durch eine echte Unschärfe. Wenn das Muster verschwindet, senke die Unschärfe und nutze stattdessen direkt den Regler Opacity.

Wende den Verlauf an, nachdem du ihn bearbeitet hast

Die Karte Gradient spiegelt den Verlauf, der gerade im Farbwähler des rechten Panels geladen ist. Wenn eine Änderung auf der Seite nicht erscheint, klicke erneut auf Apply, um die neuesten Stopps auf den Hintergrund zu übertragen.

Tastenkürzel

KürzelAktion
Alt+3Panel Background öffnen
Alt+7Panel Patterns öffnen

Tipps

Halte die Muster-Deckkraft niedrig

Muster sitzen über dem Hintergrund, aber hinter deinem Inhalt. Eine geringe Deckkraft und eine Farbe nahe dem Hintergrund halten sie davon ab, mit Text und Fotos zu konkurrieren.

Beginne einen Verlauf mit einer Voreinstellung

Wähle eine Voreinstellung und tausche dann ihre Stopp-Farben gegen deine eigenen. Das geht schneller, als einen Verlauf Stopp für Stopp zu bauen, und Richtung und Stoppanzahl sind bereits sinnvoll.

Verwandt

  • Formen für einfarbige und Verlaufsfüllungen auf einzelnen Objekten
  • Icons für das Icon-Set, das von Icon-Mustern genutzt wird
  • Eigenschaften-Panel für Objektfüllung und den Seitenabschnitt Background
  • Seiten, da jede Seite ihren eigenen Hintergrund behält