Duotoneeffekt: gör foton varumärkesenliga i två färger

Duotoneeffekten färgar om ett foto med bara två färger: skuggorna blir en färg och de ljusa partierna en annan, med varje ton däremellan blandad av de två. Ett porträtt i djup indigo och varmt guld, en stad i skogsgrönt och mynta. Eftersom varje bild hamnar i samma två färger är duotone det snabbaste sättet att få foton från olika kameror, årstider och källor att se ut som de hör till ett varumärke.

Så fungerar duotoneeffekten

En duotone är en gradientkarta med två stopp. Först reduceras fotot till gråskala, så att varje pixel bara är en ljusstyrka från svart till vitt. Sedan ersätts varje ljusstyrka av färgen på samma punkt längs en gradient i två färger: svart blir skuggfärgen, vitt blir ljusfärgen och mellangrått blir färgen halvvägs mellan. Fotot behåller sina former och sitt ljus, men all dess ursprungliga färg är borta.

Att läsa duotoner som gradienter gör dem lätta att bedöma innan du rör ett foto. Om mitten av remsan ser lerig ut gör fotots mellantoner det också. Den bredare tekniken, med tre eller fler färger, tas upp i gradientkartor.

Så väljer du ett duotonefärgpar

1. 1

   Gör skuggfärgen mörk

   Skuggfärgen bär fotots struktur. Den bör ligga nära svart i ljushet, som ett djupt marinblått, plommon eller skogsgrönt, annars plattas ansikten och detaljer ut.

2. 2

   Gör ljusfärgen ljus

   Ljusfärgen bär ljuset. Ett blekt guld, en rodnad, mynta eller grädde håller bilden lysande. Ett stort ljushetsgap är det som gör fotot läsbart.

3. 3

   Kontrollera mitten

   Det mesta av ett foto är mellantoner, så färgen halvvägs längs paret betyder mest. Om den blir grå eller olivgrön, välj en ljusfärg som ligger närmare skuggan i nyans. Se leriga gradienter.

4. 4

   Ta en färg från ditt varumärke

   Använd din varumärkesfärg som antingen skugga eller ljus och välj den andra så att den passar. Det är det som får duotone att kännas varumärkesenlig och inte bara stiliserad.

5. 5

   Testa på ett ansikte och ett landskap

   Hud och himmel är där ett dåligt par syns först. Om båda fortfarande ser bra ut fungerar paret på nästan vad som helst.

När duotone hjälper

• Foton som inte hör ihop: arkivbilder, mobilbilder och gamla arkivfoton ser ut som en serie
• Text över foton: när fotot reduceras till två lugna färger ligger orden mycket lättare på det. Se text över bild
• Enhetligt varumärke: varje bild upprepar dina färger, vilket bygger igenkänning. Se enhetligt varumärke
• Affischer och omslag: en stark duotone syns på håll och skrivs ut rent
• Svaga foton: dåligt ljus och matta färger spelar mycket mindre roll när färgen väl är utbytt

Den hjälper mindre där äkta färg spelar roll: mat, mode, produkter och fastigheter, där folk behöver se vad de får. Där gör en ljusare ton eller en färgtvätt över en del av bilden jobbet utan att dölja de riktiga färgerna.

Så gör du en duotone i CSS

Den mest exakta metoden är ett SVG-filter. feColorMatrix gör om bilden till gråskala med standardvikter för luminans, och feComponentTransfer mappar varje kanal från skuggfärgen till ljusfärgen. Tabellvärdena är varje färgs rött, grönt och blått delat med 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)">

Lägg till ett tredje värde i varje tableValues-lista så har du en tritone, med en vald mellantonsfärg. Det är det enklaste sättet att rädda ett par vars mitt blir lerigt. För filter och CSS-effekter i allmänhet är MDN:s guide till filtereffekter en bra referens.

Duotone i designverktyg

Bildredigerare gör oftast duotone med en gradientkarta: lägg till en justering av typen gradientkarta, sätt det vänstra stoppet till din skuggfärg och det högra till din ljusfärg och justera mittpunkten tills hud och himmel ser rätt ut. Vissa verktyg har också ett särskilt duotone-läge för tryck, som förbereder två riktiga tryckfärger i stället för en RGB-bild.

I Gradiently kan vilket foto som helst i Studion tonas i färgerna hos den Mark du designar med: som mono, som duotone eller som en mjukare färgtvätt. Byt Mark så följer fotot med, så att en hel serie designer håller sig inom en palett.