Een achtergrond die zich aanpast aan tekst: zo maakt een Mark ruimte

Een Mark van Gradiently is een achtergrond die zich aanpast aan tekst. Omdat hij live wordt getekend in plaats van als plaatje opgeslagen, weet hij waar je woorden staan en herschikt hij zichzelf eromheen: het rustigste, best contrasterende deel van het materiaal schuift achter de tekst, kleuren bij de letters verdiepen of lichten op en drukke details komen tot rust. Er wordt niets overheen gelegd. Geen vakken, geen schaduwen en geen vervaging, dus je houdt de hele achtergrond en de woorden blijven leesbaar.

De gebruikelijke manieren om tekst leesbaar te maken, en wat ze kosten

Zet een kop op een levendig kleurverloop of een foto en een deel ervan verdwijnt. De standaardoplossingen werken allemaal door de achtergrond af te dekken, een vreemde uitkomst als de achtergrond de reden was dat je dit ontwerp koos.

Elke oplossing heeft op een vlak beeld zijn plek, en tekst op een kleurverloop als achtergrond behandelt ze eerlijk. Het verschil met een Mark is dat de achtergrond meedoet in plaats van afgedekt te worden.

Wat een Mark rond je woorden doet

1. 1

   Hij komt tot rust

   Het materiaal verschuift zodat je woorden op zijn rustigste deel landen. Licht dat achter de kop zou zitten, drijft naar de open ruimte eromheen.

2. 2

   Hij verandert van toon

   Dicht bij de letters schuift het palet naar een kleur die contrasteert met de letters: dieper achter lichte inkt, lichter achter donkere inkt.

3. 3

   Hij kalmeert

   Vervorming, drukte en fijn detail komen tot rust achter de woorden, zodat een sterke textuur nooit door een dunne letterlijn snijdt.

4. 4

   Hij buigt om de randen heen

   Patronen buigen licht af aan de rand van de woorden in plaats van er recht doorheen te lopen.

De reactie werkt hand in hand met Auto-inkt, dat per regel de lichte of donkere inkt van de Mark kiest. De achtergrond maakt de ruimte; Auto-inkt kiest de juiste kleur om hem te vullen.

Kiezen hoe sterk de achtergrond reageert

Jij bepaalt hoeveel de Mark meegeeft. Het paneel daarvoor heet Rond je woorden en begint met vijf niveaus.

Onder de niveaus zitten vier knoppen om bij te stellen: Toon bepaalt hoever het materiaal achter woorden tot contrast komt, Rust hoeveel vervorming en drukte kalmeren, Buiging hoeveel het patroon buigt aan de rand van de woorden en Bereik of het elke letter omarmt of rond het hele tekstblok reageert.

Waarom het in elk formaat telt

Een vlakke achtergrondafbeelding wordt één keer opgemaakt. Snijd hem bij tot een story en de heldere plek kan precies achter de kop landen. Een Mark wordt voor elk formaat opnieuw getekend, dus als een ontwerp van post naar story naar banner gaat, verhuizen de woorden mee en maakt de Mark opnieuw ruimte waar ze ook landen. Daardoor werkt één look in elk formaat.

Een eenvoudige versie van het idee in CSS

Op het web kun je het principe lenen met een gewoon kleurverloop: zet het diepste, rustigste deel van de achtergrond waar je tekst staat en houd de kleur aan de randen. Het volgt de woorden niet als de layout verandert, maar het wint het van een vak.

.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}

Wanneer je de reactie lager zet

Niet elk ontwerp wil maximale leesbaarheid. Een telefoonachtergrond heeft helemaal geen woorden, dus Uit is goed. Enorme sierletters, één woord over een poster, kunnen op zichzelf staan en zien er vaak beter uit met Onzichtbaar. Letterbehandelingen zoals Contour of Extrusie, behandeld in letterschrijfeffecten, dragen hun eigen contrast al. Bewaar de sterke niveaus voor de klussen die ze nodig hebben: kleine letters, lange details en alles wat in haast gelezen wordt.