L’effetto duotone: foto coerenti col brand in due colori

L’effetto duotone ricolora una foto usando solo due colori: le ombre diventano un colore e le luci un altro, con ogni tono intermedio sfumato tra i due. Un ritratto in indaco profondo e oro caldo, una città in verde bosco e menta. Poiché ogni immagine finisce negli stessi due colori, il duotone è il modo più rapido per far sembrare parte di un unico brand foto di fotocamere, stagioni e fonti diverse.

Come funziona l’effetto duotone

Un duotone è una mappa di gradiente con due punti. Prima la foto viene ridotta in scala di grigi, così ogni pixel è solo una luminosità dal nero al bianco. Poi ogni luminosità viene sostituita dal colore nello stesso punto di un gradiente a due colori: il nero diventa il colore delle ombre, il bianco il colore delle luci e il grigio medio il colore a metà strada. La foto mantiene forme e luce, ma perde tutto il colore originale.

Leggere i duotone come gradienti permette di giudicarli prima di toccare una foto. Se il centro della striscia sembra sporco, lo sembreranno anche i mezzitoni della foto. La tecnica più ampia, con tre o più colori, è trattata nelle mappe di gradiente.

Come scegliere la coppia di colori per un duotone

1. 1

   Scegli un colore scuro per le ombre

   Il colore delle ombre porta la struttura della foto. Deve essere vicino al nero per luminosità, come un blu navy profondo, una prugna o un verde bosco, altrimenti volti e dettagli si appiattiscono.

2. 2

   Scegli un colore chiaro per le luci

   Il colore delle luci porta la luce. Un oro pallido, un rosa tenue, una menta o una crema mantengono l’immagine luminosa. Una grande distanza di luminosità è ciò che tiene leggibile la foto.

3. 3

   Controlla il centro

   Gran parte di una foto è fatta di mezzitoni, quindi il colore a metà della coppia conta di più. Se diventa grigio o oliva, scegli una luce più vicina per tinta alle ombre. Vedi i gradienti sporchi.

4. 4

   Prendi un colore dal tuo brand

   Usa il colore del brand come ombre o come luci e scegli l’altro in modo che gli stia bene. È questo che fa sembrare il duotone in linea col brand e non solo stilizzato.

5. 5

   Provalo su un volto e su un paesaggio

   Pelle e cieli sono dove una coppia sbagliata si vede per prima. Se entrambi restano belli, la coppia funzionerà su quasi tutto.

Quando aiuta il duotone

• Foto che non c’entrano tra loro: immagini stock, scatti da telefono e vecchie immagini d’archivio sembrano un unico set
• Testo sopra le foto: con la foto ridotta a due colori calmi, le parole ci stanno molto più facilmente; vedi testo sopra un’immagine
• Coerenza del brand: ogni immagine ripete i tuoi colori, e questo costruisce riconoscibilità; vedi la coerenza del brand
• Poster e copertine: un duotone forte si legge da lontano e stampa bene
• Foto deboli: luce scadente e colori spenti contano molto meno una volta sostituito il colore

Aiuta meno dove conta il colore vero: cibo, moda, prodotti e immobili, dove le persone devono vedere cosa stanno per ottenere. Lì una tinta più leggera o una velatura di colore su una parte dell’immagine fa il lavoro senza nascondere i colori reali.

Come fare un duotone in CSS

Il metodo più preciso è un filtro SVG. feColorMatrix trasforma l’immagine in scala di grigi con i pesi standard di luminanza, e feComponentTransfer associa ogni canale dal colore delle ombre al colore delle luci. I valori della tabella sono il rosso, il verde e il blu di ogni colore divisi per 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)">

Aggiungi un terzo valore a ogni elenco tableValues e hai un tritone, con un colore intermedio a tua scelta. È il modo più semplice per salvare una coppia il cui centro diventa sporco. Per filtri ed effetti CSS in generale, la guida di MDN agli effetti dei filtri è un buon riferimento.

Il duotone negli strumenti di design

Gli editor di immagini di solito fanno il duotone con una mappa di gradiente: aggiungi una regolazione mappa di gradiente, imposta il punto sinistro sul colore delle ombre e quello destro sul colore delle luci, e regola il punto medio finché pelle e cieli non tornano bene. Alcuni strumenti offrono anche una modalità duotone dedicata alla stampa, che prepara due inchiostri veri invece di un’immagine RGB.

In Gradiently qualsiasi foto nello Studio si può tingere con i colori del Mark con cui stai progettando: in mono, in duotone o con una velatura più morbida. Cambia il Mark e la foto lo segue, così un intero set di design resta in un’unica palette.