Duotone-effect: elke foto in twee kleuren van je merk

Het duotone-effect geeft een foto maar twee kleuren: de schaduwen worden de ene kleur en de hooglichten de andere, met alle tinten ertussen gemengd uit die twee. Een portret in diep indigo en warm goud, een stad in bosgroen en munt. Omdat elke afbeelding in dezelfde twee kleuren eindigt, is duotone de snelste manier om foto’s van verschillende camera’s, seizoenen en bronnen als één merk te laten ogen.

Hoe het duotone-effect werkt

Een duotone is een gradiëntkaart met twee stops. Eerst wordt de foto teruggebracht tot grijstinten, zodat elke pixel alleen nog een helderheid van zwart tot wit is. Daarna wordt elke helderheid vervangen door de kleur op hetzelfde punt van een kleurverloop van twee kleuren: zwart wordt de schaduwkleur, wit de hooglichtkleur en middengrijs de kleur halverwege. De foto behoudt zijn vormen en licht, maar alle oorspronkelijke kleur is weg.

Duotones als kleurverlopen lezen maakt ze makkelijk te beoordelen voordat je een foto aanraakt. Ziet het midden van de strook er modderig uit, dan de middentonen van de foto ook. De bredere techniek, met drie of meer kleuren, staat in gradiëntkaarten.

Zo kies je een duotone-kleurenpaar

1. 1

   Maak de schaduwkleur donker

   De schaduwkleur draagt de structuur van de foto. Hij moet in lichtheid dicht bij zwart liggen, zoals een diep marineblauw, pruim of bosgroen, anders worden gezichten en details plat.

2. 2

   Maak de hooglichtkleur licht

   De hooglichtkleur draagt het licht. Een bleek goud, blos, munt of crème houdt de afbeelding stralend. Een groot verschil in lichtheid houdt de foto leesbaar.

3. 3

   Controleer het midden

   Het grootste deel van een foto bestaat uit middentonen, dus de kleur halverwege het paar telt het zwaarst. Wordt die grijs of olijfgroen, kies dan een hooglicht dat qua tint dichter bij de schaduw ligt. Zie modderige kleurverlopen.

4. 4

   Neem een kleur uit je merk

   Gebruik je merkkleur als schaduw of als hooglicht en kies de andere die erbij past. Daardoor voelt duotone passend bij je merk in plaats van alleen gestileerd.

5. 5

   Test op een gezicht en een landschap

   Huid en luchten laten een slecht paar het eerst zien. Zien beide er nog goed uit, dan werkt het paar op bijna alles.

Wanneer duotone helpt

• Foto’s die niet bij elkaar passen: stockbeelden, telefoonfoto’s en oude archiefbeelden lijken één set
• Tekst over foto’s: als de foto is teruggebracht tot twee rustige kleuren, staan woorden er veel makkelijker op; zie tekst over een afbeelding
• Merkconsistentie: elke afbeelding herhaalt je kleuren, wat herkenning opbouwt; zie merkconsistentie
• Posters en covers: een sterke duotone leest van een afstand en drukt schoon af
• Zwakke foto’s: slecht licht en dof kleurgebruik doen veel minder ertoe zodra de kleur is vervangen

Het helpt minder waar echte kleur telt: eten, mode, producten en vastgoed, waar mensen moeten zien wat ze krijgen. Daar doet een lichtere tint of een kleurwaas over een deel van de afbeelding het werk zonder de echte kleuren te verbergen.

Zo maak je een duotone in CSS

De nauwkeurigste methode is een SVG-filter. feColorMatrix maakt de afbeelding grijs met standaard luminantiegewichten, en feComponentTransfer koppelt elk kanaal van de schaduwkleur aan de hooglichtkleur. De tabelwaarden zijn per kleur het rood, groen en blauw gedeeld door 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)">

Voeg een derde waarde toe aan elke tableValues-lijst en je hebt een tritone, met een zelfgekozen middentoonkleur. Dat is de makkelijkste manier om een paar te redden waarvan het midden modderig wordt. Voor filters en CSS-effecten in het algemeen is de MDN-gids over filtereffecten een goede referentie.

Duotone in ontwerptools

Beeldbewerkers doen duotone meestal met een gradiëntkaart: voeg een gradiëntkaartaanpassing toe, zet de linkerstop op je schaduwkleur en de rechterstop op je hooglichtkleur en pas het middelpunt aan tot huid en luchten goed ogen. Sommige tools hebben ook een aparte duotone-modus voor drukwerk, die twee echte inktkleuren voorbereidt in plaats van een RGB-afbeelding.

In Gradiently kan elke foto in de Studio worden getint in de kleuren van de Mark waarmee je ontwerpt: als mono, als duotone of als zachtere waas. Wissel je van Mark, dan volgt de foto, zodat een hele reeks ontwerpen in één palet blijft.