Gradient map: färglägg om vad som helst på några sekunder

En gradient map färglägger om en bild genom att ersätta var och en av dess toner med en färg ur en gradient. Bilden läses först som enbart ljushet, från svart till vitt, och sedan byts varje ljushet mot färgen på samma punkt längs gradienten: vänstra änden målar skuggorna, högra änden målar högdagrarna. Bildens former, ljus och detaljer förblir exakt desamma. Bara färgerna ändras, och du väljer alla.

Så fungerar en gradient map

Tänk på gradienten som en uppslagstabell. En pixel med 0 % ljushet får färgen längst till vänster; en pixel med 50 % ljushet får färgen i mitten; en pixel med 100 % får den längst till höger. Eftersom uppslagningen bara beror på ljushet blir två mycket olika ursprungsfärger med samma ljushet, till exempel en röd tröja och en grön häck, samma färg. Det är det som gör gradient maps så bra på att göra bilder enhetliga.

Skalor för gradient maps som fungerar

Den enskilt viktigaste regeln: skalan ska bli stadigt ljusare från vänster till höger. Då förblir mörka saker mörka och ljusa saker ljusa, och bilden behåller sin känsla av djup. Du kan skifta nyans hur mycket du vill på vägen. Klassiska fotografiska looks, som sepia och cyanotypi, är bara skalor som den här.

Att bryta ljushetsregeln med avsikt ger en solariserad, psykedelisk look, vilket kan vara roligt för affischer. För allt som fortfarande ska se ut som ett foto, håll skalan jämn. Om en mellanton blir grå är lösningen densamma som för vilken gradient som helst: se grumliga gradienter.

Vad du använder gradient maps till

• Enhetliga fotoserier: arkivfoton, telefonbilder och gamla bilder ur arkivet kommer alla ut i en palett; se varumärkeskonsekvens
• Varumärkestexturer: gör vilken gråskaletextur som helst, som moln, betong, tyg eller brus, till en bakgrund i dina varumärkesfärger; se bakgrundstextur
• Illustrationer och ikoner: färglägg om en hel uppsättning på en gång genom att mappa dess gråtoner
• Färgkorrigering: sätt ett gradient map-lager i Soft Light eller Color på låg opacitet för en subtil filmlook över originalfärgerna
• Data och vetenskap: värmekartor och falskfärgsbilder är gradient maps av mätvärden
• Duoton och tritoner: två eller tre stopp för djärva affischbehandlingar; se duotoneffekten

Så använder du en gradient map i en bildredigerare

1. 1

   Lägg till en justering med gradient map

   Photoshop, Affinity Photo och GIMP har alla en. Använd ett justeringslager där du kan, så att originalet förblir orört.

2. 2

   Ställ in ändarna först

   Lägg en nästan svart version av din mörkaste varumärkesfärg till vänster och en blek ton till höger. Kontrollera att bilden fortfarande går att läsa.

3. 3

   Lägg till stopp för mellantonerna

   Placera din huvudsakliga varumärkesfärg runt 50 % och justera dess position tills hud, himmel eller nyckelobjekt ser rätt ut.

4. 4

   Blanda tillbaka den vid behov

   För korrigering snarare än full omfärgning, ändra lagrets blandningsläge till Soft Light eller Color och sänk opaciteten.

5. 5

   Spara skalan

   Spara gradienten som en förinställning och använd den på varje bild i serien, så att de alla matchar.

En gradient map i CSS

Webbläsare kan tillämpa en gradient map med ett SVG-filter. feColorMatrix gör om bilden till gråskala, och feComponentTransfer mappar den genom en tabell med värden för varje kanal. Varje lista nedan är skalan Varumärkesviolett: de fem stoppfärgernas röda, gröna och blå värden delade med 255, i jämnt fördelade positioner.

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="brand-violet-map" color-interpolation-filters="sRGB">
    <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"/>
    <feComponentTransfer>
      <!-- #120b1f  #3b1d6e  #7c3aed  #f0abfc  #fdf4ff -->
      <feFuncR type="table" tableValues="0.071 0.231 0.486 0.941 0.992"/>
      <feFuncG type="table" tableValues="0.043 0.114 0.227 0.671 0.957"/>
      <feFuncB type="table" tableValues="0.122 0.431 0.929 0.988 1"/>
    </feComponentTransfer>
  </filter>
</svg>

<img src="texture.jpg" alt="" style="filter: url(#brand-violet-map)">

Gradient maps är sättet att ta sig från vilken bild som helst till en palett du äger. Om du hellre vill börja från bilden hittar matcha en bild dess palett och de närmaste Marks. I Gradiently kan du också tona vilket foto som helst i Studion i färgerna hos den Mark du använder, som enfärgat, duoton eller en mjukare tvätt, vilket är en gradient map byggd åt dig.