In breve
- Una mappa di gradiente sostituisce ogni tono di un’immagine, dal più scuro al più chiaro, con il colore del punto corrispondente di un gradiente.
- L’estremità sinistra del gradiente colora le ombre, quella destra colora le luci e tutto ciò che sta in mezzo colora i mezzitoni.
- Una buona rampa per una mappa di gradiente diventa sempre più chiara da sinistra a destra; se la luminosità salta, l’immagine appare solarizzata.
- Le mappe di gradiente sono ideali per rendere coerenti gli insiemi di foto, ricolorare texture e illustrazioni con i colori del brand e per il color grading.
- Un duotone è semplicemente una mappa di gradiente a due colori; tre o più arresti danno un controllo molto più fine sui mezzitoni.
In questa pagina
Una mappa di gradiente ricolora un’immagine sostituendo ciascuno dei suoi toni con un colore di un gradiente. L’immagine viene letta prima solo come luminosità, dal nero al bianco, poi ogni luminosità viene scambiata con il colore dello stesso punto lungo il gradiente: l’estremità sinistra dipinge le ombre, quella destra dipinge le luci. Forme, luce e dettagli dell’immagine restano identici. Cambiano solo i colori, e li scegli tutti tu.
Come funziona una mappa di gradiente
Pensa al gradiente come a una tabella di corrispondenza. Un pixel con luminosità 0% prende il colore all’estrema sinistra, uno al 50% prende il colore al centro, uno al 100% prende l’estrema destra. Poiché la corrispondenza dipende solo dalla luminosità, due colori originali molto diversi ma con la stessa luminosità, come un maglione rosso e una siepe verde, finiscono nello stesso colore. È questo che rende le mappe di gradiente così brave a unificare le immagini.
| Tono nell’immagine | Posizione sulla rampa | Colore in Viola del brand |
|---|---|---|
| Ombra più profonda | 0% | Inchiostro #120b1f |
| Toni scuri | 25% | Ametista #3b1d6e |
| Mezzitoni | 50% | Viola #7c3aed |
| Toni chiari | 75% | Orchidea #f0abfc |
| Luce più intensa | 100% | Bianco lilla #fdf4ff |
Rampe per mappe di gradiente che funzionano
La regola più importante: la rampa deve diventare più chiara in modo costante da sinistra a destra. Così le cose scure restano scure e quelle chiare restano chiare, e l’immagine mantiene il senso di profondità. Lungo il percorso puoi spostare la tinta quanto vuoi. Gli stili fotografici classici, come la seppia e la cianotipia, sono semplicemente rampe di questo tipo.
Rampa che rovina l’immagine
- Luminosità che sale e scende lungo la rampa
- Un colore pallido all’estrema sinistra, così le ombre diventano chiare
- Tinte opposte affiancate, così i mezzitoni diventano grigi
- Solo due arresti molto lontani per tinta
Rampa che regge l’immagine
- Luminosità che sale in modo costante da sinistra a destra
- Un quasi nero a sinistra, un quasi bianco o una tinta pallida a destra
- Tinte vicine, o un ponte brillante tra tinte lontane
- Da tre a cinque arresti per controllare i mezzitoni
Violare apposta la regola della luminosità dà un aspetto solarizzato e psichedelico, che può essere divertente per i poster. Per tutto ciò che deve ancora sembrare una foto, mantieni la rampa costante. Se un mezzotono diventa grigio, la soluzione è la stessa di qualsiasi gradiente: vedi i gradienti fangosi.
A cosa servono le mappe di gradiente
- Insiemi di foto coerenti: foto stock, foto da telefono e vecchie immagini d’archivio escono in un’unica palette; vedi la coerenza del brand
- Texture del brand: trasforma qualsiasi texture in scala di grigi, come nuvole, cemento, tessuto o rumore, in uno sfondo con i colori del tuo brand; vedi le texture per sfondi
- Illustrazioni e icone: ricolora un intero set in una volta mappandone i grigi
- Color grading: imposta un livello mappa di gradiente su Luce soffusa o Colore a bassa opacità per un aspetto da pellicola sottile sopra i colori originali
- Dati e scienza: le mappe di calore e le immagini a falsi colori sono mappe di gradiente di misurazioni
- Duotone e tritone: due o tre arresti per trattamenti da poster decisi; vedi l’effetto duotone
Come applicare una mappa di gradiente in un editor di immagini
- 1
Aggiungi una regolazione mappa di gradiente
Photoshop, Affinity Photo e GIMP ne hanno una. Usa un livello di regolazione dove puoi, così l’originale resta intatto.
- 2
Imposta prima le estremità
Metti a sinistra una versione quasi nera del tuo colore di brand più scuro e a destra una tinta pallida. Controlla che l’immagine si legga ancora.
- 3
Aggiungi gli arresti dei mezzitoni
Posiziona il colore principale del brand intorno al 50% e regola la sua posizione finché pelle, cieli o oggetti chiave non sembrano giusti.
- 4
Fondi di nuovo, se serve
Per il grading e non per una ricolorazione completa, cambia la modalità di fusione del livello in Luce soffusa o Colore e abbassa l’opacità.
- 5
Salva la rampa
Salva il gradiente come preset e usalo su ogni immagine dell’insieme, così corrispondono tutte.
Una mappa di gradiente in CSS
I browser possono applicare una mappa di gradiente con un filtro SVG. feColorMatrix porta l’immagine in scala di grigi, e feComponentTransfer la mappa attraverso una tabella di valori per ogni canale. Ogni elenco qui sotto è la rampa Viola del brand: i valori di rosso, verde e blu dei cinque colori di arresto divisi per 255, a posizioni equidistanti.
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<filter id="brand-violet-map" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
<feComponentTransfer>
<!-- #120b1f #3b1d6e #7c3aed #f0abfc #fdf4ff -->
<feFuncR type="table" tableValues="0.071 0.231 0.486 0.941 0.992"/>
<feFuncG type="table" tableValues="0.043 0.114 0.227 0.671 0.957"/>
<feFuncB type="table" tableValues="0.122 0.431 0.929 0.988 1"/>
</feComponentTransfer>
</filter>
</svg>
<img src="texture.jpg" alt="" style="filter: url(#brand-violet-map)">Le mappe di gradiente sono il modo per passare da qualsiasi immagine a una palette tua. Se preferisci partire dall’immagine, abbina un’immagine trova la sua palette e i Mark più vicini. In Gradiently puoi anche tingere qualsiasi foto nello Studio con i colori del Mark che stai usando, in mono, duotone o come velatura più morbida, che è una mappa di gradiente costruita per te.
Le domande più frequenti
Cos’è una mappa di gradiente?
Una mappa di gradiente ricolora un’immagine sostituendo ogni tono, dal più scuro al più chiaro, con il colore del punto corrispondente di un gradiente.
Che differenza c’è tra una mappa di gradiente e un duotone?
Un duotone è una mappa di gradiente con soli due colori. Le mappe di gradiente possono avere tre o più arresti per un controllo più fine dei mezzitoni.
Perché la mia mappa di gradiente ha un aspetto strano?
Probabilmente la luminosità della rampa sale e scende. Fai in modo che diventi sempre più chiara da sinistra a destra, così le ombre restano scure e le luci restano chiare.
Come uso una mappa di gradiente per il color grading?
Aggiungi la mappa di gradiente come livello di regolazione, poi imposta la sua modalità di fusione su Luce soffusa o Colore e abbassa l’opacità.
Posso usare una mappa di gradiente in CSS?
Sì, con un filtro SVG che converte in scala di grigi e poi mappa ogni canale attraverso i valori della tabella di feComponentTransfer.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
