Uno sfondo che si adatta al testo: come un Mark fa spazio

Un Mark di Gradiently è uno sfondo che si adatta al testo. Poiché è disegnato dal vivo e non salvato come immagine, sa dove sono le tue parole e si riorganizza intorno a loro: la parte più calma e più contrastata del materiale si sposta dietro il testo, i colori vicino alle lettere si scuriscono o si schiariscono e i dettagli fitti si distendono. Niente viene sovrapposto. Non ci sono riquadri, ombre né sfocature, quindi conservi l’intero sfondo e le parole si leggono lo stesso.

I modi consueti per rendere leggibile il testo e cosa costano

Metti un titolo su un gradiente vivace o su una foto e una parte sparisce. Le soluzioni standard funzionano tutte coprendo lo sfondo, un esito strano quando lo sfondo era il motivo per cui avevi scelto il design.

Ogni soluzione ha il suo posto su un’immagine piatta, e il testo su uno sfondo sfumato le passa in rassegna con onestà. La differenza con un Mark è che lo sfondo partecipa, invece di essere mascherato.

Cosa fa un Mark intorno alle tue parole

1. 1

   Si deposita

   Il materiale si sposta perché le tue parole finiscano sulla sua parte più calma. La luce che sarebbe stata dietro il titolo scivola nello spazio libero intorno.

2. 2

   Cambia tono

   Vicino alle lettere, la palette scivola verso un colore che contrasta con il testo: più scuro dietro un inchiostro chiaro, più chiaro dietro un inchiostro scuro.

3. 3

   Si calma

   Distorsione, movimento e dettaglio fine si distendono dietro le parole, così una texture forte non taglia mai un tratto sottile.

4. 4

   Si piega ai bordi

   I motivi si incurvano leggermente al margine delle parole invece di attraversarle dritti.

La reazione lavora a braccetto con l’inchiostro automatico, che sceglie l’inchiostro chiaro o scuro del Mark per ogni riga. Lo sfondo fa spazio; l’inchiostro automatico sceglie il colore giusto per riempirlo.

Scegliere quanto risponde lo sfondo

Decidi tu quanto il Mark cede. Il pannello si chiama Intorno alle tue parole e parte con cinque livelli.

Sotto i livelli ci sono quattro manopole per la rifinitura: Tono stabilisce quanto il materiale si deposita dietro le parole per il contrasto, Calma quanto distorsione e movimento si distendono, Piega quanto il motivo si incurva al margine delle parole e Raggio se aderisce a ogni lettera o risponde intorno a tutto il blocco di testo.

Perché conta a ogni formato

Un’immagine di sfondo piatta è impaginata una volta sola. Ritagliala per una storia e il punto luminoso può finire proprio dietro il titolo. Un Mark è disegnato da capo per ogni formato, quindi quando un design passa da un post a una storia a un banner, le parole si spostano e il Mark fa di nuovo spazio ovunque finiscano. È questo che permette a un solo look di funzionare a ogni misura.

Una versione semplice dell’idea in CSS

Sul web puoi prendere in prestito il principio con un semplice gradiente: metti la parte più scura e calma dello sfondo dove sta il testo e tieni il colore ai bordi. Non seguirà le parole quando cambia il layout, ma è meglio di un riquadro.

.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%
  );
}

Quando abbassare la reazione

Non ogni design vuole la massima leggibilità. Lo sfondo di un telefono non ha parole, quindi Disattivo è giusto. Un grande lettering da esposizione, una sola parola su un poster, può reggersi da solo e spesso sta meglio con Invisibile. I trattamenti di lettering come Contorno o Estrusione, trattati negli effetti di lettering, portano già il proprio contrasto. Tieni i livelli forti per i lavori che li richiedono: caratteri piccoli, dettagli lunghi e tutto ciò che si legge di fretta.