Efeito duotone: qualquer foto da sua marca em duas cores

O efeito duotone recolore uma foto com apenas duas cores: as sombras viram uma cor, as luzes viram outra, e todo tom intermediário é uma mistura das duas. Um retrato em índigo profundo e dourado quente, uma cidade em verde-floresta e menta. Como toda imagem termina nas mesmas duas cores, o duotone é o jeito mais rápido de fazer fotos de câmeras, estações e fontes diferentes parecerem de uma só marca.

Como funciona o efeito duotone

Um duotone é um mapa de gradiente com duas paradas. Primeiro a foto é reduzida a tons de cinza, então cada pixel é só um brilho do preto ao branco. Depois cada brilho é trocado pela cor do mesmo ponto de um gradiente de duas cores: o preto vira a cor das sombras, o branco vira a cor das luzes e o cinza-médio vira a cor a meio caminho entre elas. A foto mantém as formas e a luz, mas perde toda a cor original.

Ler duotones como gradientes facilita julgá-los antes de mexer numa foto. Se o meio da faixa parece sujo, os tons médios da foto também vão parecer. A técnica mais ampla, com três ou mais cores, está nos mapas de gradiente.

Como escolher um par de cores para o duotone

1. 1

   Deixe a cor das sombras escura

   A cor das sombras carrega a estrutura da foto. Ela deve ser próxima do preto em luminosidade, como um azul-marinho profundo, uma ameixa ou uma floresta, ou rostos e detalhes ficam chapados.

2. 2

   Deixe a cor das luzes clara

   A cor das luzes carrega a luz. Um dourado pálido, um rosa-claro, uma menta ou um creme mantêm a imagem luminosa. Uma grande diferença de luminosidade é o que mantém a foto legível.

3. 3

   Confira o meio

   A maior parte de uma foto é feita de tons médios, então a cor a meio caminho do par é a que mais importa. Se ela virar cinza ou oliva, escolha uma cor de luz com matiz mais próximo do das sombras. Veja os gradientes sujos.

4. 4

   Pegue uma cor da sua marca

   Use a cor da sua marca como sombra ou como luz e escolha a outra para combinar. É isso que faz o duotone parecer da marca e não só estilizado.

5. 5

   Teste num rosto e numa paisagem

   Pele e céu são onde um par ruim aparece primeiro. Se os dois continuam bonitos, o par funciona em quase tudo.

Quando o duotone ajuda

• Fotos sem relação: imagens de banco, fotos de celular e imagens antigas de arquivo parecem um só conjunto
• Texto sobre fotos: com a foto reduzida a duas cores calmas, as palavras se acomodam nela com muito mais facilidade; veja o texto sobre imagem
• Consistência de marca: toda imagem repete as suas cores, o que constrói reconhecimento; veja a consistência de marca
• Pôsteres e capas: um duotone forte se lê de longe e imprime bem
• Fotos fracas: iluminação ruim e cores sem graça importam muito menos quando a cor é substituída

Ajuda menos onde a cor verdadeira importa: comida, moda, produtos e imóveis, em que as pessoas precisam ver o que estão recebendo. Nesses casos, um tom mais leve ou uma lavagem de cor sobre uma parte da imagem faz o trabalho sem esconder as cores reais.

Como fazer um duotone em CSS

O método mais preciso é um filtro SVG. O feColorMatrix transforma a imagem em tons de cinza com os pesos padrão de luminância e o feComponentTransfer leva cada canal da cor das sombras à cor das luzes. Os valores da tabela são o vermelho, o verde e o azul de cada cor divididos por 255.

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="duotone-midnight-gold" color-interpolation-filters="sRGB">
    <!-- 1. Greyscale by luminance -->
    <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"/>
    <!-- 2. Map black to #1b134f and white to #fad084 -->
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.106 0.980"/>
      <feFuncG type="table" tableValues="0.075 0.816"/>
      <feFuncB type="table" tableValues="0.310 0.518"/>
    </feComponentTransfer>
  </filter>
</svg>

<img src="portrait.jpg" alt="Portrait" style="filter: url(#duotone-midnight-gold)">

Acrescente um terceiro valor a cada lista tableValues e você tem um tritone, com uma cor de tom médio à escolha. É o jeito mais fácil de salvar um par cujo meio fica sujo. Para filtros e efeitos CSS em geral, o guia de efeitos de filtro do MDN é uma boa referência.

Duotone em ferramentas de design

Os editores de imagem costumam fazer duotone com um mapa de gradiente: acrescente um ajuste de mapa de gradiente, defina a parada da esquerda como a cor das sombras e a da direita como a cor das luzes e ajuste o ponto médio até pele e céu parecerem certos. Algumas ferramentas também oferecem um modo duotone dedicado para impressão, que prepara duas tintas reais em vez de uma imagem RGB.

No Gradiently, qualquer foto do Studio pode ser tingida com as cores do Mark com que você está criando: como mono, como duotone ou como uma lavagem mais suave. Mude o Mark e a foto o acompanha, então um conjunto inteiro de designs fica numa só paleta.