Gradient map: alles opnieuw inkleuren in seconden

Een gradient map kleurt een beeld opnieuw in door elke toon te vervangen door een kleur uit een kleurverloop. Het beeld wordt eerst alleen als helderheid gelezen, van zwart naar wit, en daarna wordt elke helderheid geruild voor de kleur op hetzelfde punt van het kleurverloop: het linkeruiteinde schildert de schaduwen, het rechteruiteinde de hooglichten. De vormen, het licht en de details van het beeld blijven precies gelijk. Alleen de kleuren veranderen, en jij kiest ze allemaal.

Hoe een gradient map werkt

Zie het kleurverloop als een opzoektabel. Een pixel met 0% helderheid krijgt de kleur helemaal links, een pixel met 50% helderheid de kleur in het midden en een pixel met 100% de kleur helemaal rechts. Omdat het opzoeken alleen van de helderheid afhangt, krijgen twee heel verschillende oorspronkelijke kleuren met dezelfde helderheid, zoals een rode trui en een groene heg, dezelfde kleur. Daarom is een gradient map zo goed in het samenbrengen van beelden.

Verlopen voor een gradient map die werken

De allerbelangrijkste regel: het verloop moet van links naar rechts gestaag lichter worden. Dan blijft donker donker en licht licht, en houdt het beeld zijn gevoel van diepte. De tint mag je onderweg zoveel verschuiven als je wilt. Klassieke fotografische looks, zoals sepia en cyanotypie, zijn gewoon zulke verlopen.

Breek je de helderheidsregel met opzet, dan krijg je een gesolariseerde, psychedelische look, en dat kan leuk zijn voor posters. Voor alles wat nog op een foto moet lijken, houd je het verloop gestaag. Wordt een middentoon grijs, dan is de oplossing dezelfde als bij elk kleurverloop: zie modderige kleurverlopen.

Waar je een gradient map voor gebruikt

• Consistente fotoreeksen: stockfoto’s, telefoonfoto’s en oude archiefbeelden komen allemaal in één palet uit, zie merkconsistentie
• Merktexturen: maak van elke textuur in grijstinten, zoals wolken, beton, stof of ruis, een achtergrond in je merkkleuren, zie achtergrondtextuur
• Illustraties en iconen: kleur een hele set in één keer om door de grijzen toe te wijzen
• Color grading: zet een laag met een gradient map op Zwak licht of Kleur met lage dekking voor een subtiele filmlook over de oorspronkelijke kleuren
• Data en wetenschap: heatmaps en beelden in valse kleuren zijn gradient maps van metingen
• Duotone en tritone: twee of drie stops voor krachtige posterbewerkingen, zie het duotone-effect

Een gradient map toepassen in een beeldbewerker

1. 1

   Voeg een aanpassing met een gradient map toe

   Photoshop (daar heet het Verloop toewijzen), Affinity Photo en GIMP hebben er allemaal een. Gebruik waar het kan een aanpassingslaag, zodat het origineel onaangeroerd blijft.

2. 2

   Stel eerst de uiteinden in

   Zet links een bijna zwarte versie van je donkerste merkkleur en rechts een bleke tint. Controleer of het beeld nog leesbaar is.

3. 3

   Voeg stops voor de middentonen toe

   Zet je belangrijkste merkkleur rond 50% en verschuif hem tot huid, luchten of belangrijke objecten er goed uitzien.

4. 4

   Meng het terug als dat nodig is

   Wil je graden in plaats van volledig omkleuren, zet de overvloeimodus van de laag dan op Zwak licht of Kleur en verlaag de dekking.

5. 5

   Bewaar het verloop

   Sla het kleurverloop op als preset en gebruik het op elk beeld in de reeks, zodat ze allemaal bij elkaar passen.

Een gradient map in CSS

Browsers kunnen een gradient map toepassen met een SVG-filter. feColorMatrix zet het beeld om naar grijstinten, en feComponentTransfer leidt het per kanaal door een tabel met waarden. Elke lijst hieronder is het verloop Merkviolet: de rode, groene en blauwe waarden van de vijf stopkleuren gedeeld door 255, op gelijkmatig verdeelde posities.

<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)">

Met een gradient map kom je van elk beeld bij een palet dat van jou is. Begin je liever bij het beeld, dan vindt een afbeelding matchen het palet en de Marks die er het dichtst bij liggen. In Gradiently kun je in de Studio ook elke foto tinten in de kleuren van de Mark die je gebruikt, als mono, duotone of een zachtere waas, en dat is een gradient map die voor je is gebouwd.