Designer de distintivos

O Designer de distintivos é um editor visual em canvas embutido no badges.ninja que permite criar imagens de distintivos profissionais sem nenhuma ferramenta de design.

Visão geral

O designer abre quando você clica no campo de imagem enquanto cria ou edita um distintivo. Ele oferece uma área de trabalho em canvas onde você pode combinar modelos, texto e fundos personalizados para criar a imagem do seu distintivo.

Escolhendo um modelo

O designer inclui mais de 80 modelos embutidos organizados em duas dimensões, para você encontrar um rapidamente:

• 8 formas — Círculo, Quadrado arredondado, Hexágono, Escudo, Octógono, Losango, Faixa, Selo
• 8 paletas de cor — Ouro, Prata, Bronze, Azul, Verde, Carmesim, Roxo, Grafite

Para escolher um:

1. Clique em Modelos na barra de ferramentas do designer.
2. Use os filtros Forma e Cor no topo do seletor para refinar a lista. O contador à direita mostra quantos modelos correspondem (ex.: 8 / 84).
3. Clique em um modelo para aplicá-lo ao canvas.

Os modelos gerados são propositalmente limpos — escolha uma forma e uma paleta, depois adicione seu próprio texto, ícones e fitas no designer.

Adicionando formas, fitas e ícones

Além dos modelos, o designer traz três bibliotecas de recursos adicionais que você pode sobrepor a qualquer modelo:

• Formas — mais de 80 formas vetoriais (círculos, escudos, hexágonos, estrelas, medalhas, selos, coroas de louro, faixas, formas geométricas) agrupadas em categorias
• Fitas — 20 sobreposições decorativas de fita
• Ícones — 50 ícones pictográficos (átomo, prêmio, cérebro, maleta, certificado, código, coroa, diamante, diploma, capelo, lâmpada, medalha, foguete, escudo com confirmação, estrela, alvo, troféu, …)

Escolha um em qualquer popover e ele será inserido no canvas na cor atual. A barra de cor dentro de cada popover permite recolorir o elemento antes de inseri-lo — útil quando você quer uma cor diferente do padrão da barra de ferramentas.

Enviando um fundo ou imagem personalizada

Você pode enviar sua própria imagem para usar como fundo ou como camada por cima:

1. Clique em Enviar na barra de ferramentas do designer.
2. Escolha um arquivo de imagem do seu computador (recomenda-se PNG ou JPG).
3. A imagem é colocada no canvas como um objeto selecionável — arraste, redimensione, gire ou envie para trás de outros elementos.

Enviar uma imagem não apaga o modelo nem as camadas existentes — ela apenas se empilha por cima.

Para fundos completos, use uma imagem quadrada de pelo menos 600×600 pixels.

Adicionando texto

1. Clique no botão Texto na barra de ferramentas.
2. Um novo elemento de texto aparece no canvas.
3. Clique no texto para selecioná-lo e digite o conteúdo.
4. Arraste o elemento para posicioná-lo no canvas.

Você pode adicionar vários elementos de texto para diferentes partes do distintivo (título, destinatário, data, etc.).

Mudando a fonte

O designer inclui 11 fontes (Arial, Georgia, Times New Roman, Pacifico, Roboto, Open Sans, Montserrat, Lato, Raleway, Oswald, Playfair Display):

1. Selecione um elemento de texto no canvas.
2. Clique no menu Fonte na barra de ferramentas.
3. Escolha entre as fontes disponíveis.

A pré-visualização da fonte mostra a aparência de cada opção antes de você selecionar.

Mudando a cor

O seletor Cor da barra de ferramentas controla duas coisas ao mesmo tempo:

• Texto selecionado — define a cor de preenchimento de qualquer elemento de texto selecionado.
• Cor de inserção padrão — para formas, fitas e ícones inseridos em seguida, além de objetos SVG selecionados (recolore traços e preenchimentos no lugar).

Escolha uma cor na paleta ou insira um código hex. Dentro de cada popover de forma/fita/ícone também há uma barra de cor menor para escolhas pontuais que não alteram o padrão da barra de ferramentas.

Alinhando elementos

A linha de 6 botões de alinhamento age sobre o(s) objeto(s) selecionado(s) em relação ao canvas:

Botão	Ação
Alinhar à esquerda	Fixar na borda esquerda do canvas
Centralizar horizontalmente	Centralizar no eixo X do canvas
Alinhar à direita	Fixar na borda direita do canvas
Alinhar ao topo	Fixar na borda superior do canvas
Centralizar verticalmente	Centralizar no eixo Y do canvas
Alinhar à base	Fixar na borda inferior do canvas

Quando você arrasta um elemento para perto do centro do canvas, guias de encaixe tracejadas em roxo aparecem e o objeto se encaixa em alinhamento perfeito.

Seleção múltipla e camadas

• Segure Shift e clique para selecionar vários objetos, ou arraste uma caixa de seleção pelo canvas.
• Use Enviar para trás / Trazer para frente para controlar a ordem Z.
• Pressione Delete ou clique no botão Excluir da barra para remover a seleção.
• Desfazer / Refazer (ou Ctrl+Z / Ctrl+Shift+Z) percorrem as últimas 20 mudanças.

Excluindo elementos

1. Selecione o elemento a remover (ou shift-clique para vários).
2. Clique no botão Excluir da barra ou pressione a tecla Delete.

Dicas para um bom design de distintivo

• Mantenha simples — use texto claro e evite excessos. O distintivo costuma ser exibido em tamanhos pequenos.
• Alto contraste — garanta que o texto seja legível sobre o fundo.
• Inclua o nome do distintivo — destinatários e espectadores devem entender a credencial de imediato.
• Formato quadrado — distintivos ficam melhor como imagens quadradas.
• Consistência de marca — use as cores e fontes da sua organização em todos os distintivos.
• Teste em tamanhos pequenos — pré-visualize o distintivo em 100x100 pixels para garantir a legibilidade.

Salvando a imagem do distintivo

Quando estiver satisfeito com o design, clique em Concluir ou Salvar no designer. A imagem é capturada do canvas e anexada ao distintivo. Ela será enviada ao IPFS quando você criar ou salvar o distintivo.