Como criar um logo de uma cor preservando o design

Para criar um logo de uma cor, aplique uma única cor sólida à arte pintada e preserve os detalhes internos essenciais como espaços vazios onde necessário. Alterar todos os preenchimentos para preto pode apagar um símbolo que só era visível por ter outra cor.

Comece com um mestre vetorial aprovado ou uma variante de uma cor existente. Trabalhe em uma cópia, decida quais detalhes precisam sobreviver e confira o resultado em mais de um fundo e no tamanho de exibição pretendido. O exemplo abaixo usa um emblema e um raio originais para mostrar a decisão de design e a geometria SVG por trás dela.

Comece com os arquivos aprovados do logo

Peça ao responsável pela marca um arquivo de uma cor antes de redesenhar o símbolo. A marca pode já ter versões separadas em cores, de uma cor e em negativo, cada uma aprovada para determinados fundos.

Por exemplo, a orientação de uso da marca Penn State descreve uma versão de uma cor com áreas internas transparentes e alerta contra criá-la apenas repintando outra variante. Essa é uma regra daquela marca, mas ilustra por que o arquivo de uma cor fornecido pode diferir do mestre colorido.

Se você é dono do design e precisa criar a variante, reúna:

• Um original intacto e uma cópia de trabalho editável
• Uma lista de detalhes identificadores, como um símbolo interno ou uma abertura de letra
• O menor tamanho de exibição pretendido e as cores prováveis de fundo
• O formato de arquivo aceito pelo destinatário e os requisitos de tinta, se houver impressão

Um SVG é um arquivo de gráficos vetoriais, mas pode conter uma imagem de pixels em vez de formas editáveis. Se só restar um PNG ou JPG, o guia de vetorização de logo explica a recuperação da origem. Recuperar formas e projetar uma variante de uma cor são decisões separadas.

Decida quais limites precisam permanecer

Considere um emblema circular azul com um raio amarelo. O limite de cor torna o raio visível. Dar às duas formas o mesmo preenchimento cinza-carvão deixa um círculo simples: os caminhos ainda existem, mas a pintura igual esconde a distinção interna.

Espaço negativo é uma área sem pintura que revela a superfície atrás da arte. Transformar o raio em espaço negativo preserva o motivo enquanto o emblema usa uma só cor pintada.

Alguns logos precisam apenas de troca de preenchimento. Use o guia de alteração de cor SVG nesse caso. Se estiver mantendo várias cores e mesclando tons quase iguais, siga primeiro o fluxo de redução de paleta.

Construa a abertura na geometria SVG

Para um exemplo reproduzível, salve esta arte original como original.svg. Um caminho é uma forma descrita por instruções de desenho; este arquivo tem um caminho fechado para o emblema e outro para o raio.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  <path fill="#0d6efd"
    d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z"/>
  <path fill="#f5d447"
    d="M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>

1. Abra o original no navegador para ver o design de duas cores.
2. Salve uma segunda cópia e troque os dois valores de preenchimento por #111827. Abra novamente. O raio agora se mistura ao emblema.
3. Salve o código revisado abaixo como one-color.svg. Ele mantém as coordenadas do desenho e coloca os dois contornos em um só caminho.
4. Abra o arquivo revisado sobre fundos claros e escuros e confira no tamanho pretendido.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  <path fill="#111827" fill-rule="evenodd"
    d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z
       M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>

O fill-rule determina quais regiões dentro de um caminho recebem pintura. Neste exemplo aninhado, evenodd deixa a região do raio sem pintura. A especificação SVG de fill-rule define esse comportamento. O arquivo contém um preenchimento sólido e nenhuma forma branca na frente nem retângulo de fundo.

Você também pode criar esse tipo de abertura em um editor vetorial. A documentação de caminhos compostos da Adobe explica regiões transparentes e regras de preenchimento disponíveis. O código aqui é SVG escrito para o exemplo, não uma exportação do Illustrator; use os controles documentados do editor e reabra o resultado salvo para conferir a abertura.

Confira o fundo e a versão pequena

Coloque o logo revisado sobre branco e sobre um fundo escuro ou colorido contrastante. O raio deve revelar cada fundo. Um raio pintado de branco continuaria branco no fundo colorido, mesmo que parecesse uma abertura sobre branco.

Para este exemplo original, renderizamos os arquivos salvos em 256 e 32 pixels usando Sharp com librsvg. Nos dois tamanhos, a amostra interna do raio revisado tinha alfa 0, ou seja, transparência total. O controle de cor uniforme era cinza-carvão opaco no mesmo ponto; um controle separado com sobreposição branca era branco opaco. São verificações digitais dos arquivos criados, não resultados de impressão ou de um aplicativo que os importou.

Na visualização real de 32 pixels, o raio revisado continuou distinguível nos fundos branco e cinza-ardósia inspecionados. Isso estabelece uma verificação útil para este exemplo; não define o tamanho mínimo de outro logo. Veja seu design no tamanho real de uso, em vez de julgar apenas uma tela ampliada.

Antes de aceitar a variante, confira:

• O motivo interno essencial continua sendo lido como pretendido.
• As regiões vazias revelam o fundo em vez de uma mancha branca pintada.
• Os pequenos espaços e as aberturas das letras permanecem visíveis no tamanho escolhido.
• O arquivo salvo reabre com a geometria pretendida e uma única cor sólida de pintura.

Para uma versão branca em negativo deste exemplo, altere o preenchimento do caminho revisado para #ffffff e mantenha a mesma região vazia do raio. Confira sobre fundo escuro. Um arquivo de marca em negativo pode exigir outra geometria, portanto siga a versão fornecida pela marca quando existir.

Corrija uma variante que perde detalhes

Evite transformar toda região colorida em furo. Um realce pode ser dispensável, enquanto uma abertura de letra carrega significado. Decida pelas características identificadoras do design e compare a variante ao original. Se alterar bastante a silhueta ou as proporções internas, obtenha aprovação da nova variante antes de usá-la como marca.

Separe os requisitos de entrega do design

Salve o mestre colorido, a versão escura de uma cor e qualquer versão branca em negativo aprovada em arquivos distintos. Mantenha a mesma tela e posição quando as versões forem substituir umas às outras nos layouts.

Um preenchimento SVG sólido não nomeia uma tinta especial da gráfica nem cria uma chapa de produção. Confirme com o destinatário o nome da cor solicitado, o tamanho físico, o tipo de arquivo aceito e as premissas de fundo. O guia de formatos de logo aborda a escolha do mestre editável e dos formatos de entrega. Outros temas de preparação estão nos guias de logos e artes.

Se a única origem é PNG ou JPG

Para um logo raster adequado que tenha restado, o vetorizador de logo do PerfectVector pode ajudar a recuperar formas SVG. Sua prévia é uma visualização raster protegida; a edição e exportação reais do SVG ficam disponíveis após desbloquear o resultado. Inspecione as formas recuperadas antes de usá-las para construir a variante de uma cor.

Vetorizar os pixels não decide qual detalhe deve virar espaço negativo. Se a origem tem bordas desfocadas, aberturas ausentes ou nenhum limite visível entre duas regiões, use o mestre aprovado ou redesenhe o detalhe ausente deliberadamente. Repita as verificações de fundo e tamanho pequeno após qualquer mudança de geometria.

Perguntas frequentes

O que é um logo de uma cor?

Um logo de uma cor usa uma única cor sólida pintada. Suas regiões vazias revelam o fundo. Uma versão escura e uma versão branca em negativo são variantes separadas, não duas cores pintadas juntas na mesma marca.

Basta trocar todos os preenchimentos por preto?

Às vezes. Se a cor é o único limite entre um símbolo essencial e seu entorno, igualar os preenchimentos esconde esse símbolo. Preserve o limite com espaço negativo ou use um arquivo aprovado de uma cor.

Preciso vetorizar um logo que já é arte vetorial?

Não. Trabalhe com as formas editáveis existentes e preserve o original. A vetorização recupera a origem de uma imagem de pixels adequada; não é obrigatória para criar uma variante de uma cor a partir de geometria vetorial.

Um preenchimento SVG branco especifica tinta branca automaticamente?

Não. O preenchimento branco descreve a cor pintada da arte, enquanto o espaço vazio não é pintado. A gráfica determina como a tinta branca deve ser identificada e fornecida no seu fluxo de produção.

Fontes

1. Penn State: cor e a marca — Um exemplo identificado de variantes de marca aprovadas de uma cor e em negativo, incluindo regiões internas transparentes.
2. Adobe: criar caminhos compostos — Documenta regiões transparentes, regras de preenchimento e direção de caminhos em caminhos compostos do Illustrator.
3. W3C: fill-rule do SVG 2 — Define quais regiões de um caminho composto recebem pintura no exemplo SVG nativo.

Só tem um PNG ou JPG? Converta seu logo em SVG editável, desbloqueie o resultado e inspecione as formas recuperadas antes de criar e conferir sua variante de uma cor.