Product Designer und Customizer
Erweiterte Designwerkzeuge
Verbinde Grafiken, Text und Vektoren in einem Design. Verfeinere den Aufdruck im Product Designer, prüfe ihn am 3D-Modell und ermögliche deinen Kunden die Personalisierung im Customizer.
Von der Komposition zum Produkt
Gestalten in 2D und 3D
Gestalte auf einer flachen 2D-Fläche, arbeite direkt auf den Druckbereichen des 3D-Modells oder nutze beide Ansichten nebeneinander. Platziere und passe Elemente an, während du Größe und Position am Produkt prüfst.
Die kombinierte Ansicht hilft dir, die Komposition im Kontext der tatsächlichen Produktform zu beurteilen. Du siehst denselben Text, dasselbe Bild oder Motiv als Druckdesign und als Teil der fertigen Visualisierung.
Raster und Druckvorschau in 2D
Raster und Einrasten
Aktiviere das Raster und das Einrasten an Ebenen, um Elemente präziser anzuordnen.
Vorschau ohne Hintergrundbild
Blende das Hintergrundbild des Arbeitsbereichs aus, um den Aufdruck selbst genauer zu beurteilen. Die Designelemente bleiben sichtbar.
Bild über oder unter dem Raster
Wähle, ob das Hintergrundbild über oder unter dem Raster angezeigt wird.
Eigener Vorschauhintergrund
Verwende statt des Bildes einen weißen, grauen, schwarzen oder eigenen Hintergrund. Prüfe Kanten und transparente Grafikbereiche vor einer Kontrastfarbe. Die Änderung betrifft die Vorschau, nicht das Druckdesign.
Bilder, Deckkraft und Komposition
Ein Foto, eine Illustration oder ein Logo kann den Ausgangspunkt für das gesamte Design bilden. Passe Aussehen, Transparenz und Anordnung an und kombiniere es dann mit Text und weiteren Ebenen.
Eigene Grafiken
Füge JPEG-, PNG- und WebP-Bilder sowie SVG-Dateien hinzu. Tausche die Grafik in der Komposition aus, um eine weitere Designvariante zu erstellen.
Deckkraft von 0 bis 100%
Kombiniere Motive, gestalte dezente Hintergründe und bestimme, wie stark ein Bild auf dem Produkt hervortritt.
Position und Transformationen
Verschiebe, skaliere, drehe und spiegele Elemente. Passe ihre Position im Druckbereich in der 2D-Ansicht oder am 3D-Modell an.
Muster für Bilder, Texte und Formen
Muster aus einem einzigen Motiv
Erstelle aus einem einzigen Element ein Wiederholungsmuster. Verwende es als Hintergrund, dekoratives Motiv oder Komposition im Druckbereich. Das Wiederholungswerkzeug funktioniert auch mit Text und Formen.
Raster
Grid
Regelmäßige Zeilen und Spalten.
Ziegelmuster
Brick
Abwechselnd versetzte Zeilen.
Versetzte Spalten
Half drop
Jede zweite Spalte ist versetzt.
Streuung
Scatter
Freie Anordnung mit Zufallsstartwert.
Kreisförmige Anordnung
Round
Wiederholungen entlang eines Kreises.
Lege Zeilen- und Spaltenzahl, Abstände und Musterversatz fest. Variiere A/B-Versionen durch Drehen, Skalieren oder Spiegeln. Wechsle Elemente, Zeilen oder Spalten ab oder nutze ein Schachbrettmuster; bei der Streuung kannst du einen Zufallsstartwert verwenden.
Filter und Bildkorrekturen
Passe Grafiken an den Charakter deiner Kollektion an, ohne das Design zu verlassen. Das Filterpanel umfasst Licht- und Farbkorrektur, Detailbearbeitung, Raster und Kontrolle der Halbtransparenz.
| Filter oder Korrektur | Deine Möglichkeiten |
|---|---|
| Helligkeit | Helle die Grafik auf oder dunkle sie ab, bevor du sie in die Komposition einfügst. |
| Kontrast | Verstärke oder mildere die Unterschiede zwischen hellen und dunklen Bildbereichen. |
| Schwarz-Weiß | Verwandle ein Farbbild in eine monochrome Version deines Designs. |
| Invertieren | Kehre die Farben um und erzeuge einen Negativeffekt. |
| Farbton | Verschiebe die Farbtöne, um der Grafik einen anderen Charakter zu geben. |
| Sättigung | Steuere die Farbintensität - von dezent bis kräftig. |
| Dynamik | Verfeinere die Farbdynamik als separaten Schritt der Farbkorrektur. |
| Gamma Rot | Korrigiere den Tonwertverlauf des roten Kanals. |
| Gamma Grün | Korrigiere den Tonwertverlauf des grünen Kanals. |
| Gamma Blau | Korrigiere den Tonwertverlauf des blauen Kanals. |
| Schärfen | Betone Kanten und feine Details der Grafik. |
| Weichzeichnen | Zeichne das Bild weich, um sanftere Übergänge zu erhalten. |
| Raster / Halftone | Erzeuge einen Rastereffekt aus Punkten, Kreuzen oder Linien und passe seine Struktur an. |
| Halbtransparenten Hintergrund entfernen | Verfeinere die Transparenz mit einem Alpha-Schwellenwert und weichen Übergängen. Diese Korrektur arbeitet mit der Deckkraft der Pixel, nicht mit Objekterkennung. |
Sechs Rasterstile
Rastereffekte mit Kontrolle über jedes Detail
Gib der Grafik einen Rhythmus aus Punkten, Kreuzen oder Linien. Mit Halftone gestaltest du die Struktur des Aufdrucks bewusst: vom feinen Raster bis zum markanten dekorativen Effekt.
Ausgangsgrafik
Halftone: Punkte
Halftone: Linien
Wähle die passende Rasterform für die Grafik
Rund
Quadratisch
Rautenförmig
Elliptisch
Kreuze
Linien
Abstand und Größe
Lege die Rasterdichte und die Größe seiner Elemente fest.
Winkel und Kontrast
Drehe das Raster und passe an, wie die Helligkeit der Grafik den Rastereffekt beeinflusst.
Kantenweichheit
Wähle schärfere oder weichere Kanten für die Elemente.
Invertierung und volle Deckkraft
Kehre die Reaktion auf Helligkeit um und aktiviere Elemente ohne Halbtransparenz.
Hintergrund und ausgewählte Farben entfernen
Stelle ein Motiv frei und bereite es für die Kombination mit anderen Elementen vor. Beginne automatisch oder arbeite manuell und entferne eine ausgewählte Farbe mit Pipette und Toleranzeinstellung.
Hintergrund automatisch entfernen
Stelle das Hauptmotiv eines Bildes frei, um es ohne umgebenden Hintergrund im Aufdruck zu verwenden.
Maske manuell verfeinern
Entferne Bereiche mit dem Pinsel oder stelle sie wieder her. Passe Größe und Stärke an, um kleine Elemente und Kanten zu verfeinern.
Color Knockout
Wähle im Werkzeug zur manuellen Hintergrundentfernung mit der Pipette eine Farbe. Stelle die Toleranz ein, um passende Pixel im gesamten Bild zu entfernen, und verfeinere die Maske anschließend mit dem Pinsel.
Manuelle Maskierung Schritt für Schritt
Bearbeite die Bildmaske und steuere, welche Bereiche sichtbar bleiben. Übernimm das Ergebnis, sobald Kanten und Transparenz passen.
Pinsel und Radierer
Blende Bildbereiche mit dem Radierer aus und stelle sie mit dem Pinsel wieder her. Passe Größe und Stärke an, in unterstützten Browsern auch die Kantenhärte.
Ausgewählte Farbe entfernen
Wähle mit der Pipette eine Farbe und passe die Bereichstoleranz an. Entferne passende Bereiche und verfeinere Details mit dem Pinsel. In unterstützten Browsern kannst du die Grenze zusätzlich weichzeichnen.
Kreisförmige Maske
Aktiviere eine kreisförmige Maske und ändere Radius, Kantenweichheit und die Position des Mittelpunkts auf der X- und Y-Achse.
Änderungen prüfen und rückgängig machen
Ändere die Hintergrundfarbe der Vorschau, vergrößere das Bild und verschiebe die Ansicht, um Kanten zu prüfen. Mache Arbeitsschritte rückgängig oder wiederhole sie oder lösche die Maske, um das Bild wiederherzustellen.
Anwendungsbeispiel: entferne einen einfarbigen Hintergrund aus einem Logo, behalte nur das Motiv und platziere es auf einem farbigen Produkt oder wiederhole es als Muster. Color Knockout wirkt auf die gewählte Farbe auch innerhalb der Grafik. Deshalb lohnt es sich, das Ergebnis mit einer Maske zu verfeinern.
Von der Beschriftung zur ausdrucksstarken Typografie
Text, der deinem Design Charakter verleiht
Gestalte einen Schriftzug passend zu Produkt, Marke und Grafikstil. Wähle eine Schrift, verändere die Textform und kombiniere Füllung, Kontur oder Schatten.
Über 1800 Google-Schriftarten
Suche Schriftarten nach Namen und filtere nach Kategorien und unterstützten Schriftsystemen. Wähle zwischen Serifenschriften, serifenlosen Schriften, dekorativen Schriften, Handschriften und Monospace-Schriften.
Typografie unter Kontrolle
Passe Größe, Zeichenabstand, Zeilenabstand und Ausrichtung an. Ändere Groß- und Kleinschreibung, nutze Unterstreichung oder Durchstreichung sowie die für die Schriftart verfügbaren fetten und kursiven Varianten.
Füllungen, Konturen und Schatten
Kombiniere Vollfarben mit linearen oder radialen Verläufen. Ergänze eine durchgezogene oder gestrichelte Kontur sowie einen Schatten mit eigener Farbe, Versatz und Unschärfe.
Vier Möglichkeiten der Textgestaltung
Standardtext
Erstelle einfache Beschriftungen und mehrzeilige Kompositionen mit Kontrolle über Ausrichtung und Zeilenabstand.
Gebogener Text
Biege den Schriftzug und passe Winkel und Abstand des Bogens an. Gestalte eine Komposition um ein Emblem oder eine zentrale Grafik.
Brückentext - Bridge
Ändere die Buchstabenhöhe an den Rändern und in der Mitte des Schriftzugs. Steuere den weichen Übergang und die vertikale Position der Mitte.
Schräger Text - Oblique
Gib dem Schriftzug eine Richtung, indem du die Höhe am Anfang und Ende sowie die vertikale Position des Endes anpasst.
Formen, Pfade und Vektorisierung
Kombiniere einfache Figuren zu Kompositionen oder arbeite präzise mit Punkten und Kurven. Der Pfadeditor dient zum Verfeinern unterstützter Formen und Pfadebenen.
Vorgefertigte Formen
Beginne mit Rechteck, Linie, Ellipse, Kreis, Dreieck, Sechseck, Achteck oder Stern. Verfeinere Füllung, Kontur und Schatten; beim Rechteck kannst du auch die Ecken abrunden.
Eigene Umrisse
Entwickle aus einer vorgefertigten Form ein eigenes Emblem, eine Verzierung oder einen Umriss. Bearbeite Punkte unterstützter Form- und Pfadebenen in der 2D-Ansicht und prüfe das Ergebnis am Produkt.
Punkt- und Kurveneditor: von der Skizze zum präzisen Umriss
Wähle eine entsperrte Form- oder Pfadebene und wechsle zur Vektorbearbeitung. Bearbeite jeweils eine Ebene, zeichne neue Abschnitte oder verfeinere die vorhandene Geometrie.
Zeichenstift und Pfaderweiterung
Zeichne weitere Segmente mit dem Zeichenstift, verbinde sie mit vorhandenen Punkten und schließe Umrisse. Füge neue Punkte auf dem Pfad hinzu oder entferne unnötige, um die Form zu verfeinern.
Punktauswahl und Lasso
Wähle einen einzelnen Punkt oder markiere einen größeren Abschnitt mit Auswahlrahmen oder Lasso. Bearbeite den ausgewählten Teil des Umrisses, während die übrigen Punkte an ihrem Platz bleiben.
Entlang des Pfades verschieben
Verschiebe Punkte frei oder entlang des vorhandenen Pfadverlaufs. Ausgewählte Punkte lassen sich gemeinsam verschieben, um einen ganzen Abschnitt der Komposition zu ändern.
Bézierkurven und Anfasser
Forme Kurven mit eingehenden und ausgehenden Anfassern. Aktiviere sie einzeln und wähle unabhängige Anfasser, im Winkel gespiegelte Anfasser oder solche, die Winkel und Länge beibehalten.
Punkte verbinden
Verbinde ausgewählte Punkte durch ein Segment. Erweitere den Pfad und verfeinere die Verbindungen, aus denen dein Umriss entsteht.
Pfade schneiden
Ziehe eine Schnittlinie durch einen Pfad, um ihn zu teilen. Verfeinere anschließend die entstandenen Abschnitte mit den Punkt- und Kurvenwerkzeugen.
Umrisse erweitern und verengen
Versetze ausgewählte Punkte um einen festgelegten Abstand. Wähle beide Richtungen oder nur die horizontale bzw. vertikale Richtung, um die Proportionen des Abschnitts zu verändern.
Symmetrieachse und Spiegelung
Lege Position und Winkel der Achse fest und spiegele dann den gesamten Umriss oder ausgewählte Punkte. Passe den Verbindungsabstand der Punkte nahe der Achse an, um beide Seiten sauber zu verbinden.
Änderungen rückgängig machen und wiederholen. Probiere verschiedene Umrissvarianten aus und kehre während der Bearbeitung zu früheren Arbeitsschritten zurück.
Füllung und Kontur verfeinern
Lege Füllfarbe oder Verlauf, Konturbreite und Schatten fest. Wähle eine durchgezogene oder gestrichelte Linie mit eigenen Strich- und Lückenlängen. Ändere Konturverbindungen zu spitzen, abgeschrägten oder runden Ecken und Linienenden zu stumpfen, runden oder quadratischen Abschlüssen. Runde Rechteckecken gemeinsam oder einzeln ab.
Anwendungsbeispiel: zeichne ein halbes Emblem, spiegele es an der Achse und verfeinere die Kurven. Ergänze anschließend eine Kontur und einen gebogenen Schriftzug für dein eigenes Druckmotiv.
Ein Werkzeug des Product Designers
Bilder in SVG vektorisieren
Wandle ein PNG-, WebP- oder JPEG-Bild in eine Vektorgrafik um. Lege Farbanzahl und Detailgrad fest, vergleiche das Ergebnis mit dem Original und übernimm es ins Design oder lade die SVG-Datei herunter.
- Palette mit 1 bis 32 Farben und einstellbarem Detailgrad.
- Verknüpfung mit dem Ausgangsbild: Du kannst die Vektorisierung ausschalten und das Ergebnis neu berechnen.
- Berücksichtigt die ursprüngliche Maske und Filter; Halftone kann als wiederholte Vektorgeometrie erhalten bleiben.
- Lokale Berechnung ohne Nutzung eines KI-Bildgenerierungsdienstes.
Eine kleinere Palette vereinfacht den Grafikstil, eine größere erhält mehr Farbunterschiede. Wähle zum Design passende Einstellungen und prüfe die Vorschau vor dem Übernehmen.
QR-Codes passend zum Design
Ein QR-Code kann sich harmonisch in das Produktdesign einfügen. Verbinde einen Link zu Anleitungen, einer Kollektion oder der Markenwebsite mit eigenen Farben, Formen und Stilen der Codeelemente.
Klassische Geometrie
Quadratische Elemente und eine einheitliche Farbe.
Weiche Ecken
Abgerundete Elemente, separate Rahmen und Mittelpunkte.
Verlauf und Markenfarbe
Kreisförmige Anordnung, Farbverlauf und unabhängige Eckfarbe.
Sechs Punktstile
Gib dem Code einen geometrischen, weichen oder dekorativen Charakter. Kombiniere den Stil der inneren Elemente mit einer unabhängigen Gestaltung der Ecken.
- Quadratisch
- Abgerundet
- Stark abgerundet
- Classy
- Classy Rounded
- Punkte
Inhalt und Form des Codes
Hinterlege die Adresse einer Website, Anleitung oder Kollektion oder einen eigenen Text. Wähle eine quadratische oder kreisförmige Form für den gesamten Code und passe ihn in die Komposition ein.
Separate Eckstile
Gestalte die Rahmen und Mittelpunkte der Ecken unabhängig voneinander. Rahmen können quadratisch, stark abgerundet oder kreisförmig sein, Mittelpunkte quadratisch oder kreisförmig. Du kannst auch den Standardstil beibehalten.
Vier unabhängige Farbbereiche
Wähle Farben für Punkte, Eckrahmen, Eckmittelpunkte und Hintergrund separat. Behalte eine einheitliche Markenpalette bei oder hebe ausgewählte Codeelemente hervor.
Verläufe und genaue Farbwerte
Verwende eine Vollfarbe oder einen linearen bzw. radialen Verlauf. Füge Farbstopps hinzu, lege Positionen und Deckkraft fest und gib HEX- oder RGB-Werte ein. Bei linearen Verläufen lässt sich auch die Verlaufsrichtung ändern.
Eigener oder transparenter Hintergrund
Füge einen farbigen Hintergrund oder Verlauf hinzu oder schalte ihn aus, damit der Code mit Grafik und Produktfarbe harmoniert. Wähle einen Kontrast, bei dem der Code lesbar bleibt.
Platz für ein Logo oder Motiv
Reserviere in der Mitte ein Quadrat, ein waagerechtes oder ein senkrechtes Rechteck. Kombiniere diesen Platz mit einem Logo oder Motiv auf einer separaten Designebene.
Skaliere, drehe und platziere den Code zusammen mit den anderen Designelementen. Prüfe vor der Produktion seine Lesbarkeit in der vorgesehenen Druckgröße, besonders nach Farbänderungen oder dem Einfügen eines Motivs in der Mitte.
Ebenen, Gruppen und Masken
Behalte auch in komplexen Designs den Überblick. Trenne Text, Bilder und Dekorationen und steuere ihre gegenseitige Sichtbarkeit mit Gruppen und Masken.
Reihenfolge und Sichtbarkeit
Verschiebe Elemente im Ebenenstapel, blende sie aus und wieder ein. Baue die Komposition schrittweise auf, ohne frühere Ideen zu löschen.
Gruppen
Fasse zusammengehörige Elemente in einer Gruppe zusammen, um komplexe Designs leichter zu verwalten.
Maskierung
Verwende die unterste Ebene der Auswahl als Maske für die übrigen. Begrenze die Sichtbarkeit der Grafik auf eine ausgewählte Form.
Designelemente schützen
Fixiere feste Elemente oben oder unten im Stapel mit einer Eigentümersperre. Halte Logos oder andere Markenelemente außerhalb des bearbeitbaren Kundenbereichs und lasse zugleich Raum für Personalisierung.
Dein Design. Die persönliche Note deiner Kunden.
Personalisierung für deine Kunden
Biete deinen Kunden den Customizer auf deiner Website an. Im Bearbeitungsmodus können sie Text, Bilder, Formen und QR-Codes hinzufügen und ihre Komposition mit Produktvorschau verfeinern.
Bereite als Eigentümer das Design vor und fixiere unveränderliche Elemente mit der Eigentümersperre. Die Bearbeitungsmöglichkeiten hängen von der Konfiguration des eingebetteten Werkzeugs und den Berechtigungen ab. Die oben beschriebene Bildvektorisierung ist ein Werkzeug des Product Designers.
Von der eigenen Grafik zum personalisierten Produkt
Verbinde Bildbearbeitung, Typografie und 3D-Vorschau in einem Arbeitsablauf. Bereite die Komposition vor, behalte die Kontrolle über feste Elemente und gib deinen Kunden Raum für eigene Ideen.
Die Werkzeuge in Aktion erleben