Mockupgeneratorer - præsentation og salg af produkter

Generér produktmockups på få sekunder

Forbered produktpræsentationen én gang, og vis derefter nye tryk og farvevarianter i den. Mockupgeneratoren gemmer visningen, baggrunden og måden, grafikken lægges på produktet på. Den færdige mockup kombinerer disse indstillinger med kundens aktuelle design eller dit design i Designer.

Du kan bruge de generatorer, der er tilgængelige til den valgte model, eller oprette dine egne i Mockup-tilstanden i Product Generator. Nedenfor finder du anvendelseseksempler, indstillinger til 3D-scener og egne fotos, test af mapping samt download af visualiseringer og deres brug i WordPress + WooCommerce-pluginet.

Skærmbillederne viser de faktiske værktøjer i Alter Product, nogle med engelsk grænseflade. Du kan åbne hvert skærmbillede i fuld størrelse.

Opret din egen mockupgeneratorIndstil produktvisninger, finjustér komposition og mapping, og gem derefter generatoren sammen med modellen.Gå til beskrivelsen Brug færdige visninger i dit design og din butikGenerér visualiseringer af det aktuelle tryk, download billeder, og vis personaliseringen i kurven.Gå til beskrivelsen

Har du først brug for din egen 3D-model?Gå til vejledningen til Product Generator: symønstre, Easy Creator, størrelser, simulering, materialer og eksport.

Modellen, generatoren og den færdige mockup

Generatoren gemmer, hvordan produktet præsenteres. En færdig mockup er et billede af et bestemt design, som er lavet med generatoren.

Start med en færdig model eller tilgængelige generatorer

Hvis den valgte model allerede har mockupgeneratorer, kan du straks bruge dem i Product Designer. Vælg en visning i vinduet Mockup, så viser forhåndsvisningen grafikken og farverne fra det aktuelle design.

Åbn modelprojektet i Product Generator, og skift til tilstanden Mockup for at oprette dine egne generatorer. Du skal bruge en forberedt model og overflader, hvor grafikken skal vises. Egne symønstre, simulering og modelmaterialer beskrives i den separate vejledning til oprettelse af 3D-modeller.

Én generator, mange færdige visualiseringer

Eksempel: Du forbereder forsiden af en T-shirt på en lys baggrund. Ved næste tryk behøver du ikke indstille kamera, belysning eller kravens kontur igen. Du åbner Mockup i Designer, og den gemte generator viser det aktuelle design i det samme billedudsnit.

Hvad du forbereder én gang, og hvad du ændrer i nye designs
Element	Hvad det styrer
3D-model	Produktets form og de overflader, hvor du placerer designet. Samme model kan have flere generatorer, f.eks. til forside, sider og bagside.
Mockupgenerator	Billedudsnit, baggrund, belysning samt delenes mapping og lag. Du redigerer den, når du vil ændre produktets præsentation.
Design i Designer eller Customizer	Grafik, tekster og valgte produktfarver. Når designet ændres, får du en ny mockup med den forberedte generator.
Downloadet PNG-mockup	Et færdigt billede af et bestemt design og en bestemt visning. Du kan bruge det i et tilbud, et katalog eller markedsføringsmateriale.

Tre arbejdsområder til mockups

Vælg det trin, der svarer til det, du vil finjustere. 3D-komposition og fototilpasning giver to måder at forberede basisbilledet på.

3D-komposition

Lav en visualisering ud fra en færdig model.

Indstil kamera, billedskala, belysning, skygger og baggrund.
Generér basisbilledet og de lag, der er nødvendige for at vise efterfølgende tryk.

Fototilpasning

Brug dit eget produktfoto som grundlag for præsentationen.

Tilpas modellen til fotoet med position, rotation, skala og de tilgængelige deformationsværktøjer.
Generér lag ud fra den forberedte tilpasning.

Mapping

Finjustér delenes konturer, og hvordan trykket vises på billedet.

Redigér vektorpunkter og håndtag, masker, skygger og højlys.
Dette trin kræver et forberedt basisbillede og vektorstier.

Fra en forberedt visning til nye designs

Lav kompositionen én gang, og genbrug generatoren, når grafikken og farverne ændres.

Vælg en model, og tilføj visninger i tilstanden Mockup.
Forbered en 3D-komposition eller en fototilpasning, og generér derefter lagene.
Kontrollér trykkets mapping på alle dele, og gem projektet med generatorerne.
Brug de gemte visninger i Designer, eller gør produktet tilgængeligt for kunderne i Customizer.

Eksempler: fra katalog til kundepersonalisering

Tilpas forberedelsen af generatoren til det sted, hvor produktet skal vises. Scenarierne nedenfor kan udføres med de samme værktøjer ved at ændre komposition og trykdesign.

Hvilken produktpræsentation vil du forberede?

Start med målet: sammenlignelige billeder af varianter, en genkendelig brandstil eller en visualisering på dit eget foto.

Et ensartet produktkatalog

En T-shirt på en lys baggrund, i samme skala og med en diskret skygge. Hvert nyt tryk vises i den samme visning.

Brug 3D-komposition, og forbered forside, sider og bagside.
Finjustér billedudsnittene, før du begynder at downloade flere designs.
Resultatet: Kunden kan lettere sammenligne mønstre og farver i sortimentet.

En komposition i dit brands stil

Vælg en baggrund i kollektionens farve, en gradient eller dit eget billede. Tilpas lys og skygge, så produktet passer til de forberedte omgivelser.

Gem indstillingerne som en visning af modellen.
Generér et opdateret basisbillede, når baggrunden er ændret.
Resultatet: Nye designs beholder det samme visuelle udtryk.

Dit eget produktfoto

Har du et foto af en T-shirt i en bestemt opstilling? Brug Fototilpasning til at tilpasse modellen til fotografiet og forberede påføring af nye tryk.

Tilpas silhuet, ærmer og kamera til fotoet.
Kontrollér mappingen med et testtryk, og korrigér konturerne.
Resultatet: Dit eget foto bliver grundlaget for genanvendelige mockups.

Kundens design i kurven

Kunden ændrer grafik, tekst eller farve i Customizer. De generatorer, der er tilgængelige til modellen, skaber visualiseringer af netop dette design.

Forbind designet med et produkt i WordPress + WooCommerce-pluginet.
Billederne oprettes, når personaliseringen lægges i kurven.
Resultatet: Miniaturen ved varen i kurven og ordren viser kundens design.

Samme tryk på en hvid og en grøn T-shirt

Billederne fra applikationen nedenfor viser samme design med frugtmotiv i to produktfarver. Visningen forbliver ensartet, og mockuppen viser trykket sammen med den valgte T-shirtfarve.

Lav trykket i Designer, og vælg produktfarven.
Åbn Mockup, og vælg forsiden.
Skift produktfarven, og åbn derefter den samme visning igen.
Download enkelte PNG-filer eller en variantpakke, hvis der er passende farveforudindstillinger til designet.

Hvid T-shirt med frugttryk i vinduet Mockupgenerator med miniaturer af fire visninger og downloadindstillinger. — Hvid produktvariant. Samme design og forsidevisning; panelet ved siden af tilbyder også sider og bagside.

Grøn T-shirt med frugttryk i vinduet Mockupgenerator med miniaturer af fire visninger og downloadindstillinger. — Grøn produktvariant. Samme design og forsidevisning; panelet ved siden af tilbyder også sider og bagside.

Opret en generator til produktmockups

Når modellen er klar i Inspector, skifter du til tilstanden Mockup. Her forbereder du en fælles komposition til nye motiver og produktvarianter.

Forside, sider og bagside med én kommando

Vælg Opret automatisk i panelet Projektmockups for at oprette fire visninger: Forside, Venstre side, Højre side og Bagside. Du kan også tilføje din egen visning med Tilføj ny, omdøbe den og ændre rækkefølgen. Hver generator bevarer sit eget billedudsnit og sine indstillinger.

Panel med fire produktvisninger i mockupeditoren: forside, venstre side, højre side og bagside. — Automatisk oprettelse af de fire grundvisninger. Hvert billedudsnit kan efterfølgende finjusteres separat.

Kamera, baggrund og belysning

I 3D-komposition placerer du produktet som grundlag for billedet. Tilpas billedudsnit og belysning til stilen i dit katalog eller dit brand.

Start med en enkel baggrund og en tydelig produktsilhuet til et katalog. Brug et ortografisk kamera, når du ønsker en rolig præsentation uden perspektivisk forkortning. Perspektiv fremhæver den rumlige form mere. Sørg for plads i billedet til ærmer, produktets underkant og skyggen.

Gulvskyggen forankrer produktet i kompositionen, mens vægskyggen skaber dybde. Du kan tilpasse position, størrelse, opacitet og blødhed uafhængigt. Med eksponering og kurver for højlys, mellemtoner og skygger gør du detaljerne tydelige igen. Hold trykket skarpt i katalogbilleder; tilpas Bloom og dybdeskarphed til mere stemningsfulde billeder.

Dokument og model: Angiv et navn, og indstil masterbilledets bredde og højde inden for 64-2048 px pr. kant.
Kamera: Vælg perspektiv eller ortografisk visning. Justér rotation, målpunkt, afstand og synsfelt eller billedskala.
Belysning: Vælg et miljø fra biblioteket, og indstil rotation, intensitet og sortpunkt. Styr gulv- og vægskygger separat, herunder blødhed og opacitet.
Baggrund: Brug en farve, en gradient, miljøets baggrund eller dit eget billede. Tilpas udfyldning af billedrammen, transformation og gennemsigtighed. Her skaber du omgivelser, der matcher produktets branding.
Efterbehandling: Tonemapping og eksponering, farvekurver, ambient occlusion, Bloom, dybdeskarphed, skarphed, vignet og korn. MSAA/FXAA-kantudjævning hjælper med at finjustere kanterne.

Mockupeditor med baggrundsbibliotek og en T-shirt foran blade i forhåndsvisningen af 3D-scenen. — Valg af baggrund ændrer scenekompositionen til højre. Generering opdaterer basisbilledet til venstre.

Tilpas modellen til dit eget foto

I tilstanden Fototilpasning kan du bruge din egen JPG-, PNG- eller WebP-fil. Justér kameraet og skalaen for den overlejrede model samt dens opacitet og position. Til tøj findes der knogleværktøjer, forudindstillinger til ærmernes position og blød deformation med justerbar radius og styrke. Brug den forberedte tilpasning til at generere mockuplagene.

Til understøttet tøj kan du oprette en automatisk rig og tilpasse knoglerne ved at flytte, rotere og ændre længden. Spejlede indstillinger hjælper med at bevare symmetrien. Ærmeforudindstillinger giver mulighed for at starte fra den oprindelige position, let sænkede ærmer eller ærmer langs kroppen. Blød deformation og blød rotation virker lokalt: Du vælger radius, styrke og hvordan påvirkningen aftager - glat, lineært, sfærisk eller skarpt. Forhåndsvisning af nettet gør det lettere at vurdere formen.

Indlæs et JPG-, PNG- eller WebP-foto, og brug det som grundlag for tilpasningen.
Tilpas modellens kamera, position, rotation og skala. Overlejringens opacitet hjælper dig med at sammenligne silhuetten med produktet på fotoet.
Brug den tilgængelige rig, ærmeindstillinger og blød deformation til tøj. Arbejd fra den overordnede form til lokale rettelser.
Vælg Generér fra tilpasning, gå derefter til Mapping, og kontrollér kanterne og testtrykket.

Finjustér mockuppens mapping og lag

Basisbilledet, trykmasken, skyggerne og højlysene arbejder sammen, så grafikken følger produktets udseende og form. Når de er korrekt forberedt, kan du genbruge den samme visualisering.

Generér og kontrollér lag

Vælg Generér alle lag i 3D-komposition og Generér fra tilpasning ved fototilpasning. Kontrollér derefter de enkelte lag og resultatet på produktet.

Mockupgeneratorens outputlag
Lag	Hvad du styrer
Basisbillede	Produktets billedudsnit, baggrund og scenens udseende. Generér billedet igen efter ændringer i kompositionen.
Trykmaske	Grafikkens synlige område, tærskelværdi, kantens blødhed og forskydning samt kantudjævning.
Skygger	Styrke, gamma og hvidpunkt, så trykket bevarer produktets skygger.
Højlys	Tærskelværdi, styrke og gamma for de lyse områder i kompositionen.

Kontrollér generatoren med et testtryk

Åbn værktøjet til testtryk, før du går videre til det endelige design. Du kan tildele hver tilgængelig del sit eget mønster. Når farveændring er tilgængelig, kan du også teste farven på hele produktet eller de enkelte dele.

UV-skaktern

Det farvede gitter hjælper dig med at se strækning, retningsændringer og brud i grafikken. Se især på krave, ærmer og sidekanter.

Pladsholderen ”Your design here”

Markører og grafikken i midten gør det lettere at vurdere, hvor trykket placeres, og om konturen eller masken skærer det af.

Gentaget tekst

Mønstret med teksten Alter Product hjælper dig med at vurdere bogstavernes læsbarhed, proportioner og retning på den valgte del.

Produktets og delenes farver

Sammenlign en lys og en mørk variant. Så er det lettere at opdage for kraftige skygger, udbrændte højlys eller en lys kant omkring trykket.

Delenes konturer og detaljekorrektion

Gå til Mapping, vælg en produktdel, og justér punkterne og Bézier-håndtagene i dens kontur. Du kan korrigere krave, ærme og kanter præcist og derefter genberegne lagene. Genereringsmenuen giver også mulighed for at genskabe konturer eller opdatere kun basisbilledet, mens de eksisterende vektorer bevares.

Ret først konturens geometri, hvis trykket går ud på baggrunden eller ikke når kanten. Finjustér derefter masken og dens blødhed. Justér skygger og højlys til sidst, og sammenlign resultatet på en lys og en mørk produktfarve.

T-shirtkrave med konturpunkter og håndtag samt lagpanelet for basisbillede, trykmaske, skygger og højlys. — Korrektion af vektorkonturen ved kraven i tilstanden Mapping. Panelet viser de lag, der bruges til at påføre trykket.

Hvad skal genereres igen efter en ændring?

Vælg opdateringens omfang, så manuelle rettelser bevares dér, hvor de stadig er nødvendige.

Genereringskommandoer og deres anvendelse
Omfang	Hvornår det bruges
Alle lag	Efter forberedelse af scenen eller større ændringer i kompositionen, når basisbilledet og mockuplagene skal opdateres.
Lag fra gemte vektorer	Efter en manuel rettelse af konturen, når du vil genberegne resultatet og bevare de finjusterede stier.
Genskab konturer	Når du vil udlede konturerne fra modellen igen. Geometrien genskabes, så tidligere manuelle rettelser kan blive erstattet.
Kun basisbilledet	Når du skal opdatere billedet uden at overskrive eksisterende vektorer. Kontrollér også de relevante lag efter ændringer, der påvirker skygger eller masken.

Gem generatorerne sammen med modelprojektet

Gem Product Generator-projektet, når du har finjusteret visningerne. Generatorsamlingen hører til modellen og den revision, Designer bruger. I applikationen gemmes projektet på serveren, mens det i WordPress-pluginet gemmes lokalt.

Efter ændringer af kamera, baggrund, lys eller tilpasning skal du opdatere de relevante lag og kontrollere resultatet før gemning. Download af en PNG fra Designer opretter et billede af det aktuelle design. Gemning af modelprojektet bevarer generatoren til videre redigering.

Brug mockups i Designer og WooCommerce

Den forberedte generator bliver en del af arbejdet med modellen. Under designarbejdet bruger du færdige visninger med den aktuelle personalisering.

Færdig grafik i et ensartet billedudsnit

Åbn Mockup i Product Designer. Vælg miniaturen af forsiden, siden eller bagsiden i vinduet Mockupgenerator. Forhåndsvisningen bruger grafikken og farverne fra det aktuelle design. Kamera, lys og baggrund forbereder du på forhånd i modelgeneratorens Mockup-tilstand.

Mockupgenerator i Designer: sort T-shirt med gylden grafik, fire visninger og indstillinger til billeddownload. — Det færdige design i vinduet Mockupgenerator. Miniaturerne bruges til at vælge visning, og panelet nedenunder bruges til at forberede download.

Download PNG eller farvevarianter

Vælg en visning og Billedstørrelse: Thumb 256, Lille 512, Mellem 1024 eller Stor 2048 px. Værdien angiver den længste kant; proportionerne kommer fra generatoren. Download billeder gemmer en PNG af den valgte visning.

Med mindst to matchende forudindstillinger opretter Generér billeder for alle farveforudindstillinger en ZIP-fil med samme visning i forskellige farvevarianter. Med færre forudindstillinger downloader du én PNG.
De tilgængelige forudindstillinger afhænger af det valgte materiale, trykteknik og størrelse. Egne farver uden for forudindstillingerne indgår ikke i pakken.
Hvis du har brug for andre sider af produktet, skal du vælge de næste miniaturer og downloade deres billeder.

Personalisering synlig i kurv og ordre

I WordPress + WooCommerce-pluginet bruger du et lokalt projekt og den tilknyttede modelrevision. For et produkt med tilgængelige mockupgeneratorer opretter applikationen billeder af personaliseringen, når designet lægges i kurven. Når filerne er gemt, viser pluginet dem ved varen i kurven og ordren.

Du behøver ikke at åbne vinduet Mockup manuelt for hver kundeordre.
Resultaterne indeholder designet og de valgte produktfarver. Generatorer og ressourcer skal være tilgængelige for den modelrevision, der bruges.
Miniaturer understøttes i den klassiske kurv samt WooCommerce-blokkene Cart/Checkout. Hvis en gemt mockup ikke er tilgængelig, vises produktets standardminiature fortsat.

Forbered og gem generatorerne sammen med den model, der bruges i designet.
Gør designet tilgængeligt i et produkt, som håndteres af WordPress + WooCommerce-pluginet.
Kunden personaliserer produktet i Customizer og lægger designet i kurven.
Applikationen opretter mockups af de tilgængelige visninger til det valgte design og farverne. Når billederne er gemt, bruger pluginet den personaliserede miniature ved varen i kurven og ordren.

Visualisering til butikken og fil til produktion

En mockup viser produktets udseende: færdig grafik, form, skygger og baggrund. Brug den i et tilbud, et katalog eller til at vise kunden personaliseringen.

Til produktion skal du forberede filer for trykområderne i Print Manager. Det gælder også AOP-designs, hvor grafikken dækker forskellige dele af produktet. Vejledningen Trykklare filer beskriver indstillinger og download af produktionsfiler.

Kontrollér den færdige generator, før den bruges i butikken

Test flere forskellige tryk og produktfarver. En generator, der er forberedt med ét enkelt motiv, bør også vise lille tekst, grafik ved kanten og større AOP-tryk korrekt.

En kort test fra redigering til kurv

Gennemgå det samme forløb, som du eller din kunde senere skal bruge.

Se alle gemte visninger. Kontrollér produktets billedudsnit, skyggen og margenerne.
Aktivér skaktern eller testtekst på de dele, der skal trykkes. Kontrollér konturer, maske og grafikkens placering.
Sammenlign en lys og en mørk farve samt det endelige tryk i Designer. Download en PNG, og se den i den tilsigtede størrelse.
Gem modelprojektet efter ændringer. Kontrollér i pluginet et design, der bruger den korrekte modelrevision, og test at lægge personaliseringen i kurven.

Hvad kan du rette, hvis resultatet ikke ser ud som forventet?

Start med det trin, der er ansvarligt for problemet. Ikke alle rettelser kræver, at hele scenen indstilles igen.

Typiske problemer og hvor de rettes
Hvad du ser	Hvad du skal kontrollere
Trykket går uden for produktet eller forsvinder ved kraven	Delens kontur i Mapping, Bézier-håndtagene og trykmaskens indstillinger. Genberegn de nødvendige lag efter rettelsen.
Gitteret eller bogstaverne er strakt for meget	Modellens tilpasning til fotografiet og mappingen af den pågældende del. Ret formen, før du skjuler problemet med en for blød kant.
Grafikken er for mørk eller for lys	Indstillingerne for skygge- og højlyslag. Kontrollér også eksponering og scenebelysning i en 3D-komposition.
Det gamle billede vises stadig efter ændring af baggrunden	Opdatér basisbilledet med den relevante genereringskommando, og gem projektet. Valg af en baggrund ændrer scenen, men erstatter ikke det tidligere genererede billede.
ZIP-pakken indeholder ikke sider eller bagside	Variantpakken gælder den valgte visning. Vælg den næste miniature, og download billederne til den side af produktet.
Muligheden for en pakke med alle farver mangler, eller der downloades kun én PNG	Kontrollér antallet af passende forudindstillinger til materiale, trykteknik og størrelse. Der kræves mindst to.
Kurven viser produktets standardfoto	Kontrollér, at de gemte generatorer og deres ressourcer er tilgængelige for den modelrevision, designet bruger, og at mockupperne blev gemt korrekt.