Composição 3D
Crie uma visualização a partir do modelo preparado.
- Ajuste a câmara, a escala do enquadramento, a iluminação, as sombras e o fundo.
- Gere a imagem de base e as camadas necessárias para mostrar as estampagens seguintes.
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 estampagens e variantes de cor. O gerador de mockups guarda a vista, o fundo e a forma de aplicar os elementos gráficos ao produto. O mockup final combina estas definições com o projeto atual do cliente ou com o seu projeto no Designer.
Pode utilizar os geradores disponíveis para o modelo escolhido ou criar os seus no modo Mockup do Product Generator. Abaixo encontra exemplos de utilização, definições de cenas 3D e fotografias próprias, testes de mapeamento e a transferência das visualizações e a sua utilização no plugin WordPress + WooCommerce.
As capturas mostram as ferramentas reais do Alter Product, algumas com a interface em inglês. Pode abrir cada captura no tamanho original.
Prepare o seu próprio gerador de mockupsDefina as vistas do produto, aperfeiçoe a composição e o mapeamento e guarde o gerador com o modelo.Ir para a descriçãoUtilize as vistas preparadas no projeto e na lojaGere visualizações da estampagem atual, descarregue imagens e mostre a personalização no carrinho.Ir para a descrição
Precisa primeiro do seu próprio modelo 3D?Consulte o guia do Product Generator: moldes de costura, Easy Creator, tamanhos, simulação, materiais e exportação.Modelo, gerador e mockup final
O gerador guarda a forma de apresentar o produto. O mockup final é uma imagem de um projeto específico, criada com esse gerador.
Comece com um modelo preparado ou com os geradores disponíveis
Se o modelo escolhido já tiver geradores de mockups, pode utilizá-los de imediato no Product Designer. Escolha uma vista na janela Mockup e a pré-visualização mostrará os elementos gráficos e as cores do projeto atual.
Para criar os seus próprios geradores, abra o projeto do modelo no Product Generator e passe ao modo Mockup. Precisa de um modelo preparado e das superfícies onde os elementos gráficos serão apresentados. O guia de criação de modelos 3D descreve separadamente os moldes de costura, a simulação e os materiais do modelo.
Um gerador, muitas visualizações prontas
Exemplo: prepara a frente de uma t-shirt sobre um fundo claro. Na estampagem seguinte não precisa de voltar a configurar a câmara, a iluminação ou o contorno da gola. Abra Mockup no Designer e o gerador guardado apresentará o projeto atual no mesmo enquadramento.
| Elemento | A sua função |
|---|---|
| Modelo 3D | A forma do produto e as superfícies onde 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 peças e camadas. Edite-o quando quiser alterar a apresentação do produto. |
| Projeto no Designer ou Customizer | Elementos gráficos, textos e cores escolhidas para o produto. Ao alterar o projeto, obtém um novo mockup com o gerador preparado. |
| Mockup PNG descarregado | A imagem final de um projeto e de uma vista específicos. Pode utilizá-la nas ofertas, no catálogo ou em materiais promocionais. |
Três áreas de trabalho para o mockup
Escolha a etapa correspondente ao que pretende aperfeiçoar. A composição 3D e o ajuste à fotografia oferecem duas formas de preparar a imagem de base.
Ajuste na imagem
Utilize a sua própria fotografia do produto como base da apresentação.
- Ajuste o modelo à fotografia através 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
Aperfeiçoe os contornos das peças e o comportamento da estampagem na imagem.
- Edite pontos e alças vetoriais, máscaras, sombras e luzes.
- Esta etapa exige uma imagem de base e caminhos vetoriais preparados.
De um enquadramento preparado aos projetos seguintes
Prepare a composição uma vez e reutilize o gerador quando alterar os elementos gráficos e as cores.
- Escolha o modelo e adicione vistas no modo Mockup.
- Prepare a composição 3D ou o ajuste à fotografia e gere as camadas.
- Verifique o mapeamento da estampagem em todas as peças e guarde o projeto com os geradores.
- Utilize as vistas guardadas 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 onde vai apresentar o produto. Pode realizar os cenários abaixo com as mesmas ferramentas, alterando a composição e o desenho da estampagem.
Que apresentação do produto pretende preparar?
Comece pelo objetivo: fotografias de variantes fáceis de comparar, um estilo de marca reconhecível ou uma visualização sobre a sua própria fotografia.
Um catálogo de produtos coerente
Uma t-shirt sobre fundo claro, com escala constante e uma sombra suave. Cada nova estampagem aparece na mesma vista.
- Utilize Composição 3D e prepare a frente, as laterais e as costas.
- Aperfeiçoe os enquadramentos antes de descarregar os projetos seguintes.
- Resultado: o cliente compara mais facilmente 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 uma imagem sua. Ajuste a luz e a sombra para integrar o produto no cenário preparado.
- Guarde as definições como uma vista do modelo.
- Depois de alterar o fundo, gere uma imagem de base atualizada.
- Resultado: os projetos seguintes mantêm a mesma identidade visual.
A sua própria fotografia do produto
Tem uma fotografia da t-shirt no cenário pretendido? Utilize Ajuste na imagem para adaptar o modelo à fotografia e preparar a aplicação das estampagens seguintes.
- Ajuste a silhueta, as mangas e a câmara à fotografia.
- Verifique o mapeamento com uma estampagem de teste e corrija os contornos.
- Resultado: a sua fotografia torna-se a base de mockups reproduzíveis.
O projeto do cliente no carrinho
O cliente altera os elementos gráficos, o texto ou a cor no Customizer. Os geradores disponíveis para o modelo preparam visualizações desse projeto específico.
- Associe o projeto a um produto no plugin WordPress + WooCommerce.
- As imagens são criadas ao adicionar a personalização ao carrinho.
- Resultado: a miniatura do artigo no carrinho e na encomenda apresenta o projeto do cliente.
A mesma estampagem numa t-shirt branca e noutra verde
As capturas da aplicação mostram o mesmo projeto com motivos de fruta em duas cores do produto. O enquadramento mantém-se coerente e o mockup combina a estampagem com a cor escolhida para a t-shirt.
- Prepare a estampagem no Designer e escolha a cor do produto.
- Abra Mockup e selecione a vista frontal.
- Altere a cor do produto e volte a abrir a mesma vista.
- Descarregue PNG individuais ou um conjunto de variantes se existirem predefinições de cor compatíveis com o projeto.
Prepare um gerador de mockups do produto
Com o modelo preparado no Inspector, passe ao modo Mockup. Aqui prepara uma composição comum para os elementos gráficos e as variantes seguintes 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. Também pode adicionar uma vista personalizada com Adicionar novo, alterar o nome e a ordem. Cada gerador mantém o seu próprio enquadramento e as respetivas definições.
Câmara, fundo e iluminação
Em Composição 3D, 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. Utilize a câmara ortográfica para uma apresentação equilibrada, sem encurtamento de perspetiva. A perspetiva permite destacar 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 a posição, o tamanho, a opacidade e a suavidade. A exposição e as curvas de luzes, meios-tons e sombras ajudam a recuperar detalhes. Nas fotografias de catálogo, mantenha a estampagem nítida; ajuste Bloom e profundidade de campo para vistas mais orientadas para a imagem da marca.
- Documento e modelo: atribua um nome e defina a largura e a altura da imagem principal entre 64 e 2048 px por lado.
- Câmara: escolha perspetiva 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 a rotação, a intensidade e o ponto preto. Controle separadamente a sombra no chão e junto à parede, incluindo a suavidade e a opacidade.
- Fundo: utilize uma cor, um gradiente, o fundo do ambiente ou uma imagem sua. Ajuste a forma 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 grão. A suavização MSAA/FXAA ajuda a aperfeiçoar as arestas.
Ajuste o modelo à sua própria fotografia
O modo Ajuste na imagem permite utilizar os seus ficheiros JPG, PNG ou WebP. Ajuste a câmara e a escala do modelo sobreposto, bem como a opacidade e a posição. Para vestuário, estão disponíveis ferramentas de ossos, predefinições de posição das mangas e deformação suave com raio e intensidade ajustáveis. O ajuste preparado serve para gerar as camadas do mockup.
Para as peças de vestuário compatíveis, pode criar um rig automático e ajustar os ossos através de deslocação, rotação e alteração do comprimento. O ajuste em espelho ajuda a manter a simetria, e as predefinições das mangas permitem começar na posição original, ligeiramente descida ou junto ao corpo. A deformação e a rotação suaves atuam localmente: escolha o raio, a intensidade e a atenuação da influência - suave, linear, esférica ou acentuada. A pré-visualização da malha facilita a avaliação da forma.
- Carregue uma fotografia JPG, PNG ou WebP e defina-a como base do ajuste.
- Ajuste a câmara, a posição, a rotação e a escala do modelo. A opacidade da sobreposição ajuda a comparar a silhueta com o produto na fotografia.
- Para vestuário, utilize o rig disponível, as posições das mangas e a deformação suave. Trabalhe da forma geral para as correções locais.
- Escolha Gerar a partir do ajuste, passe ao Mapeamento e verifique as margens e a estampagem de teste.
Aperfeiçoe o mapeamento e as camadas do mockup
A imagem de base, a máscara da estampagem, as sombras e as luzes trabalham em conjunto para que os elementos gráficos respeitem a aparência e a forma do produto. A preparação correta permite reutilizar a mesma visualização.
Geração e controlo das camadas
Em Composição 3D, escolha Gerar todas as camadas; no ajuste à fotografia, escolha Gerar a partir do ajuste. Depois, examine cada camada e o resultado no produto.
| Camada | O que controla |
|---|---|
| Imagem de base | O enquadramento do produto, o fundo e a aparência da cena. Volte a gerá-la depois de alterar a composição. |
| Máscara da estampagem | A área visível dos elementos gráficos, o limiar, a suavidade e o deslocamento da margem, bem como a suavização do contorno. |
| Sombras | A intensidade, a gama e o ponto branco para preservar o sombreado do produto na estampagem. |
| Luzes | O limiar, a intensidade e a gama das áreas claras da composição. |
Verifique o gerador com uma estampagem de teste
Antes de passar ao projeto final, abra a ferramenta de estampagens de teste. Pode atribuir um padrão separadamente às peças disponíveis e, quando for possível alterar a cor, testar também a cor do produto completo ou dos seus elementos.
Xadrez UV
A grelha colorida ajuda a identificar esticamentos, mudanças de direção e descontinuidades dos elementos gráficos. Observe sobretudo a gola, as mangas e as margens laterais.
Marcador «Your design here»
As marcas e a imagem central ajudam a avaliar onde aparece a estampagem e se é cortada pelo contorno ou pela máscara.
Texto repetido
O padrão com o texto Alter Product ajuda a avaliar a legibilidade das letras, as suas proporções e a direção em cada peça.
Cores do produto e das peças
Compare uma variante clara e outra escura. Assim é mais fácil identificar sombras excessivas, luzes sobre-expostas ou um halo claro junto à estampagem.
Contornos das peças e correção de detalhes
Passe ao Mapeamento, escolha uma peça do produto e ajuste os pontos e as alças Bézier do contorno. Pode corrigir com precisão a gola, a manga e as margens e recalcular as camadas. O menu de geração também permite recriar os contornos ou atualizar apenas a imagem de base, mantendo os vetores existentes.
Corrija primeiro a geometria do contorno se a estampagem invadir o fundo ou não chegar à margem. Depois, aperfeiçoe a máscara e a suavidade. Ajuste as sombras e as luzes no fim, comparando o resultado numa cor clara e noutra escura do produto.
O que deve gerar novamente após uma alteração?
Escolha o âmbito da atualização para preservar as correções manuais que continuam a ser necessárias.
| Âmbito | Quando utilizar |
|---|---|
| Todas as camadas | Depois de preparar a cena ou alterar significativamente a composição, quando for necessário atualizar a imagem de base e as camadas do mockup. |
| Camadas a partir dos vetores guardados | Depois de corrigir manualmente o contorno, para recalcular o resultado mantendo os caminhos aperfeiçoados. |
| Recriação dos contornos | Quando pretender voltar a definir os contornos a partir do modelo. Esta operação recria a geometria e pode substituir correções manuais anteriores. |
| Apenas a imagem de base | Quando precisar de atualizar a imagem sem substituir os vetores existentes. Após alterações que afetem sombras ou máscara, verifique também as camadas correspondentes. |
Guarde os geradores com o projeto do modelo
Depois de aperfeiçoar as vistas, guarde o projeto do Product Generator. A coleção de geradores pertence ao modelo e à revisão utilizada pelo Designer. Na aplicação, o projeto é guardado no servidor; no plugin WordPress, é armazenado localmente.
Depois de alterar a câmara, o fundo, a iluminação ou o ajuste, atualize as camadas correspondentes e verifique o resultado antes de guardar. Descarregar um PNG do Designer cria uma imagem do projeto atual; guardar o projeto do modelo conserva o gerador para continuar a edição.
Utilize mockups no Designer e no WooCommerce
O gerador preparado passa a fazer parte do trabalho com o modelo. Durante a criação, utiliza as vistas preparadas com a personalização atual.
Os seus elementos gráficos num enquadramento consistente
Abra Mockup no Product Designer. Na janela Gerador de mockups, escolha a miniatura da frente, da lateral ou das costas. A pré-visualização utiliza os elementos gráficos e as cores do projeto atual. A câmara, a iluminação e o fundo são preparados anteriormente no modo Mockup do gerador de modelos.
Descarregue PNG 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. Descarregar imagens guarda 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, descarrega um único PNG.
- As predefinições disponíveis dependem do material, da técnica de impressão e do tamanho selecionados. As cores personalizadas que não fazem parte das predefinições não são incluídas neste conjunto.
- Se precisar de outros lados do produto, escolha as miniaturas correspondentes e descarregue as imagens.
Personalização visível no carrinho e na encomenda
No plugin WordPress + WooCommerce, utiliza um projeto local e a revisão do modelo que lhe está associada. Para um produto com geradores de mockups disponíveis, a aplicação cria as imagens personalizadas ao adicionar o projeto ao carrinho. Depois de guardar os ficheiros, o plugin apresenta-os junto ao artigo no carrinho e na encomenda.
- Não precisa de abrir manualmente a janela Mockup para cada encomenda de um 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 são suportadas no carrinho clássico e nos blocos Cart/Checkout do WooCommerce. Se o mockup guardado não estiver disponível, mantém-se a miniatura padrão do produto.
- Prepare e guarde os geradores no modelo utilizado pelo projeto.
- Disponibilize o projeto num produto gerido pelo plugin WordPress + WooCommerce.
- O cliente personaliza o produto no Customizer e adiciona o projeto ao carrinho.
- A aplicação prepara mockups das vistas disponíveis para o projeto e as cores escolhidas. Após guardar as imagens, o plugin utiliza a miniatura personalizada junto ao artigo no carrinho e na encomenda.
Uma visualização para a loja e um ficheiro para produção
O mockup apresenta a aparência do produto: elementos gráficos finais, forma, sombras e fundo. Utilize-o nas ofertas, no catálogo ou para mostrar a personalização ao cliente.
Para produção, prepare os ficheiros das áreas de impressão no Gestor de impressão. Isto também se aplica aos projetos AOP, nos quais os elementos gráficos cobrem diferentes peças do produto. O guia Ficheiros prontos para impressão explica as definições e a transferência dos ficheiros de produção.
Verifique o gerador antes de o utilizar na loja
Teste várias estampagens e cores do produto. Um gerador preparado com um motivo simples também deve apresentar corretamente texto pequeno, elementos gráficos junto à margem e estampagens AOP maiores.
Um teste rápido da edição ao carrinho
Siga o mesmo percurso que será utilizado por si ou pelo seu cliente.
- Examine todas as vistas guardadas. Verifique o enquadramento do produto, a sombra e as margens.
- Ative o xadrez ou o texto de teste nas peças que serão impressas. Verifique os contornos, a máscara e a disposição dos elementos gráficos.
- Compare uma cor clara e outra escura com a estampagem final no Designer. Descarregue um PNG e examine-o no tamanho previsto.
- Depois das alterações, guarde o projeto do modelo. No plugin, verifique se o projeto utiliza 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 todas as correções exigem voltar a configurar a cena completa.
| O que vê | O que verificar |
|---|---|
| A estampagem ultrapassa o produto ou desaparece junto à gola | O contorno da peça no Mapeamento, as alças Bézier e as definições da máscara da estampagem. Após a correção, recalcule as camadas necessárias. |
| A grelha ou as letras estão demasiado esticadas | O ajuste do modelo à fotografia e o mapeamento da peça. Corrija a forma antes de disfarçar o problema com uma margem demasiado suave. |
| Os elementos gráficos estão demasiado escuros ou claros | As definições das camadas de sombras e luzes. Numa composição 3D, verifique também a exposição e a iluminação da cena. |
| Depois de alterar o fundo, continua a ver a imagem anterior | Atualize a imagem de base com o comando de geração adequado e guarde o projeto. A escolha do fundo altera a cena, mas não substitui a imagem gerada anteriormente. |
| O ZIP não inclui as laterais nem as costas | O conjunto de variantes corresponde à vista selecionada. Escolha a miniatura seguinte e descarregue as imagens desse lado do produto. |
| Não existe a opção de todas as cores ou é descarregado apenas um PNG | Verifique 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 apresenta a fotografia padrão do produto | Verifique se os geradores guardados e os seus recursos estão disponíveis para a revisão do modelo utilizada no projeto e se os mockups foram guardados corretamente. |