Allgemeine Formatierung, Stil und Farbe

Sobald Design-Elemente – Schablonen, Vorlagen, Bilder und Icons – zur Seite hinzugefügt werden, werden sie Objekte genannt.

Alle Objekte – Schablonen, Icons und Bilder – können im Format-Panel gestaltet und angepasst werden – und sie teilen viele der gleichen Formatierungssteuerelemente.

Bilder haben auch zusätzliche Bearbeitungswerkzeuge wie Zuschneiden, Hintergrundentfernung und Retouche, über die Sie in Bilder formatieren, bearbeiten und ersetzen lesen können.

In diesem Artikel stellen wir Ihnen das Format-Panel vor und zeigen Ihnen, wie Sie Schablonen mit den allgemeinen Formatierungssteuerungen anpassen können, die für alle Objekte gelten. Wir zeigen Ihnen auch, wie Sie einen benutzerdefinierten Stil für eine bestimmte Schablone speichern können.

Einige Schablonen haben ihre eigenen zusätzlichen Formatierungssteuerungen, die für ihre Verwendung spezifisch sind: Notizen & Anmerkungen, Smart Shapes, Diagramme, Tabellen und alle Diagramm- und Textbasierten Schablonen. Wir werden jeden dieser spezifischen Fälle in den folgenden Artikeln dieses Abschnitts behandeln.

Format-Panel

Gehen Sie zur Rechten Seitenleiste und klicken Sie auf den Format-Tab. Der Tab wird blau und öffnet das Format-Panel. Das Format-Panel öffnet sich auch automatisch, wenn Sie auf eine Nicht-Text-Schablone doppelklicken (während das Doppelklicken auf eine Textschablone das Schnellformat-Textfenster öffnet).

Das Format-Panel ist in Abschnitte mit spezifischen Formatierungssteuerungen unterteilt. Die Abschnitte sind einklappbar, sodass das Klicken auf den Namen eines Abschnitts diesen Abschnitt ausblendet oder anzeigt.

Das Panel zeigt immer die Standardabschnitte an, die allen Schablonen gemein sind: Größe & Position, Füllungen & Konturen, Transparenz, Schlagschatten und Weichzeichner.

Wenn eine Schablone zusätzliche Gestaltungsmöglichkeiten für ihre Verwendung hat, zeigt das Panel einen dedizierten Abschnitt mit diesen Optionen an. Wir behandeln jeden dieser Fälle in den folgenden Artikeln.

Auswählen, Größe ändern, positionieren, drehen und spiegeln

Wenn Sie ein einzelnes Objekt auswählen, wird der Name des Objekts oben im Panel angezeigt, direkt über seinen Koordinaten. Dies erleichtert das Auffinden und Identifizieren dieses Objekts im Gliederungs-Panel.

Wenn Sie mehrere Objekte auswählen, zeigt das Panel die Anzahl der Objekte in dieser Gruppe an, um Ihnen zu helfen, Ihre Auswahl zu bestätigen, bevor Sie Stiländerungen oder Transformationen anwenden.

Die Steuerungen für Größe, Position, Rotation und Spiegelung sind unterhalb der Koordinaten gruppiert, und jede dieser Aktionen kann sowohl im Panel als auch auf der Seite ausgeführt werden.

Größe

Verwenden Sie auf der Seite die Größenänderungsgriffe, um die Größe des Objekts zu ändern.

Verwenden Sie im Format-Panel die Eingaben für Breite & Höhe für präzise Werte und Feinabstimmungen, und verwenden Sie die Pfeiltasten auf der Tastatur, wenn Sie diese Werte schrittweise ändern möchten.

Sperren Sie die Proportionen eines Objekts mit der Schaltfläche Seitenverhältnis sperren. Nachdem ein Objekt gesperrt ist, müssen Sie das Seitenverhältnis entsperren, wenn Sie die Größe auf der horizontalen oder vertikalen Achse ändern möchten.

Position

Wählen Sie auf der Seite ein Objekt aus und ziehen Sie es an die gewünschte Position.

Legen Sie im Format-Panel die Position des Objekts fest, indem Sie die genauen Koordinaten in die Eingabefelder eingeben. Die Position Ihres Objekts wird in Pixel-Abstand sowohl vom linken als auch vom oberen Rand gemessen. Sie können die Pfeiltasten Ihrer Tastatur verwenden, um diese Werte schrittweise zu ändern.

Drehen

Klicken Sie auf der Seite auf den Rotationsgriff oben am Objekt und ziehen Sie zum Drehen.

Geben Sie im Format-Panel den Gradwert in das Rotations-Eingabefeld ein. Sie können den Wert mit den Pfeiltasten der Tastatur ändern.

Das Doppelklicken auf den Rotationsgriff setzt den Rotationswinkel schnell auf „0" zurück.

Spiegeln

Sie können ein Objekt sowohl horizontal als auch vertikal spiegeln.

Wählen Sie auf der Seite einen Größenänderungsgriff aus und ziehen Sie ihn über die Mittellinie dieses Objekts, um gleichzeitig die Größe zu ändern und zu spiegeln.

Im Format-Panel spiegeln die vertikalen und horizontalen Spiegelungsschaltflächen das Objekt, während seine Größe und sein Seitenverhältnis beibehalten werden.

Massentransformation

Unser Massentransformations-Werkzeug ermöglicht es Ihnen, mehrere Objekte gleichzeitig zu formatieren. Diese Funktion ist standardmäßig aktiviert und benutzerbasiert (d.h. wenn Sie sie aktivieren oder deaktivieren, wird diese Präferenz auf alle Ihre Projekte angewendet).

Sobald Sie die Objekte ausgewählt haben, die Sie transformieren möchten, können Sie dieselbe Größe (Breite und/oder Höhe) oder dieselben X- oder Y-Koordinaten anwenden. Sie können sie auch massenweise drehen oder spiegeln, entweder horizontal oder vertikal.

Dies hilft dabei, die Dinge ordentlich und organisiert zu halten – unabhängig davon, ob Sie an Wireframes, Diagrammen oder Whiteboards arbeiten. Konsistente Größen und Positionen machen jedes Layout auf einen Blick leichter lesbar.

So verwenden Sie das Massentransformations-Werkzeug:

1. Überprüfen Sie das Format-Panel und stellen Sie sicher, dass die Schaltfläche Massentransformation aktiviert ist.
2. Wählen Sie mehrere Objekte durch Maus-Ziehen über Elemente aus oder verwenden Sie Shift + Klick, um sie einzeln auszuwählen.
3. Geben Sie neue Abmessungen in die Breite/Höhe-Eingaben oder neue Koordinaten in die X/Y-Eingaben ein.
4. Wenn Sie die Massentransformationsfunktion deaktivieren möchten, klicken Sie einfach erneut auf die Schaltfläche.

Sie können auch die Größe oder Koordinaten von einem Objekt auf die restlichen Objekte in der Auswahl anwenden:

1. Klicken Sie auf ein beliebiges Objekt innerhalb einer Auswahl, um es als Referenzobjekt festzulegen.
2. Das Referenzobjekt wird mit einem dicken blauen Rahmen hervorgehoben.
3. Die Abmessungen und Koordinaten des Referenzobjekts werden in hellgrau in den Eingaben angezeigt.
4. Um einen dieser Werte auf jedes Objekt in der Auswahl anzuwenden, tippen Sie diese genauen Eingabezahlen über die grauen und drücken Sie die Eingabetaste.

Füllungen, Konturen und Farbverläufe

Sie können Farbänderungen auf Objekt-Füllungen und Konturen anwenden, indem Sie die Farbauswahl im Abschnitt „Füllungen & Konturen" des Format-Panels verwenden. Wenn Sie Farben hinzufügen, aggregiert die Projektfarbliste am unteren Ende des Auswahl-Dialogs diese Farbfelder.

Füllungen

Um ein Objekt mit Farbe zu füllen, gehen Sie zum Abschnitt Füllungen & Konturen und klicken Sie auf Füllfarbe, um das Farbauswahl-Popover zu öffnen.

Die Farbeingabe akzeptiert die folgenden Farbformate: 8-, 6- und 3-stellige HEX, RGB, RGBA, HSL, HSLA, LAB, LCH sowie HTML-benannte Farben (z.B. rot, grün, blau, tomate usw.).

• Wählen Sie den Tab „Farbfelder", um ein Farbschema aus Moqups Classic, Material Design, Bootstrap, iOS, HTML, TailwindCSS oder IBM Carbon Design-Farben auszuwählen. Dieser Tab zeigt auch die Farben an, die Sie bereits in Ihrem Projekt verwendet haben.

  oder

• Wählen Sie den Tab „Farbauswahl", um Ihre eigenen benutzerdefinierten Farben zu erstellen.

In beiden Tabs können Sie…

1. Einen Farbformatcode eingeben
2. Die Füllfarb-Transparenz anpassen
3. Den Pipetten-Eyedropper verwenden, um eine Farbe abzugleichen; um den Eyedropper zu aktivieren, verwenden Sie entweder unsere Chrome- oder Firefox-Erweiterung.

Konturen

Kontur bezieht sich auf die Linie des Objekts selbst.

Um die Konturfarbe anzupassen, gehen Sie zum Format-Panel und klicken Sie im Abschnitt Füllungen & Kontur auf Konturfarbe. Hier können Sie auch die Kontur-Transparenz festlegen.

Unter den Farbeinstellungen können Sie die Konturbreite wählen und den Konturstil auf Durchgehend, Gepunktet oder Gestrichelt einstellen.

Farbverläufe

Farbverläufe erzeugen allmähliche Farbübergänge zwischen zwei oder mehr Farben. Sie können sowohl auf Füllungen als auch auf Konturen angewendet werden.

Um einen Farbverlauf anzuwenden…

1. Klicken Sie auf die Füllungs- oder Konturfarbe
2. Oben im Farbauswahl-Popover können Sie aus drei Füllungstypen wählen: Einfarbig, Linearer Verlauf und Radialer Verlauf.
3. Wählen Sie für Farbverläufe entweder Linear oder Radial.
4. Der Verlaufs-Schieberegler hat zwei Standard-Stopps, die hin und her bewegt werden können, um den Start- und Endpunkt des Verlaufs anzupassen.
5. Klicken Sie auf einen Stopp, um eine Farbe aus dem Farbfeld anzuwenden. Der Stopp bleibt blau, während er aktiv ist. Sie können unten weitere Farbanpassungen vornehmen, indem Sie entweder die Farbton- oder Transparenz-Schieberegler verwenden oder aus einer Reihe von Farbfeldern wählen, die aus der aktuell aktiven Farbe abgeleitet wurden.
6. Um weitere Stopps hinzuzufügen, fahren Sie irgendwo entlang des Verlaufs-Schiebereglers, bis Sie das '+'-Symbol sehen; klicken Sie auf den Schieberegler, um einen neuen Stopp hinzuzufügen.
7. Um einen Stopp zu entfernen, ziehen Sie ihn nach unten, bis er verschwindet.
8. Verwenden Sie das Umkehr-Symbol rechts neben dem Verlaufs-Schieberegler, um die Reihenfolge der Farben umzukehren.

Die Steuerungen in der oberen linken Ecke ermöglichen Ihnen die Anpassung des Winkels des Verlaufs (für Linear) oder des Mittelpunkts (für Radial). Für noch mehr Präzision können Sie den Linearen Winkel in Grad oder den Radialen Mittelpunkt durch X/Y-Koordinaten in den begleitenden Eingabefeldern festlegen.

Der Radiale Farbverlauf hat auch eine Strecken-Option, die den Radialen Farbverlauf auf die Ränder des Objekts ausdehnt.

Farben ersetzen

Diese Funktion ermöglicht es, Ihr Farbschema schnell zu aktualisieren, wenn Sie von Lo-Fi-Wireframes zu Hi-Fi-Mockups übergehen – und schließlich zu ausgereiften Designs und Prototypen.

Sie können wählen, eine Farbe im gesamten Projekt, auf der Aktuellen Seite oder innerhalb einer bestimmten Auswahl von Objekten zu ersetzen.

Um eine Farbe im gesamten Projekt oder auf Ihrer Aktuellen Seite zu ersetzen:

1. Wählen Sie alle Objekte auf der Seite ab

2. Erweitern Sie den Abschnitt Farben ersetzen im Format-Panel

3. Wählen Sie Aktuelle Seite oder Gesamtes Projekt

4. Aktivieren Sie Kontrollkästchen, um Füllungen, Konturen oder Textfarbe auszuwählen

5. Klicken Sie auf die Projektfarbe, die Sie ersetzen möchten

6. Wählen Sie die Ersatzfarbe aus

   • Projektfarben
   • Farbfelder
   • Farbauswahl
   • Durch Eingabe eines Hex-Codes

Um eine Farbe innerhalb einer Auswahl von Objekten zu ersetzen:

1. Wählen Sie ein oder mehrere Objekte aus

2. Erweitern Sie den Abschnitt Farben ersetzen im Format-Panel

3. Wählen Sie Aktuelle Seite oder Gesamtes Projekt

4. Aktivieren Sie Kontrollkästchen, um Füllungen, Konturen oder Textfarbe auszuwählen

5. Klicken Sie auf die Projektfarbe, die Sie ersetzen möchten

6. Wählen Sie die Ersatzfarbe aus

   • Projektfarben
   • Farbfelder
   • Farbauswahl
   • Durch Eingabe eines Hex-Codes

Transparenz, Schatten und Weichzeichner

Transparenz

Der Transparenz-Schieberegler passt die globale Transparenz eines ganzen Objekts oder einer Gruppe von Objekten an. Wenn Sie die Transparenz präziser anpassen möchten, können Sie auch die Kontur-Transparenz anpassen (siehe oben), zusammen mit der globalen Transparenz, für ein kombiniertes visuelles Ergebnis.

Schatten

Um einem Objekt einen Schatten hinzuzufügen, navigieren Sie zum Format-Panel und öffnen Sie den Abschnitt Schlagschatten.

Aktivieren Sie den Schatten, um Farbe, Transparenz, Winkel, Abstand und Größe des Schattens festzulegen.

Weichzeichner

Um einem Objekt einen Weichzeichner hinzuzufügen, navigieren Sie zum Format-Panel, öffnen Sie den Abschnitt Weichzeichner und aktivieren Sie den Weichzeichner-Schieberegler. Die Weichzeichner-Funktion ist besonders nützlich beim Erstellen eines Popovers oder modalen Fensters.

Abgerundete Ecken

Sie können die Ecken eines Objekts sowohl im Format-Panel, im Abschnitt „Abgerundete Ecken", als auch direkt auf der Seite mit den benutzerdefinierten Griffen des Objekts abrunden.

Um Ecken im Format-Panel abzurunden:

• Verwenden Sie den Abschnitt Abgerundete Ecken und geben Sie Werte in die Eingaben ein. Standardmäßig sind die vier Eingabefelder synchronisiert. Das Eingeben eines Wertes in ein Eingabefeld überträgt diesen Wert auf die anderen Ecken.
• Um unterschiedliche Werte für jede Ecke einzugeben, deaktivieren Sie das Symbol Alle Ecken synchronisieren zwischen den vier Eingaben.
• Aktivieren Sie Radius skalieren, wenn die abgerundeten Ecken proportional skaliert werden sollen, wenn Sie ein Objekt in der Größe ändern.

Um Ecken direkt auf der Seite abzurunden:

• Um alle Ecken gleichzeitig abzurunden, ziehen Sie einen der hellblauen benutzerdefinierten Griffe zur Mitte des Objekts.
• Um eine bestimmte Ecke abzurunden (nur Rechteck-Schablone), halten Sie Option/Alt gedrückt und ziehen Sie den entsprechenden Griff zur Mitte.

Stile kopieren und einfügen

Sobald Sie ein Objekt angepasst haben, können Sie diese Anpassung auf ein anderes Objekt oder eine Gruppe von Objekten anwenden.

Um Stile zu kopieren und einzufügen:

1. Wählen Sie das Objekt aus, von dem Sie die Stile kopieren möchten
2. Rechtsklicken und wählen Sie Stile kopieren oder drücken Sie Alt/Option + C
3. Wählen Sie das Objekt aus, auf das Sie diese Stile anwenden möchten
4. Rechtsklicken und wählen Sie Stile einfügen oder drücken Sie Alt/Option + V

Eigenschaften kopieren

Wenn Sie bestimmte Aspekte der Formatierung eines Objekts kopieren möchten, können Sie das Werkzeug „Eigenschaften kopieren" verwenden.

Für jeden der Gestaltungsabschnitte im Format-Panel finden Sie eine Schaltfläche in der oberen rechten Ecke, die die Einstellungen für diese bestimmte Formatierungsoption kopiert (z.B. Text, Transparenz, Abstände, Schlagschatten usw.).

Um Eigenschaften eines Objekts zu kopieren:

1. Wählen Sie das Objekt aus, von dem Sie seine Eigenschaften kopieren möchten
2. Öffnen Sie das Format-Panel und suchen Sie den Formatierungsabschnitt, den Sie kopieren möchten
3. Klicken Sie auf die Schaltfläche Eigenschaften kopieren
4. Wählen Sie das Objekt aus, auf das Sie diese Stile anwenden möchten
5. Rechtsklicken und wählen Sie Stile einfügen oder drücken Sie Alt/Option + V

Benutzerdefinierte Stile für Schablonen speichern

Wenn Sie einen benutzerdefinierten Stil für eine Schablone speichern, wird jedes Mal, wenn Sie einen bestimmten Schablonentyp zur Seite hinzufügen, dieses Objekt Ihren benutzerdefinierten Stil übernehmen.

Um einen benutzerdefinierten Stil für einen Schablonentyp zu speichern:

1. Gestalten Sie ein Schablonenobjekt auf der Seite mit dem Format-Panel
2. Wählen Sie dieses Objekt aus
3. Rechtsklicken Sie, um das Kontextmenü zu öffnen
4. Wählen Sie Benutzerdefinierten Stil speichern für diesen Schablonentyp
5. Alle nachfolgenden Objekte dieses Typs werden jetzt diesen Stil übernehmen

Um einen benutzerdefinierten Stil von einem Schablonentyp zu entfernen:

1. Wählen Sie das Schablonenobjekt auf der Seite aus
2. Rechtsklicken Sie, um das Kontextmenü zu öffnen
3. Wählen Sie Benutzerdefinierten Stil löschen für diesen Schablonentyp

Um benutzerdefinierte Stile von allen Ihren Schablonentypen zu entfernen:

1. Wählen Sie das Schablonenobjekt auf der Seite aus
2. Rechtsklicken Sie, um das Kontextmenü zu öffnen
3. Wählen Sie Alle gespeicherten Stile löschen

Fragen & Antworten

Wie kann ich Beispiele von Schablonen sehen, die bereits formatiert wurden – entweder auf einer Seite oder innerhalb eines Projekts?

Unsere Website hat einen ganzen Bereich, der vorgefertigten Vorlagen gewidmet ist. Dort finden Sie professionell gestaltete Beispiele und Anwendungsfälle in vier Kategorien: Wireframes und Mockups, Kartierung und Diagramme, Diagramme, Grafiken und Infografiken und Planung & Ideenfindung. Das Klicken auf eine dieser Vorlagen öffnet sie in der Moqups-App und ermöglicht es Ihnen, zu experimentieren, anzupassen und zu speichern.