Creazione e applicazione di trame naturali
Le trame rendono tangibile un sito web.
Forniscono al contenuto una relazione con il mondo fisico, un senso del luogo e una realtà a cui le persone possono relazionarsi.
Sfortunatamente, simulare le trame fisiche non è semplice come scattare una foto o eseguire alcuni filtri di Photoshop.
Bisogna mescolare il rumore casuale e gli schemi riconoscibili, cercando di raggiungere similitudini piuttosto che la pura ripetizione.
Qui, discuteremo di ciò che dà alle trame una qualità organica , e vedremo le tecniche per creare e applicare texture dall'aspetto naturale e piastrelle senza soluzione di continuità.
Sense of Touch via Sight
Una "trama" è la superficie di una sostanza fisica o di un oggetto. Come la vista, il nostro senso del tatto ci aiuta a capire gli oggetti. Ruvido, liscio, liscio e friabile sono trame e dicono a qualcuno di cosa è fatto un oggetto, dove è stato e se è collegato a qualcos'altro.
Sul Web, il senso del tatto di una persona è limitato al dispositivo di input. Ma non tutti i siti web devono "sentire" lo stesso. Basandosi sulla loro esperienza nella gestione di oggetti di uso quotidiano, le persone associano determinate apparenze a determinate trame. Nell'arte digitale, si potrebbe dire che la consistenza è come qualcosa "sente" per gli occhi di qualcuno.
Mentre i moderni editor di immagini semplificano la creazione delle texture, non tutte le texture sono vincenti. Creare una texture dall'aspetto naturale è un compito difficile che mescola pattern, caos e utilizzo per creare carattere.
Le trame naturali hanno una misura di casualità
Molte trame cadono tra due estremi: schemi regolari e rumore casuale. Le trame basate su pattern non fanno scuse per sembrare artificiali. Possono essere costituiti da un simbolo o testo noto e hanno sempre una disposizione prevedibile.
Sopra, campioni di motivi piastrellati.
All'altro estremo, le trame basate sul rumore incorporano una statica casuale. Sono facili da creare: Photoshop ha il proprio filtro "Aggiungi disturbo" e facile da affiancare perché manca di caratteristiche che sembrano strane quando vengono troncate.
Sopra, campioni di trame rumorose.
Le trame dall'aspetto naturale si collocano tra schemi regolari e rumore casuale.
Sopra, una serie di trame mescola modelli e rumore a vari livelli.
Anche se non c'è nulla di sbagliato in entrambi i casi, molte buone trame hanno le caratteristiche di entrambi. Nelle trame dall'aspetto naturale, le cuciture sono assenti o difficili da individuare e non è possibile identificare alcun motivo in tessere ripetute. Il loro aspetto è distinto ed efficace come qualsiasi modello regolare, ma meno sfacciato.
Le trame "organiche" hanno la giusta combinazione di rumore e pattern.
Caos razionale, rumore ordinato
Nel contesto della trama, "disturbo" si riferisce a variazioni irregolari in un gruppo di pixel. La grana della pellicola, gli artefatti di scarsa illuminazione e il dithering sono tre tipi comuni di rumore che, desiderabili o meno, si trovano spesso in immagini complesse.
Il rumore delle texture è ciò che rende le superfici naturali naturali. Ma non è semplicemente statico. Piuttosto, il rumore della trama bilancia il caos e l'ordine.
Sopra, una singola forma geometrica ripetuta molte volte crea un motivo. A sinistra, la forma varia solo nel posizionamento: le file non sono uniformi.
Gli altri scatti mostrano cambiamenti nell'angolazione, nella densità e nella dimensione della forma. Le trame fatte con queste variazioni di forma apparirebbero più caotiche, ma tutte le trame manterrebbero il carattere unico dell'originale, poiché le variazioni sono basate sulla stessa forma di base.
Certo, il risultato sembra ancora artificiale. Ovviamente le ripetizioni nelle trame basate sul rumore rovinano l'effetto perché le persone sono molto brave a riconoscere i modelli. Le trame nel mondo reale hanno variazioni di forma, colore e profondità.
Sopra, le trame del mondo reale mostrano rumore e ripetizione. La tela di juta, il granito rosa e la carta di cera hanno i loro schemi "regolari irregolari", ma ciascuno è ancora distinto dagli altri.
- Con le sue prevedibili linee orizzontali e verticali, la tela ruvida è la più regolare. Ma le linee non sono perfette. Lievi variazioni di tono e direzione mantengono il disegno dall'aspetto artificiale.
- I butterchi nel granito non sono distribuiti uniformemente. Vedere le irregolarità da vicino è difficile. La caratteristica diventa più evidente se osservata su una vasta area.
- La carta cerata ha il minor contrasto e la minima personalità. Alcuni ciuffi di ombre scure non fanno certo rumore casuale.
Ogni texture ha alcune caratteristiche (pockmarks, striature, macchie o ruscelli) che la rendono unica. Variazioni in queste caratteristiche lo fanno funzionare.
In alto, una trama metallica incorpora forme irregolari sovrapposte senza ordine particolare, ma conserva il suo carattere distinto. (Texture cortesia The Design Mag .)
Profondità e contrasto variano da mormorii a urla
Una variabile chiave di qualsiasi texture naturale è la profondità. Il "gobbo" di una trama fornisce un senso di tattilità più del colore o della dimensione. Ma la profondità aggiunge anche contrasto, che attira l'attenzione e potrebbe degradare la leggibilità.
Una texture urlante in background aumenterà il volume del contenuto stesso. A che punto è troppo rumoroso? Ciò dipende dalla forza del contenuto e dalla disposizione del pubblico.
Se una trama forte si adatta al soggetto, allora contribuisce all'umore. Ma se interferisce con la leggibilità, allora hai un problema.
Quale delle seguenti scritture è più facile da leggere? Quale texture riflette meglio il messaggio nella scrittura? Potrebbero esserci più di una risposta giusta, ma c'è solo una linea guida: quando si mescolano trame e contenuto, specialmente il contenuto testuale, assicurarsi che i bordi del contenuto rimangano visibili.
A proposito di bordi, per un realismo extra, prestare attenzione a dove finisce la trama. Le trame viscide o grintose, per esempio, non devono finire in una linea perfetta. Invece, lascialo filtrare o sbriciolarsi nella prossima superficie. Il trucco è pensare a tutto sulla pagina come una superficie con texture, anche se è un semplice colore solido.
Texture che diventano apparenti con fonti di luce
Non tutte le texture hanno bisogno di profonde crepe per apparire tangibili. Considera la vernice lucida. Senza creste o dossi, la sua lucida sensazione di smalto deriva dalla sua lucentezza.
Le trame sopra mostrano come la superficie di un oggetto non debba essere ruvida. Potrebbero non funzionare come tessere ripetute, ma la lucentezza, la riflessione e la traslucenza forniscono indizi visivi su come un oggetto possa essere percepito nel mondo reale.
The Sweet Spot Between Character and File Size
Un problema comune con qualsiasi texture naturale è come ripeterlo. Quando le persone individuano la ripetizione, ogni illusione della realtà viene distrutta. La soluzione più semplice è usare piastrelle più grandi e quindi meno. Con più variazioni, la ripetizione delle macchie diventa più difficile.
Come mostrato sopra, più le tessere sono ampie, minore è la possibilità che le persone individuino la ripetizione. Sfortunatamente, le tessere più larghe creano anche file più grandi, il che rallenta il caricamento della pagina. Per molte persone, un segno di caricamento in bilico uccide l'umore tanto quanto vedere il bordo di una piastrella.
Un'altra soluzione consiste nel ridurre le forme nella singola piastrella.
Come vediamo, la ripetizione di trame più fini ha meno possibilità di essere individuata. Ma più fine è la trama, meno carattere puoi dargli. La texture migliore sarebbe il rumore puro, ma questo non ti aiuta. Le trame naturali evocano sempre una superficie conosciuta.
Per riassumere, le trame naturali dovrebbero:
- Abbi abbastanza personalità da non essere solo rumore casuale. Ciò significa che le forme, o "ciuffi" di pixel, dovrebbero essere simili ma non identici.
- Avere una personalità sufficiente per stabilire una scena o uno stato d'animo, ma non così tanto da distrarre gli utenti dal contenuto. Ciò significa che nessun "grumo" distinto o altre caratteristiche dovrebbero emergere se osservato da lontano.
- Sii abbastanza casuale da evitare la ripetizione. Le caratteristiche della trama non devono formare uno schema che le persone possano individuare senza messa a fuoco.
Come facciamo tutto questo?
Creazione di trame in Photoshop
Molti programmi consentono ai designer di creare le proprie trame naturali. E il web non ha carenza di texture scaricabili. Creare la tua texture può essere un'esperienza gratificante e non violenta del copyright che contribuisce a un design davvero unico.
1. Creare un nuovo documento Photoshop con uno sfondo bianco. Per questo esempio lo faremo 600 x 300 pixel.
2. Riempi lo sfondo con il nero.
3. Disegna tratti bianchi casuali puntati nella stessa direzione generale. In questo esempio, stiamo usando un semplice pennello con bordi taglienti. Pennelli diversi generano risultati diversi. 
4. Usa lo strumento sfumino per spalmare i tratti in bordi sfocati casuali. Una punta sfocata (con una durezza inferiore a 30) funziona meglio. Tuttavia, la trama diventa distorta, i risultati migliori avranno molte sfumature di grigio. 
5. Vai su Filtro> Disturbo> Aggiungi disturbo e aggiungi statico in base ai tuoi gusti. Quindi Filtro> Altro> Passa alto . Insieme, questi aggiungono più toni di grigio (fondamentali per il passaggio 6) e un po 'di grinta. 
6. Creare un livello mappa sfumatura. Questo livello speciale applica il colore agli strati sottostanti in base al loro tono. A differenza dei gradienti normali, che colorano in pixel in base alla posizione, la sfumatura mappa il colore in luci, mezzitoni e ombre. Usa colori a bassa saturazione, in particolare verde, marrone e blu, per simulare i colori della natura. 
Sopra, il risultato dell'applicazione di una mappa sfumatura marrone e gialla.
7. Ritaglia una parte interessante della texture. Cerca di non utilizzare più della metà dell'intera immagine. Utilizzeremo il resto a breve. 
8. Importante: salva il riquadro ritagliato come un file separato. Avrai bisogno del file originale più tardi.
I dettagli mostrati qui sono volutamente grandi per dimostrare la tecnica, ma il risultato non è male per una trama. Ecco come funziona il processo in generale:
- Qualsiasi dimensione ritenuta appropriata farà. Le tessere più grandi avranno tratti più realistici ma saranno più grandi nelle dimensioni del file. Inizia sempre molto più grande del necessario, perché i bordi di una trama creata ex novo raramente corrispondono ai bordi della tela.
- Crea una serie di segni con lo stesso strumento o strumenti. L'essenza di una trama viene stabilita selezionando una tecnica simile o due e usandole più volte.
- Aggiungi un po 'di caos con i filtri di Photoshop.
- Aggiungi colore: mappe sfumate per enfatizzare la profondità e macchie di colori casuali per schizzi. Usa colori a bassa saturazione, in particolare verde, marrone e blu, per simulare i colori della natura.
Rendere le piastrelle senza soluzione di continuità
Di aspetto naturale o meno, la maggior parte delle trame e dei motivi dovrebbero essere senza cuciture. Cioè, i visitatori non dovrebbero essere in grado di vedere i bordi della tessera ripetitiva. Come facciamo questo? La tessera stessa fornisce la soluzione.
9. Sopra, l'immagine è divisa lungo le linee blu e rosse. Poiché i pixel lungo la divisione corrispondono già, spostandoli su entrambi i lati assicura che i bordi sinistro e destro corrispondano. Naturalmente, il problema esiste ancora, ma è più facile da risolvere.
10. Questa tessera quadrata proviene da un'immagine più grande. Sopra, la divisione della tessera è riempita con materiale dall'immagine completa. Ripeti il passaggio 8 per fissare la cucitura orizzontale (nella parte superiore e inferiore dell'immagine).
La proprietà finale
La semplice trama creata sopra ha un difetto lampante: perché è stata progettata per dimostrare il processo, le sue caratteristiche si ripetono troppo frequentemente.
Le caratteristiche di una texture naturale sono in genere meno di un decimo dell'intera piastrella. Cioè, per una tessera che misura 500 x 100 pixel, la piega più grande, il solco o altri segni misurerebbe 50 x 10 pixel o meno.
Le trame ben fatte richiedono un'altra caratteristica: il tempo. A corto di scaricare un freebie, devi prendere tempo per sviluppare e rifinire una grande trama. Ma non pensarci come un lavoro ingrato. Fa parte del processo, naturalmente.
Scritto esclusivamente per il Webdesigner Depot di Ben Gremillion. Ben è un freelance web designer chi risolve i problemi di comunicazione con un design migliore.
Come si creano trame dall'aspetto naturale? Condividi le tue idee nei commenti qui sotto.