Wednesday, September 20, 2023

Über Masken – Google Web Designer-Hilfe [gg-webdesigner-en]

Über Masken

Maskierung

Eine Maske verbirgt einen Teil eines Hostelements basierend auf einer Form oder Transparenzstufen. Hostelemente können Bilder, Divs, Textcontainer und Komponenten sein.

Jedes Element kann nur eine Maske haben, aber Sie können Masken überlagern, indem Sie das Hostelement in ein Div einschließen und eine Maske auf das Container-Div anwenden. Sie können auch ein anderes Element innerhalb des Hostelements verschachteln und dem untergeordneten Element eine Maske hinzufügen.

Auf dieser Seite:

Maskentypen

Browser-Kompatibilität

Microsoft Edge-Versionen 40 und älter unterstützen nur rechteckige Clippfadmasken . Andere Maskentypen und -formen werden ignoriert.

Bildmaske

Bildmasken nutzen die transparenten Bereiche eines Bildes, um das Hostelement auszublenden.

Host-Element

Bildmaske

Ergebnis

So fügen Sie eine Bildmaske hinzu:

  1. Klicken Sie mit der rechten Maustaste auf das Element, das Sie maskieren möchten.
  2. Wählen Sie im Popup-Menü die Option Bildmaske hinzufügen... aus.
  3. Importieren Sie das Bild, das Sie als Maske verwenden möchten, oder wählen Sie es aus.

Sie können die Größe und Position der Maske mit dem Auswahlwerkzeug anpassen oder das Eigenschaftenfenster.

Hinweis: Bildmasken können keine prozentuale Positionierung verwenden.

Verlaufsmaske

Verlaufsmasken verbergen das Hostelement entsprechend einem Verlauf von Transparenzstufen.

Host-Element

Verlaufsmaske

Ergebnis

Google Web Designer unterstützt beide Arten von Farbverläufen für Masken:

  • Linearer Farbverlauf
  • Radialer Farbverlauf

So fügen Sie eine Verlaufsmaske hinzu:

  1. Klicken Sie mit der rechten Maustaste auf das Element, das Sie maskieren möchten.
  2. Wählen Sie im Popup-Menü die Option „Verlaufsmaske hinzufügen" aus.
  3. Klicken Sie im Eigenschaftenbedienfeld auf das Farbverlaufsfeld, um den Verlaufstyp, die Farben, die Deckkraft und den Winkel anzupassen (nur für lineare Farbverläufe).

Standardmäßig hat die Verlaufsmaske dieselbe Größe wie das Hostelement, Sie können jedoch die Positions- und Größeneigenschaften der Maske mit dem Auswahlwerkzeug anpassen oder das Eigenschaftenfenster.

Hinweis: Verlaufsmasken können keine prozentuale Positionierung verwenden.

Clip-Pfad-Masken

Clippfadmasken verwenden eine geometrische Form, um zu definieren, welcher Teil des Hostelements angezeigt werden soll.

Host-Element

Clip-Pfad-Maske

Ergebnis

Sie können den Typ der Maskenform auswählen, indem Sie in der Symbolleiste auf das Werkzeug „Clip-Pfad-Maske" klicken und es gedrückt halten, bis ein Popup-Menü angezeigt wird:

Rechteckmaske (Standard)
Ovale Maske
Polygonmaske

Browser-Kompatibilität

  • Internet Explorer und Microsoft Edge unterstützen nur Clippfadmasken in Rechteckformen, deren Position und Größe in Pixel angegeben sind. Prozentbasierte Masken und andere Maskenformen, einschließlich abgerundeter Ecken für Rechteckmasken, werden ignoriert.

  • Firefox und Safari stellen Rechteckmasken mit abgerundeten Ecken bei großen Eckenradiuswerten (im Vergleich zu den Maskenabmessungen) möglicherweise nicht korrekt dar.

  • Safari unterstützt keine Beschneidungspfadmasken für Formen, die mit dem Rechteck-Werkzeug gezeichnet wurden . Um dieses Problem zu umgehen, verwenden Sie ein div Element anstelle einer Rechteckform und platzieren Sie die Maske auf dem div Element.

  • In Chrome und Opera werden Clippfadmasken falsch gerendert, wenn das Hostelement ein 3D-transformiertes untergeordnetes Element enthält.

  • Rechteckmasken mit abgerundeten Ecken, die mithilfe eines prozentualen Radius festgelegt wurden, werden in verschiedenen Browsern möglicherweise etwas unterschiedlich dargestellt.

So fügen Sie eine Clippfadmaske hinzu:

  1. Wählen Sie das Element aus, das Sie maskieren möchten.
  2. Wählen Sie das Maskenwerkzeug für die gewünschte Form aus.
  3. Legen Sie zusätzliche Optionen für die Maskenform fest.
    • Nur für Rechteckmasken: Legen Sie für abgerundete Ecken den Eckenradius in der Werkzeugoptionsleiste oben fest. Verwenden Sie das Identische beibehalten Klicken Sie auf die Schaltfläche, um für alle vier Ecken den gleichen Radius zu verwenden.
    • Nur Polygonmasken: Wählen Sie oben in der Werkzeugoptionsleiste die gewünschte Form aus. Verwenden Sie die Option „Freiform" , um Ihre eigene Form zu zeichnen. Wenn Sie die Option „Regelmäßiges Polygon" auswählen, geben Sie die Anzahl der gewünschten Polygonseiten ein.
  4. Zeichnen Sie die Maske über das Hostelement.
    • Halten Sie beim Zeichnen die Umschalttaste gedrückt, um die Maske so einzuschränken, dass sie die gleiche Breite und Höhe hat. Die Umschalttaste hat keinen Einfluss auf Freiformmasken oder bestimmte voreingestellte Formen, die stattdessen immer mit gleich langen Seiten gezeichnet werden: Dreieck, Raute, Fünfeck, Sechseck und Stern.
    • Halten Sie die Alt- Taste gedrückt, um die ursprüngliche Zeichenposition als Mittelpunkt der Maske zu verwenden.

Hinweis: Nachdem eine Polygonmaske gezeichnet wurde, können Sie jeden Scheitelpunkt ziehen, um die Maskenform zu ändern, aber Sie können die Anzahl der Seiten nicht ändern.

Polygonmaskenformen
Freiform (zeichnen Sie Ihre eigene Form)
Regelmäßiges Polygon (Anzahl der Seiten festlegen; Seiten werden mit gleicher Länge gezeichnet)
Dreieck
Rechteck
Rahmen
Rhombus
Pentagon
Hexagon
Richtiger Chevron
Linker Chevron
Kreuzen
Stern
Rechter Pfeil
Linker Pfeil

Auswählen von Masken

  • Auf der Bühne: Wählen Sie das Hostelement aus und klicken Sie dann auf die Maske. Die Maske wird grün umrandet.

  • In der Zeitleiste im erweiterten Modus: Wählen Sie die Maskenebene unter der Hostelementebene aus. Maskenebenen werden durch das gekennzeichnet Symbol vor dem Ebenennamen.

Sie können Maskenebenen in der Zeitleiste im erweiterten Modus ausblenden und sperren, um einfacher mit den Host-Elementen arbeiten zu können.

Auswahl mehrerer Masken

Verwenden Sie Strg + Klicken, um in der Zeitleiste des erweiterten Modus mehrere Maskenebenen auszuwählen, um sie alle auf einmal zu löschen. Sie können nicht mehr als eine Maske gleichzeitig bearbeiten.

Sie können eine Mischung aus Elementen und Masken nur löschen, wenn die Hostelemente für die Masken in der Auswahl enthalten sind.

Bearbeiten von Masken

Sie können Masken direkt auf der Bühne oder über das Eigenschaftenfenster bearbeiten. CSS-Eigenschaften für Masken sind im CSS-Bedienfeld nicht verfügbar.

Masken können auf folgende Weise bearbeitet werden:

Schneiden Sie eine Maske aus, kopieren Sie sie und fügen Sie sie ein

Mit einer der folgenden Methoden können Sie eine Maske ausschneiden oder kopieren und in ein anderes Element, sogar in ein anderes Dokument, einfügen:

  • Auf der Bühne oder in der Zeitleiste im erweiterten Modus:
    • Klicken Sie mit der rechten Maustaste auf die Maske und wählen Sie Ausschneiden oder Kopieren .
    • Klicken Sie mit der rechten Maustaste auf das Element, das Sie maskieren möchten, und wählen Sie „Maske einfügen " oder „Maske ersetzen" aus .
  • In der Zeitleiste im erweiterten Modus:
    • Ziehen Sie die Maskenebene auf eine Elementebene, um die Maske auf ein anderes Hostelement umzustellen (nicht verfügbar zum Ersetzen einer Maske).
    • Halten Sie die Alt- Taste gedrückt, während Sie eine Maskenebene ziehen, um die Maske auf ein anderes Element zu kopieren (nicht verfügbar zum Ersetzen einer Maske).
  • Tastatürkürzel:
    • Ausschneiden – Strg + X (Windows) oder ⌘ + X (Mac)
    • Kopieren – Strg + C (Windows) oder ⌘ + C (Mac)
    • Einfügen – Strg + V (Windows) oder ⌘ + V (Mac)
  • Menübefehle:
    • Bearbeiten > Ausschneiden
    • Bearbeiten > Kopieren
    • Bearbeiten > Maske einfügen oder ersetzen

Eventuelle Maskenanimationen werden ebenfalls eingefügt.

Einschränkungen beim Kopieren und Einfügen von Masken

  • Sie können nur eine einzelne Maske zum Ausschneiden oder Kopieren und ein einzelnes Element zum Einfügen der Maske auswählen.
  • Durch Einfügen einer Maske in ein Element, das bereits über eine Maske verfügt, wird die vorhandene Maske ersetzt.
  • Masken können in Medienregeln nicht ausgeschnitten, kopiert oder eingefügt werden.

Verschieben Sie eine Maske

Wählen Sie die Maske aus, die Sie verschieben möchten, und verwenden Sie dann eine der folgenden Methoden:

  • Bearbeiten Sie die Eigenschaften der oberen und linken Position im Eigenschaftenfenster . Diese Werte beziehen sich auf die obere linke Ecke des Hostelements.
  • Verwenden Sie die Pfeiltasten, um die Maske um jeweils ein Pixel zu verschieben. Halten Sie die Umschalttaste gedrückt und drücken Sie gleichzeitig eine Pfeiltaste, um die Maske um 10 Pixel zu verschieben.
  • Verwenden Sie das Auswahlwerkzeug um die Maske mit der Maus zu ziehen. Halten Sie beim Ziehen die Umschalttaste gedrückt, um die Maske nur entlang einer einzelnen Achse zu verschieben.

Masken können außerhalb der Grenzen ihres Hostelements positioniert werden.

Hinweis: Bildmasken und Verlaufsmasken können keine prozentuale Positionierung verwenden.

Größe einer Maske ändern

Wählen Sie die Maske aus, deren Größe Sie ändern möchten, und gehen Sie dann wie folgt vor:

  • Bearbeiten Sie die Breiten- und Höheneigenschaften im Eigenschaftenfenster .
  • Verwenden Sie das Auswahlwerkzeug mit aktivierter Option „Transformationssteuerung " in der Werkzeugoptionsleiste oben.
    • Halten Sie beim Ziehen die Umschalttaste gedrückt, um das Seitenverhältnis beizubehalten.
    • Halten Sie beim Ziehen die Alt- (Windows) bzw. Wahltaste (Mac) gedrückt, um die Größe der Maske zu ändern, ohne ihren Mittelpunkt zu ändern.

Eine Maske drehen

Masken können nicht direkt gedreht werden, aber Sie können den gleichen Effekt erzielen, indem Sie vor dem Hinzufügen der Maske die folgenden Schritte ausführen:

  1. Wickeln Sie das Element ein, das Sie maskieren möchten.
  2. Fügen Sie die Maske zum Container-Div hinzu.
  3. Drehen Sie den Behälterteil. Auch die Maske dreht sich.
  4. Drehen Sie das ursprüngliche Element in die entgegengesetzte Richtung.

Ändern Sie die Quelle einer Bildmaske

Sie können das für eine Bildmaske verwendete Bild austauschen, indem Sie die folgenden Schritte ausführen:

  1. Wählen Sie die Maske aus.
  2. Klicken Sie im Bedienfeld „Eigenschaften" im Feld „Quelle" auf die Schaltfläche „Bildmaske festlegen" .
  3. Wählen Sie ein Bild aus der Bibliothek aus oder klicken Sie auf Assets importieren Klicken Sie auf die Schaltfläche, um ein anderes Bild zu verwenden.
  4. Klicken Sie auf OK .

Ändern Sie den Verlauf einer Verlaufsmaske

Sie können den für eine Verlaufsmaske verwendeten Verlauf anpassen.

  1. Wählen Sie die Maske aus.
  2. Klicken Sie im Eigenschaftenbedienfeld auf das Farbverlaufsfeld.
  3. Bearbeiten Sie den Farbverlauf:
    • Verlaufstyp: Wählen Sie den linearen Verlauf aus oder Radialer Farbverlauf Taste.
    • Übergangsabstand: Ziehen Sie eine Transparenzmarkierung oben an der Verlaufsleiste entlang, um den Übergangsabstand zu ändern.
    • Transparenz: Transparenzmarkierungen legen den Grad der Deckkraft an einem bestimmten Punkt entlang des Farbverlaufs fest. 100 % gibt an, dass das Hostelement vollständig sichtbar ist, und 0 % gibt an, dass das Hostelement vollständig ausgeblendet ist. Klicken Sie auf eine Transparenzmarkierung, um deren Deckkraft im Prozentfeld rechts zu bearbeiten.
    • Zusätzliche Transparenzmarkierungen: Um weitere Transparenzmarkierungen hinzuzufügen, klicken Sie auf die Verlaufsleiste. Um eine Transparenzmarkierung zu entfernen, ziehen Sie sie nach unten.
    • Winkel: Bei linearen Farbverläufen können Sie den Winkel anpassen.
    • Standard: Klicken Sie auf den Standardverlauf Klicken Sie auf die Schaltfläche, um den Farbverlauf auf die Standardeinstellungen zurückzusetzen (ein linearer Farbverlauf von 0 % bis 100 % bei 90 Grad).

Ändern Sie die Krümmung der Ecken einer Rechteckmaske

Sie können die Ecken einer Rechteckmaske in quadratische oder abgerundete Ecken ändern und den Krümmungsradius abgerundeter Ecken anpassen.

  1. Wählen Sie die Maske aus.
  2. Passen Sie im Eigenschaftenfenster den Eckenradius entweder in Pixeln oder als Prozentsatz an. Wenn Sie den Radius auf 0 setzen, wird die Ecke quadratisch.
  3. Wenn das identisch bleibt Ist die Schaltfläche aktiv, gilt für alle vier Ecken der gleiche Wert. Deaktivieren Sie die Schaltfläche um jede Ecke einzeln zu konfigurieren.

Ändern Sie die Form einer Polygonmaske

Sie können die Form einer Polygonmaske auf der Bühne anpassen:

  1. Wählen Sie die Maske aus.
  2. Wählen Sie die Polygonmaske aus Werkzeug aus der Symbolleiste. An jedem Scheitelpunkt werden Griffe angezeigt.
  3. Ziehen Sie jeden Scheitelpunkt an die gewünschte Stelle.
    • Halten Sie beim Ziehen die Umschalttaste gedrückt, um den Scheitelpunkt nur entlang einer einzigen Achse (vertikal oder horizontal) zu verschieben.

Hinweis: Sie können die Anzahl der Seiten für eine vorhandene Polygonmaske nicht ändern.

Animierende Masken

Sie können die Größe und Position einer Maske animieren . Sie können Sichtbarkeitsbereiche auch verwenden, um zu steuern, wann eine Maske angezeigt oder ausgeblendet wird. Die Maskenanimation ist unabhängig von der Animation des Hostelements.

Eine animierte ovale Maske

Bei rechteckigen Masken können Sie abgerundete Ecken animieren. Bei Polygon-Clip-Pfad-Masken können Sie auch die Form der Maske (jedoch nicht die Anzahl der Seiten) animieren, indem Sie die Scheitelpunkte an einem Keyframe neu positionieren.

Masken können nicht in mehreren Frames bearbeitet werden. Wählen Sie jeweils einen Keyframe aus, um die Maskenanimation zu bearbeiten.

Hinweis: Beim Animieren von Bildmasken mit langsameren Geschwindigkeiten kann es zu einem Jitter-Effekt kommen, da gebrochene Pixelwerte zwischen Keyframes gerundet werden.

Browser-Kompatibilität

Clippfad-Maskenanimationen werden in Safari nicht abgespielt, wenn Ihr Dokument <canvas> -Elemente enthält, z. B. für die Übergangsgalerie-, Bildeffekt- oder Partikeleffektkomponente.

Masken in responsiven Layouts

Mit Medienregeln können Sie Maskeneigenschaften und Animationen für bestimmte Größenbereiche des Ansichtsfensters überschreiben. Bei Bildmasken können Sie auch die Quelle überschreiben, um ein anderes Bild zu verwenden. Bei Verlaufsmasken können Sie den Verlauf ändern.

Hinweis: Durch das Entfernen der Überschreibung für eine Positions- oder Größeneigenschaft werden automatisch beide Positionseigenschaften (oben und links) oder beide Größeneigenschaften (Breite und Höhe) zurückgesetzt. Bei Clippfadmasken werden alle Positions- und Größeneigenschaften zurückgesetzt.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)