Gradientoverlegg: gi bilder farge uten å skjule dem

Et gradientoverlegg er et fargelag som toner over et foto, lagt oppå for å farge det, samle en bildeserie eller gjøre en overskrift lesbar. Trikset er at det toner ut: én del av bildet påvirkes mye, resten nesten ikke. Derfor virker et gradientoverlegg gjennomtenkt, mens en flat svart boks på 50 prosent ser ut som en nødløsning. Du velger hvor fargen treffer, hvor sterk den blir og hvordan den blandes med bildet under.

Fire typer gradientoverlegg

Nesten alle overlegg på nettsteder, plakater og innlegg er én av fire typer. Å vite hvilken du trenger, sparer mye justering av opasitet.

Mørkningssløret: et overlegg for tekst

Mørkningssløret gjør grovarbeidet. Det starter helt gjennomsiktig og mørkner mot kanten der ordene ligger, vanligvis nederst eller til venstre. Motivet forblir uberørt, og teksten får en rolig, mørk bunn. Bruk en mørk tone fra bildet fremfor helt svart: dyp brun over et varmt interiør, marineblå over sjølandskap. Rent svart virker som en flekk.

De øverste 40 prosentene av det nederste mørkningssløret er helt klare, så ansikter og produkter forblir lyse. Mørkheten bygger seg opp gjennom nedre halvdel og er sterkest ved kanten, akkurat der bildeteksten ligger. For flere måter å holde ord lesbare på bilder, les lesbar tekst på foto.

Fargeslør og blandingsmoduser

Et fargeslør lar merkevarer få arkivbilder, mobilfoto og arrangementsbilder til å ligne én familie. Legg en gradient med to merkevarefarger over bildet og endre blandingsmodus. Blandingsmodusen avgjør hvordan fargen blandes med bildet og betyr mer enn fargene.

Slik legger du et gradientoverlegg på et foto

1. 1

   Bestem formålet med overlegget

   Tekst, stemning eller sammenheng. Mørkningsslør til tekst, fargeslør til stemning og sammenheng. Hvis du ikke kan si hvilket, trenger du antakelig ikke et.

2. 2

   Hent en mørk tone fra bildet

   Velg den dypeste fargen i bildet til et mørkningsslør, eller to merkevarefarger til et fargeslør.

3. 3

   Tegn gradienten over området som trenger den

   Begynn gjennomsiktig over motivet og bygg opp mot kanten med ordene. Hold overgangen lang så ingen linje er synlig.

4. 4

   Velg blandingsmodus

   Normal til mørkningsslør, Multipliser til lyse foto, Skjerm til mørke og Farge til én fargetone.

5. 5

   Senk opasiteten til den nesten forsvinner

   Øk så ett trinn igjen. De beste overleggene merkes bare når du slår dem av.

6. 6

   Sjekk teksten i mobilstørrelse

   Krymp designet til størrelsen det skal vises i, og les hvert ord. Kontrast som fungerer på en skjerm, kan svikte på mobilen. Fargekontrast har målene du bør sikte mot.

Hvor mørkt et gradientoverlegg bør være

Som praktisk grense: Hvis den mørkeste kanten i sløret må over omtrent 80 prosent før teksten kan leses, er bildet for travelt der. Flytt ordene, endre utsnitt eller velg et roligere foto. Et fargeslør over hele bildet trenger langt mindre, ellers slutter bildet å se ut som et foto.

Gradientoverlegg på et nettsted

På nettet kan du stable overlegg og foto i én deklarasjon, så de følger hverandre når bildet endres. Overlegget kommer først fordi CSS tegner første lag øverst. Alle teknikkene, inkludert blandingsmoduser og pseudoelementer, finnes i gradientoverlegg 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;
}

Et fargeslør som følger merkevaren hver gang

Overlegg spriker når hver designer velger egne farger. I Studio i Gradiently kan foto tones i Markens egne farger som Monokrom, Duotone eller Fargeslør. Da deler bilder fra ulike kilder én palett uten manuell tilpasning. Når ord ligger på en Mark fremfor et foto, roer den ned området bak dem selv, helt uten overlegg. Les duotonebilder i Markens farger om hvordan fargesløret fungerer.