Een sublimatieontwerp voor een basketbalshirt maken

Wat je in deze tutorial gaat maken

In deze Konfiwear-tutorial maak je een sublimatieontwerp voor een basketbalshirt dat perfect werkt in de Konfiwear 3D Customizer.

Als je liever kijkt, begin dan met de onderstaande videotutorial:

• Een schone SVG met Konfiwear-compatibele laag-ID’s (primary, secondary, accent, accent2, accent3)
• Een voorbeeldafbeelding voor je ontwerpbibliotheek
• Een ontwerp dat is geüpload naar Instance → Designs, klaar voor gebruik op je basketbalshirtmodel

Benodigde tools

• Freepik (om een vectorillustratie te downloaden)
• Adobe Illustrator
• Blender (om de UV-lay-out uit je shirtmodel te exporteren)
• Konfiwear (Instance Dashboard)
• svgviewer.dev (om SVG-ID’s op te schonen)

Stap 1 — Download een vectorontwerp voor een shirt (Freepik)

1. Ga naar Freepik en zoek op:
   • Basketball Jersey Design
2. Filter op:
   • Illustratie
   • Vector
3. Kies een ontwerp (gratis of premium).
4. Download het, verplaats het naar je projectmap en pak het uit.
5. Open het .AI-bestand in Adobe Illustrator.

Doel: zorg voor een strakke vectorbasis die je kunt aanpassen aan de UV-lay-out van je shirt.

De UV-lay-out is je blauwdruk. Deze zorgt ervoor dat je ontwerp op de juiste panelen terechtkomt (voorkant, achterkant, zijkanten, enz.).

1. Open je shirtmodel in Blender
2. Selecteer de mesh van het shirt
3. Ga naar UV-bewerking
4. Selecteer alle UV-eilanden
5. Exporteer de UV-lay-out

Belangrijk (verplicht voor Konfiwear-sublimatietexturen):

• Exportgrootte: 2048 × 2048

Geef het een naam zoals:

• UV.png

Zie onze tutorial voor een gedetailleerde handleiding over het voorbereiden van 3D-kledingmodellen en UV-workflows: Van CLO3D naar Konfiwear: hoe je kledingmodellen voorbereidt en importeert.

1. Maak in Illustrator een nieuw document aan
   • Breedte: 2048
   • Hoogte: 2048
2. Plaats je geëxporteerde UV-lay-outafbeelding (UV.png)
3. Centreer deze precies:
   • X: 1024
   • Y: 1024
4. Vergrendel de UV-laag zodat deze niet verschuift.

Je hebt nu een perfect tekengebied voor Konfiwear-sublimatietexturen.

Breng nu je Freepik vectorelementen over naar het nieuwe 2048×2048-document:

1. Kopieer de vormen/patronen die je wilt gebruiken
2. Plak ze in je sjabloonbestand
3. Schaal ze en plaats ze rond de UV-panelen

Snellere methode (aanbevolen)

In plaats van elke vorm handmatig te bewerken:

• Gebruik rechthoeken bovenop de UV-zones
• Dupliceer deze naar andere panelen
• Gebruik vullingen om strakke kleurgebieden te definiëren

Dit maakt de volgende stappen (lagen groeperen + kleurbeheer) veel eenvoudiger.

Konfiwear werkt het beste wanneer elke kleurenlaag bestaat uit één zuiver vectorobject (of een zuivere groep) per ID.

Voor elk kleurgebied:

1. Selecteer één object van die kleur
2. Ga naar:
   • Selecteren → Dezelfde → Vulkleur (of Vulling & Lijn)
3. Knippen
4. Op dezelfde plaats plakken
5. Ga naar:
   • Object → Samengesteld pad → Maken

Herhaal dit totdat je ontwerp is vereenvoudigd tot een paar schone kleurlagen.

Hoeveel kleuren kun je gebruiken?

Konfiwear ondersteunt maximaal 5 kleurlagen voor deze workflow:

• primair
• secundair
• accent
• accent2
• accent3

Raadpleeg onze documentatie over ontwerplay-out voor meer informatie over het voorbereiden van ontwerpen.

Dit is de belangrijkste regel:

Toegestane Konfiwear-laag-ID’s

Gebruik precies deze namen (hoofdlettergevoelig aanbevolen):

• primary
• secondary
• accent
• accent2
• accent3

Typische indeling:

• Achtergrond / hoofdbasis = primary
• Op één na meest zichtbare gebieden = secondary
• Accenten / randen = accent, accent2, accent3

Tip: Houd dit consistent voor alle vormen die tot dezelfde laag behoren.

Stap 7 — SVG correct exporteren (gebruik tekengebied)

Exporteer nu je definitieve ontwerp als SVG:

1. Sla eerst je Illustrator-bestand op (AI)
2. Vervolgens:
   • Bestand → Exporteren → Exporteren als
3. Kies: SVG
4. Schakel in: Artboards gebruiken (zeer belangrijk)

Exporteer.

Illustrator voegt vaak achtervoegsels toe zoals:

• primary_1
• secondary_2
• accent_3

Maar Konfiwear verwacht dat de ID precies zo is:

• primary, niet primary_1

Oplossing met svgviewer.dev

1. Open svgviewer.dev
2. Maak het canvas leeg
3. Sleep je geëxporteerde SVG-bestand erheen
4. Klik op elk object en controleer de ID
5. Verwijder overtollige achtervoegsels, zodat de ID’s als volgt worden:
   • primary
   • secondary
   • accent
   • accent2
   • accent3
6. Download de opgeschoonde SVG
7. Vervang de oude SVG in je projectmap

Konfiwear vereist een voorbeeldafbeelding voor elk ontwerp.

Optie A (Snel): Exporteren vanuit Illustrator

1. In Illustrator:
   • Exporteer als PNG (of JPG)
2. Schakel in: Gebruik tekengebied
3. Sla het bestand op

Optie B (aanbevolen): Genereer een voorbeeld met Mockup Designer

Dit geeft een mooi voorbeeld van het ‘echte product’:

1. In Konfiwear:
   • Ga naar Mockup Designer
2. Maak een nieuwe mockup aan
3. Selecteer je basketbalshirtmodel
4. Upload je geëxporteerde PNG-bestand
5. Plaats het op een mooie plek in de 3D-weergave
6. Sla op en genereer het voorbeeld
7. Download of kopieer de voorbeeldafbeelding

Zie voor een volledige handleiding over mockup-workflows: Workflow voor goedkeuring van mockups in Konfiwear.

Publiceer het nu:

1. Ga naar:
   • Instance → Ontwerpen
2. Klik op:
   • Nieuw ontwerp toevoegen
3. Kies het type:
   • Sublimatieontwerp
4. Vul het volgende in:
   • Naam: bijv. Basketbalontwerp 1
   • Afbeelding: upload je voorbeeldafbeelding (PNG/JPG)
   • Textuur: upload je opgeschoonde SVG

Klik op Ontwerp toevoegen.

Wijs na het uploaden dezelfde categorie toe als die voor je model wordt gebruikt.

Voorbeeld:

• Als je shirtmodel is gecategoriseerd als Basketbal
• Dan moet je ontwerp ook worden gecategoriseerd als Basketbal

Hierdoor verschijnt het in de filters van de Customizer.

Zie onze Productdocumentatie voor meer informatie over productcategorieën en filteren.

1. Ga naar de Customizer
2. Selecteer het basketbalshirt
3. Open je nieuwe ontwerp uit de ontwerpplatform

Test nu de kleurregelaars:

• Wijzig primary
• Wijzig secondary
• Wijzig accent, accent2, accent3

Als je de namen correct hebt ingevoerd, zie je de kleuren direct live veranderen.

Mijn ontwerp wordt weergegeven, maar de kleuren veranderen niet

• Je SVG-ID’s bevatten waarschijnlijk achtervoegsels zoals primary_1
• Open het ontwerp opnieuw in svgviewer.dev en verwijder alle ID’s

Het ontwerp lijkt niet goed uitgelijnd op het shirt

• Controleer of het tekengebied in Illustrator 2048×2048 is
• Controleer of je de UV op 1024 / 1024 hebt gecentreerd
• Controleer of je de geëxporteerde UV-lay-out als plaatsingsreferentie hebt gebruikt

Het ontwerp verschijnt niet in de Customizer

• Controleer of je een categorie hebt toegewezen die overeenkomt met de productmodelcategorie

Hulp nodig? Bekijk onze documentatie over Ontwerpvoorbereiding voor meer handleidingen en tips.