Uskarpe bakgrunner: myk fokus gjort riktig

En uskarp bakgrunn tar bort detaljer slik at noe annet kan lede: et ansikt i et portrett, et produkt i et butikkbilde, en overskrift i et innlegg, et panel i et grensesnitt. Uskarphet virker fordi øyet går til det som er skarpest. Kunsten ligger i mengden. Litt uskarphet ser ut som en linse. Mye gjør bakgrunnen til myk farge. Mellomtingen ser som regel ut som et kamera som bommet på fokus.

Når en uskarp bakgrunn hjelper

• Å løfte fram et motiv. Portretter og produktbilder leses tydeligere når bakgrunnen er myk, som med en linse på vid blenderåpning.
• Å gjøre plass til ord. Tekst over et uskarpt bilde er lettere å lese enn tekst over et skarpt, detaljert.
• Å fylle et format. Et liggende bilde plassert i en stående story trenger noe over og under. En uskarp, forstørret kopi av samme bilde fyller plassen i matchende farge.
• Lagdelte grensesnitt. Paneler av frostet glass gjør det som ligger bak dem uskarpt, så panelet leses som et eget lag mens det antyder innholdet under.
• Personvern i videomøter. Videomøteapper gjør rommet bak deg uskarpt slik at oppmerksomheten blir på ansiktet ditt.

Bilde 1200×900 (4:3)

1200 × 900

Story 1080×1920

1080 × 1920

Hvor mye uskarphet du bør bruke

Uskarphetens styrke er relativ til bildestørrelsen: den samme radiusen som knapt myker opp et bilde på 4000 piksler, løser opp et på 600 piksler. Vurder med øyet i størrelsen folk kommer til å se det i. For tekstbakgrunner går du så sterkt at ingen kanter blir igjen bak bokstavene, for halvuskarpe former konkurrerer fortsatt med ordene. Tekst over bilder forklarer hvorfor.

Et uskarpt bilde er en gradient i forkledning

Gjør et bilde kraftig uskarpt, og det som gjenstår, er fargen i det, spredt ut i myke felt: en solnedgang blir en overgang fra oransje til fiolett, en skog blir dype grønnfarger med en blek himmel øverst. Derfor gir uskarpe bilder så naturlige bakgrunner for bildene de kom fra. Det er også et hint: du kunne bygget den gradienten direkte og fått den samme harmonien, skarpere kontroll og ingen komprimeringsartefakter.

For å hente paletten fra et bilde, se fargepalett fra et bilde. I Gradiently gjør Finn samsvar med et bilde det i ett steg: slipp inn et bilde, så får du paletten og de nærmeste Marksene, eller nye laget i samme stil.

Slik løser du de vanlige problemene med uskarphet

1. 1

   Forstørr for å skjule bleke kanter

   Uskarphet trekker inn gjennomsiktighet eller mørke piksler fra utenfor bildet, så kantene blir blekere eller grå. Skaler den uskarpe kopien litt opp forbi rammen slik at de myke kantene beskjæres bort.

2. 2

   Legg til korn for å stoppe bånd

   Et kraftig uskarpt bilde er et sett langsomme, glatte overganger, som får bånd når det lagres som 8-bits JPEG eller PNG. Et lett kornlag skjuler trinnene. Se gradientbånd.

3. 3

   Mørkne eller lysne for tekst

   Uskarphet fjerner detaljer, men ikke lysstyrke. Sliter teksten fortsatt, legger du en mørk eller lys tone over uskarpheten til kontrasten holder.

4. 4

   Hold metningen livlig

   Uskarphet gjennomsnittsberegner farger, noe som kan dempe dem. Et lite metningsløft etter uskarpheten bringer fargen tilbake.

Uskarpe bakgrunner i CSS

På nettet finnes det to verktøy. filter: blur() gjør et element uskarpt, noe som passer til en uskarp kopi av et bilde bak det ekte. backdrop-filter: blur() gjør uskarpt det som ligger bak et element, og det lager frostede glasspaneler. Begge koster tegnetid, og backdrop-filter over scrollende innhold koster mest. Se ytelse for CSS-gradienter.

/* a blurred, enlarged copy of the cover image fills the frame */
.cover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cover-image) center / cover;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.15); /* crops the faded edges */
}

/* a frosted glass panel */
.panel {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

Frostede paneler over fargerike bakgrunner er grunnlaget for glassmorfisme, som har sine egne regler for kontrast og kanter.

Alternativer til uskarphet

Et mørkt dekklag, et helfarget panel bak ordene eller en duotone-behandling av bildet er de andre vanlige valgene. Uskarphet er raskest. En designet bakgrunn gir som regel mest kontroll.