Duotone-effekt: giv ethvert foto dit brands to farver

En duotone-effekt omfarver et foto med kun to farver: skyggerne bliver til én farve og højlysene til en anden, mens alle toner derimellem blandes af de to. Et portræt i dyb indigo og varmt guld, en by i skovgrøn og mint. Fordi hvert billede ender i de samme to farver, er duotone den hurtigste måde at få fotos fra forskellige kameraer, årstider og kilder til at høre til ét brand.

Sådan virker duotone-effekten

Duotone er en gradientmapping med to farvestop. Først omdannes fotoet til gråtoner, så hver pixel kun er en lysstyrke fra sort til hvid. Derefter erstattes hver lysstyrke med farven på samme punkt langs en gradient med to farver: sort bliver skyggefarven, hvid bliver højlysfarven, og mellemgrå bliver farven midt imellem. Fotoet bevarer former og lys, men alle oprindelige farver forsvinder.

Når du ser duotone som gradienter, er de lette at vurdere, før du rører et foto. Ser midten af farvestriben mudret ud, vil fotoets mellemtoner også gøre det. Den bredere teknik med tre eller flere farver gennemgås i gradientmapping.

Sådan vælger du to farver til duotone

1. 1

   Gør skyggefarven mørk

   Skyggefarven bærer fotoets struktur. Den bør ligge tæt på sort i lyshed, som en dyb marineblå, blomme eller skovgrøn. Ellers bliver ansigter og detaljer flade.

2. 2

   Gør højlysfarven lys

   Højlysfarven bærer lyset. En lys guld, sart rosa, mint eller creme holder billedet lysende. En stor forskel i lyshed gør, at fotoet stadig er tydeligt.

3. 3

   Tjek midten

   Det meste af et foto er mellemtoner, så farven midt imellem de to betyder mest. Hvis den bliver grå eller olivengrøn, så vælg en højlysfarve tættere på skyggens kulør. Se mudrede gradienter.

4. 4

   Tag én farve fra dit brand

   Brug din brandfarve som enten skygge eller højlys, og vælg den anden, så den passer. Det får duotone til at føles som dit brand frem for bare stiliseret.

5. 5

   Test på et ansigt og et landskab

   Hud og himmel afslører et dårligt farvepar først. Hvis begge stadig ser godt ud, vil parret fungere på næsten alt.

Hvornår duotone hjælper

• Forskellige fotos: stockbilleder, mobilfotos og gamle arkivbilleder ligner én serie
• Tekst over fotos: når fotoet reduceres til to rolige farver, er det langt lettere at lægge ord på. Se tekst over billeder
• Ensartet branding: hvert billede gentager dine farver og opbygger genkendelighed. Se ensartet branding
• Plakater og forsider: en stærk duotone kan aflæses på afstand og står skarpt på tryk
• Svage fotos: dårlig belysning og matte farver betyder langt mindre, når farverne først er erstattet

Det hjælper mindre, når de rigtige farver er vigtige: mad, mode, produkter og boliger, hvor folk skal kunne se, hvad de får. Her klarer en lettere toning eller et farveslør over en del af billedet opgaven uden at skjule de oprindelige farver.

Sådan laver du duotone i CSS

Den mest præcise metode er et SVG-filter. feColorMatrix omdanner billedet til gråtoner med standardvægte for luminans, og feComponentTransfer mapper hver kanal fra skyggefarven til højlysfarven. Tabelværdierne er hver farves røde, grønne og blå værdi divideret 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)">

Tilføj en tredje værdi til hver tableValues-liste, så har du en tritone med en valgt mellemtonefarve. Det er den letteste måde at redde et farvepar med en mudret midte. MDN’s guide til filtereffekter er en god reference til filtre og CSS-effekter generelt.

Duotone i designværktøjer

Billedredigeringsprogrammer laver normalt duotone med gradientmapping: tilføj en gradientmapping-justering, sæt venstre stop til skyggefarven og højre stop til højlysfarven, og justér midtpunktet, til hud og himmel ser rigtige ud. Nogle værktøjer har også en særlig duotone-tilstand til tryk, som forbereder to rigtige trykfarver frem for et RGB-billede.

I Gradiently kan ethvert foto i studiet tones i farverne fra den Mark, du designer med: som mono, duotone eller et blødere farveslør. Skift Marken, og fotoet følger med, så en hel designserie holder sig til én palet.