Diese Anleitung führt dich durch das Design Studio, damit du weißt, wo alles liegt, bevor du mit dem Bauen beginnst. Sie richtet sich an alle, die den Editor zum ersten Mal öffnen. Am Ende erkennst du die Symbolleiste, die Zeichenfläche, die obere Leiste, die schwebende Werkzeugleiste und die Zoom-Steuerung und weißt, was sie jeweils tun.
Wofür das Design Studio da ist
Im Design Studio baust du eine Produktvorlage. Du platzierst Text, Bilder, Formen und andere Elemente auf einer Zeichenfläche und entscheidest dann, welche davon ein Kunde im Shop ändern kann.
Die Zeichenfläche stellt den aktiven Designbereich dar. Prüfe die tatsächlichen Abmessungen der Produktfläche, den Beschnitt, die Schriften und die vorgesehene Produktionsausgabe, bevor du dich auf eine Bildschirmvorschau als druckfertiges Motiv verlässt.
Du kannst das Design Studio auf zwei Wegen öffnen. Öffne es von einem Produkt aus, um das Design dieses Produkts zu bearbeiten, oder öffne ein eigenständiges Design und hänge es später an ein Produkt.
Die Symbolleiste links
Die Symbolleiste verläuft am äußersten linken Rand des Editors. Mit ihr wechselst du zwischen den Werkzeugen und Bereichen, die du am häufigsten nutzt.
Die Einträge der Leiste erscheinen in dieser Reihenfolge:
- Elemente: Text, Formen, Grafiken und Uploads hinzufügen.
- Ebenen: alles auf der Zeichenfläche sehen und umsortieren.
- Vorlagen: von einem wiederverwendbaren Layout ausgehen oder eines speichern.
- Seiten: zwischen den Seiten des Produkts wechseln, ein Design von einer auf eine andere kopieren und Hintergründe festlegen. Bei einem Produkt, das in mehreren Größen verkauft wird, heißt es Größen, und bei einem Buch Seiten.
- Optionen: festlegen, wie Varianten und Add-ons des Produkts für Kunden aussehen. Ihre Auswahlmöglichkeiten, Preise und Fotos bleiben auf der Produktseite. Klicke auf einen Eintrag, um seinen Bereich zu öffnen; der angeklickte Eintrag behält eine weiße Karte. Halte den Mauszeiger auf einen anderen Eintrag, um eine Vorschau seines Bereichs zu sehen: Dieser Eintrag wird grau, solange du hinsiehst, beim Wegbewegen kommt der angeklickte Bereich zurück, und ein Klick behält die Vorschau. Klicke den aktiven Eintrag erneut an, um den Bereich zu schließen.
Eine leere Zeichenfläche zeigt, wo du beginnen kannst: Text, Foto und Grafiken fügen sofort eines hinzu, Elemente hinzufügen öffnet den Bereich mit allem anderen, und Hintergrund legt die Farbe hinter deinem Design fest.
Zum Suchen nutzt du das Suchfeld oben in Elemente oder drückst Strg+K (Cmd+K auf einem Mac), um Aktionen und die Ebenen deines Designs zu durchsuchen. Die Anzeigeoptionen der Zeichenfläche, etwa Raster, Einrasten, Lineale und die Druckhilfslinien, findest du unter Datei › Ansicht.
Die obere Leiste, die schwebende Werkzeugleiste und die Statusleiste
Drei Steuerelemente umgeben die Zeichenfläche: die obere Leiste darüber, eine schwebende Werkzeugleiste direkt unter der oberen Leiste und die Statusleiste am unteren Rand.
Die obere Leiste
Die obere Leiste enthält Navigation und Speichern. Von links nach rechts findest du:
- Einen Pfeil Zurück, um den Editor zu verlassen.
- Ein Menü Datei.
- Den Titel des Designs in der Mitte, den du zum Umbenennen direkt anklicken kannst, und daneben, ob das Produkt in deinem Shop ist.
- Eine Schaltfläche Rückgängig und Wiederholen. Danach, wenn etwas einen Blick braucht, die Zahl der Warnungen (leere Seiten, Fotos mit niedriger Auflösung) und Schriften, die nicht geladen wurden. Klicke auf die Warnungen, um die Liste zu sehen.
- Rechts eine Schaltfläche Speichern. Sie lautet Speichern, wenn du ungespeicherte Änderungen hast, Wird gespeichert, solange deine Arbeit abgelegt wird, und Gespeichert, sobald es fertig ist. Schlägt das Speichern fehl, erscheint unter der oberen Leiste eine Fehlermeldung.
Das Dock des Kundenformulars, das du über den Tab am rechten Rand der Zeichenfläche öffnest, zeigt das Formular, das Kunden ausfüllen. Mit Vorschau probierst du es wie ein Kunde aus. Bearbeiten zeigt dasselbe Formular mit einem kleinen Griff und einem Stift an jedem Feld, wenn du darauf zeigst: Ziehe den Griff, um das Feld nach oben oder unten zu verschieben, oder klicke auf den Stift, um die Einstellungen dieses Felds zu öffnen. Der runde Pfeil, Formular zurücksetzen, setzt die Felder auf die Standardwerte des Designs zurück, und ⋯ öffnet die eigenen Einstellungen des Formulars, etwa Layout, Schritte und Feldreihenfolge, im Bereich Customizer in der linken Leiste. Um den Customizer des Kunden in voller Größe in einem eigenen Fenster zu sehen, wähle Datei › Kundenvorschau. Prüfe den veröffentlichten Ablauf für Kunden gesondert.
Der Editor speichert nur. Dein Design geht von der Produktseite aus live, auf der du das Produkt veröffentlichst.
Die schwebende Werkzeugleiste
Eine schwebende Werkzeugleiste sitzt zwischen der oberen Leiste und der Zeichenfläche. Sie hat immer dieselben Teile:
- Bearbeiten, bei jedem Element zuerst, öffnet seinen Eigenschaftenbereich. Nutze es, wenn ein anderer Bereich, etwa Ebenen, geöffnet ist.
- Ein paar schnelle Schaltflächen für das, was du am häufigsten mit dem ausgewählten Element tust. Text bekommt Schrift, Größe, Farbe, Fett und Ausrichtung. Ein Foto bekommt Ersetzen, Zuschneiden und Effekte. Eine Karte zeigt ihren Ort. Eine Schaltfläche, die eine Einstellung benennt, etwa den Ort, öffnet den Eigenschaftenbereich direkt dort.
- Anpassbar sagt, ob Kunden das Element ändern können, und schaltet das ein oder aus. Es heißt Anpassbar machen, solange es aus ist, und fehlt bei Elementen, die Kunden nicht ändern können.
- Mehr, das ⋯ am Ende, mit demselben Menü wie ein Rechtsklick: duplizieren, sperren, Ebenenreihenfolge, spiegeln und löschen.
Ein gesperrtes Element zeigt nur Gesperrt und, wenn du es selbst gesperrt hast, Entsperren. Mehrere ausgewählte Elemente bekommen Ausrichten, Verteilen und Gruppieren. Ist nichts ausgewählt, zeigt die Werkzeugleiste die Hintergrundfarbe und die Größe der Zeichenfläche. Beim Zuschneiden eines Fotos ersetzen Zurücksetzen, Abbrechen und Fertig die Werkzeugleiste.
Die Statusleiste
Die Statusleiste verläuft am unteren Rand des Editors, mit den Seiten des Produkts in der Mitte. Rechts, von links nach rechts:
- Die Zoom-Prozentzahl. Klicke darauf, um die Zeichenfläche an den Bildschirm anzupassen, wenn sie aus dem Blick gerät oder du sie wieder zentriert haben willst. Zeige darauf, und links und rechts öffnen sich die Schaltflächen Verkleinern und Vergrößern.
- Hilfe, das ?, mit Tastenkürzel und Hilfe & Chat. Hilfe & Chat öffnet den Support-Chat, der im Editor keine schwebende Schaltfläche hat.
Ob Größen in Millimetern (mm) oder Pixeln (px) angezeigt werden, ist eine Ansichtseinstellung: Datei › Ansicht › Einheiten.
Weiter
Jetzt, wo du das Layout kennst, füge Text hinzu und gestalte ihn, um dein erstes Element auf die Zeichenfläche zu bringen.