Composition 3D
Créez un visuel à partir du modèle préparé.
- Réglez la caméra, l'échelle du cadrage, l'éclairage, les ombres et le fond.
- Générez l'image de base et les calques nécessaires pour afficher les motifs suivants.
Générateurs de mockups - présentation et vente de produits
Générez des mockups de produits en quelques secondes
Préparez une fois la présentation du produit, puis réutilisez-la pour de nouveaux motifs et variantes de couleur. Le générateur de mockups conserve la vue, le fond et la manière d'appliquer le visuel au produit. Le mockup final combine ces réglages avec le projet actuel du client ou votre projet dans Designer.
Vous pouvez utiliser les générateurs disponibles pour le modèle choisi ou créer les vôtres dans le mode Mockup de Product Generator. Vous trouverez ci-dessous des exemples d'utilisation, les réglages de scène 3D et de photo personnelle, les tests de mappage ainsi que le téléchargement des visuels et leur utilisation dans l'extension WordPress + WooCommerce.
Les captures montrent les véritables outils Alter Product, parfois avec une interface en anglais. Vous pouvez ouvrir chaque capture en taille réelle.
Créez votre propre générateur de mockupsConfigurez les vues du produit, affinez la composition et le mappage, puis enregistrez le générateur avec le modèle.Voir la descriptionUtilisez les vues préparées dans vos projets et votre boutiqueGénérez des visuels du motif actuel, téléchargez les images et présentez la personnalisation dans le panier.Voir la description
Vous avez d'abord besoin de votre propre modèle 3D ?Consultez le guide Product Generator : patrons, Easy Creator, tailles, simulation, matériaux et exportation.Modèle, générateur et mockup final
Le générateur enregistre la manière de présenter le produit. Le mockup final est l'image d'un projet précis, créée à l'aide de ce générateur.
Partez d'un modèle prêt à l'emploi ou des générateurs disponibles
Si le modèle choisi dispose déjà de générateurs de mockups, vous pouvez les utiliser immédiatement dans Product Designer. Sélectionnez une vue dans la fenêtre Mockup : l'aperçu affiche le visuel et les couleurs du projet en cours.
Pour créer vos propres générateurs, ouvrez le projet du modèle dans Product Generator et passez en mode Mockup. Il vous faut un modèle préparé et les surfaces sur lesquelles afficher le visuel. Un guide distinct consacré à la création de modèles 3D présente les patrons, la simulation et les matériaux du modèle.
Un générateur, de nombreux visuels prêts à l'emploi
Exemple : vous préparez la face d'un t-shirt sur fond clair. Pour le motif suivant, inutile de régler à nouveau la caméra, l'éclairage ou le contour du col. Ouvrez Mockup dans Designer : le générateur enregistré présente le projet actuel dans le même cadrage.
| Élément | Son rôle |
|---|---|
| Modèle 3D | La forme du produit et les surfaces sur lesquelles vous placez le projet. Un même modèle peut avoir plusieurs générateurs, par exemple pour la face, les côtés et le dos. |
| Générateur de mockups | Le cadrage, le fond, l'éclairage, le mappage des pièces et les calques. Modifiez-le lorsque vous souhaitez changer la présentation du produit. |
| Projet dans Designer ou Customizer | Les visuels, les textes et les couleurs choisies pour le produit. En modifiant le projet, vous obtenez un nouveau mockup avec le générateur préparé. |
| Mockup PNG téléchargé | L'image finale d'un projet et d'une vue précis. Utilisez-la dans vos offres, votre catalogue ou vos supports promotionnels. |
Trois espaces de travail pour le mockup
Choisissez l'étape correspondant à ce que vous souhaitez affiner. La composition 3D et l'ajustement sur photo offrent deux façons de préparer l'image de base.
Ajustement sur image
Utilisez votre propre photo du produit comme base de présentation.
- Ajustez le modèle à la photo à l'aide de sa position, de sa rotation, de son échelle et des outils de déformation disponibles.
- Générez les calques à partir de cet ajustement.
Mappage
Affinez les contours des pièces et le rendu du motif sur l'image.
- Modifiez les points et les poignées vectorielles, les masques, les ombres et les hautes lumières.
- Cette étape nécessite une image de base et des tracés vectoriels préparés.
D'un cadrage préparé aux créations suivantes
Préparez la composition une seule fois, puis réutilisez le générateur lorsque vous modifiez les visuels et les couleurs.
- Choisissez le modèle et ajoutez des vues en mode Mockup.
- Préparez une composition 3D ou un ajustement sur photo, puis générez les calques.
- Vérifiez le mappage du motif sur toutes les pièces et enregistrez le projet avec ses générateurs.
- Utilisez les vues enregistrées dans Designer ou proposez le produit à vos clients dans Customizer.
Exemples : du catalogue à la personnalisation du client
Adaptez la préparation du générateur à l'endroit où vous présenterez le produit. Les scénarios ci-dessous utilisent les mêmes outils : seuls la composition et le motif changent.
Quelle présentation du produit souhaitez-vous préparer ?
Commencez par votre objectif : des photos de variantes faciles à comparer, un style de marque reconnaissable ou un visuel basé sur votre propre photo.
Un catalogue de produits cohérent
Un t-shirt sur fond clair, à échelle constante et avec une ombre légère. Chaque nouveau motif apparaît dans la même vue.
- Utilisez Composition 3D pour préparer la face, les côtés et le dos.
- Affinez les cadrages avant de télécharger les projets suivants.
- Résultat : le client compare plus facilement les motifs et les couleurs de votre offre.
Une composition aux couleurs de votre marque
Choisissez un fond dans une couleur de la collection, un dégradé ou votre propre image. Adaptez la lumière et l'ombre pour intégrer le produit au décor préparé.
- Enregistrez les réglages comme une vue du modèle.
- Après avoir changé le fond, générez une image de base à jour.
- Résultat : les projets suivants conservent la même identité visuelle.
Votre propre photographie du produit
Vous avez une photo du t-shirt dans le décor souhaité ? Utilisez Ajustement sur image pour adapter le modèle à la photo et préparer l'application des prochains motifs.
- Ajustez la silhouette, les manches et la caméra à la photo.
- Vérifiez le mappage avec un motif de test et corrigez les contours.
- Résultat : votre propre photographie devient la base de mockups reproductibles.
Le projet du client dans le panier
Le client modifie le visuel, le texte ou la couleur dans Customizer. Les générateurs disponibles pour le modèle préparent les visuels de ce projet précis.
- Associez le projet à un produit dans l'extension WordPress + WooCommerce.
- Les images sont créées lors de l'ajout de la personnalisation au panier.
- Résultat : la miniature de l'article dans le panier et la commande présente le projet du client.
Le même motif sur un t-shirt blanc et un t-shirt vert
Les captures ci-dessous montrent le même projet à motif fruité dans deux couleurs de produit. Le cadrage reste cohérent et le mockup associe le motif à la couleur choisie pour le t-shirt.
- Préparez le motif dans Designer et choisissez la couleur du produit.
- Ouvrez Mockup et sélectionnez la vue de face.
- Changez la couleur du produit, puis rouvrez la même vue.
- Téléchargez des PNG individuels ou un ensemble de variantes si des préréglages de couleur compatibles sont disponibles pour le projet.
Préparez un générateur de mockups de produit
Une fois le modèle prêt dans Inspector, passez en mode Mockup. Vous y préparez une composition commune aux futurs visuels et variantes du produit.
Face, côtés et dos en une seule commande
Dans le panneau Mockups du projet, choisissez Créer automatiquement pour préparer quatre vues : Face, Côté gauche, Côté droit et Dos. Vous pouvez aussi ajouter une vue personnalisée avec Ajouter, la renommer et modifier son ordre. Chaque générateur conserve son propre cadrage et ses réglages.
Caméra, fond et éclairage
Dans Composition 3D, le produit constitue la base de l'image. Adaptez le cadrage et l'éclairage au style de votre catalogue ou de votre marque.
Pour un catalogue, commencez par un fond simple et une silhouette bien lisible. Utilisez une caméra orthographique pour une présentation sobre sans raccourci de perspective. La perspective met davantage en valeur le volume du produit. Prévoyez une marge dans le cadre pour les manches, le bas du produit et l'ombre.
L'ombre au sol ancre le produit dans la composition, tandis que l'ombre au mur crée une impression de profondeur. Réglez séparément leur position, leur taille, leur opacité et leur douceur. L'exposition et les courbes des hautes lumières, tons moyens et ombres permettent de retrouver des détails lisibles. Pour une photo de catalogue, gardez le motif net ; réservez des réglages de Bloom et de profondeur de champ adaptés aux vues plus évocatrices.
- Document et modèle : donnez un nom et définissez la largeur et la hauteur de l'image maître entre 64 et 2048 px par côté.
- Caméra : choisissez une vue en perspective ou orthographique. Ajustez la rotation, le point cible, la distance et le champ de vision ou l'échelle du cadrage.
- Éclairage : choisissez un environnement dans la bibliothèque et réglez sa rotation, son intensité et son point noir. Contrôlez séparément les ombres au sol et contre le mur, notamment leur douceur et leur opacité.
- Fond : utilisez une couleur, un dégradé, le fond de l'environnement ou votre propre image. Ajustez le mode de remplissage du cadrage, la transformation et la transparence pour créer un décor cohérent avec l'identité de votre produit.
- Post-traitement : tone mapping et exposition, courbes de couleur, occlusion ambiante, Bloom, profondeur de champ, netteté, vignettage et grain. L'anticrénelage MSAA/FXAA aide à affiner les contours.
Ajustez le modèle à votre propre photo
Le mode Ajustement sur image accepte vos fichiers JPG, PNG ou WebP. Ajustez la caméra et l'échelle du modèle superposé, puis réglez son opacité et sa position. Pour les vêtements, vous disposez d'outils d'ossature, de préréglages de position des manches et d'une déformation souple avec rayon et intensité réglables. Cet ajustement sert ensuite à générer les calques du mockup.
Pour les vêtements compatibles, vous pouvez créer une armature automatique et ajuster les os par déplacement, rotation et modification de leur longueur. Le réglage en miroir aide à conserver la symétrie, et les préréglages de manches permettent de partir de la position d'origine, légèrement abaissée ou le long du corps. La déformation et la rotation souples agissent localement : choisissez le rayon, l'intensité et le profil d'atténuation - doux, linéaire, sphérique ou marqué. L'aperçu du maillage facilite l'évaluation de la forme.
- Importez une photographie JPG, PNG ou WebP et définissez-la comme base de l'ajustement.
- Réglez la caméra, la position, la rotation et l'échelle du modèle. L'opacité de la superposition aide à comparer sa silhouette à celle du produit photographié.
- Pour les vêtements, utilisez l'armature disponible, les positions de manches et la déformation souple. Travaillez de la forme générale vers les corrections locales.
- Choisissez Générer à partir de l'ajustement, puis passez au Mappage pour vérifier les contours et le motif de test.
Affinez le mappage et les calques du mockup
L'image de base, le masque d'impression, les ombres et les hautes lumières se combinent pour que le visuel respecte l'apparence et la forme du produit. Une préparation correcte permet de réutiliser la même présentation.
Générez et contrôlez les calques
Dans Composition 3D, choisissez Générer tous les calques ; pour l'ajustement sur photo, choisissez Générer à partir de l'ajustement. Examinez ensuite chaque calque et son effet sur le produit.
| Calque | Ce que vous contrôlez |
|---|---|
| Image de base | Le cadrage du produit, le fond et l'apparence de la scène. Régénérez l'image après avoir modifié la composition. |
| Masque d'impression | La zone visible du visuel, le seuil, la douceur et le décalage du contour, ainsi que son lissage. |
| Ombres | L'intensité, le gamma et le point blanc pour conserver les ombres du produit sur le motif. |
| Hautes lumières | Le seuil, l'intensité et le gamma des zones claires de la composition. |
Vérifiez le générateur avec un motif de test
Avant de passer au projet final, ouvrez l'outil de motifs de test. Vous pouvez affecter un motif séparément aux pièces disponibles et, lorsque le changement de couleur est proposé, tester aussi la couleur du produit entier ou de ses éléments.
Damier UV
La grille colorée permet de repérer les étirements, les changements d'orientation et les ruptures du visuel. Examinez particulièrement le col, les manches et les bords latéraux.
Visuel de remplacement « Your design here »
Les repères et le visuel central permettent d'évaluer l'emplacement du motif et de vérifier qu'il n'est pas coupé par le contour ou le masque.
Texte répété
Le motif portant le texte Alter Product aide à évaluer la lisibilité des lettres, leurs proportions et leur orientation sur chaque pièce.
Couleurs du produit et de ses pièces
Comparez une variante claire et une variante sombre. Vous repérerez plus facilement les ombres excessives, les hautes lumières surexposées ou un halo clair autour du motif.
Contours des pièces et correction des détails
Passez au Mappage, sélectionnez une pièce du produit et ajustez les points et les poignées de Bézier de son contour. Corrigez précisément le col, la manche et les bords, puis recalculez les calques. Le menu de génération permet aussi de recréer les contours ou d'actualiser uniquement l'image de base en conservant les vecteurs existants.
Corrigez d'abord la géométrie du contour si le motif déborde sur le fond ou n'atteint pas le bord. Affinez ensuite le masque et sa douceur. Réglez les ombres et les hautes lumières en dernier, en comparant le résultat sur une couleur claire et une couleur sombre du produit.
Que faut-il régénérer après une modification ?
Choisissez l'étendue de la mise à jour pour conserver les corrections manuelles qui restent utiles.
| Étendue | Quand l'utiliser |
|---|---|
| Tous les calques | Après la préparation de la scène ou une modification importante de la composition, lorsque l'image de base et les calques du mockup doivent être actualisés. |
| Calques à partir des vecteurs enregistrés | Après une correction manuelle du contour, pour recalculer le résultat en conservant les tracés affinés. |
| Recréation des contours | Pour redéfinir les contours à partir du modèle. Cette opération recrée la géométrie et peut remplacer les corrections manuelles précédentes. |
| Image de base uniquement | Pour actualiser l'image sans écraser les vecteurs existants. Après des modifications qui affectent les ombres ou le masque, vérifiez aussi les calques concernés. |
Enregistrez les générateurs avec le projet du modèle
Après avoir affiné les vues, enregistrez le projet Product Generator. La collection de générateurs appartient au modèle et à la révision utilisée par Designer. Dans l'application, le projet est enregistré sur le serveur ; dans l'extension WordPress, il est stocké localement.
Après avoir modifié la caméra, le fond, l'éclairage ou l'ajustement, actualisez les calques concernés et vérifiez le résultat avant d'enregistrer. Le téléchargement d'un PNG depuis Designer crée une image du projet en cours ; l'enregistrement du projet du modèle conserve le générateur pour des modifications ultérieures.
Utilisez les mockups dans Designer et WooCommerce
Le générateur préparé fait partie du travail avec le modèle. Pendant la création, vous utilisez les vues prédéfinies avec la personnalisation actuelle.
Votre visuel dans un cadrage reproductible
Ouvrez Mockup dans Product Designer. Dans la fenêtre Générateur de mockups, choisissez la miniature de la face, d'un côté ou du dos. L'aperçu utilise le visuel et les couleurs du projet en cours. La caméra, l'éclairage et le fond se préparent auparavant dans le mode Mockup du générateur de modèles.
Téléchargez des PNG ou des variantes de couleur
Choisissez une vue et une Taille d'image : Miniature 256, Petite 512, Moyenne 1024 ou Grande 2048 px. Cette valeur correspond au côté le plus long ; les proportions dépendent du générateur. Télécharger les images enregistre le PNG de la vue sélectionnée.
- Avec au moins deux préréglages compatibles, l'option Générer des images pour tous les préréglages de couleur crée un ZIP contenant la même vue dans les différentes couleurs. Avec moins de préréglages, vous téléchargez un seul PNG.
- Les préréglages disponibles dépendent du matériau, de la technique d'impression et de la taille sélectionnés. Les couleurs personnalisées qui ne font pas partie des préréglages sont exclues de ce fichier.
- Pour obtenir d'autres faces du produit, sélectionnez les miniatures correspondantes et téléchargez leurs images.
La personnalisation dans le panier et la commande
Dans l'extension WordPress + WooCommerce, vous utilisez un projet local et la révision du modèle qui lui est associée. Pour un produit disposant de générateurs de mockups, l'application crée les images personnalisées lors de l'ajout du projet au panier. Une fois les fichiers enregistrés, l'extension les affiche à côté de l'article dans le panier et la commande.
- Vous n'avez pas besoin d'ouvrir manuellement la fenêtre Mockup pour chaque commande client.
- Les résultats prennent en compte le projet et les couleurs choisies pour le produit. Les générateurs et les ressources doivent être disponibles pour la révision du modèle utilisée.
- Les miniatures sont prises en charge dans le panier classique ainsi que dans les blocs Cart/Checkout de WooCommerce. Si le mockup enregistré est indisponible, la miniature standard du produit reste affichée.
- Préparez et enregistrez les générateurs avec le modèle utilisé dans le projet.
- Proposez le projet dans un produit géré par l'extension WordPress + WooCommerce.
- Le client personnalise le produit dans Customizer et ajoute son projet au panier.
- L'application prépare les mockups des vues disponibles pour le projet et les couleurs choisis. Une fois les images enregistrées, l'extension utilise la miniature personnalisée pour l'article du panier et de la commande.
Un visuel pour la boutique et un fichier pour la production
Le mockup présente l'apparence du produit : visuel final, forme, ombres et fond. Utilisez-le dans vos offres, votre catalogue ou pour montrer la personnalisation au client.
Pour la production, préparez les fichiers des zones d'impression dans le Gestionnaire d'impression. Cela concerne aussi les projets AOP, dont le visuel recouvre différentes pièces du produit. Le guide Fichiers prêts à imprimer explique les réglages et le téléchargement des fichiers de production.
Vérifiez le générateur avant de l'utiliser dans la boutique
Testez plusieurs motifs et couleurs de produit. Un générateur préparé avec un motif simple doit aussi afficher correctement un petit texte, un visuel près du bord et un motif AOP plus étendu.
Un test rapide de l'édition au panier
Suivez le même parcours que vous ou votre client utiliserez ensuite.
- Examinez toutes les vues enregistrées. Vérifiez le cadrage du produit, l'ombre et les marges.
- Activez le damier ou le texte de test sur les pièces à imprimer. Contrôlez les contours, le masque et le placement du visuel.
- Comparez une couleur claire et une couleur sombre avec le motif final dans Designer. Téléchargez un PNG et examinez-le à la taille prévue.
- Après les modifications, enregistrez le projet du modèle. Dans l'extension, vérifiez que le projet utilise la bonne révision du modèle et testez l'ajout de la personnalisation au panier.
Que corriger si le résultat ne correspond pas à vos attentes ?
Commencez par l'étape responsable du problème. Toutes les corrections ne nécessitent pas de reconfigurer la scène entière.
| Ce que vous voyez | Ce qu'il faut vérifier |
|---|---|
| Le motif déborde du produit ou disparaît au niveau du col | Le contour de la pièce dans Mappage, les poignées de Bézier et les réglages du masque d'impression. Après correction, recalculez les calques nécessaires. |
| La grille ou les lettres sont excessivement étirées | L'ajustement du modèle à la photo et le mappage de la pièce. Corrigez la forme avant de masquer le problème avec un bord trop doux. |
| Le visuel est trop sombre ou trop éclairci | Les réglages des calques d'ombres et de hautes lumières. Pour une composition 3D, vérifiez aussi l'exposition et l'éclairage de la scène. |
| L'ancienne image reste affichée après le changement de fond | Actualisez l'image de base avec la commande de génération appropriée et enregistrez le projet. Le choix d'un fond modifie la scène, mais ne remplace pas l'image générée précédemment. |
| Le ZIP ne contient ni les côtés ni le dos | L'ensemble des variantes concerne la vue sélectionnée. Choisissez la miniature suivante et téléchargez les images de cette face du produit. |
| L'export de toutes les couleurs n'est pas proposé, ou un seul PNG est téléchargé | Vérifiez le nombre de préréglages compatibles avec le matériau, la technique d'impression et la taille. Il en faut au moins deux. |
| Le panier affiche la photo standard du produit | Vérifiez la disponibilité des générateurs enregistrés et de leurs ressources pour la révision du modèle utilisée, ainsi que la réussite de l'enregistrement des mockups. |