Product Designer e Customizer
Ferramentas avançadas de design
Combine imagens, texto e vetores num só projeto. Aperfeiçoe a impressão no Product Designer, confira o resultado no modelo 3D e disponibilize 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 vistas lado a lado. Posicione e ajuste os elementos, controlando a escala e a posição no produto.
A vista combinada ajuda a avaliar a composição no contexto da forma real do produto. Vê o mesmo texto, imagem ou motivo como projeto de impressão e como parte da visualização final.
Grelha e pré-visualização da impressão em 2D
Grelha e alinhamento magnético
Ative a grelha e o alinhamento às camadas para posicionar os elementos com mais precisão.
Pré-visualização sem imagem de fundo
Oculte a imagem de fundo da área de trabalho para avaliar melhor a impressão. Os elementos do projeto continuam visíveis.
Imagem acima ou abaixo da grelha
Escolha se a imagem de fundo deve aparecer acima ou abaixo da grelha.
Fundo personalizado para a pré-visualização
Substitua a imagem por um fundo branco, cinzento, preto ou personalizado. Confira as bordas e as áreas transparentes da imagem sobre uma cor contrastante. A alteração afeta a pré-visualização, não o projeto de impressão.
Imagens, opacidade e composição
Uma fotografia, ilustração ou logótipo pode ser o ponto de partida de todo o projeto. Prepare o aspeto, a transparência e a disposição e depois combine com texto e outras camadas.
As suas próprias imagens
Adicione imagens JPEG, PNG e WebP, além de ficheiros 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 controlo o destaque da imagem no produto.
Posição e transformações
Mova, redimensione, rode e espelhe os elementos. Ajuste a posição na área de impressão na vista 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.
Grelha
Grid
Linhas e colunas regulares.
Tijolos
Brick
Linhas com desfasamento alternado.
Desfasamento de colunas
Half drop
Desfasamento de uma coluna sim, outra não.
Dispersão
Scatter
Distribuição livre com semente aleatória.
Disposição circular
Round
Repetições distribuídas num círculo.
Defina o número de linhas e colunas, o espaçamento e o desfasamento do padrão. Diferencie as variantes A/B com rotação, escala ou espelhamento. Alterne elementos, linhas, colunas ou use um padrão axadrezado; 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 controlo de semitransparência.
| Filtro ou ajuste | O que pode fazer |
|---|---|
| Brilho | Clareie ou escureça a imagem antes de a incluir 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 numa 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 vivas. |
| 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 limiar alfa e a suavidade da transição. Esta correção atua na opacidade dos píxeis, sem reconhecer objetos. |
Seis estilos de retícula
Retícula com controlo dos detalhes
Dê à imagnum ritmo de pontos, cruzes ou linhas. A retícula permite definir a estrutura da impressão, 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
Rode a grelha e ajuste a forma 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 o usar na impressão sem o fundo em 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 píxeis correspondentes de toda a imagem e depois aperfeiçoe a máscara com o pincel.
Aplicação manual de máscaras passo a passo
Trabalhe na máscara da imagem e controlo 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 suportados, 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 aperfeiçoe os detalhes com o pincel. Nos navegadores suportados, pode também 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 pré-visualização, amplie a imagem e desloque a vista 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 logótipo, mantenha apenas o motivo e coloque-o num produto colorido ou repita-o como padrão. O color knockout também atua na cor selecionada dentro da imagem, pelo que vale a pena aperfeiçoar 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 um tipo de letra, altere o formato do texto e combine o preenchimento com contorno ou sombra.
Mais de 1800 tipos de letra do Google
Pesquise tipos de letra pelo nome e filtre por categoria e alfabetos suportados. Escolha entre tipos de letra serifados, sem serifa, decorativos, manuscritos e monoespaçados.
Tipografia sob controlo
Ajuste o tamanho, o espaçamento entre letras e linhas e o alinhamento. Alterne entre maiúsculas e minúsculas, aplique sublinhado ou rasurado e use as variantes em negrito e itálico disponíveis para o tipo de letra.
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 aperfeiçoar as formas e as camadas de caminhos suportadas.
Formas predefinidas
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 predefinida num emblema, numa decoração ou num contorno original. Edite os pontos das camadas de formas e caminhos suportadas na vista 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 numa camada de cada vez, desenhando novas partes ou aperfeiçoando a geometria existente.
Caneta e extensão de caminhos
Desenhe segmentos com a caneta, ligue-os a pontos existentes e feche os contornos. Adicione novos pontos ao caminho ou remova os desnecessários para aperfeiçoar 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. Pode mover os pontos selecionados em conjunto para alterar uma parte inteira da composição.
Curvas de Bézier e pegas
Modele a curvatura com pegas de entrada e saída. Ative-as separadamente e escolha pegas independentes, simétricas no ângulo ou que mantenham tanto o ângulo como o comprimento.
Ligação de pontos
Ligue os pontos selecionados com um segmento. Amplie o caminho e aperfeiçoe as ligações que formam o seu contorno.
Corte de caminhos
Trace uma linha de corte sobre o caminho para o dividir. Depois, aperfeiçoe 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 na 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 junto ao eixo para aperfeiçoar a ligação entre os dois lados.
Desfazer e refazer alterações. Experimente variantes do contorno e volte a operações anteriores durante a edição.
Aperfeiçoe o aspeto 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 o seu próprio motivo de impressão.
Ferramenta do Product Designer
Vetorização de imagens para SVG
Transforme uma imagem PNG, WebP ou JPEG numa imagem 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 descarregue o ficheiro SVG.
- Paleta de 1 a 32 cores e nível de detalhe ajustável.
- Ligação à imagem original: 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 definições adequadas ao projeto e avalie a pré-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 uma ligação para instruções, uma coleção ou a página da marca com as 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 um aspeto independente para os cantos.
- Quadrados
- Arredondados
- Muito arredondados
- Classy
- Classy Rounded
- Pontos
Conteúdo e formato do código
Introduza o endereço de uma página, de instruções, de uma coleção ou o 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 o aspeto das molduras dos cantos e dos respetivos centros. As molduras podem ser quadradas, muito arredondadas ou circulares, e os centros, quadrados ou circulares. Pode também manter o estilo predefinido.
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 introduza 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 logótipo ou motivo
Reserve um quadrado ou retângulo horizontal ou vertical no centro. Combine este espaço com um logótipo ou motivo adicionado como camada separada do projeto.
Redimensione, rode e posicione o código junto com os restantes elementos do projeto. Antes da produção, teste a leitura no tamanho final da impressão, sobretudo 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 controlo como aparecem juntos usando grupos e máscaras.
Ordem e visibilidade
Mova os elementos na pilha de camadas, oculte-os e volte a mostrá-los. Construa a composição por etapas, sem eliminar 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 logótipo ou outros elementos da identidade visual fora do alcance de edição do cliente e deixe espaço para a personalização.
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, podem adicionar texto, imagens, formas e códigos QR e aperfeiçoar a sua composição com a pré-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 num único processo. Prepare a composição, mantenha o controlo dos elementos fixos e dê espaço à ideia do cliente.
Veja as ferramentas em ação