Sfondo sfocato: la sfocatura fatta bene

Uno sfondo sfocato toglie dettaglio perché qualcos’altro possa guidare: un volto in un ritratto, un prodotto in una foto di negozio, un titolo su un post, un pannello in un’interfaccia. La sfocatura funziona perché l’occhio va su ciò che è più nitido. L’arte sta nella quantità. Un po’ di sfocatura sembra un obiettivo; tanta trasforma lo sfondo in colore morbido; la via di mezzo di solito sembra una fotocamera che ha mancato la messa a fuoco.

Quando uno sfondo sfocato aiuta

• Staccare un soggetto. Ritratti e foto di prodotto si leggono meglio quando lo sfondo è morbido, come con un obiettivo a diaframma aperto.
• Fare spazio alle parole. Il testo su una foto sfocata si legge più facilmente che su una nitida e ricca di dettagli.
• Riempire un formato. Una foto orizzontale messa in una storia verticale ha bisogno di qualcosa sopra e sotto; una copia sfocata e ingrandita della stessa foto riempie quello spazio con colori coerenti.
• Interfacce a strati. I pannelli di vetro smerigliato sfocano ciò che hanno dietro, così il pannello si legge come uno strato separato e lascia intuire il contenuto sotto.
• Privacy nelle videochiamate. Le app di videochiamata sfocano la stanza alle tue spalle, così l’attenzione resta sul tuo volto.

Foto 1200×900 (4:3)

1200 × 900

Storia 1080×1920

1080 × 1920

Quanta sfocatura usare

L’intensità della sfocatura è relativa alla dimensione dell’immagine: lo stesso raggio che ammorbidisce appena una foto da 4.000 pixel ne dissolve una da 600. Giudica a occhio alla dimensione in cui la vedranno le persone. Per gli sfondi del testo, vai abbastanza forte da non lasciare bordi dietro le lettere, perché forme mezze sfocate competono comunque con le parole; il testo sulle immagini spiega perché.

Una foto sfocata è un gradiente sotto mentite spoglie

Sfoca molto una foto e quello che resta è il suo colore, steso in campi morbidi: un tramonto diventa una sfumatura dall’arancione al viola, un bosco diventa verdi profondi con un cielo pallido in alto. Ecco perché le foto sfocate sono sfondi così naturali per le immagini da cui nascono. È anche un indizio: potresti costruire quel gradiente direttamente e ottenere la stessa armonia, un controllo più preciso e nessun artefatto di compressione.

Per estrarre la palette da una foto, vedi palette di colori da un’immagine. In Gradiently, Abbina un’immagine lo fa in un passaggio: trascini un’immagine e ottieni la sua palette e i Mark più vicini, oppure nuovi Mark fatti a sua somiglianza.

Risolvere i soliti problemi della sfocatura

1. 1

   Ingrandisci per nascondere i bordi sbiaditi

   La sfocatura porta dentro trasparenza o pixel scuri da fuori dell’immagine, quindi i bordi diventano pallidi o grigi. Ingrandisci la copia sfocata un po’ oltre il riquadro, così i suoi bordi morbidi vengono tagliati.

2. 2

   Aggiungi grana per fermare il banding

   Un’immagine molto sfocata è un insieme di dissolvenze lente e lisce, che fanno banding una volta salvate come JPEG o PNG a 8 bit. Un leggero strato di grana nasconde i gradini; vedi banding nei gradienti.

3. 3

   Scurisci o schiarisci per il testo

   La sfocatura toglie dettaglio ma non luminosità. Se il testo fatica ancora, stendi una velatura scura o chiara sopra la sfocatura finché il contrasto regge.

4. 4

   Tieni viva la saturazione

   La sfocatura fa la media dei colori, e può spegnerli. Un piccolo aumento di saturazione dopo la sfocatura riporta il colore.

Sfondi sfocati in CSS

Sul web ci sono due strumenti. filter: blur() sfoca un elemento, e va bene per una copia sfocata di un’immagine dietro quella vera. backdrop-filter: blur() sfoca ciò che sta dietro un elemento, e permette di fare pannelli di vetro smerigliato. Entrambi costano tempo di rendering, e backdrop-filter su contenuti che scorrono costa di più; vedi prestazioni dei gradienti CSS.

/* 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);
}

I pannelli smerigliati su sfondi colorati sono la base del glassmorphism, che ha le sue regole per contrasto e bordi.

Alternative alla sfocatura

Un velo scuro, un pannello pieno dietro le parole o un trattamento duotone della foto sono le altre scelte comuni. La sfocatura è la più rapida; uno sfondo progettato è di solito il più controllato.