Gradient overlays: farv fotos uden at skjule dem

Et gradient overlay er et lag farve, der toner hen over et foto, lagt ovenpå for at farve det, samle et sæt billeder eller gøre en overskrift læselig. Tricket er, at det toner: én del af fotoet påvirkes kraftigt, resten næsten ikke. Derfor ser et gradient overlay gennemtænkt ud, hvor en flad sort boks på 50 procent ligner en nødløsning. Du vælger, hvor farven lander, hvor kraftig den bliver, og hvordan den blander sig med billedet nedenunder.

Fire slags gradient overlays

Næsten hvert overlay, du ser på et website, en plakat eller et opslag, er én af fire typer. At vide, hvilken du har brug for, sparer en masse pillen ved opacitetsskydere.

Scrimmen: et overlay til tekst

En scrim er arbejdshesten. Den starter helt gennemsigtig og bliver mørkere mod den kant, hvor dine ord står, som regel bunden eller venstre side. Fotoet forbliver urørt, hvor motivet er, og teksten får et roligt, mørkt gulv. Brug en mørk tone fra selve fotoet frem for ren sort: en dyb brun over et varmt interiør, en marineblå over et havlandskab. Ren sort ligner en plet.

De øverste 40 procent af scrimmen forneden er helt klare, hvilket holder ansigter og produkter lyse. Mørket bygger op gennem den nederste halvdel og topper helt ude i kanten, præcis hvor en billedtekst står. Flere måder at holde ord læselige på billeder finder du i læselig tekst på fotos.

Farvevask-overlays og blandingstilstande

En farvevask er måden, brands får stockfotos, mobilbilleder og eventbilleder til at ligne én familie. Læg en gradient af to brandfarver over fotoet, og skift dens blandingstilstand. Blandingstilstanden afgør, hvordan farven blander sig med billedet, og den betyder mere end farverne.

Sådan lægger du et gradient overlay på et foto

1. 1

   Bestem, hvad overlayet skal bruges til

   Tekst, stemning eller ensartethed. En scrim til tekst, en vask til stemning og ensartethed. Kan du ikke sige hvilken, har du sandsynligvis ikke brug for et.

2. 2

   Tag en mørk tone fra fotoet

   Vælg den dybeste farve, der allerede er i billedet, til en scrim, eller to brandfarver til en vask.

3. 3

   Tegn gradienten over det område, der har brug for den

   Start klart over motivet, og byg op mod kanten med ordene. Hold overgangen lang, så der ikke er nogen synlig linje.

4. 4

   Vælg en blandingstilstand

   Normal til scrims, multiply til lyse fotos, screen til mørke, color til en enkelt farvetone.

5. 5

   Sænk opaciteten, til den næsten forsvinder

   Skub den så ét trin op igen. De bedste overlays bliver først bemærket, når du slår dem fra.

6. 6

   Tjek teksten i telefonstørrelse

   Formindsk designet til den størrelse, det vil blive set i, og læs hvert ord. Kontrast, der virker på en skærm, kan svigte på en telefon; farvekontrast har de mål, du skal sigte efter.

Hvor mørkt et gradient overlay skal være

Som en praktisk grænse: skal den mørkeste kant af en scrim over cirka 80 procent, før teksten kan læses, er fotoet for travlt på det sted. Flyt ordene, beskær anderledes, eller vælg et roligere billede. En vask over hele billedet kræver langt mindre, ellers holder fotoet op med at ligne et foto.

Gradient overlays på et website

På nettet kan du stable overlayet og fotoet i én deklaration, som holder dem sammen, når billedet skifter. Overlayet kommer først, fordi CSS maler det første lag øverst. Hele sættet af teknikker, herunder blandingstilstande og pseudoelementer, står i gradient overlay i 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;
}

En vask, der matcher dit brand hver gang

Overlays glider, når hver designer vælger sine egne farver. I Studio i Gradiently kan fotos farves i din Marks egne farver som mono, duotone eller en vask, så billeder fra forskellige kilder deler én palet uden manuel afstemning. Og når ord står på en Mark i stedet for et foto, gør den selv området bag dem roligere, helt uden overlay. Læs duotonefotos i din Marks farver for at se, hvordan vasken virker.