Product Designer en Customizer
Geavanceerde ontwerptools
Combineer afbeeldingen, tekst en vectoren in één ontwerp. Werk de bedrukking uit in Product Designer, bekijk het resultaat op een 3D-model en laat klanten personaliseren in Customizer.
Van compositie naar product
Ontwerpen in 2D en 3D
Ontwerp op een plat 2D-gebied, werk rechtstreeks op de bedrukkingsgebieden van een 3D-model of gebruik beide weergaven naast elkaar. Plaats en pas elementen aan terwijl je hun schaal en positie op het product controleert.
De gecombineerde weergave helpt je de compositie te beoordelen in de context van de werkelijke productvorm. Je ziet dezelfde tekst, afbeelding of hetzelfde motief als bedrukkingsontwerp én als onderdeel van de productvisualisatie.
Raster en bedrukkingsvoorbeeld in 2D
Raster en magnetisch uitlijnen
Schakel het raster en magnetisch uitlijnen op lagen in om elementen nauwkeuriger te plaatsen.
Voorbeeld zonder achtergrondafbeelding
Verberg de achtergrondafbeelding van de werkruimte om de bedrukking zelf nauwkeuriger te beoordelen. De ontwerpelementen blijven zichtbaar.
Afbeelding boven of onder het raster
Kies of de achtergrondafbeelding boven of onder het raster wordt weergegeven.
Je eigen voorbeeldachtergrond
Gebruik in plaats van de afbeelding een witte, grijze, zwarte of zelfgekozen achtergrond. Controleer randen en transparante delen op een contrasterende kleur. Dit verandert alleen het voorbeeld, niet het bedrukkingsontwerp.
Afbeeldingen, dekking en compositie
Een foto, illustratie of logo kan het uitgangspunt voor je hele ontwerp zijn. Pas uiterlijk, transparantie en positie aan en combineer de afbeelding daarna met tekst en andere lagen.
Je eigen afbeeldingen
Voeg JPEG-, PNG- en WebP-afbeeldingen en SVG-bestanden toe. Vervang een afbeelding in de compositie om een nieuwe ontwerpvariant te maken.
Dekking van 0 tot 100%
Combineer motieven, maak subtiele achtergronden en bepaal hoe sterk een afbeelding op het product naar voren komt.
Positie en transformaties
Verplaats, schaal, draai en spiegel elementen. Pas hun positie in het bedrukkingsgebied aan in 2D of op het 3D-model.
Patronen voor afbeeldingen, tekst en vormen
Patronen vanuit één motief
Maak een herhalend patroon van één element. Gebruik het als achtergrond, decoratief motief of compositie in het bedrukkingsgebied. De herhaaltool werkt ook met tekst en vormen.
Raster
Grid
Regelmatige rijen en kolommen.
Baksteenverband
Brick
Afwisselend verschoven rijen.
Halve verspringing
Half drop
Elke tweede kolom is verschoven.
Verspreiding
Scatter
Een vrije indeling met een instelbare toevalsseed.
Cirkelvormige indeling
Round
Herhalingen langs een cirkel.
Stel het aantal rijen en kolommen, de afstand en de patroonverschuiving in. Varieer A/B-versies met rotatie, schaal of spiegeling. Wissel elementen, rijen of kolommen af, of kies een dambordindeling; gebruik bij verspreiding een toevalsseed.
Filters en beeldcorrectie
Stem de afbeelding af op het karakter van je collectie zonder het ontwerp te verlaten. Het filterpaneel bevat licht- en kleurcorrecties, detailbewerking, halftonen en controle over halftransparantie.
| Filter of correctie | Wat je kunt doen |
|---|---|
| Helderheid | Maak de afbeelding lichter of donkerder voordat je deze in de compositie plaatst. |
| Contrast | Vergroot of verklein het verschil tussen lichte en donkere delen van de afbeelding. |
| Zwart-wit | Maak van een kleurenafbeelding een monochrome versie voor je ontwerp. |
| Omkeren | Keer de kleuren om voor een negatiefeffect. |
| Kleurtoon | Verschuif de kleurtoon om de afbeelding een ander karakter te geven. |
| Verzadiging | Bepaal de kleurintensiteit, van ingetogen tot uitgesproken. |
| Levendigheid | Stel de levendigheid van kleuren afzonderlijk bij als onderdeel van de kleurcorrectie. |
| Roodgamma | Corrigeer het toonverloop van het rode kanaal. |
| Groengamma | Corrigeer het toonverloop van het groene kanaal. |
| Blauwgamma | Corrigeer het toonverloop van het blauwe kanaal. |
| Verscherpen | Benadruk randen en kleine details in de afbeelding. |
| Vervagen | Verzacht de afbeelding voor vloeiendere overgangen. |
| Raster / Halftone | Maak een rastereffect met stippen, kruisen of lijnen en pas de structuur aan. |
| Halftransparante achtergrond verwijderen | Werk de transparantie bij met een alfadrempel en een zachte overgang. Deze correctie past de dekking van pixels aan en herkent geen objecten. |
Zes rasterstijlen
Halftonen met controle over elk detail
Geef je afbeelding een ritme van stippen, kruisen of lijnen. Met halftonen bepaal je bewust de structuur van je bedrukking: van een fijn raster tot een uitgesproken decoratief effect.
Bronafbeelding
Halftoon: stippen
Halftoon: lijnen
Kies een rastervorm die bij je afbeelding past
Rond
Vierkant
Ruitvormig
Elliptisch
Kruisen
Lijnen
Afstand en grootte
Bepaal de rasterdichtheid en de grootte van de afzonderlijke elementen.
Hoek en contrast
Draai het raster en pas aan hoe de helderheid van de afbeelding het raster beïnvloedt.
Zachte randen
Kies scherpere of zachtere randen voor de elementen.
Omkeren en volledige dekking
Keer de reactie op helderheid om en schakel volledig dekkende elementen zonder halftransparantie in.
Achtergronden en geselecteerde kleuren verwijderen
Isoleer een motief om het met andere elementen te combineren. Begin automatisch of werk handmatig en verwijder een gekozen kleur met het pipet en de tolerantie-instelling.
Automatisch de achtergrond verwijderen
Isoleer het hoofdonderwerp van een afbeelding en gebruik het zonder de omringende achtergrond in je bedrukking.
Het masker handmatig verfijnen
Verwijder en herstel delen met penseelbewerkingen. Pas de grootte en intensiteit aan om kleine details en randen te corrigeren.
Color knockout
Kies een kleur met het pipet in de tool voor handmatige achtergrondverwijdering. Stel de tolerantie in om overeenkomende pixels uit de hele afbeelding te verwijderen en verfijn het masker daarna met het penseel.
Handmatig maskeren, stap voor stap
Werk aan het afbeeldingsmasker en bepaal welke delen zichtbaar blijven. Pas het resultaat toe zodra de randen en transparantie klaar zijn.
Penseel en gum
Verberg delen van de afbeelding met de gum en herstel ze met het penseel. Regel grootte en intensiteit en, in ondersteunde browsers, ook de hardheid van de rand.
Een geselecteerde kleur verwijderen
Kies een kleur met het pipet en stel de tolerantie in. Verwijder overeenkomende delen en werk details bij met het penseel. In ondersteunde browsers kun je de grens ook met vervaging verzachten.
Cirkelmasker
Schakel een cirkelmasker in en pas de straal, randverzachting en positie van het middelpunt op de X- en Y-as aan.
Controleren en wijzigingen terugdraaien
Verander de achtergrondkleur van het voorbeeld, zoom in en verschuif de weergave om randen te beoordelen. Maak bewerkingen ongedaan of voer ze opnieuw uit, of wis het masker om de afbeelding te herstellen.
Voorbeeld: verwijder een effen achtergrond van een logo, behoud alleen het motief en plaats het op een gekleurd product of herhaal het als patroon. Color knockout verwijdert de gekozen kleur ook binnen de afbeelding; verfijn het resultaat daarom zo nodig met een masker.
Van een korte tekst tot uitgebreide typografie
Tekst die je ontwerp karakter geeft
Maak tekst die past bij het product, het merk en de stijl van de afbeelding. Kies een lettertype, verander de tekstvorm en combineer vulling met een contour of schaduw.
Meer dan 1800 Google-lettertypen
Zoek lettertypen op naam en filter op categorie en ondersteunde schriften. Kies uit schreefletters, schreefloze, decoratieve, handgeschreven en monospace-lettertypen.
Controle over typografie
Pas de lettergrootte, letterafstand, regelafstand en uitlijning aan. Verander hoofdletters en kleine letters, voeg onderstreping of doorhaling toe en gebruik de vetgedrukte en cursieve varianten die het lettertype ondersteunt.
Vullingen, contouren en schaduwen
Combineer effen kleuren met lineaire of radiale verlopen. Voeg een doorlopende of onderbroken contour toe en stel kleur, verschuiving en vervaging van de schaduw in.
Vier manieren om tekst vorm te geven
Standaardtekst
Maak eenvoudige teksten en composities met meerdere regels, met controle over uitlijning en regelafstand.
Gebogen tekst
Buig de tekst en pas de hoek en afstand van de boog aan. Maak een compositie rond een embleem of centrale afbeelding.
Brugtekst - Bridge
Verander de letterhoogte aan de uiteinden en in het midden van de tekst. Bepaal hoe vloeiend de overgang is en stel de verticale positie van het midden in.
Schuine tekst - Oblique
Geef de tekst richting door de hoogte aan het begin en einde en de verticale positie van het einde aan te passen.
Vormen, paden en vectorisatie
Combineer eenvoudige figuren tot composities of werk nauwkeurig met punten en curven. Met de padeditor verfijn je ondersteunde vormen en padlagen.
Kant-en-klare vormen
Begin met een rechthoek, lijn, ellips, cirkel, driehoek, zeshoek, achthoek of ster. Werk vulling, contour en schaduw uit; bij een rechthoek kun je ook de hoeken afronden.
Eigen contouren
Maak van een standaardvorm je eigen embleem, versiering of contour. Bewerk punten van ondersteunde vorm- en padlagen in 2D en bekijk het resultaat op het product.
Punt- en curve-editor: van schets naar nauwkeurige contour
Selecteer een ontgrendelde vorm- of padlaag en open de vectorbewerking. Werk aan één laag tegelijk: teken nieuwe delen of verfijn de bestaande geometrie.
Pen en paden uitbreiden
Teken segmenten met de pen, verbind ze met bestaande punten en sluit contouren. Voeg punten aan het pad toe of verwijder overbodige punten om de vorm te verfijnen.
Punten selecteren en lasso
Selecteer één punt of een groter deel met een selectiekader of lasso. Bewerk het geselecteerde deel van de contour terwijl de overige punten op hun plaats blijven.
Langs het pad verplaatsen
Verplaats punten vrij of langs het bestaande pad. Verplaats geselecteerde punten samen om een heel deel van de compositie te wijzigen.
Béziercurven en handgrepen
Vorm de kromming met inkomende en uitgaande handgrepen. Schakel ze afzonderlijk in en kies onafhankelijke handgrepen, een gespiegelde hoek of behoud van zowel hoek als lengte.
Punten verbinden
Verbind geselecteerde punten met een segment. Breid het pad uit en verfijn de verbindingen waaruit je contour bestaat.
Paden doorsnijden
Trek een snijlijn door het pad om het op te delen. Werk de ontstane delen vervolgens uit met de punt- en curvetools.
Contouren verbreden en versmallen
Verschuif geselecteerde punten over een vaste afstand. Werk in beide richtingen of alleen horizontaal of verticaal om de verhoudingen van het geselecteerde deel te veranderen.
Symmetrieas en spiegelen
Stel de positie en hoek van de as in en spiegel de hele contour of geselecteerde punten. Pas de verbindingsafstand van punten bij de as aan om beide helften goed op elkaar te laten aansluiten.
Wijzigingen ongedaan maken en opnieuw uitvoeren. Probeer verschillende contourvarianten en ga tijdens het bewerken terug naar eerdere bewerkingen.
Verfijn het uiterlijk van vulling en contour
Stel een vulkleur of verloop, contourbreedte en schaduw in. Kies een doorlopende of onderbroken lijn met eigen streep- en tussenruimtelengtes. Gebruik scherpe, afgeschuinde of afgeronde contourverbindingen en vlakke, ronde of vierkante lijnuiteinden. Rond de hoeken van een rechthoek samen of afzonderlijk af.
Voorbeeld: teken een half embleem, spiegel het over de as en verfijn de curven. Voeg daarna een contour en gebogen tekst toe om je eigen motief voor bedrukking te maken.
Een tool van Product Designer
Afbeeldingen vectoriseren naar SVG
Zet een PNG-, WebP- of JPEG-afbeelding om in vectorillustraties. Stel het aantal kleuren en detailniveau in, vergelijk het resultaat met het origineel en pas het toe op je ontwerp of download het SVG-bestand.
- Een palet van 1 tot 32 kleuren en een instelbaar detailniveau.
- Gekoppeld aan de bronafbeelding: schakel vectorisatie uit en bereken het resultaat opnieuw.
- Houdt rekening met het bronmasker en filters; halftonen kunnen herhalende vectorgeometrie blijven.
- Lokale berekening, zonder een AI-dienst voor het genereren van afbeeldingen.
Een kleiner palet vereenvoudigt de stijl van de afbeelding; een groter palet behoudt meer kleurverschillen. Kies passende instellingen en beoordeel het voorbeeld voordat je het resultaat toepast.
QR-codes die bij je ontwerp passen
Een QR-code kan een samenhangend onderdeel van je productontwerp zijn. Combineer een link naar instructies, een collectie of je merkwebsite met je eigen kleuren, vorm en stijl van de code-elementen.
Klassieke geometrie
Vierkante elementen en een effen kleur.
Zachte hoeken
Afgeronde elementen, aparte kaders en middelpunten.
Verloop en merkkleur
Een ronde indeling, kleurverloop en onafhankelijke hoekkleur.
Zes stipstijlen
Geef de code een geometrisch, zacht of decoratief karakter. Combineer de stijl van de binnenste elementen met een onafhankelijk uiterlijk voor de hoeken.
- Vierkant
- Afgerond
- Sterk afgerond
- Classy
- Classy Rounded
- Stippen
Inhoud en vorm van de code
Neem een link naar een website, instructie of collectie op, of je eigen tekst. Kies een vierkante of ronde vorm voor de hele code en pas deze aan de compositie aan.
Afzonderlijke hoekstijlen
Stel de hoekkaders en hun middelpunten onafhankelijk in. Kaders kunnen vierkant, sterk afgerond of rond zijn; middelpunten vierkant of rond. Je kunt ook de standaardstijl behouden.
Vier onafhankelijke kleurgebieden
Kies aparte kleuren voor de stippen, hoekkaders, hoekmiddelpunten en achtergrond. Houd het kleurenpalet van je merk consistent of laat bepaalde codedelen opvallen.
Verlopen en nauwkeurige kleurwaarden
Gebruik een effen kleur of een lineair of radiaal verloop. Voeg kleurstops toe, stel positie en dekking in en voer HEX- of RGB-waarden in. Bij een lineair verloop kun je ook de richting aanpassen.
Een eigen of transparante achtergrond
Voeg een gekleurde achtergrond of verloop toe, of schakel de achtergrond uit zodat de code aansluit op de afbeelding en productkleur. Kies voldoende contrast om de code leesbaar te houden.
Ruimte voor een logo of motief
Reserveer in het midden een vierkant, een liggende rechthoek of een staande rechthoek. Combineer die ruimte met een logo of motief dat je als aparte ontwerplaag toevoegt.
Schaal, draai en plaats de code samen met de andere ontwerpelementen. Controleer vóór productie of de code op de uiteindelijke afdrukgrootte scanbaar is, vooral na kleurwijzigingen of het toevoegen van een motief in het midden.
Lagen, groepen en maskers
Houd ook ontwerpen met veel elementen overzichtelijk. Scheid tekst, afbeeldingen en versieringen en regel hun onderlinge zichtbaarheid met groepen en maskers.
Volgorde en zichtbaarheid
Verplaats elementen in de lagenstapel, verberg ze en maak ze weer zichtbaar. Bouw je compositie stapsgewijs op zonder eerdere ideeën te verwijderen.
Groepen
Voeg samenhangende elementen samen in een groep om uitgebreide ontwerpen eenvoudiger te beheren.
Maskeren
Gebruik de onderste laag van je selectie als masker voor de andere lagen. Beperk de zichtbaarheid van de afbeelding tot een gekozen vorm.
Ontwerpelementen beschermen
Zet vaste elementen boven- of onderaan de stapel vast met een eigenaarsvergrendeling. Houd je logo en andere merkelementen buiten het bewerkbare gedeelte voor klanten en laat ruimte voor personalisatie.
Jouw ontwerp. Personalisatie door je klant.
Personalisatie voor je klanten
Bied klanten Customizer op je website aan. In de bewerkingsmodus kunnen ze tekst, afbeeldingen, vormen en QR-codes toevoegen en hun compositie verfijnen met een productvoorbeeld.
Bereid als eigenaar het ontwerp voor en zet elementen die vast moeten blijven vast met een eigenaarsvergrendeling. De bewerkingsmogelijkheden hangen af van de instellingen en rechten van de ingesloten tool. De hierboven beschreven afbeeldingsvectorisatie is een tool van Product Designer.
Van je eigen afbeelding naar een gepersonaliseerd product
Combineer beeldbewerking, typografie en een 3D-voorbeeld in één proces. Bereid de compositie voor, houd controle over de vaste elementen en geef de klant ruimte voor een eigen idee.
Bekijk de tools in actie