Erstelle ein Sublimationsdesign für ein Basketballtrikot

Was Sie in diesem Tutorial erstellen werden

In diesem Konfiwear-Tutorial erstellen Sie ein Sublimationsdesign für ein Basketballtrikot, das perfekt im Konfiwear 3D Customizer funktioniert.

Wenn Sie lieber zuschauen möchten, beginnen Sie mit dem folgenden Video-Tutorial:

• Eine saubere SVG-Datei mit Konfiwear-kompatiblen Ebenen-IDs (primary, secondary, accent, accent2, accent3)
• Ein Vorschaubild für Ihre Design-Bibliothek
• Ein Design, das unter Instance → Designs hochgeladen wurde und bereit ist, auf Ihrem Basketballtrikot-Modell verwendet zu werden

Benötigte Tools

• Freepik (zum Herunterladen einer Vektorillustration)
• Adobe Illustrator
• Blender (zum Exportieren des UV-Layouts aus deinem Trikotmodell)
• Konfiwear (Instance-Dashboard)
• svgviewer.dev (zum Bereinigen von SVG-IDs)

Schritt 1 – Lade ein Vektor-Trikotdesign herunter (Freepik)

1. Gehe zu Freepik und suche nach:
   • Basketball-Trikotdesign
2. Filtere nach:
   • Illustration
   • Vektor
3. Wähle ein Design aus (kostenlos oder Premium).
4. Lade es herunter, verschiebe es in deinen Projektordner und entpacke es.
5. Öffne die .AI-Datei in Adobe Illustrator.

Ziel: Erhalte eine saubere Vektorvorlage, die du an dein Trikot-UV-Layout anpassen kannst.

Das UV-Layout ist dein Bauplan. Es stellt sicher, dass dein Design auf den richtigen Bereichen (Vorderseite, Rückseite, Seiten usw.) platziert wird.

1. Öffne dein Trikotmodell in Blender
2. Wähle das Trikot-Mesh aus
3. Gehe zu UV-Bearbeitung
4. Wähle alle UV-Inseln aus
5. Exportiere das UV-Layout

Wichtig (obligatorisch für Konfiwear-Sublimationstexturen):

• Exportgröße: 2048 × 2048

Benennen Sie die Datei beispielsweise wie folgt:

• UV.png

Eine detaillierte Anleitung zur Vorbereitung von 3D-Bekleidungsmodellen und UV-Workflows findest du in unserem Tutorial: Von CLO3D zu Konfiwear: So bereitest du Bekleidungsmodelle vor und importierst sie.

1. Erstellen Sie in Illustrator ein neues Dokument
   • Breite: 2048
   • Höhe: 2048
2. Fügen Sie Ihr exportiertes UV-Layout-Bild (UV.png) ein
3. Zentrieren Sie es exakt:
   • X: 1024
   • Y: 1024
4. Sperren Sie die UV-Ebene, damit sie sich nicht verschiebt.

Sie haben nun eine perfekte Zeichenfläche für Konfiwear-Sublimationstexturen.

Fügen Sie nun Ihre Freepik Vektorelemente in das neue 2048×2048-Dokument ein:

1. Kopiere die Formen/Muster, die du verwenden möchtest
2. Füge sie in deine Vorlagendatei ein
3. Skaliere und positioniere sie um die UV-Felder herum

Schnellere Methode (empfohlen)

Anstatt jede Form manuell zu bearbeiten:

• Verwende Rechtecke über den UV-Zonen
• Dupliziere sie auf andere Paneele
• Verwende Füllungen, um klare Farbbereiche zu definieren

Dies erleichtert die nächsten Schritte (Ebenen gruppieren + Farbsteuerung) erheblich.

Konfiwear funktioniert am besten, wenn jede Farbebene ein einziges sauberes Vektorobjekt (oder eine saubere Gruppe) pro ID ist.

Für jeden Farbbereich:

1. Wählen Sie ein Objekt dieser Farbe aus
2. Gehen Sie zu:
   • Auswählen → Gleiches → Füllfarbe (oder Füllung & Kontur)
3. Ausschneiden
4. An Ort einfügen
5. Gehen Sie zu:
   • Objekt → Verbundpfad → Erstellen

Wiederholen Sie diesen Vorgang, bis Ihr Design auf wenige saubere Farbebenen vereinfacht ist.

Wie viele Farben können Sie verwenden?

Konfiwear unterstützt für diesen Arbeitsablauf bis zu 5 Farbebenen:

• primary
• secondary
• accent
• accent2
• accent3

Weitere Details zur Designvorbereitung findest du in unserer Dokumentation zum Design-Layout.

Dies ist die wichtigste Regel:

Zulässige Konfiwear-Ebenen-IDs

Verwende genau diese Namen (Groß-/Kleinschreibung wird empfohlen):

• primary
• secondary
• accent
• accent2
• accent3

Typische Zuordnung:

• Hintergrund / Hauptfläche = primary
• Zweitwichtigste Bereiche = secondary
• Akzente / Einfassungen = accent, accent2, accent3

Tipp: Achten Sie auf einheitliche Benennung bei allen Formen, die zur selben Ebene gehören.

Schritt 7 – SVG korrekt exportieren (Artboard verwenden)

Exportieren Sie nun Ihr fertiges Design als SVG:

1. Speichern Sie zunächst Ihre Illustrator-Datei (AI)
2. Dann:
   • Datei → Exportieren → Als exportieren
3. Wählen Sie: SVG
4. Aktivieren Sie: Artboards verwenden (sehr wichtig)

Exportieren.

Illustrator fügt oft Suffixe hinzu wie:

• primary_1
• secondary_2
• accent_3

Konfiwear erwartet jedoch, dass die ID genau lautet:

• primary, nicht primary_1

Behebung mit svgviewer.dev

1. Öffne svgviewer.dev
2. Leere die Arbeitsfläche
3. Ziehe deine exportierte SVG-Datei per Drag & Drop hinein
4. Klicke nacheinander auf jedes Objekt und überprüfe dessen ID
5. Entfernen Sie überflüssige Suffixe, sodass die IDs wie folgt lauten:
   • primary
   • secondary
   • accent
   • accent2
   • accent3
6. Laden Sie die bereinigte SVG-Datei herunter
7. Ersetzen Sie die alte SVG-Datei in Ihrem Projektordner

Konfiwear benötigt für jedes Design ein Vorschaubild.

Option A (schnell): Export aus Illustrator

1. In Illustrator:
   • Als PNG (oder JPG)
2. Aktivieren Sie: „Artboard verwenden“
3. Speichern Sie die Datei

Option B (empfohlen): Erstellen Sie eine Vorschau mit dem Mockup-Designer

Dies liefert eine ansprechende Vorschau des „echten Produkts“:

1. In Konfiwear:
   • Gehe zum Mockup Designer
2. Erstelle ein neues Mockup
3. Wähle dein Basketball-Trikot-Modell aus
4. Lade dein exportiertes PNG hoch
5. Positioniere es ansprechend in der 3D-Ansicht
6. Speichere und erzeuge die Vorschau
7. Laden Sie das Vorschaubild herunter oder kopieren Sie es

Eine vollständige Anleitung zu Mockup-Workflows finden Sie unter: Mockup-Freigabe-Workflow in Konfiwear.

Veröffentlichen Sie es nun:

1. Gehen Sie zu:
   • Instanz → Designs
2. Klicken Sie auf:
   • Neues Design hinzufügen
3. Wählen Sie den Typ:
   • Sublimationsdesign
4. Geben Sie Folgendes ein:
   • Name: z. B. Basketball-Design 1
   • Bild: Laden Sie Ihr Vorschaubild hoch (PNG/JPG)
   • Textur: Laden Sie Ihre bereinigte SVG-Datei hoch

Klicken Sie auf Design hinzufügen.

Weisen Sie dem Design nach dem Hochladen dieselbe Kategorie zu, die auch für Ihr Modell verwendet wird.

Beispiel:

• Wenn Ihr Trikotmodell der Kategorie Basketball zugeordnet ist
• Dann muss auch Ihr Design der Kategorie Basketball zugeordnet werden

Nur so wird es in den Filtern des Customizers angezeigt.

Weitere Informationen zu Produktkategorien und Filterfunktionen finden Sie in unserer Produktdokumentation.

1. Gehen Sie zum Customizer
2. Wählen Sie das Basketballtrikot-Produkt aus
3. Öffnen Sie Ihr neues Design aus der Designbibliothek

Testen Sie nun die Farbsteuerung:

• Ändern Sie „primary“
• Ändern Sie secondary
• Ändern Sie accent, accent2, accent3

Wenn Ihre Benennung korrekt ist, werden die Farbänderungen sofort live angezeigt.

Mein Design wird angezeigt, aber die Farben ändern sich nicht

• Ihre SVG-IDs enthalten wahrscheinlich Suffixe wie primary_1
• Öffne die Datei erneut in svgviewer.dev und bereinige alle IDs

Das Design sieht auf dem Trikot falsch ausgerichtet aus

• Vergewissere dich, dass die Illustrator-Zeichenfläche 2048×2048 groß ist
• Vergewissere dich, dass du die UV-Koordinaten auf 1024 / 1024 zentriert hast
• Vergewissere dich, dass du das exportierte UV-Layout als Platzierungsreferenz verwendet hast

Das Design wird im Customizer nicht angezeigt

• Vergewissern Sie sich, dass Sie eine Kategorie zugewiesen haben, die mit der Produktmodellkategorie übereinstimmt

Benötigen Sie Hilfe? In unserer Dokumentation zur Designvorbereitung finden Sie weitere Anleitungen und Tipps.