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

O efeito duotone recolore uma fotografia com apenas duas cores: as sombras passam a ser uma cor e as luzes outra, com todos os tons intermédios misturados a partir das duas. Um retrato em índigo profundo e dourado quente, uma cidade em verde-floresta e menta. Como todas as imagens acabam nas mesmas duas cores, o duotone é a forma mais rápida de fazer fotografias de câmaras, estações e origens diferentes parecerem pertencer à mesma marca.

Como funciona o efeito duotone

Um duotone é um mapa de gradiente com duas paragens. Primeiro a fotografia é reduzida a tons de cinzento, e cada píxel passa a ser só um brilho do preto ao branco. Depois cada brilho é substituído pela cor no mesmo ponto de um gradiente de duas cores: o preto passa a ser a cor das sombras, o branco a cor das luzes e o cinzento médio a cor a meio caminho. A fotografia mantém as formas e a luz, mas perde toda a cor original.

Ler os duotones como gradientes torna-os fáceis de avaliar antes de mexeres numa fotografia. Se o meio da faixa parece lamacento, os tons médios da fotografia 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 duotone

1. 1

   Faz a cor das sombras escura

   A cor das sombras carrega a estrutura da fotografia. Deve estar perto do preto em luminosidade, como um azul-marinho profundo, ameixa ou floresta, senão os rostos e os pormenores achatam.

2. 2

   Faz a cor das luzes clara

   A cor das luzes carrega a luz. Um dourado pálido, rosado, menta ou creme mantém a imagem luminosa. É uma grande diferença de luminosidade que mantém a fotografia legível.

3. 3

   Verifica o meio

   A maior parte de uma fotografia são tons médios, por isso a cor a meio do par é a que mais importa. Se ficar cinzenta ou azeitona, escolhe uma cor de luzes com um matiz mais próximo do das sombras. Vê os gradientes lamacentos.

4. 4

   Tira uma cor da tua marca

   Usa a cor da tua marca como cor das sombras ou das luzes e escolhe a outra para condizer. É isso que faz o duotone parecer da marca e não apenas estilizado.

5. 5

   Testa num rosto e numa paisagem

   A pele e os céus são onde um mau par se nota primeiro. Se ambos continuarem bem, o par funciona em quase tudo.

Quando o duotone ajuda

• Fotografias díspares: imagens de banco, fotografias de telemóvel e imagens de arquivo antigas parecem um só conjunto
• Texto sobre fotografias: com a fotografia reduzida a duas cores calmas, as palavras assentam nela com muito mais facilidade; vê texto sobre imagem
• Coerência da marca: cada imagem repete as tuas cores, o que constrói reconhecimento; vê a coerência da marca
• Cartazes e capas: um duotone forte lê-se ao longe e imprime bem
• Fotografias fracas: má iluminação e cor baça importam muito menos depois de a cor ser substituída

Ajuda menos onde a cor verdadeira conta: comida, moda, produtos e imobiliário, onde as pessoas precisam de ver o que estão a receber. Aí, um tom mais leve ou uma película 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 exato é um filtro SVG. O feColorMatrix transforma a imagem em tons de cinzento com pesos de luminância padrão, e o feComponentTransfer mapeia cada canal da cor das sombras para a 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)">

Acrescenta um terceiro valor a cada lista tableValues e tens um tritone, com uma cor de tom médio à escolha. É a forma mais fácil de salvar um par cujo meio fica lamacento. Para filtros e efeitos CSS em geral, o guia da MDN sobre efeitos de filtro é uma boa referência.

Duotone em ferramentas de design

Os editores de imagem costumam fazer duotone com um mapa de gradiente: adiciona um ajuste de mapa de gradiente, define a paragem da esquerda com a cor das sombras e a da direita com a cor das luzes, e ajusta o ponto médio até a pele e os céus 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.

Na Gradiently, qualquer fotografia no Studio pode ser tingida com as cores do Mark com que estás a desenhar: em mono, em duotone ou numa película mais suave. Muda o Mark e a fotografia acompanha, por isso um conjunto inteiro de designs fica numa só paleta.