Gradient overlay: kleur een foto zonder haar te verbergen

Een gradient overlay is een kleurlaag die over een foto uitloopt en er bovenop ligt om hem te tinten, een reeks beelden te verenigen of een kop leesbaar te maken. De kneep is dat hij uitloopt: het ene deel van de foto wordt sterk geraakt, de rest nauwelijks. Daarom ziet een gradient overlay doordacht uit waar een egaal zwart vlak van 50 procent op een noodgreep lijkt. Jij bepaalt waar de kleur landt, hoe sterk hij wordt en hoe hij met het beeld eronder mengt.

Vier soorten gradient overlay

Bijna elke overlay op een website, poster of post is een van vier typen. Weten welke je nodig hebt scheelt veel gesleutel aan dekkingsschuifjes.

De scrim: een overlay voor tekst

Een scrim is het werkpaard. Hij begint volledig transparant en wordt donkerder richting de rand waar je tekst staat, meestal onder of links. De foto blijft onaangeroerd waar het onderwerp staat en de tekst krijgt een rustige, donkere vloer. Gebruik een donkere toon uit de foto zelf in plaats van zuiver zwart: een diep bruin over een warm interieur, een marineblauw over een zeegezicht. Zuiver zwart ziet eruit als een veeg.

De bovenste 40 procent van de scrim onderaan is volledig helder, zodat gezichten en producten licht blijven. Het donker bouwt zich op door de onderste helft en piekt aan de uiterste rand, precies waar een bijschrift staat. Meer manieren om woorden op beelden leesbaar te houden vind je in leesbare tekst op foto's.

Kleurwash-overlays en overvloeimodi

Met een kleurwash laten merken stockfoto's, telefoonfoto's en eventbeelden als één familie ogen. Leg een verloop van twee merkkleuren over de foto en wijzig de overvloeimodus. De overvloeimodus bepaalt hoe de kleur met het beeld mengt, en dat telt zwaarder dan de kleuren zelf.

Een gradient overlay aan een foto toevoegen

1. 1

   Bepaal waar de overlay voor dient

   Tekst, sfeer of samenhang. Een scrim voor tekst, een wash voor sfeer en samenhang. Kun je niet zeggen welke, dan heb je er waarschijnlijk geen nodig.

2. 2

   Pak een donkere toon uit de foto

   Kies voor een scrim de diepste kleur die al in het beeld zit, voor een wash twee merkkleuren.

3. 3

   Teken het verloop over het gebied dat het nodig heeft

   Begin helder over het onderwerp en bouw op naar de rand met de tekst. Houd de uitloop lang, zodat er geen zichtbare lijn is.

4. 4

   Kies een overvloeimodus

   Normal voor scrims, multiply voor lichte foto's, screen voor donkere, color voor één tint.

5. 5

   Verlaag de dekking tot hij bijna verdwijnt

   Zet hem daarna één stap terug omhoog. De beste overlays valt alleen op als je ze uitzet.

6. 6

   Controleer de tekst op telefoonformaat

   Verklein het ontwerp tot het formaat waarop het gezien wordt en lees elk woord. Contrast dat op een monitor werkt, kan op een telefoon falen; kleurcontrast geeft de doelwaarden.

Hoe donker een gradient overlay mag zijn

Als werkgrens geldt: moet de donkerste rand van een scrim zo'n 80 procent halen voordat de tekst leest, dan is de foto op die plek te druk. Verplaats de tekst, snij anders bij of kies een rustiger beeld. Een wash over het hele beeld heeft veel minder nodig, anders lijkt de foto niet meer op een foto.

Gradient overlays op een website

Op het web kun je overlay en foto in één declaratie stapelen, zodat ze bij elkaar blijven als het beeld wisselt. De overlay komt eerst, omdat CSS de eerste laag bovenop schildert. De volledige set technieken, inclusief overvloeimodi en pseudo-elementen, staat in gradient overlay CSS.

.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

Een wash die elke keer bij je merk past

Overlays lopen uit de pas als elke ontwerper eigen kleuren kiest. In de Gradiently Studio kun je foto's tinten in de eigen kleuren van je Mark, als mono, duotone of wash, zodat beelden uit verschillende bronnen één palet delen zonder handmatig afstemmen. En staan woorden op een Mark in plaats van op een foto, dan maakt de Mark het vlak erachter vanzelf rustiger, helemaal zonder overlay. Lees duotone-foto's in de kleuren van je Mark voor hoe de wash werkt.