Sfumature liquide: colore fluido che sembra versato

Una sfumatura liquida è un colore che sembra versato invece che fuso: bande di tinta che si arricciano l’una intorno all’altra, si assottigliano in un punto e si raccolgono in un altro, con un lampo di luce lungo le curve. Pensa ai dipinti acrilici a colata, alle carte marmorizzate, all’olio su una strada bagnata o all’inchiostro caduto nell’acqua. La parte sorprendente è come si ottengono. Non si fondono i colori per arrivarci; si parte da strisce nette e si piegano. Ecco perché un normale strumento per sfumature da solo non produce mai del tutto questo aspetto.

Cosa fa sembrare liquido un colore

• Bande, non sfumature. Ogni colore mantiene la sua identità come un nastro. Una sfumatura ampia e morbida si legge come aria, non come liquido.
• Spessore variabile. La stessa banda si gonfia e si restringe mentre scorre, come fa la vernice quando fluisce.
• Niente spigoli. Ogni curva è una curva. Un solo angolo netto rompe l’illusione.
• Luce sulle curve. Una sottile linea chiara lungo alcuni bordi si legge come un riflesso bagnato.
• Una sola direzione di flusso. Vortici che pendono tutti dalla stessa parte danno l’idea di un’unica colata.

Quattro look di sfumatura liquida

Questi campioni sono la materia prima: le bande di colore che piegheresti. Ognuno è un singolo valore CSS, quindi puoi copiarlo come punto di partenza per qualsiasi dei metodi qui sotto.

Nota il colore chiaro. In un dipinto a colata, il tono più chiaro è di solito la banda più sottile, ed è ciò che fa sembrare ricchi i colori più scuri intorno. Usalo come un riflesso, non come un riempimento.

Come creare una sfumatura liquida in uno strumento di design

1. 1

   Disegna le strisce

   Riempi un canvas più grande della misura finale con da cinque a otto bande di colore in diagonale. Fai alcune bande larghe e altre molto sottili.

2. 2

   Deforma tutto

   Usa una distorsione warp, twirl o a onda per piegare le strisce in un’ampia curva a S. Mantieni delicato il primo passaggio.

3. 3

   Spingi con un pennello liquify

   Con un pennello grande e morbido, trascina le bande in una direzione per creare vortici e pozze. Lavora dal grande al piccolo.

4. 4

   Aggiungi qualche riflesso

   Dipingi sottili linee chiare lungo due o tre curve, seguendo il flusso, a bassa opacità.

5. 5

   Ritaglia la parte migliore

   La distorsione lascia bordi disordinati. Ritaglia la sezione più interessante e dimensionala per il tuo formato.

6. 6

   Finisci con la grana

   Un leggero livello di rumore nasconde il banding dello stiramento e dà alla superficie un tocco tattile.

I nomi cambiano da software a software, ma la maggior parte degli editor ha uno strumento warp e uno liquify o sfumino. Le sfumature in Photoshop e le sfumature in Procreate trattano gli strumenti specifici di ciascuno.

Una sfumatura liquida con SVG e CSS

Sul web, un filtro SVG può fare la deformazione. feTurbulence genera rumore morbido e feDisplacementMap lo usa per spostare i pixel di una sfumatura a strisce. Un baseFrequency basso dà vortici ampi e lenti; uno scale alto spinge le bande più lontano.

<svg width="0" height="0" style="position:absolute">
  <filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence type="fractalNoise" baseFrequency="0.003 0.006" numOctaves="2" seed="11" />
    <feDisplacementMap in="SourceGraphic" scale="220" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

<div class="liquid"></div>

<style>
  .liquid {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: repeating-linear-gradient(115deg,
      #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%);
    filter: url(#liquid);
  }
</style>

Far muovere le sfumature liquide

Il liquido è l’unico stile di sfumatura che quasi chiede di muoversi. Una colata che deriva lentamente nell’hero di un sito o in una Storia sembra viva. Tieni bassa la velocità, come se la vernice fosse densa, e mettila in loop in modo che la fine coincida con l’inizio. Animare la turbolenza dal vivo è pesante, quindi un breve video in loop esportato è di solito la via migliore. Un loop di 8-15 secondi dà alla colata il tempo di viaggiare senza che nessuno noti la ripetizione, e un MP4 a 1080×1920 serve Storie, Reel e sfondi per telefono da un unico file. Sfondi sfumati animati tratta approcci più leggeri.

Mettere parole su una sfumatura liquida

I Mark di Gradiently sono sfondi vivi i cui materiali possono scorrere e derivare, e ognuno sposta da solo dietro le tue parole la zona più calma della sua superficie. Pro li esporta come GIF, MP4 o WebM, così un look liquido può diventare una Storia o un loop per un hero senza costruire uno shader. Leggi testo su una sfumatura per il lato della leggibilità.