Product Designer e Customizer
Ferramentas avançadas de design
Combine imagens, texto e vetores em um só projeto. Aperfeiçoe a estampa no Product Designer, confira o resultado no modelo 3D e ofereça personalização aos clientes no Customizer.
Da composição ao produto
Design em 2D e 3D
Crie na área plana em 2D, trabalhe diretamente nas áreas de impressão do modelo 3D ou use as duas visualizações lado a lado. Posicione e ajuste os elementos, controlando a escala e a posição no produto.
A visualização combinada ajuda a avaliar a composição no contexto da forma real do produto. Você vê o mesmo texto, imagem ou motivo como projeto de estampa e como parte da visualização final.
Grade e visualização da estampa em 2D
Grade e alinhamento magnético
Ative a grade e o alinhamento às camadas para posicionar os elementos com mais precisão.
Visualização sem imagem de fundo
Oculte a imagem de fundo da área de trabalho para avaliar melhor a estampa. Os elementos do projeto continuam visíveis.
Imagem acima ou abaixo da grade
Escolha se a imagem de fundo deve aparecer acima ou abaixo da grade.
Fundo personalizado para a visualização
Substitua a imagem por um fundo branco, cinza, preto ou personalizado. Confira as bordas e as áreas transparentes da imagem sobre uma cor contrastante. A mudança afeta a visualização, não o projeto da estampa.
Imagens, opacidade e composição
Uma foto, ilustração ou logo pode ser o ponto de partida de todo o projeto. Prepare a aparência, a transparência e a disposição e depois combine com texto e outras camadas.
Suas próprias imagens
Adicione imagens JPEG, PNG e WebP, além de arquivos SVG. Substitua uma imagem na composição para preparar outra versão do projeto.
Opacidade de 0 a 100%
Combine motivos, crie fundos sutis e controle o destaque da imagem no produto.
Posição e transformações
Mova, redimensione, gire e espelhe os elementos. Ajuste a posição deles na área de impressão na visualização 2D ou no modelo 3D.
Padrões para imagens, textos e formas
Padrões a partir de um único motivo
Crie um padrão repetido a partir de um único elemento. Use-o como fundo, motivo decorativo ou composição na área de impressão. A ferramenta de repetição também funciona com texto e formas.
Grade
Grid
Linhas e colunas regulares.
Tijolos
Brick
Linhas com deslocamento alternado.
Deslocamento de colunas
Half drop
Deslocamento a cada duas colunas.
Dispersão
Scatter
Distribuição livre com semente aleatória.
Disposição circular
Round
Repetições distribuídas em um círculo.
Defina o número de linhas e colunas, o espaçamento e o deslocamento do padrão. Diferencie as variantes A/B com rotação, escala ou espelhamento. Alterne elementos, linhas, colunas ou use um padrão xadrez; na dispersão, use a semente aleatória.
Filtros e ajustes de imagem
Adapte a imagem ao estilo da coleção sem sair do projeto. O painel de filtros inclui correção de luz e cor, ajustes de detalhes, retícula e controle de semitransparência.
| Filtro ou ajuste | O que você pode fazer |
|---|---|
| Brilho | Clareie ou escureça a imagem antes de incluí-la na composição. |
| Contraste | Aumente ou suavize as diferenças entre as áreas claras e escuras da imagem. |
| Preto e branco | Transforme uma imagem colorida em uma versão monocromática do projeto. |
| Inverter | Inverta as cores para obter um efeito negativo. |
| Matiz | Altere os tons para dar outra personalidade à imagem. |
| Saturação | Controle a intensidade das cores, das mais discretas às mais vibrantes. |
| Vibração | Ajuste a vivacidade das cores como uma etapa independente da correção de cor. |
| Gama do vermelho | Ajuste a resposta tonal do canal vermelho. |
| Gama do verde | Ajuste a resposta tonal do canal verde. |
| Gama do azul | Ajuste a resposta tonal do canal azul. |
| Nitidez | Realce as bordas e os pequenos detalhes da imagem. |
| Desfoque | Suavize a imagem para criar transições mais delicadas. |
| Retícula / Halftone | Crie um efeito de retícula com pontos, cruzes ou linhas e ajuste sua estrutura. |
| Remover fundo semitransparente | Ajuste a transparência com o limite alfa e a suavidade da transição. Essa correção atua na opacidade dos pixels, sem reconhecer objetos. |
Seis estilos de retícula
Retícula com controle dos detalhes
Dê à imagem um ritmo de pontos, cruzes ou linhas. A retícula permite definir a estrutura da estampa, de uma trama fina a um efeito decorativo marcante.
Imagem original
Retícula: pontos
Retícula: linhas
Escolha o formato da retícula que combina com a imagem
Círculos
Quadrados
Losangos
Elipses
Cruzes
Linhas
Espaçamento e tamanho
Defina a densidade da retícula e o tamanho dos elementos.
Ângulo e contraste
Gire a grade e ajuste como o brilho da imagem influencia a retícula.
Suavidade das bordas
Escolha contornos mais definidos ou mais suaves para os elementos.
Inversão e opacidade total
Inverta a resposta ao brilho e ative elementos sem semitransparência.
Remoção de fundo e de uma cor selecionada
Isole o motivo e prepare-o para combinar com outros elementos. Comece automaticamente ou trabalhe manualmente e remova uma cor selecionada com o conta-gotas e a tolerância.
Remoção automática de fundo
Isole o motivo principal da imagem para usá-lo na estampa sem o fundo ao redor.
Ajuste manual da máscara
Remova e restaure áreas com o pincel. Ajuste o tamanho e a intensidade para aperfeiçoar os pequenos elementos e as bordas.
Color knockout
Selecione uma cor com o conta-gotas na ferramenta de remoção manual de fundo. Ajuste a tolerância para remover os pixels correspondentes de toda a imagem e depois refine a máscara com o pincel.
Aplicação manual de máscaras passo a passo
Trabalhe na máscara da imagem e controle quais áreas permanecem visíveis. Aplique o resultado quando as bordas e a transparência estiverem prontas.
Pincel e borracha
Oculte partes da imagem com a borracha e restaure-as com o pincel. Ajuste o tamanho e a intensidade; nos navegadores compatíveis, ajuste também a dureza das bordas.
Remoção de uma cor selecionada
Selecione uma cor com o conta-gotas e ajuste a tolerância. Remova as áreas correspondentes e refine os detalhes com o pincel. Nos navegadores compatíveis, você também pode suavizar a borda com desfoque.
Máscara circular
Ative a máscara circular, altere o raio, a suavidade das bordas e a posição do centro nos eixos X e Y.
Verificação e reversão de alterações
Altere a cor de fundo da visualização, amplie a imagem e mova a visualização para avaliar as bordas. Desfaça e refaça operações ou limpe a máscara para restaurar a imagem.
Exemplo de uso: remova o fundo de cor sólida de um logo, mantenha apenas o motivo e coloque-o em um produto colorido ou repita-o como padrão. O color knockout também atua na cor selecionada dentro da imagem, por isso vale a pena refinar o resultado com a máscara.
De uma legenda à tipografia elaborada
Texto que dá personalidade ao projeto
Crie um texto que combine com o produto, a marca e o estilo da imagem. Escolha uma fonte, altere o formato do texto e combine o preenchimento com contorno ou sombra.
Mais de 1.800 fontes do Google
Busque fontes pelo nome e filtre por categoria e alfabetos compatíveis. Escolha entre fontes com serifa, sem serifa, decorativas, manuscritas e monoespaçadas.
Tipografia sob controle
Ajuste o tamanho, o espaçamento entre letras e linhas e o alinhamento. Alterne entre maiúsculas e minúsculas, aplique sublinhado ou tachado e use as variações em negrito e itálico disponíveis para a fonte.
Preenchimentos, contornos e sombras
Combine cores sólidas com gradientes lineares ou radiais. Adicione um contorno contínuo ou tracejado e uma sombra com cor, deslocamento e desfoque personalizados.
Quatro maneiras de dar forma ao texto
Texto padrão
Crie textos simples e composições com várias linhas, controlando o alinhamento e o espaçamento entre linhas.
Texto em arco
Curve o texto e ajuste o ângulo e a distância do arco. Crie uma composição em torno de um emblema ou de uma imagem central.
Texto em ponte - Bridge
Altere a altura das letras nas extremidades e no centro do texto. Controle a suavidade da transição e a posição vertical do centro.
Texto inclinado - Oblique
Dê direção ao texto ajustando a altura no início e no fim, além da posição vertical da extremidade final.
Formas, caminhos e vetorização
Combine formas simples em composições ou trabalhe com precisão nos pontos e nas curvas. O editor de caminhos permite refinar as formas e as camadas de caminhos compatíveis.
Formas prontas
Comece com um retângulo, uma linha, uma elipse, um círculo, um triângulo, um hexágono, um octógono ou uma estrela. Ajuste o preenchimento, o contorno e a sombra; no retângulo, defina também o arredondamento dos cantos.
Contornos próprios
Transforme uma forma pronta em um emblema, uma decoração ou um contorno original. Edite os pontos das camadas de formas e caminhos compatíveis na visualização 2D e confira o resultado no produto.
Editor de pontos e curvas: do esboço ao contorno preciso
Selecione uma camada de forma ou caminho desbloqueada e entre na edição vetorial. Trabalhe em uma camada por vez, desenhando novas partes ou refinando a geometria existente.
Caneta e extensão de caminhos
Desenhe segmentos com a caneta, conecte-os a pontos existentes e feche os contornos. Adicione novos pontos ao caminho ou remova os desnecessários para refinar a forma.
Seleção de pontos e laço
Selecione um único ponto ou uma área maior com uma caixa de seleção ou o laço. Trabalhe na parte selecionada do contorno e mantenha os outros pontos no lugar.
Movimento ao longo do caminho
Mova os pontos livremente ou ao longo do traçado existente. Você pode mover os pontos selecionados em conjunto para alterar uma parte inteira da composição.
Curvas de Bézier e alças
Modele a curvatura com alças de entrada e saída. Ative-as separadamente e escolha alças independentes, espelhadas no ângulo ou que mantenham tanto o ângulo quanto o comprimento.
Conexão de pontos
Conecte os pontos selecionados com um segmento. Amplie o caminho e refine as conexões que formam seu contorno.
Corte de caminhos
Trace uma linha de corte sobre o caminho para dividi-lo. Depois, refine os segmentos resultantes com as ferramentas de pontos e curvas.
Expansão e contração do contorno
Desloque os pontos selecionados por uma distância definida. Aplique o ajuste nas duas direções ou apenas na horizontal ou vertical para alterar as proporções da parte selecionada.
Eixo de simetria e espelhamento
Defina a posição e o ângulo do eixo e espelhe o contorno inteiro ou os pontos selecionados. Ajuste a distância de união dos pontos próximos ao eixo para refinar a conexão entre os dois lados.
Desfazer e refazer alterações. Experimente variações do contorno e volte a operações anteriores durante a edição.
Aperfeiçoe a aparência do preenchimento e do contorno
Defina a cor ou o gradiente do preenchimento, a largura do contorno e a sombra. Escolha uma linha contínua ou tracejada com comprimentos personalizados para os traços e espaços. Use junções pontiagudas, chanfradas ou arredondadas e extremidades retas, redondas ou quadradas. Arredonde os cantos do retângulo juntos ou individualmente.
Exemplo de uso: desenhe metade de um emblema, espelhe-a em relação ao eixo e ajuste as curvas. Depois, adicione um contorno e texto em arco para criar seu próprio motivo de estampa.
Ferramenta do Product Designer
Vetorização de imagens para SVG
Transforme uma imagem PNG, WebP ou JPEG em um gráfico vetorial. Defina o número de cores e o nível de detalhe, compare o resultado com o original e depois aplique-o ao projeto ou baixe o arquivo SVG.
- Paleta de 1 a 32 cores e nível de detalhe ajustável.
- Vínculo com a imagem original: você pode desativar a vetorização e recalcular o resultado.
- Considera a máscara e os filtros da imagem original; a retícula pode ser mantida como geometria vetorial repetida.
- Processamento local, sem usar um serviço de geração de imagens por IA.
Uma paleta menor simplifica o estilo da imagem; uma maior preserva mais diferenças de cor. Escolha as configurações adequadas ao projeto e avalie a visualização antes de aplicar.
Códigos QR que combinam com o projeto
O código QR pode fazer parte da identidade visual do produto. Combine um link para instruções, uma coleção ou a página da marca com suas próprias cores, formato e estilo dos elementos do código.
Geometria clássica
Elementos quadrados e cor sólida.
Cantos suaves
Elementos arredondados com molduras e centros independentes.
Gradiente e cor da marca
Disposição circular, transição de cores e cores independentes nos cantos.
Seis estilos de pontos
Dê ao código um estilo geométrico, suave ou decorativo. Combine o estilo dos elementos internos do código com uma aparência independente para os cantos.
- Quadrados
- Arredondados
- Muito arredondados
- Classy
- Classy Rounded
- Pontos
Conteúdo e formato do código
Insira o endereço de uma página, de instruções, de uma coleção ou seu próprio texto. Escolha um formato quadrado ou circular para o código inteiro e ajuste-o à composição.
Estilos independentes para os cantos
Configure separadamente a aparência das molduras dos cantos e de seus centros. As molduras podem ser quadradas, muito arredondadas ou circulares, e os centros, quadrados ou circulares. Você também pode manter o estilo padrão.
Quatro áreas de cor independentes
Escolha separadamente as cores dos pontos, das molduras dos cantos, dos centros dos cantos e do fundo. Mantenha a paleta da marca ou destaque elementos específicos do código.
Gradientes e valores exatos de cor
Use uma cor sólida ou um gradiente linear ou radial. Adicione pontos de cor, defina a posição e a opacidade e insira valores HEX ou RGB. Nos gradientes lineares, ajuste também a direção da transição.
Fundo personalizado ou transparente
Adicione um fundo com cor ou gradiente, ou desative-o para que o código combine com a imagem e a cor do produto. Ajuste o contraste para que o código continue legível.
Espaço para um logo ou motivo
Reserve um quadrado ou retângulo horizontal ou vertical no centro. Combine esse espaço com um logo ou motivo adicionado como uma camada separada do projeto.
Redimensione, gire e posicione o código junto com os demais elementos do projeto. Antes da produção, teste a leitura no tamanho final da estampa, principalmente após alterar as cores ou adicionar um motivo no centro.
Camadas, grupos e máscaras
Mantenha a organização mesmo nos projetos com muitos elementos. Separe texto, imagens e decorações e controle como aparecem juntos usando grupos e máscaras.
Ordem e visibilidade
Mova os elementos na pilha de camadas, oculte-os e restaure-os. Construa a composição por etapas, sem excluir as ideias anteriores.
Grupos
Agrupe os elementos relacionados para facilitar a organização de um projeto complexo.
Máscaras
Use a camada inferior da seleção como máscara para as demais. Limite a visibilidade da imagem à forma escolhida.
Proteção dos elementos do projeto
Fixe os elementos permanentes no topo ou na base da pilha com o bloqueio do proprietário. Mantenha o logo ou outros elementos da identidade visual fora do alcance de edição do cliente e deixe espaço para a personalização.
Seu projeto. A personalização do cliente.
Personalização ao alcance dos seus clientes
Disponibilize o Customizer aos clientes no seu site. No modo de edição, eles podem adicionar texto, imagens, formas e códigos QR e aperfeiçoar a própria composição com a visualização do produto.
Como proprietário, prepare o projeto e fixe os elementos que devem permanecer inalterados com o bloqueio do proprietário. A disponibilidade da edição depende da configuração da ferramenta incorporada e das permissões. A vetorização de imagens descrita acima é uma ferramenta do Product Designer.
Da sua imagem ao produto personalizado
Combine edição de imagens, tipografia e visualização 3D em um único processo. Prepare a composição, mantenha o controle dos elementos fixos e dê espaço para a ideia do cliente.
Veja as ferramentas em ação