Designer de distintivos

O Designer de Distintivos é um editor visual em tela integrado no badges.ninja que lhe permite criar imagens profissionais de distintivos sem recurso a ferramentas de design.

Vista geral

O designer abre quando clica no campo de imagem ao criar ou editar um distintivo. Disponibiliza um espaço de trabalho em tela onde pode combinar modelos, texto e fundos personalizados para compor a imagem do distintivo.

Seleccionar um modelo

O designer inclui mais de 80 modelos integrados, organizados segundo duas dimensões para que encontre um rapidamente:

• 8 formas — Círculo, Quadrado arredondado, Hexágono, Escudo, Octógono, Losango, Estandarte, Selo
• 8 paletas de cores — Dourado, Prateado, Bronze, Azul, Verde, Carmim, Roxo, Grafite

Para escolher um:

1. Clique em Modelos na barra de ferramentas do designer.
2. Utilize os filtros Forma e Cor no topo do selector para afinar a lista. O contador à direita mostra quantos modelos correspondem (por exemplo, 8 / 84).
3. Clique num modelo para o aplicar à tela.

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

Adicionar formas, fitas e ícones

Para além dos modelos, o designer inclui três bibliotecas adicionais de recursos que pode sobrepor a qualquer modelo:

• Formas — mais de 80 formas vectoriais (círculos, escudos, hexágonos, estrelas, medalhas, selos, grinaldas, estandartes, formas geométricas) agrupadas por categorias
• Fitas — 20 sobreposições decorativas de fita
• Ícones — 50 ícones pictográficos (átomo, prémio, cérebro, pasta, certificado, código, coroa, diamante, diploma, barrete de formatura, lâmpada, medalha, foguetão, escudo-verificação, estrela, alvo, troféu, …)

Escolha um em qualquer dos painéis flutuantes e ele é inserido na tela com a cor actual. A barra de cor dentro de cada painel permite-lhe recolorir o recurso antes de o inserir — útil quando pretende uma cor diferente da predefinição da barra de ferramentas.

Carregar um fundo ou imagem personalizada

Pode carregar a sua própria imagem para a usar como fundo ou como camada por cima:

1. Clique em Carregar na barra de ferramentas do designer.
2. Escolha um ficheiro de imagem do seu computador (PNG ou JPG recomendados).
3. A imagem é colocada na tela como um objecto seleccionável — arraste, redimensione, rode ou envie para trás de outros elementos.

Carregar uma imagem não apaga o modelo nem as camadas já existentes — é apenas colocada por cima.

Para fundos completos, utilize uma imagem quadrada com pelo menos 600×600 píxeis.

Adicionar texto

1. Clique no botão Texto na barra de ferramentas.
2. Surge na tela um novo elemento de texto.
3. Clique no texto para o seleccionar e, depois, escreva o conteúdo.
4. Arraste o elemento de texto para o posicionar.

Pode acrescentar vários elementos de texto para diferentes partes do distintivo (título, destinatário, data, etc.).

Mudar o tipo de letra

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

1. Seleccione um elemento de texto na tela.
2. Clique na lista Tipo de letra na barra de ferramentas.
3. Escolha um dos tipos disponíveis.

A pré-visualização mostra o aspecto de cada opção antes de a escolher.

Mudar a cor

O selector Cor na barra de ferramentas controla duas coisas ao mesmo tempo:

• Texto seleccionado — define a cor de preenchimento de qualquer elemento de texto seleccionado.
• Cor predefinida de inserção — para formas, fitas e ícones inseridos a seguir, bem como objectos SVG seleccionados (recolora traços e preenchimentos no local).

Escolha uma cor da paleta ou introduza um código hex. Dentro de cada painel de formas/fitas/ícones existe ainda uma barra de cor mais pequena para escolhas pontuais que não alteram a predefinição da barra de ferramentas.

Alinhar elementos

A linha de 6 botões de alinhamento actua sobre o(s) objecto(s) seleccionado(s) relativamente à tela:

Botão	Acção
Alinhar à esquerda	Fixar no bordo esquerdo da tela
Centrar na horizontal	Centrar no eixo X da tela
Alinhar à direita	Fixar no bordo direito da tela
Alinhar ao topo	Fixar no bordo superior da tela
Centrar na vertical	Centrar no eixo Y da tela
Alinhar em baixo	Fixar no bordo inferior da tela

Ao arrastar um elemento para próximo do centro da tela, surgem guias roxas tracejadas e o objecto ajusta-se a um alinhamento exacto.

Selecção múltipla e camadas

• Mantenha Shift premida e clique para seleccionar vários objectos, ou arraste uma caixa de selecção pela tela.
• Use Enviar para trás / Trazer para a frente para controlar a ordem Z.
• Prima Delete ou clique no botão Eliminar da barra de ferramentas para remover a selecção.
• Anular / Refazer (ou Ctrl+Z / Ctrl+Shift+Z) percorrem as últimas 20 alterações.

Eliminar elementos

1. Seleccione o elemento a remover (ou clique com Shift para vários).
2. Clique no botão Eliminar na barra de ferramentas ou prima a tecla Delete.

Dicas para um bom design

• Mantenha simples — utilize texto claro e evite elementos em excesso. O distintivo será frequentemente apresentado em tamanhos pequenos.
• Use contrastes elevados — garanta que o texto é legível contra o fundo.
• Inclua o nome do distintivo — destinatários e observadores devem perceber a credencial à primeira vista.
• Formato quadrado — os distintivos apresentam-se melhor como imagens quadradas.
• Coerência de marca — utilize as cores e os tipos de letra da sua organização em todos os distintivos.
• Teste em tamanhos pequenos — pré-visualize o distintivo a 100x100 píxeis para garantir a legibilidade.

Guardar a imagem do distintivo

Quando estiver satisfeito com o design, clique em Concluído ou Guardar no designer. A imagem é capturada a partir da tela e associada ao distintivo. Será enviada para o IPFS quando criar ou guardar o distintivo.