Duotone-effekt: gi alle bilder merkevarens to farger

En duotone-effekt fargelegger et foto med bare to farger: skyggene får én farge og høylysene en annen, mens alle toner imellom blandes fra de to. Et portrett i dyp indigo og varmt gull, en by i skoggrønt og mint. Fordi alle bildene ender opp i de samme to fargene, er duotone den raskeste måten å få bilder fra ulike kameraer, årstider og kilder til å høre til én merkevare.

Slik fungerer duotone-effekten

Duotone er et gradientkart med to stopp. Først reduseres bildet til gråtoner, slik at hver piksel bare er en lysstyrke fra svart til hvitt. Så erstattes hver lysstyrke med fargen på samme punkt langs en tofarget gradient: svart blir skyggefargen, hvitt blir høylysfargen, og mellomgrått blir fargen halvveis mellom. Bildet beholder formene og lyset, men alle de opprinnelige fargene er borte.

Å lese duotone som gradienter gjør det enkelt å vurdere fargene før du rører et bilde. Hvis midten av stripen ser grumsete ut, vil bildets mellomtoner også gjøre det. Den bredere teknikken med tre eller flere farger forklares i gradientkart.

Slik velger du et duotone-fargepar

1. 1

   Gjør skyggefargen mørk

   Skyggefargen bærer bildets struktur. Den bør være nær svart i lyshet, som dyp marineblå, plomme eller skoggrønn, ellers blir ansikter og detaljer flate.

2. 2

   Gjør høylysfargen lys

   Høylysfargen bærer lyset. Blek gull, rosa, mint eller krem holder bildet lysende. En stor forskjell i lyshet holder bildet leselig.

3. 3

   Sjekk midten

   Det meste av et bilde er mellomtoner, så fargen halvveis mellom paret er viktigst. Blir den grå eller olivengrønn, velg en høylysfarge med fargetone nærmere skyggen. Se grumsete gradienter.

4. 4

   Hent én farge fra merkevaren

   Bruk merkevarefargen som enten skygge eller høylys, og velg den andre slik at den passer. Det er det som får duotone til å følge merkevaren fremfor bare å virke stilisert.

5. 5

   Test på et ansikt og et landskap

   Hud og himmel avslører et dårlig par først. Hvis begge fortsatt ser bra ut, fungerer paret på nesten alt.

Når duotone hjelper

• Bilder som ikke passer sammen: arkivbilder, mobilbilder og gamle fotografier ser ut som én serie
• Tekst over bilder: når bildet reduseres til to rolige farger, er det mye lettere å plassere ord oppå; se tekst over bilde
• Merkevarehelhet: hvert bilde gjentar fargene dine og bygger gjenkjenning; se merkevarehelhet
• Plakater og omslag: en sterk duotone kan leses på avstand og gir et rent trykk
• Svake bilder: dårlig lys og kjedelige farger betyr langt mindre når fargene erstattes

Det hjelper mindre der ekte farger er viktige: mat, mote, produkter og eiendom, der folk trenger å se hva de får. Da gjør en lettere toning eller et fargeslør over en del av bildet jobben uten å skjule de virkelige fargene.

Slik lager du duotone i CSS

Den mest nøyaktige metoden er et SVG-filter. feColorMatrix gjør bildet om til gråtoner med standardvekter for luminans, og feComponentTransfer tilordner hver kanal verdier fra skyggefargen til høylysfargen. Tabellverdiene er hver farges røde, grønne og blå verdi delt på 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)">

Legg til en tredje verdi i hver tableValues-liste, så får du tritone med en valgt mellomtonefarge. Det er den enkleste måten å redde et par som blir grumsete i midten. For filtre og CSS-effekter generelt er MDNs guide til filtereffekter en god referanse.

Duotone i designverktøy

Bilderedigeringsverktøy lager vanligvis duotone med et gradientkart: legg til en gradientkartjustering, sett venstre stopp til skyggefargen og høyre stopp til høylysfargen, og juster midtpunktet til hud og himmel ser riktige ut. Noen verktøy har også en egen duotone-modus for trykk som klargjør to faktiske trykkfarger i stedet for et RGB-bilde.

I Gradiently kan alle foto i Studio tones i fargene til Marken du designer med: som mono, duotone eller et mykere fargeslør. Endrer du Marken, følger bildet med, slik at en hel serie design holder seg i én palett.