Mapas de gradiente: recolore qualquer imagem em segundos

Um mapa de gradiente recolore uma imagem trocando cada um dos seus tons por uma cor de um gradiente. A imagem é lida primeiro apenas como brilho, do preto ao branco, e depois cada brilho é trocado pela cor do mesmo ponto ao longo do gradiente: a ponta esquerda pinta as sombras, a ponta direita pinta os realces. As formas, a luz e o detalhe da imagem ficam exatamente iguais. Só as cores mudam, e escolhes todas.

Como funciona um mapa de gradiente

Pensa no gradiente como uma tabela de consulta. Um píxel com 0% de brilho recebe a cor da extrema esquerda; um píxel com 50% de brilho recebe a cor do meio; um píxel com 100% recebe a da extrema direita. Como a consulta depende só do brilho, duas cores originais muito diferentes com o mesmo brilho, como uma camisola vermelha e uma sebe verde, acabam na mesma cor. É isso que torna os mapas de gradiente tão bons a unificar imagens.

Rampas de mapa de gradiente que funcionam

A regra mais importante de todas: a rampa deve ficar cada vez mais clara da esquerda para a direita. Assim o que é escuro continua escuro e o que é claro continua claro, e a imagem mantém a sensação de profundidade. Podes mudar de tom quanto quiseres pelo caminho. Os visuais fotográficos clássicos, como a sépia e a cianotipia, são apenas rampas assim.

Quebrar a regra da luminosidade de propósito dá um visual solarizado e psicadélico, que pode ser divertido em cartazes. Para tudo o que ainda deva parecer uma fotografia, mantém a rampa constante. Se um tom médio ficar cinzento, a solução é a mesma de qualquer gradiente: vê gradientes embaciados.

Para que servem os mapas de gradiente

• Conjuntos de fotografias coerentes: fotografias de banco de imagens, do telemóvel e imagens antigas de arquivo saem todas numa só paleta; vê consistência de marca
• Texturas de marca: transforma qualquer textura em tons de cinzento, como nuvens, betão, tecido ou ruído, num fundo nas cores da tua marca; vê texturas de fundo
• Ilustrações e ícones: recolore um conjunto inteiro de uma vez, mapeando os cinzentos
• Correção de cor: define uma camada de mapa de gradiente em Luz suave ou Cor com pouca opacidade para um visual de película subtil sobre as cores originais
• Dados e ciência: os mapas de calor e as imagens em falsa cor são mapas de gradiente de medições
• Duotono e tritono: duas ou três paragens para tratamentos de cartaz arrojados; vê o efeito duotono

Como aplicar um mapa de gradiente num editor de imagem

1. 1

   Acrescenta um ajuste de mapa de gradiente

   O Photoshop, o Affinity Photo e o GIMP têm todos um. Usa uma camada de ajuste sempre que puderes, para o original ficar intacto.

2. 2

   Define primeiro as pontas

   Põe uma versão quase preta da tua cor de marca mais escura à esquerda e um tom claro à direita. Verifica se a imagem ainda se lê.

3. 3

   Acrescenta paragens para os tons médios

   Coloca a tua cor de marca principal por volta dos 50% e ajusta a posição até a pele, os céus ou os objetos principais ficarem bem.

4. 4

   Mistura de volta, se for preciso

   Para corrigir a cor em vez de recolorir por completo, muda o modo de mistura da camada para Luz suave ou Cor e baixa a opacidade.

5. 5

   Guarda a rampa

   Guarda o gradiente como predefinição e usa-o em todas as imagens do conjunto, para condizerem todas.

Um mapa de gradiente em CSS

Os navegadores conseguem aplicar um mapa de gradiente com um filtro SVG. O feColorMatrix converte a imagem em tons de cinzento e o feComponentTransfer mapeia-a por uma tabela de valores para cada canal. Cada lista abaixo é a rampa Violeta da marca: os valores de vermelho, verde e azul das cinco cores das paragens divididos por 255, em posições igualmente espaçadas.

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="brand-violet-map" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0      0      0      1 0"/>
    <feComponentTransfer>
      <!-- #120b1f  #3b1d6e  #7c3aed  #f0abfc  #fdf4ff -->
      <feFuncR type="table" tableValues="0.071 0.231 0.486 0.941 0.992"/>
      <feFuncG type="table" tableValues="0.043 0.114 0.227 0.671 0.957"/>
      <feFuncB type="table" tableValues="0.122 0.431 0.929 0.988 1"/>
    </feComponentTransfer>
  </filter>
</svg>

<img src="texture.jpg" alt="" style="filter: url(#brand-violet-map)">

Os mapas de gradiente são o caminho de qualquer imagem até uma paleta que é tua. Se preferires partir da imagem, igualar uma imagem encontra a sua paleta e os Marks mais próximos. Na Gradiently podes também tingir qualquer fotografia no Studio com as cores do Mark que estás a usar, em mono, duotono ou uma aguada mais suave, o que é um mapa de gradiente feito por ti.