Designer de distintivos

O Designer de distintivos é um editor visual de canvas com três colunas embutido no badges.ninja que permite criar imagens de distintivos profissionais sem nenhuma ferramenta de design externa.

Visão geral

O designer abre diretamente dentro da janela Criar / Editar distintivo. Ele tem três partes:

• Barra lateral — alterna o painel central entre Modelos, Envios, Elementos, Texto, Atributos, QR Codes e Camadas.
• Painel — as ferramentas do modo selecionado na barra lateral.
• Canvas — uma pré-visualização editável e em tempo real do distintivo. Tudo o que você adiciona é um objeto real e selecionável que você pode mover, restilizar, reordenar ou excluir.

Os detalhes do distintivo (Emissor, Nome, Descrição, Critérios e o Texto de compartilhamento) ficam logo abaixo do canvas, então o design e as informações da credencial convivem em uma única janela — não há etapa separada.

Começando por um modelo

Clique em Modelos na barra lateral para navegar pelos designs embutidos. A família Recognition oferece um distintivo profissional totalmente composto — uma moldura com forma além de textos de espaço reservado editáveis (organização, título, subtítulo e um selo de verificação) — em oito paletas de cor (Ouro, Prata, Bronze, Azul, Verde, Carmesim, Roxo, Grafite). Use o filtro Categoria para refinar a lista, ou Canvas em branco para começar do zero.

Clique em um modelo para aplicá-lo. Seu texto se torna camadas normais e editáveis que você pode alterar ou remover — nada fica fixado.

Elementos — Formas, ícones, fitas e fundos

O painel Elementos sobrepõe gráficos ao seu distintivo:

• Linhas — traços horizontais / verticais.
• Formas — retângulos preenchidos e com contorno, retângulos arredondados, círculos e triângulos.
• Ícones — 70 ícones pictográficos (prêmio, cérebro, certificado, código, coroa, diploma, capelo, medalha, foguete, escudo com confirmação, estrela, troféu e muitos outros), pesquisáveis.
• Fitas — 28 sobreposições decorativas de fita, agrupadas em Retas / Pontudas / Rabos / Decorativas.
• Bases — 80 formas de base recoloríveis em várias categorias (círculos, escudos, hexágonos, estrelas, medalhas, selos, coroas de louro, faixas, geométricas).

Todo ícone, fita e base é inserido na cor atual e pode ser recolorido a qualquer momento.

Formas de fundo

Elementos → Formas de fundo reúne 68 molduras prontas (a biblioteca de forma × paleta). Ao aplicar uma, a moldura de fundo do distintivo é trocada mantendo seu texto e elementos por cima — prático quando você quer uma combinação específica de forma/cor sem um modelo composto.

Enviando uma imagem personalizada

Use o painel Envios para adicionar seu próprio logo, foto ou gráfico. PNG, JPEG e SVG são aceitos, até 5 MB. A imagem é inserida como um objeto de primeiro plano normal — ela se empilha por cima do design e nunca apaga o fundo. Para mudar o fundo do distintivo, escolha um modelo ou uma forma de fundo.

Adicionando e estilizando texto

O painel Texto oferece:

• Adicionar título / subtítulo / texto normal — objetos de texto com tamanho predefinido.
• Combinações — conjuntos prontos como Certificado de conquista, Concedido a ou Verifique em — cada linha permanece editável de forma independente.

Selecione qualquer objeto de texto e a barra de ferramentas contextual aparece acima do canvas:

• Fonte — uma biblioteca de 50 fontes agrupadas em Sans, Serif, Manuscrita, Mono e Sistema. Escolha uma no menu suspenso; cada opção é pré-visualizada em sua própria tipografia.
• + Fonte — envie uma tipografia de marca (TTF, WOFF, WOFF2, OTF) para a sessão atual.
• Tamanho da fonte — o controle − / + (ou digite um número) redimensiona o texto selecionado com precisão, sem arrastar suas alças.
• Cor — define o preenchimento do texto selecionado (e a cor de inserção padrão de novas formas/ícones).
• Alinhamento — seis botões alinham a seleção à esquerda / centro / direita e topo / meio / base em relação ao canvas.

Atributos dinâmicos

O painel Atributos insere tokens dinâmicos — , , , , , — como objetos de texto. Cada token é resolvido por destinatário no momento da concessão, então um único design se personaliza para cada pessoa a quem você o emite. É assim que você coloca o nome do destinatário ou a data de emissão no próprio distintivo.

QR Codes

O painel QR Codes insere um código escaneável vinculado a . Em cada concessão emitida, ele resolve para a página pública de verificação daquela concessão, para que qualquer pessoa possa escanear o distintivo impresso e confirmá-lo.

Camadas

O painel Camadas lista todos os objetos do canvas. A partir daqui você pode reordenar (trazer para frente / enviar para trás), ocultar/exibir, selecionar e excluir cada camada. A moldura de fundo fica fixada na base e permanece não interativa, para que os elementos de primeiro plano fiquem com todos os cliques.

Desfazer / Refazer (Ctrl+Z / Ctrl+Shift+Z) percorrem as últimas 20 mudanças, e guias de encaixe tracejadas aparecem quando você arrasta um objeto para perto do centro do canvas.

Salvando o distintivo

Não há etapa de "exportação" separada. Quando o seu design e os detalhes estiverem prontos:

• Criar distintivo captura o canvas como PNG, envia-o ao IPFS e salva o distintivo junto com seu design editável — então reabrir o distintivo restaura suas camadas individuais para edição posterior.
• Salvar rascunho armazena um distintivo em andamento no servidor (entre dispositivos). Os rascunhos aparecem na sua lista de Distintivos com a marca Rascunho, e você pode retomar qualquer um deles depois.

Dicas para um bom design de distintivo

• Mantenha simples — texto claro, mínimo de excessos. Distintivos costumam ser exibidos em tamanhos pequenos.
• Use alto contraste — deixe o texto legível sobre o fundo.
• Nomeie a credencial — os espectadores devem entendê-la de imediato.
• Formato quadrado — distintivos ficam melhor em formato quadrado.
• Consistência de marca — reutilize as cores e fontes da sua organização em todos os distintivos.
• Salve designs reutilizáveis — todo distintivo que você cria também é salvo como um modelo da conta a partir do qual você pode começar na próxima vez (veja Meus modelos).