Non basta scegliere un'immagine e ripeterla all'infinito in uno sfondo per avere risultati esteticamente accettabili; in questo articolo vi illustro come ottenere delle buone immagini che possono essere ripetute senza notare o quasi la ripetizione...
Chiunque abbia frequentato il web da più di 10 anni ricorderà certamente certe pagine artigianali che avevano discutibili sfondi con pattern improponibili come marmo o legname che si ripetevano rozzamente con bordi definiti che davano un'idea di improvvisazione o peggio disturbavano parecchio, senza scomodare termini come user-experience che tanto di moda va oggi.
Quello che vi illustro in quest'articolo è un modo relativamente semplice di rendere perfettamente ripetibili immagini di pattern, in modo da non riconoscere la fine di un'immagine e l'inizio dell'altra; esistono diverse modalità per fare questo ed in rete si trovano un'infinità di tutorial più o meno complessi, ma il metodo che vi descriverò ha dalla sua quello di essere estremamente semplice e piuttosto rapido (una decina di passaggi) e di garantire risultati molto buoni e professionali; l'utilizzo dei pattern si è molto evoluto raffinato, grazie all'utilizzo di tecniche css, ma l'evoluzione dei display ad alta risoluzione (retina e affini) non consente sconti.
Il primo consiglio è di scegliere con cura l'immagine di partenza; con relativa poca fatica ed attenzione è possibile minimizzare gli interventi; per questo tutorial partirò da un'immagine ad alta risoluzione di uno sfondo arrugginito, non proprio un trionfo di stile ed eleganza, ma mi serviva qualcosa con cui partire:
Come creare un pattern
In photoshop andare sul menu edit (modifica in italiano) e selezionare define pattern; in questo modo creeremo un pattern che potremo utilizzare con strumenti come il secchiello
Lo sondo scelto si presenta con aree di chiaroscuro che mal si conciliano al loro affiancamento, infatti se procediamo ad effettuare uno sfondo utilizzando quest'immagine come pattern avremmo una ripetizione piuttosto netta dei bordi dell'immagine, decisamente brutta a vedersi.
Notare le ripetizioni che possiamo scorgere facilmente come righe verticali e, con più attenzione, anche come righe orizzontali. La prima opzione da scartare è armarsi di timbro clone ed operare a modificare i bordi dell'immagine originale; porterebbe a risultati scarsi, anzi rischierebbe di peggiorare il tutto; optiamo invece per operare in modo più profondo ed intelligente.
Duplichiamo il livello dell'immagine di partenza settando la sua opacità al 50%
Ora procediamo a modificare ulteriormente il livello effettuando due rotazioni una orizzontale e una verticale (edit-> Transform -> Flip Horizontal, edit-> Transform -> Flip Vertical), e procedendo a fondere il livello con quello sottostante (CTRL+E); l'immagine finale sarà questa:
Ora possiamo procedere ad effettuare di nuovo il tentativo di creazione pattern per utilizzarlo successivamente come sfondo; il risultato sarà questo:
Decisamente meglio della prima non trovate? Per un risultato ancora migliore è possibile attuare alcune elaborazioni ulteriori utilizzando sull'immagine di partenza strumenti come il timbro clone, sfocatura e sfumino in corrispondenza dei bordi ancora evidenti (bordo orizzontale superiore ed inferiore), ma sono cesellature, in quanto il più è fatto... ;)