Composição 3D
Crie uma visualização a partir do modelo pronto.
- Ajuste a câmera, a escala do enquadramento, a iluminação, as sombras e o fundo.
- Gere a imagem base e as camadas necessárias para mostrar as próximas estampas.
Geradores de mockups - apresentação e venda de produtos
Gere mockups de produtos em segundos
Prepare uma vez a apresentação do produto e reutilize-a para novas estampas e variantes de cor. O gerador de mockups guarda a vista, o fundo e a forma de aplicar a arte ao produto. O mockup final combina essas configurações com o projeto atual do cliente ou com seu projeto no Designer.
Você pode usar os geradores disponíveis para o modelo escolhido ou criar os seus no modo Mockup do Product Generator. A seguir, você encontra exemplos de uso, configurações de cenas 3D e fotos próprias, testes de mapeamento e o download das visualizações e seu uso no plugin WordPress + WooCommerce.
As capturas mostram as ferramentas reais do Alter Product, algumas com interface em inglês. Você pode abrir cada captura em tamanho completo.
Prepare seu próprio gerador de mockupsDefina as vistas do produto, refine a composição e o mapeamento e salve o gerador junto com o modelo.Ir para a descriçãoUse as vistas prontas no projeto e na lojaGere visualizações da estampa atual, baixe imagens e mostre a personalização no carrinho.Ir para a descrição
Precisa primeiro do seu próprio modelo 3D?Acesse o guia do Product Generator: moldes de costura, Easy Creator, tamanhos, simulação, materiais e exportação.Modelo, gerador e mockup final
O gerador salva a forma de apresentar o produto. O mockup final é uma imagem de um projeto específico, criada com esse gerador.
Comece com um modelo pronto ou com os geradores disponíveis
Se o modelo escolhido já tiver geradores de mockups, você poderá usá-los imediatamente no Product Designer. Escolha uma vista na janela Mockup e a prévia mostrará as artes e as cores do projeto atual.
Para criar seus próprios geradores, abra o projeto do modelo no Product Generator e acesse o modo Mockup. Você precisa de um modelo preparado e das superfícies em que a arte será exibida. O guia de criação de modelos 3D explica separadamente os moldes de costura, a simulação e os materiais do modelo.
Um gerador, muitas visualizações prontas
Exemplo: você prepara a frente de uma camiseta sobre um fundo claro. Na próxima estampa, não precisa configurar novamente a câmera, a iluminação nem o contorno da gola. Abra Mockup no Designer e o gerador salvo mostrará o projeto atual no mesmo enquadramento.
| Elemento | Sua função |
|---|---|
| Modelo 3D | O formato do produto e as superfícies onde você coloca o projeto. O mesmo modelo pode ter vários geradores, por exemplo, para frente, laterais e costas. |
| Gerador de mockups | Enquadramento, fundo, iluminação, mapeamento das partes e camadas. Edite-o quando quiser mudar a forma de apresentar o produto. |
| Projeto no Designer ou Customizer | Artes, textos e cores escolhidas para o produto. Ao mudar o projeto, você obtém um novo mockup com o gerador preparado. |
| Mockup PNG baixado | A imagem pronta de um projeto e uma vista específicos. Você pode usá-la nas ofertas, no catálogo ou em materiais promocionais. |
Três áreas de trabalho para o mockup
Escolha a etapa correspondente ao que deseja refinar. A composição 3D e o ajuste à foto oferecem duas maneiras de preparar a imagem base.
Ajuste na imagem
Use sua própria fotografia do produto como base da apresentação.
- Ajuste o modelo à foto por meio da posição, da rotação, da escala e das ferramentas de deformação disponíveis.
- Gere as camadas a partir do ajuste preparado.
Mapeamento
Refine os contornos das partes e o comportamento da estampa na imagem.
- Edite pontos e alças vetoriais, máscaras, sombras e luzes.
- Esta etapa exige uma imagem base e caminhos vetoriais preparados.
De um enquadramento pronto aos próximos projetos
Prepare a composição uma vez e reutilize o gerador quando mudar as artes e as cores.
- Escolha o modelo e adicione vistas no modo Mockup.
- Prepare a composição 3D ou o ajuste à foto e gere as camadas.
- Verifique o mapeamento da estampa em todas as partes e salve o projeto com os geradores.
- Use as vistas salvas no Designer ou disponibilize o produto aos clientes no Customizer.
Exemplos: do catálogo à personalização do cliente
Adapte a preparação do gerador ao local em que o produto será apresentado. Você pode realizar os cenários abaixo com as mesmas ferramentas, alterando a composição e a arte da estampa.
Que apresentação do produto você quer preparar?
Comece pelo objetivo: fotos de variantes fáceis de comparar, um estilo de marca reconhecível ou uma visualização sobre sua própria fotografia.
Um catálogo de produtos consistente
Uma camiseta sobre um fundo claro, com escala constante e sombra suave. Cada nova estampa aparece na mesma vista.
- Use Composição 3D e prepare a frente, as laterais e as costas.
- Refine os enquadramentos antes de baixar os próximos projetos.
- Resultado: o cliente compara com mais facilidade os desenhos e as cores da oferta.
Uma composição com o estilo da sua marca
Defina um fundo com uma cor da coleção, um gradiente ou sua própria imagem. Ajuste a luz e a sombra para integrar o produto ao cenário preparado.
- Salve as configurações como uma vista do modelo.
- Depois de mudar o fundo, gere uma imagem base atualizada.
- Resultado: os próximos projetos mantêm a mesma identidade visual.
Sua própria fotografia do produto
Você tem uma foto da camiseta no cenário desejado? Use Ajuste na imagem para adaptar o modelo à fotografia e preparar a aplicação das próximas estampas.
- Ajuste a silhueta, as mangas e a câmera à foto.
- Confira o mapeamento com uma estampa de teste e corrija os contornos.
- Resultado: sua fotografia se torna a base de mockups reproduzíveis.
O projeto do cliente no carrinho
O cliente muda a arte, o texto ou a cor no Customizer. Os geradores disponíveis para o modelo preparam visualizações desse projeto específico.
- Vincule o projeto a um produto no plugin WordPress + WooCommerce.
- As imagens são criadas quando a personalização é adicionada ao carrinho.
- Resultado: a miniatura do item no carrinho e no pedido mostra o projeto do cliente.
A mesma estampa em uma camiseta branca e outra verde
As capturas do aplicativo mostram o mesmo projeto com tema de frutas em duas cores do produto. O enquadramento permanece consistente e o mockup combina a estampa com a cor escolhida para a camiseta.
- Prepare a estampa no Designer e escolha a cor do produto.
- Abra Mockup e selecione a vista frontal.
- Mude a cor do produto e abra novamente a mesma vista.
- Baixe PNGs individuais ou um pacote de variantes se houver predefinições de cor compatíveis com o projeto.
Prepare um gerador de mockups do produto
Com o modelo pronto no Inspector, acesse o modo Mockup. Aqui você prepara uma composição comum para as próximas artes e variantes do produto.
Frente, laterais e costas com um único comando
No painel Mockups do projeto, escolha Criar automaticamente para preparar quatro vistas: Frente, Lateral esquerda, Lateral direita e Costas. Você também pode criar uma vista personalizada com Adicionar novo, mudar seu nome e sua ordem. Cada gerador mantém seu próprio enquadramento e suas configurações.
Câmera, fundo e iluminação
Em Composição 3D, você posiciona o produto como base da imagem. Adapte o enquadramento e a iluminação ao estilo do catálogo ou da marca.
Para o catálogo, comece com um fundo simples e uma silhueta bem definida. Use a câmera ortográfica para uma apresentação equilibrada, sem encurtamento por perspectiva. A perspectiva destaca melhor o volume do produto. Deixe uma margem no enquadramento para as mangas, a parte inferior do produto e a sombra.
A sombra no chão situa o produto na composição, enquanto a sombra junto à parede cria profundidade. Ajuste separadamente posição, tamanho, opacidade e suavidade. A exposição e as curvas de luzes, meios-tons e sombras ajudam a recuperar detalhes. Nas fotos de catálogo, mantenha a estampa nítida; ajuste Bloom e profundidade de campo para vistas mais voltadas à imagem da marca.
- Documento e modelo: dê um nome e defina a largura e a altura da imagem mestre entre 64 e 2048 px por lado.
- Câmera: escolha perspectiva ou vista ortográfica. Ajuste a rotação, o ponto de destino, a distância e o campo de visão ou a escala do enquadramento.
- Iluminação: escolha um ambiente da biblioteca e ajuste sua rotação, intensidade e ponto preto. Controle separadamente a sombra no chão e junto à parede, incluindo suavidade e opacidade.
- Fundo: use uma cor, um gradiente, o fundo do ambiente ou sua própria imagem. Ajuste o modo de preencher o enquadramento, a transformação e a transparência para criar um cenário coerente com a identidade do produto.
- Pós-processamento: mapeamento de tons e exposição, curvas de cor, oclusão de ambiente, Bloom, profundidade de campo, nitidez, vinheta e granulação. A suavização MSAA/FXAA ajuda a refinar as bordas.
Ajuste o modelo à sua própria foto
O modo Ajuste na imagem permite usar seus arquivos JPG, PNG ou WebP. Ajuste a câmera e a escala do modelo sobreposto, além de sua opacidade e posição. Para roupas, há ferramentas de ossos, predefinições de posição das mangas e deformação suave com raio e intensidade ajustáveis. O ajuste preparado é usado para gerar as camadas do mockup.
Para as roupas compatíveis, você pode criar um rig automático e ajustar os ossos movendo, girando e alterando seu comprimento. O ajuste espelhado ajuda a manter a simetria, e as predefinições de mangas permitem começar na posição original, levemente abaixada ou junto ao corpo. A deformação e a rotação suaves atuam localmente: escolha raio, intensidade e queda de influência - suave, linear, esférica ou acentuada. A prévia da malha facilita a avaliação do formato.
- Carregue uma fotografia JPG, PNG ou WebP e defina-a como base do ajuste.
- Ajuste a câmera, a posição, a rotação e a escala do modelo. A opacidade da sobreposição ajuda a comparar sua silhueta com o produto na foto.
- Para roupas, use o rig disponível, as posições das mangas e a deformação suave. Trabalhe do formato geral para as correções locais.
- Escolha Gerar a partir do ajuste, acesse Mapeamento e confira as bordas e a estampa de teste.
Refine o mapeamento e as camadas do mockup
A imagem base, a máscara da estampa, as sombras e as luzes trabalham em conjunto para que a arte respeite a aparência e o formato do produto. A preparação correta permite reutilizar a mesma visualização.
Geração e controle das camadas
Em Composição 3D, escolha Gerar todas as camadas; no ajuste à foto, escolha Gerar a partir do ajuste. Depois, examine cada camada e o resultado no produto.
| Camada | O que você controla |
|---|---|
| Imagem base | O enquadramento do produto, o fundo e a aparência da cena. Gere-a novamente depois de alterar a composição. |
| Máscara da estampa | A área visível da arte, o limiar, a suavidade e o deslocamento da borda, além da suavização de seu contorno. |
| Sombras | A intensidade, a gama e o ponto branco para preservar o sombreamento do produto na estampa. |
| Luzes | O limiar, a intensidade e a gama das áreas claras da composição. |
Confira o gerador com uma estampa de teste
Antes de passar ao projeto final, abra a ferramenta de estampas de teste. Você pode atribuir um padrão separadamente às partes disponíveis e, quando houver mudança de cor, testar também a cor do produto inteiro ou de seus elementos.
Quadriculado UV
A grade colorida ajuda a identificar esticamentos, mudanças de direção e descontinuidades da arte. Observe principalmente a gola, as mangas e as bordas laterais.
Marcador “Your design here”
As marcas e a arte central ajudam a avaliar onde a estampa aparece e se ela é cortada pelo contorno ou pela máscara.
Texto repetido
O padrão com o texto Alter Product ajuda a avaliar a legibilidade das letras, suas proporções e sua direção em cada parte.
Cores do produto e das partes
Compare uma variante clara e outra escura. Isso facilita identificar sombras fortes demais, luzes estouradas ou um halo claro ao redor da estampa.
Contornos das partes e correção de detalhes
Acesse Mapeamento, escolha uma parte do produto e ajuste os pontos e as alças Bézier do contorno. Você pode corrigir com precisão a gola, a manga e as bordas e recalcular as camadas. O menu de geração também permite recriar os contornos ou atualizar apenas a imagem base, mantendo os vetores existentes.
Corrija primeiro a geometria do contorno se a estampa invadir o fundo ou não chegar à borda. Depois, refine a máscara e sua suavidade. Ajuste sombras e luzes por último, comparando o resultado em uma cor clara e outra escura do produto.
O que gerar novamente depois de uma mudança?
Escolha o alcance da atualização para preservar as correções manuais que ainda são necessárias.
| Alcance | Quando usar |
|---|---|
| Todas as camadas | Depois de preparar a cena ou alterar bastante a composição, quando for necessário atualizar a imagem base e as camadas do mockup. |
| Camadas a partir dos vetores salvos | Depois de corrigir manualmente o contorno, para recalcular o resultado mantendo os caminhos refinados. |
| Recriação dos contornos | Quando quiser definir novamente os contornos a partir do modelo. Isso recria a geometria e pode substituir correções manuais anteriores. |
| Somente a imagem base | Quando precisar atualizar a imagem sem sobrescrever os vetores existentes. Depois de mudanças que afetem sombras ou máscara, confira também as camadas correspondentes. |
Salve os geradores com o projeto do modelo
Depois de refinar as vistas, salve o projeto do Product Generator. A coleção de geradores pertence ao modelo e à revisão usada pelo Designer. No aplicativo, o projeto é salvo no servidor; no plugin WordPress, ele é armazenado localmente.
Depois de alterar a câmera, o fundo, a iluminação ou o ajuste, atualize as camadas correspondentes e confira o resultado antes de salvar. Baixar um PNG do Designer cria uma imagem do projeto atual; salvar o projeto do modelo preserva o gerador para continuar a edição.
Use mockups no Designer e no WooCommerce
O gerador preparado passa a fazer parte do trabalho com o modelo. Durante a criação, você usa as vistas prontas com a personalização atual.
Sua arte em um enquadramento consistente
Abra Mockup no Product Designer. Na janela Gerador de mockups, escolha a miniatura da frente, da lateral ou das costas. A prévia usa as artes e as cores do projeto atual. A câmera, a iluminação e o fundo são preparados antes, no modo Mockup do gerador de modelos.
Baixe PNGs ou variantes de cor
Escolha uma vista e o Tamanho da imagem: Miniatura 256, Pequeno 512, Médio 1024 ou Grande 2048 px. O valor indica o lado mais longo; as proporções dependem do gerador. Baixar imagens salva um PNG da vista selecionada.
- Com pelo menos duas predefinições compatíveis, a opção Gerar imagens para todas as predefinições de cor cria um ZIP com a mesma vista nas variantes de cor. Com menos predefinições, você baixa um único PNG.
- As predefinições disponíveis dependem do material, da técnica de impressão e do tamanho selecionados. As cores personalizadas fora das predefinições não entram nesse pacote.
- Se precisar de outros lados do produto, escolha as miniaturas correspondentes e baixe as imagens.
Personalização visível no carrinho e no pedido
No plugin WordPress + WooCommerce, você usa um projeto local e a revisão do modelo vinculada a ele. Para um produto com geradores de mockups disponíveis, o aplicativo cria imagens da personalização ao adicionar o projeto ao carrinho. Depois que os arquivos são salvos, o plugin os mostra junto ao item do carrinho e do pedido.
- Você não precisa abrir manualmente a janela Mockup para cada pedido de cliente.
- Os resultados incluem o projeto e as cores escolhidas para o produto. Os geradores e os recursos devem estar disponíveis para a revisão do modelo utilizada.
- As miniaturas funcionam no carrinho clássico e nos blocos Cart/Checkout do WooCommerce. Se o mockup salvo não estiver disponível, a miniatura padrão do produto será mantida.
- Prepare e salve os geradores no modelo usado pelo projeto.
- Disponibilize o projeto em um produto gerenciado pelo plugin WordPress + WooCommerce.
- O cliente personaliza o produto no Customizer e adiciona o projeto ao carrinho.
- O aplicativo prepara mockups das vistas disponíveis para o projeto e as cores escolhidas. Após salvar as imagens, o plugin usa a miniatura personalizada junto ao item do carrinho e do pedido.
Uma visualização para a loja e um arquivo para a produção
O mockup apresenta a aparência do produto: arte final, formato, sombras e fundo. Use-o nas ofertas, no catálogo ou para mostrar a personalização ao cliente.
Para a produção, prepare os arquivos das áreas de impressão no Gerenciador de impressão. Isso também vale para projetos AOP, nos quais a arte cobre diferentes partes do produto. O guia Arquivos prontos para impressão explica as configurações e o download dos arquivos de produção.
Confira o gerador antes de usá-lo na loja
Teste diferentes estampas e cores do produto. Um gerador preparado com um motivo simples também deve mostrar corretamente textos pequenos, artes perto da borda e estampas AOP maiores.
Um teste rápido da edição ao carrinho
Siga o mesmo caminho que você ou seu cliente usará depois.
- Examine todas as vistas salvas. Confira o enquadramento do produto, a sombra e as margens.
- Ative o quadriculado ou o texto de teste nas partes que receberão impressão. Confira os contornos, a máscara e a disposição da arte.
- Compare uma cor clara e outra escura com a estampa final no Designer. Baixe um PNG e examine-o no tamanho previsto.
- Depois das mudanças, salve o projeto do modelo. No plugin, verifique se o projeto usa a revisão correta do modelo e teste a adição da personalização ao carrinho.
O que corrigir quando o resultado não é o esperado?
Comece pela etapa responsável pelo problema. Nem toda correção exige configurar novamente a cena inteira.
| O que você vê | O que verificar |
|---|---|
| A estampa sai do produto ou desaparece perto da gola | O contorno da parte em Mapeamento, as alças Bézier e as configurações da máscara da estampa. Depois da correção, recalcule as camadas necessárias. |
| A grade ou as letras estão esticadas demais | O ajuste do modelo à fotografia e o mapeamento da parte. Corrija o formato antes de esconder o problema com uma borda suave demais. |
| A arte está escura demais ou clara demais | As configurações das camadas de sombras e luzes. Em uma composição 3D, confira também a exposição e a iluminação da cena. |
| Depois de mudar o fundo, você ainda vê a imagem antiga | Atualize a imagem base com o comando de geração adequado e salve o projeto. Escolher um fundo altera a cena, mas não substitui a imagem gerada anteriormente. |
| O ZIP não inclui as laterais nem as costas | O pacote de variantes corresponde à vista selecionada. Escolha a próxima miniatura e baixe as imagens desse lado do produto. |
| Não há opção de todas as cores ou apenas um PNG é baixado | Confira quantas predefinições são compatíveis com o material, a técnica de impressão e o tamanho. São necessárias pelo menos duas. |
| O carrinho mostra a foto padrão do produto | Verifique se os geradores salvos e seus recursos estão disponíveis para a revisão do modelo usada no projeto e se os mockups foram salvos corretamente. |