Overlay a gradiente: tingere le foto senza nasconderle

Un overlay a gradiente è uno strato di colore che sfuma su una foto, posato sopra per tingerla, unificare un insieme di immagini o rendere leggibile un titolo. Il trucco è che sfuma: una parte della foto è toccata con forza, il resto appena. Per questo un overlay a gradiente sembra pensato, mentre un riquadro nero piatto al 50 percento sembra una toppa. Scegli tu dove cade il colore, quanto diventa forte e come si fonde con l’immagine sotto.

Quattro tipi di overlay a gradiente

Quasi ogni overlay che vedi su un sito, un manifesto o un post è di uno di quattro tipi. Sapere quale ti serve fa risparmiare molti ritocchi ai cursori dell’opacità.

Lo scrim: un overlay per il testo

Lo scrim è il cavallo da tiro. Parte del tutto trasparente e si scurisce verso il bordo dove stanno le tue parole, di solito in basso o a sinistra. La foto resta intatta dove c’è il soggetto, e il testo ottiene un fondo calmo e scuro. Usa un tono scuro della foto stessa e non il nero puro: un marrone profondo su un interno caldo, un blu notte su un paesaggio marino. Il nero puro sembra una macchia.

Il 40 percento superiore dello scrim in basso è del tutto libero, il che mantiene luminosi volti e prodotti. Il buio cresce nella metà inferiore e culmina proprio al bordo, dove sta una didascalia. Per altri modi di mantenere leggibili le parole sulle immagini, leggi il testo leggibile sulle foto.

Overlay a velo di colore e modalità di fusione

Un velo di colore è il modo in cui i brand fanno sembrare una famiglia foto di repertorio, scatti da telefono e immagini di eventi. Posa sulla foto un gradiente di due colori del brand e cambia la sua modalità di fusione. La modalità di fusione decide come il colore si mescola con l’immagine, e conta più dei colori.

Come aggiungere un overlay a gradiente a una foto

1. 1

   Decidi a che cosa serve l’overlay

   Testo, atmosfera o coerenza. Uno scrim per il testo, un velo per atmosfera e coerenza. Se non sai dire quale, probabilmente non ti serve.

2. 2

   Preleva un tono scuro dalla foto

   Scegli il colore più profondo già presente nell’immagine per uno scrim, o due colori del brand per un velo.

3. 3

   Disegna il gradiente sull’area che ne ha bisogno

   Parti libero sul soggetto e cresci verso il bordo con le parole. Tieni lunga la dissolvenza così non si vede nessuna linea.

4. 4

   Scegli una modalità di fusione

   Normal per gli scrim, multiply per le foto chiare, screen per quelle scure, color per una tinta singola.

5. 5

   Abbassa l’opacità finché quasi sparisce

   Poi rialzala di un passo. I migliori overlay si notano solo quando li spegni.

6. 6

   Controlla il testo alla dimensione del telefono

   Riduci il design alla dimensione in cui sarà visto e leggi ogni parola. Un contrasto che funziona su un monitor può fallire su un telefono; il contrasto del colore ha gli obiettivi da raggiungere.

Quanto scuro deve essere un overlay a gradiente

Come limite pratico, se il bordo più scuro di uno scrim deve superare circa l’80 percento perché il testo si legga, la foto è troppo affollata per quel punto. Sposta le parole, ritaglia diversamente o scegli un’immagine più calma. Un velo su tutta l’immagine ne richiede molto meno, altrimenti la foto smette di sembrare una foto.

Overlay a gradiente su un sito web

Sul web puoi sovrapporre overlay e foto in una sola dichiarazione, che li tiene insieme quando l’immagine cambia. L’overlay viene per primo perché il CSS dipinge il primo strato in cima. L’insieme completo delle tecniche, comprese modalità di fusione e pseudo elementi, è nell’overlay a gradiente in 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;
}

Un velo che corrisponde al tuo brand ogni volta

Gli overlay si disperdono quando ogni designer sceglie i propri colori. Nello Studio di Gradiently le foto possono essere tinte con i colori del tuo Mark in mono, duotone o velo, così immagini di fonti diverse condividono una sola palette senza abbinamenti a mano. E quando le parole stanno su un Mark e non su una foto, lui calma da solo l’area dietro di loro, senza alcun overlay. Leggi le foto duotone nei colori del tuo Mark per capire come funziona il velo.