Vloeibare kleurverlopen: stromende kleur die gegoten lijkt

Een vloeibaar kleurverloop is kleur die gegoten lijkt in plaats van gemengd: banden van tint die om elkaar krullen, op de ene plek dun worden uitgerekt en op een andere samenpoelen, met een glans van licht langs de bochten. Denk aan acrylgietschilderijen, gemarmerd schutblad, olie op een natte weg of inkt die in water valt. Het verrassende is hoe ze worden gemaakt. Je mengt geen kleuren om er te komen; je begint met schone strepen en buigt ze. Daarom levert een gewoon verlooptool de look nooit helemaal zelf op.

Wat kleur vloeibaar laat lijken

• Banden, geen overgangen. Elke kleur behoudt zijn identiteit als lint. Een brede zachte overgang leest als lucht, niet als vloeistof.
• Wisselende dikte. Dezelfde band zwelt en versmalt onderweg, zoals verf doet als ze stroomt.
• Geen hoeken. Elke draai is een kromme. Eén scherpe hoek breekt de illusie.
• Licht op de bochten. Een dunne bleke lijn langs enkele randen leest als een nat highlight.
• Eén stroomrichting. Kronkels die allemaal dezelfde kant op leunen voelen als één gieting.

Vier looks voor een vloeibaar kleurverloop

Deze stalen zijn het ruwe materiaal: de kleurbanden die je zou buigen. Elk is één CSS-waarde, dus je kunt het kopiëren als beginpunt voor elk van de onderstaande methoden.

Let op de bleke kleur. In een gietschilderij is de lichtste toon meestal de dunste band, en die laat de donkerdere kleuren eromheen rijk lijken. Gebruik hem als highlight, niet als vulling.

Een vloeibaar kleurverloop maken in een designtool

1. 1

   Teken strepen

   Vul een canvas dat groter is dan je eindformaat met vijf tot acht kleurbanden onder een hoek. Maak sommige banden breed en sommige heel dun.

2. 2

   Vervorm het geheel

   Gebruik een warp-, twirl- of golfvervorming om de strepen in een brede S-bocht te buigen. Houd de eerste ronde mild.

3. 3

   Duw met een liquify-penseel

   Sleep met een groot, zacht penseel de banden in één richting om kronkels en poelen te maken. Werk van groot naar klein.

4. 4

   Voeg enkele highlights toe

   Schilder dunne bleke lijnen langs twee of drie bochten, de stroming volgend, op lage dekking.

5. 5

   Snijd het beste deel bij

   Vervorming laat rommelige randen achter. Snijd bij tot het interessantste stuk en pas het formaat aan op je medium.

6. 6

   Werk af met korrel

   Een lichte ruislaag verbergt banding door het uitrekken en geeft het oppervlak een tastbaar gevoel.

Software verschilt in naamgeving, maar de meeste editors hebben een warp en een liquify- of smudgetool. Verlopen in Photoshop en verlopen in Procreate behandelen de specifieke tools van elk.

Een vloeibaar kleurverloop met SVG en CSS

Op het web kan een SVG-filter het vervormen doen. feTurbulence genereert vloeiende ruis en feDisplacementMap gebruikt die om de pixels van een gestreept verloop rond te duwen. Een lage baseFrequency geeft brede, trage kronkels; een hoge scale duwt de banden verder.

<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>

Vloeibare kleurverlopen laten bewegen

Vloeistof is de ene verlopenstijl die bijna om beweging vraagt. Een gieting die langzaam wegdrijft in een webhero of een Story voelt levend. Houd de snelheid laag, alsof de verf dik is, en laat hem loopen zodat het eind bij het begin aansluit. De turbulentie live animeren is zwaar, dus een korte geëxporteerde videoloop is meestal de betere route. Een loop van 8 tot 15 seconden geeft een gieting genoeg tijd om te reizen zonder dat iemand de herhaling opmerkt, en een MP4 op 1080×1920 bedient Stories, Reels en telefoonachtergronden uit één bestand. Geanimeerde kleurverloopachtergronden behandelt lichtere benaderingen.

Woorden op een vloeibaar kleurverloop zetten

De Marks van Gradiently zijn levende achtergronden waarvan de materialen kunnen stromen en drijven, en elk verplaatst het rustigste deel van zijn oppervlak automatisch achter je woorden. Pro exporteert ze als GIF, MP4 of WebM, zodat een vloeibare look een Story of een herolus kan worden zonder een shader te bouwen. Lees tekst op een kleurverloop voor de kant van de leesbaarheid.