Logótipo com gradiente: quando resulta e quando usar cor lisa

Um logótipo com gradiente funciona quando o logótipo vive sobretudo em ecrãs, aparece em tamanhos médios ou grandes e tem uma forma forte e simples que ainda se lê numa única cor lisa. Tem dificuldades em tamanhos minúsculos, na impressão a uma cor, no bordado e onde quer que a cor seja limitada. A regra é simples: um logótipo com gradiente serve como versão principal, mas tens de ter sempre uma versão lisa, e a forma tem de funcionar primeiro sem o gradiente.

Os logótipos com gradiente tornaram-se comuns quando as marcas passaram a desenhar primeiro para telemóveis, onde a cor brilha e os ecrãs reproduzem bem as misturas. O nosso olhar sobre logótipos famosos com gradiente trata dos exemplos conhecidos. Este guia é sobre decidir se o teu logótipo deve ser um, e como o fazer bem se for.

Quando um logótipo com gradiente funciona

Um gradiente ganha o seu lugar num logótipo quando acrescenta algo que a cor lisa não consegue: uma ideia de luz, de movimento, ou de várias coisas a juntarem-se. Funciona melhor nestas condições.

• Primeiro os ecrãs. Ícones de aplicações, sites, avatares de redes sociais e vídeo, onde a cor é retroiluminada e as misturas se desenham bem.
• Tamanhos médios e grandes. Uma mistura precisa de espaço; com uns milímetros de largura, lê-se como uma só cor baça.
• Formas simples e sólidas. Um círculo, uma letra forte ou um símbolo grosso dão ao gradiente uma superfície por onde correr. As linhas finas não lhe dão para onde ir.
• Duas ou três cores próximas. As misturas curtas entre tons vizinhos mantêm-se vivas. As viagens longas pelo círculo cromático ficam cinzentas a meio.
• Uma marca que já usa gradientes. O logótipo repete a linguagem do resto da identidade em vez de ser a única mistura à vista.

Onde os logótipos com gradiente falham

A maior parte dos sítios onde um logótipo aparece não é o ecrã de um telemóvel. Antes de te comprometeres, lista onde o teu logótipo vai realmente estar e verifica cada um com esta tabela.

A impressão não é impossível, apenas exigente. Imprimir gradientes explica como obter misturas suaves em papel. E para a última linha, vê colocar um logótipo sobre um fundo em gradiente.

Como desenhar um logótipo com gradiente que sobreviva

1. 1

   Desenha a forma a preto sólido

   Todo o logótipo deve funcionar primeiro como silhueta. Se não é reconhecível a preto sobre branco num tamanho pequeno, um gradiente só esconde o problema.

2. 2

   Escolhe uma mistura curta

   Escolhe dois ou três tons vizinhos de luminosidade semelhante. Testa o ponto intermédio: se parece cinzento ou castanho, muda uma cor ou acrescenta uma paragem no meio.

3. 3

   Decide a direção de propósito

   As misturas na diagonal, de cima à esquerda para baixo à direita, são as mais comuns. Uma direção que acompanha a forma, como de baixo para cima para algo que sobe, dá ao gradiente uma razão para estar ali.

4. 4

   Escolhe a cor lisa de reserva

   Escolhe uma cor sólida da mistura, muitas vezes perto do ponto intermédio, que as pessoas leiam como a mesma marca. É a cor para tamanhos pequenos e usos a uma só cor.

5. 5

   Faz o conjunto completo

   Gradiente, cor lisa, mono branco e mono preto. Testa cada um em tamanho de avatar, sobre fundos escuros e claros, e impresso.

6. 6

   Escreve as regras

   Regista as paragens exatas, o ângulo e a reserva no teu guia de estilo da marca para ninguém refazer o gradiente à vista.

Logótipo com gradiente ou fundo com gradiente

Muitas marcas obtêm o benefício de um gradiente sem o pôr no logótipo. O logótipo fica liso e nítido, e o gradiente vive nos fundos das publicações, das embalagens e do site. O logótipo nunca tem de lutar com tamanhos pequenos ou limites de impressão, e o gradiente continua a fazer parte de como as pessoas te reconhecem. Branding com gradientes aprofunda esta abordagem.

Criar um logótipo com gradiente em SVG

Na web, um logótipo com gradiente deve ser um SVG com o gradiente definido no seu interior, para se manter nítido em todos os tamanhos. Gradientes SVG explica as opções por completo.

<svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="Northlight">
  <defs>
    <linearGradient id="northlight-logo" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#7c3aed" />
      <stop offset="1" stop-color="#db2777" />
    </linearGradient>
  </defs>
  <circle cx="60" cy="60" r="52" fill="url(#northlight-logo)" />
</svg>