Gradientes

Como funcionam os gradientes, todos os tipos e como fazer os que parecem caros.

200 guias · 11 temas

Gradientes

O que é um gradiente? Um guia simples sobre misturas de cor

6 min de leitura

Um gradiente é a ideia mais simples da cor e uma das mais fáceis de errar. Eis o que é, como se constrói e porque voltou aos ecrãs em todo o lado.

Gradientes

Linear, radial, cónico e de malha: todos os tipos de gradiente

6 min de leitura

Todos os gradientes levam a cor ao longo de um caminho. Muda o caminho e mudas a sensação. Eis cada tipo, o seu aspeto, o código e o trabalho que faz melhor.

Gradientes

Gradientes de malha: o que são e como fazer um

6 min de leitura

Os gradientes de malha são os campos de cor suaves e à deriva por trás de metade das páginas de lançamento que viste este ano. Eis como funcionam, como construir um à mão e os dois erros que estragam a maioria.

Gradientes

Como fazer um fundo em gradiente que não pareça genérico

5 min de leitura

A maioria dos fundos em gradiente parece igual porque parte das mesmas poucas predefinições. Eis um método em cinco passos para fazer um que pareça pensado, com códigos que podes copiar.

Gradientes

Gradientes com grão: porque um pouco de ruído faz a cor parecer cara

6 min de leitura

Um gradiente limpo parece uma predefinição do ecrã. O mesmo gradiente com uma camada fina de grão parece uma impressão, um fotograma de filme ou uma parede pintada. Eis porquê, quanto juntar e como fazer.

Gradientes

Gradientes de aurora: luz suave, bem feita

5 min de leitura

Os gradientes de aurora tomam de empréstimo o visual das luzes do norte: véus luminosos de cor a deslizar sobre a escuridão. São lindos e resvalam depressa para o território do protetor de ecrã. Eis como os manter do lado certo.

Gradientes

Porque é que o teu gradiente tem riscas e como corrigir o banding

6 min de leitura

Fizeste um gradiente suave e ele voltou às riscas. Isso é banding, e tem uma causa simples e meia dúzia de soluções fiáveis. Primeiro as contas, depois as curas.

Gradientes

Porque é que alguns gradientes ficam cinzentos ao meio e como o evitar

5 min de leitura

Azul e amarelo deviam dar um gradiente lindo. Mistura-os da forma por omissão e ficas com uma mancha cinzenta ao meio. Eis exatamente porquê, e quatro formas de manter todas as misturas limpas.

Gradientes

60 combinações de cores para gradientes que funcionam, com códigos

5 min de leitura

Sessenta gradientes, ordenados pela sensação que queres e não pelo tom. Cada um é um código CSS vivo que podes copiar, e cada grupo explica a regra que faz as misturas resultarem.

Gradientes

Gradientes de duas cores: 30 pares que funcionam sempre

5 min de leitura

Duas cores, uma direção, nada que possa correr mal. Quase. Eis as duas regras que decidem se um par funciona, e trinta pares que passam nas duas, prontos a copiar.

Gradientes

Fundos com gradiente escuro: profundidade sem tristeza

5 min de leitura

Os gradientes escuros podem parecer uma cena noturna de luxo ou um ecrã turvo com o brilho baixado. A diferença está em poucas decisões, todas fáceis de copiar.

Gradientes

Gradientes pastel que ficam frescos, não açucarados

5 min de leitura

Os pastéis são os gradientes mais fáceis de gostar e os mais fáceis de exagerar. Algumas regras mantêm-nos a parecer luz de primavera sobre papel e não um bolo de aniversário.

Gradientes

Gradientes néon: brilho sem cansar a vista

5 min de leitura

O néon é a cor no máximo. Sobre um fundo escuro, brilha; espalhado por um ecrã inteiro, zumbe. Eis como manter o brilho e perder o zumbido.

Gradientes

Gradientes holográficos e iridescência, explicados

5 min de leitura

A folha holográfica, as bolas de sabão e a madrepérola mudam de cor quando te mexes. Um ecrã plano não consegue fazer isso, mas um gradiente bem construído pode convencer o olho de que sim.

Gradientes

O efeito duotone: dá a qualquer fotografia a tua marca em duas cores

5 min de leitura

O duotone transforma qualquer fotografia em duas cores à tua escolha: uma para as sombras, outra para a luz. É a forma mais rápida de fazer imagens díspares parecerem uma só marca.

Gradientes

Gradiente ou cor lisa? Quando ganha cada um

6 min de leitura

A cor lisa é clara, barata e exata. Os gradientes são vivos, distintivos e mais difíceis de controlar. A maioria das boas marcas usa os dois. Vê como decidir o que cada superfície precisa.

Gradientes

Textura em gradientes: grão, papel, vidro e seda explicados

5 min de leitura

Dois gradientes com cores idênticas podem parecer um fotograma de filme, um cartão de tipografia, um ecrã de telemóvel ou um vestido de noite. A diferença é a textura, e diz mais do que as cores.

Gradientes

Glassmorphism e gradientes: um guia prático

6 min de leitura

Vidro fosco sobre um gradiente luminoso é um dos efeitos mais atraentes no design de interfaces, e um dos mais fáceis de tornar ilegível. Eis como ficar com a beleza e manter as palavras.

Gradientes

Mapas de gradiente: recolore qualquer imagem em segundos

5 min de leitura

Um mapa de gradiente pega em qualquer imagem, fotografia, textura ou ilustração e repinta-a nas cores que escolhes, mantendo toda a sua luz e sombra. É a ferramenta de recoloração mais rápida que existe.

Gradientes

Ângulo e direção do gradiente: para que lado deve ir um gradiente

6 min de leitura

As mesmas duas cores podem parecer calmas, animadoras ou inquietas só pela direção em que correm. Eis como escolher uma direção de propósito e acertar o ângulo exato no código.

Gradientes

Nove erros com gradientes que fazem o design parecer barato

6 min de leitura

A maioria dos gradientes que parecem baratos falha de uma de nove maneiras previsíveis. Aqui ficam todos os erros, o que os causa e a mudança concreta que os resolve.

Gradientes

Gradientes radiais: o foco de luz que guia o olhar

5 min de leitura

Um gradiente radial é o mais perto que o design tem de apontar uma luz a alguma coisa. Eis como o apontar, dimensionar e evitar que pareça um alvo.

Gradientes

Gradientes cónicos: círculos cromáticos, gráficos e brilho

5 min de leitura

Os gradientes lineares viajam, os radiais espalham-se e os cónicos rodam. Essa única diferença torna-os a ferramenta certa para círculos, gráficos, metal e feixes de luz.

Gradientes

Imprimir gradientes sem bandas nem cores lamacentas

7 min de leitura

Um gradiente que brilha no ecrã pode voltar da gráfica baço, às riscas ou castanho. Quase todas essas falhas são previsíveis, e a maioria pode ser corrigida antes de o ficheiro sair da tua secretária.