# Logótipo com gradiente: quando resulta e quando usar cor lisa [Canonical HTML page](https://gradiently.design/pt-pt/guide/gradient-logo) Um gradiente pode dar vida a um logótipo num ecrã e desfazê-lo num cartão de visita. Vê como decidir, como desenhar um que sobreviva e a versão lisa de que precisas sempre. ## The short version - Um logótipo com gradiente funciona melhor em ecrãs, em tamanhos médios e grandes e com uma forma simples e forte. - Todo o logótipo com gradiente precisa de uma versão lisa a uma cor para tamanhos pequenos, impressão a uma cor, bordado, gravação e carimbos. - Os gradientes de logótipos lêem-se melhor como misturas curtas entre tons vizinhos de luminosidade semelhante, que se mantêm vivas em pequeno. - Desenha primeiro o logótipo a preto sólido; se a forma não funciona lisa, um gradiente não a salva. - Muitas marcas mantêm o logótipo liso e põem o gradiente nos fundos, o que dá a mesma energia com menos pontos de falha. 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](https://gradiently.design/pt-pt/guide/famous-gradient-logos) 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. - Âmbar a coral: `linear-gradient(135deg, #ffb347 0%, #ff6f61 100%)` - Verde-azulado a azul: `linear-gradient(135deg, #14b8a6 0%, #2563eb 100%)` - Violeta a magenta: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)` - Lima a esmeralda: `linear-gradient(135deg, #a3e635 0%, #059669 100%)` Misturas boas para logótipos: tons vizinhos com força semelhante, para a cor se manter limpa mesmo com o logótipo pequeno. Os pares complementares, como laranja a azul, tendem a ficar cinzentos a meio; vê [gradientes embaciados](https://gradiently.design/pt-pt/guide/muddy-gradients). ## 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. | Onde | O que acontece a um gradiente | Usa em vez disso | | --- | --- | --- | | Ícone do separador do navegador | Pequeno demais para ver a mistura; parece uma mancha | Símbolo liso numa só cor | | Impressão a uma cor, carimbos, talões | Não se consegue imprimir de todo | Preto sólido ou uma só tinta | | Bordado e etiquetas tecidas | O fio não faz misturas suaves | Versão lisa em uma ou duas cores de fio | | Gravação a laser, relevo | Sem cor nenhuma | Só a forma | | Impressão pequena (cartões de visita, etiquetas) | As misturas podem formar faixas ou ficar manchadas | Cor lisa, ou um gradiente curto testado em impressão | | Sobre um fundo em gradiente | Duas misturas lutam uma com a outra | Versão mono branca ou escura | Se a maior parte da tua lista estiver do lado direito desta tabela, um logótipo liso é melhor como versão principal. A impressão não é impossível, apenas exigente. [Imprimir gradientes](https://gradiently.design/pt-pt/guide/print-gradients) explica como obter misturas suaves em papel. E para a última linha, vê [colocar um logótipo sobre um fundo em gradiente](https://gradiently.design/pt-pt/guide/logo-on-gradient-background). ## Como desenhar um logótipo com gradiente que sobreviva 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. **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. **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. **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. **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. **Escreve as regras** Regista as paragens exatas, o ângulo e a reserva no teu [guia de estilo da marca](https://gradiently.design/pt-pt/guide/brand-style-guide) para ninguém refazer o gradiente à vista. - Paragem inicial: violeta: #7c3aed - Paragem final: magenta: #db2777 - Reserva lisa: ponto médio: #ab30b2 - Mono claro: #ffffff - Mono escuro: #1a1026 Um conjunto de cores completo para um logótipo com gradiente: as duas paragens, uma reserva lisa tirada do meio da mistura e versões a uma cor, clara e escura. ## 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](https://gradiently.design/pt-pt/guide/gradient-branding) aprofunda esta abordagem. Um design quadrado com um logótipo em texto branco a dizer Northlight sobre um fundo de gradiente rico Um logótipo em texto branco liso com o gradiente por trás: nítido em qualquer tamanho, e a cor continua a fazer o trabalho da marca. Um banner largo com o logótipo Northlight a branco sobre o mesmo gradiente, composto para um cabeçalho O mesmo par num cabeçalho largo. O logótipo nunca muda; o gradiente é desenhado para a forma. ## 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](https://gradiently.design/pt-pt/guide/svg-gradients) explica as opções por completo. ```html ``` Dá ao gradiente um id único. Se dois SVG em linha na mesma página partilham um id e o primeiro está oculto, o segundo pode perder o preenchimento em alguns navegadores. > **O teste de semicerrar os olhos** Olha para o teu logótipo com gradiente em tamanho de avatar e semicerra os olhos. Se vês uma só cor lisa, essa cor é a tua reserva natural. Se vês lama, a mistura é demasiado longa. ## FAQ ### Os logótipos com gradiente são uma boa ideia? Podem ser, para marcas que vivem sobretudo em ecrãs e têm uma forma de logótipo forte e simples. Precisam de uma versão lisa a uma cor para tamanhos pequenos e impressão. ### Como faço uma versão lisa de um logótipo com gradiente? Escolhe uma cor sólida da mistura, normalmente perto do ponto intermédio, que as pessoas leiam como a mesma marca, e faz também versões mono branca e mono preta. ### É possível imprimir um logótipo com gradiente? Sim, em impressão a cores num tamanho razoável, mas não em impressão a uma cor, bordado ou gravação. Testa tamanhos impressos pequenos para ver se há faixas antes de te comprometeres. ### Que cores dão um bom logótipo com gradiente? Dois ou três tons vizinhos de luminosidade semelhante, como âmbar a coral ou verde-azulado a azul. As cores opostas tendem a ficar cinzentas a meio. ### O meu logótipo deve ter gradiente se a minha marca usa gradientes? Não necessariamente. Muitas marcas mantêm um logótipo liso e põem o gradiente nos fundos, o que dá o mesmo reconhecimento com menos problemas em tamanhos pequenos.