Mapa de gradiente: recolorir 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 só pelo brilho, do preto ao branco, e depois cada brilho é trocado pela cor do mesmo ponto do gradiente: a ponta esquerda pinta as sombras, a ponta direita pinta as luzes. As formas, a luz e o detalhe da imagem continuam exatamente iguais. Só as cores mudam, e você escolhe todas.

Como funciona um mapa de gradiente

Pense no gradiente como uma tabela de consulta. Um pixel com 0% de brilho recebe a cor da ponta esquerda; um pixel com 50% de brilho recebe a cor do meio; um pixel com 100% recebe a da ponta direita. Como a consulta depende só do brilho, duas cores originais bem diferentes com o mesmo brilho, como um suéter vermelho e uma cerca-viva verde, acabam com a mesma cor. É isso que torna os mapas de gradiente tão bons para unificar imagens.

Rampas de mapa de gradiente que funcionam

A regra mais importante: a rampa deve ficar mais clara de modo constante 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. Você pode mudar o matiz o quanto quiser pelo caminho. Visuais fotográficos clássicos, como sépia e cianótipo, são só rampas assim.

Quebrar a regra da luminosidade de propósito dá um visual solarizado e psicodélico, que pode ser divertido em cartazes. Para tudo o que ainda deva parecer uma foto, mantenha a rampa constante. Se um tom médio ficar cinza, a solução é a mesma de qualquer gradiente: veja gradientes sujos.

Para que usar mapas de gradiente

• Conjuntos de fotos consistentes: fotos de banco de imagens, do celular e antigas de arquivo saem em uma só paleta; veja consistência de marca
• Texturas de marca: transforme qualquer textura em tons de cinza, como nuvens, concreto, tecido ou ruído, em um fundo com as cores da sua marca; veja textura de fundo
• Ilustrações e ícones: recolora um conjunto inteiro de uma vez mapeando seus cinzas
• Correção de cor: ajuste uma camada de mapa de gradiente para Luz suave ou Cor com baixa opacidade para um visual sutil de filme sobre as cores originais
• Dados e ciência: mapas de calor e imagens em cor falsa são mapas de gradiente de medições
• Duotone e tritone: duas ou três paradas para tratamentos marcantes de cartaz; veja o efeito duotone

Como aplicar um mapa de gradiente em um editor de imagens

1. 1

   Adicione um ajuste de mapa de gradiente

   O Photoshop, o Affinity Photo e o GIMP têm um. Use uma camada de ajuste sempre que puder, para a original ficar intacta.

2. 2

   Defina primeiro as pontas

   Ponha uma versão quase preta da sua cor de marca mais escura à esquerda e um tom claro à direita. Confira se a imagem ainda se lê.

3. 3

   Adicione paradas nos tons médios

   Coloque a cor principal da sua marca por volta de 50% e ajuste a posição até a pele, os céus ou os objetos principais ficarem certos.

4. 4

   Misture de volta, se precisar

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

5. 5

   Salve a rampa

   Salve o gradiente como preset e use-o em todas as imagens do conjunto, para todas combinarem.

Um mapa de gradiente em CSS

Os navegadores podem aplicar um mapa de gradiente com um filtro SVG. O feColorMatrix transforma a imagem em tons de cinza, e o feComponentTransfer a mapeia 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 paradas 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)">

Mapas de gradiente são o caminho de qualquer imagem até uma paleta que é sua. Se você prefere partir da imagem, combinar uma imagem encontra a paleta dela e os Marks mais próximos. No Gradiently você também pode tingir qualquer foto no Studio com as cores do Mark que estiver usando, em mono, duotone ou uma lavagem mais suave, que é um mapa de gradiente feito para você.