← Design-Elemente & Werkzeuge

Aussehen, Effekte und Transformationen

Zuletzt aktualisiert 22. Oktober 2026

Im Properties-Panel legst du mit drei Abschnitten fest, wie ein Element aussieht: Appearance für Kontur, Ecken und Deckkraft, Transforms zum Drehen, Skalieren und Neigen, Filters & Effects für Schatten, Filter und Links. Wie du Farben und Verläufe einstellst, steht in Farben und Verläufe einstellen.

Die Abschnitte siehst du, wenn du ein Element auf dem Canvas oder im Layers-Panel auswählst. Mit einem Klick auf den Titel klappst du einen Abschnitt auf oder zu. Transforms und Filters & Effects sind zuerst zugeklappt, bei Gruppen und Masken auch Appearance.

Appearance

Abschnitt Appearance eines Rechtecks mit angehakten Fill Color und Stroke Color: Stroke Width, Stroke Alignment, Dash, Offset, Corner Radius mit dem Button Individual corners, Opacity und Visibility.

  • Fill Color: füllt das Element mit einer Farbe oder einem Verlauf. Bei Rechtecken, Ellipsen, Pfaden, Texten, Gruppen und Masken. Bilder haben keine Füllung, sie färbst du mit Color Masking unter Filters & Effects ein.
  • Stroke Color: gibt dem Element eine Kontur, in einer Farbe oder einem Verlauf. Bei allen Elementen.
  • Stroke Width: die Breite der Kontur. Schaltest du die Kontur ein, ist sie 5 Pixel breit, bei Texten 2.
  • Stroke Alignment: ob die Kontur innen (Inside), mittig (Center) oder außen (Outside) an der Kante liegt. Standardmäßig Center. Für die Kontur der Buchstaben eines Texts gibt es das nicht.
  • Dash: durchgezogene, gestrichelte oder gepunktete Kontur. Das Menü zeigt die drei Linien als Vorschau. Bei einer gestrichelten oder gepunkteten Linie erscheinen Length für die Länge der Striche und Gap für die Lücken.
  • Offset: verschiebt die Striche entlang der Kontur.
  • Corner Radius: rundet die Ecken ab. Bei Rechtecken, Bildern, Gruppen und Masken. Mit dem Button daneben (Individual corners) stellst du jede Ecke einzeln ein.
  • Opacity: die Deckkraft, von 0 (unsichtbar) bis 100 (voll sichtbar).
  • Visibility: blendet das Element mit dem Augen-Symbol aus und ein. Verbindest du die Eigenschaft mit einem Checkbox-Input-Feld, schalten Nutzer das Element selbst ein und aus. Wie das geht, steht in Checkbox-Input-Feld erstellen: Element ein- und ausblenden lassen.

Gruppen und Masken haben zusätzlich Background Clip und Padding für ihre Füllung, Texte eigene Eigenschaften für ihren Hintergrund. Sie stehen in Elemente gruppieren: zusammen bewegen und anordnen, Elemente maskieren: Bild auf eine Form zuschneiden und Text-Eigenschaften.

Transforms

  • Translate: verschiebt das Element um zusätzliche Pixel, mit X und Y. Die eigentliche Position stellst du unter Position & Size ein.
  • Scale: streckt oder staucht das Element, mit X und Y. 1 ist die Originalgröße, 2 die doppelte.
  • Rotate: dreht das Element um die angegebenen Grad. Bei Rechtecken und Ellipsen steht derselbe Wert auch als Rotation unter Position & Size.
  • Skew: neigt das Element, mit X ° und Y °.

Bei Texten kommen am Ende zwei Einstellungen dazu:

  • Rotate Text: Line ° dreht jede Zeile, Char ° jeden Buchstaben für sich.
  • Skew Lines: neigt jede Zeile, mit X ° und Y °.

Drehen, Skalieren und Neigen wirken um den Origin des Elements. Bei Gruppen steht er oben in Transforms, bei Rechtecken, Ellipsen, Pfaden, Texten und Bildern unter Position & Size. Masken haben keinen eigenen Origin.

Drehen geht auch direkt auf dem Canvas: Fährst du knapp außerhalb einer Ecke des ausgewählten Elements, wird der Mauszeiger zu einem Drehpfeil. Ziehst du dann, dreht sich das Element.

Opacity und die Werte unter Transforms kannst du mit Keyframes animieren, siehe Template animieren: ein Video mit bewegten Elementen erstellen. Spiegeln kannst du nur Bilder, mit Flip in den Bild-Eigenschaften.

Abschnitt Transforms eines Rechtecks: Translate, Scale, Rotate auf 20 und Skew.

Das um 20° gedrehte Rechteck auf dem Canvas.

Gedrehte Elemente und das Anchoring-Werkzeug

Das Anchoring-Werkzeug funktioniert auch mit gedrehten Elementen, aber mit Einschränkungen. Das gilt, sobald ein Wert unter Transforms vom Standard abweicht, nicht nur bei Rotate.

  • Das Werkzeug nutzt den geraden Rahmen um das gedrehte Element. Beim Ziehen enthält das Label .bbox.
  • Ein gedrehtes Element verbindest du nur Kante an Kante. Surfaces und die Griffe für die Größe gibt es dafür nicht.
  • Eine gedrehte Gruppe lässt sich nicht verbinden. Das gilt auch für Elemente in einer gedrehten Gruppe und für gedrehte Elemente in einer Gruppe oder Maske.

Filters & Effects

Jeder Effekt hat ein Kästchen. Setzt du den Haken, erscheinen seine Einstellungen darunter. Nimmst du ihn heraus, ist der Effekt wieder weg. Welche Effekte du siehst, hängt vom Element ab:

  • Rechtecke, Ellipsen, Pfade und Texte: Drop Shadow, Invert und Hue Rotate.
  • Bilder, Gruppen und Masken: zusätzlich Blur, Grayscale, Sepia, Filter Opacity, Exposure, Contrast, Saturate, Brightness und Gradient Map.
  • Bilder: außerdem Color Masking.
  • Alle Elemente: Link ganz oben im Abschnitt.

Die Effekte in der Reihenfolge des Abschnitts:

  • Link: macht das ganze Element zu einem klickbaren Link, zum Beispiel in einem PDF-Export. Du gibst die Webadresse in das Feld darunter ein.
  • Color Masking (Bilder): färbt alle sichtbaren Teile des Bildes in einer Farbe oder einem Verlauf ein, durchsichtige Teile bleiben leer. Gut für Icons und Logos mit durchsichtigem Hintergrund. Ein Foto ohne durchsichtige Stellen wird zu einer einfarbigen Fläche. Startet mit Schwarz.
  • Blur: macht das Element unscharf, mit getrennten Werten für X und Y. Startet bei 0.
  • Drop Shadow: ein Schatten hinter dem Element. Du stellst Winkel (°), Abstand (↘), Farbe, Deckkraft, Unschärfe (blur) und quality ein. Zu Beginn ist es ein scharfer schwarzer Schatten, 10 Pixel unter dem Element.
  • Grayscale, Sepia und Invert: Die Stärke reicht von 0 bis 1. Sie starten bei 0, du siehst also erst eine Änderung, wenn du den Wert erhöhst.
  • Hue Rotate: verschiebt alle Farben im Farbkreis, von 0 bis 360°. Startet bei 0.
  • Filter Opacity: eine zusätzliche Transparenz von 0 bis 1. Startet bei 1. Für die normale Transparenz nimmst du Opacity unter Appearance.
  • Exposure, Contrast, Saturate und Brightness: je ein Wert für Red, Green und Blue, von 0 bis 1. Sie starten bei 0,5.
  • Gradient Map: färbt das Element nach Helligkeit ein. Dunkle Stellen bekommen die Farben am Anfang des Verlaufs unter Color Stops, helle Stellen die am Ende. Zu Beginn geht der Verlauf von Schwarz nach Weiß. Mit dem Plus unter der Liste fügst du eine Farbe hinzu.

Abschnitt Filters & Effects mit aktiviertem Drop Shadow und seinen Einstellungen für Winkel, Abstand, Farbe, Deckkraft und Unschärfe.