Come trasformare una texture in uno sfondo piastrellato senza soluzione di continuità

Gli sfondi piastrellati sono fantastici sia per gli sfondi dei siti Web che per tutti i tipi di lavori di Photoshop. Sono particolarmente utili quando si lavora con texture in cui è necessario uno sfondo complessivo più ampio rispetto all'immagine piccola con cui si deve lavorare. In questo breve tutorial ti porterò a prendere una texture e a trasformarla in un'immagine di sfondo pronta per la piastrellatura senza interruzioni. È una tecnica utile e utile da sempre. Abbiamo bisogno di questa tecnica per l'altro tutorial di oggi - Come si può mischiare un layout semplice 'n' con modelli, foto e sfondi.

Questo post è il giorno 9 della nostra sessione di Web Design. Sessioni creative "Sessione 8 ° giorno

Perché non puoi semplicemente affiancare una vecchia foto

Quindi in questo tutorial vogliamo creare uno sfondo piastrellato di una trama di erba. C'è una fantastica foto di erba su Flickr di 100kr

che possiamo usare. Tuttavia, se si affianca l'immagine così com'è, il risultato non è molto buono. Come puoi vedere sopra, è molto chiaro dove si ripete l'immagine e le zone scure sembrano piuttosto strane. Quindi, per trasformare quella foto in uno sfondo affiancato, è necessario rimuovere prima eventuali irregolarità e quindi fare in modo che i bordi si fondano l'uno con l'altro.


Passo 1

Quindi il primo passo è prendere l'immagine principale e poi ritagliarla in una sezione che non ha le patch d'angolo veramente scure. Qualcosa come la scatola mostrata sopra.


Passo 2

Ecco il nostro segmento. L'ho effettivamente ridotto un po 'in modo che la texture non sia così sovraffollata. Ora, sebbene sia per lo più uniformemente colorato, potremmo fare con i bordi alleggeriti. Più siamo in grado di ottenere l'immagine, meglio è che piccole differenze sono evidenti quando lo sfondo è affiancato.

Quindi prendi semplicemente il Dodge Tool (O) e con una grande spazzola morbida, basta spazzolare delicatamente i bordi sinistro e destro per schiarire le ombre. Non esagerare perché l'erba sembrerà sbiadita.


Passaggio 3

Come puoi vedere sopra l'erba sembra molto più uniformemente colorata. Ma c'è una piccola foglia in alto a sinistra, che sarà un regalo morto se la stessa foglia appare più e più volte, quindi dovremmo sbarazzarcene. Per fare questo prendi il Strumento patch (J) e disegna una forma attorno alla foglia, quindi trascina con il mouse per ottenere un'area vicina a cui applicarla. (Si noti che lo strumento Patch deve essere impostato su Origine e non su Destinazione, altrimenti lo si utilizza in modo leggermente diverso)


Passaggio 4

Quindi il nostro background è abbastanza bello e uniforme ora. Abbiamo solo bisogno di far sanguinare gli spigoli l'uno nell'altro. Quindi duplica lo strato di erba. Quindi sposta il primo livello a sinistra e il secondo livello a destra. Continuate a farlo finché non sarete in grado di vedere entrambi i livelli con uno spazio vuoto in mezzo. Ora riuniscili in modo che il bordo più a destra del primo strato tocchi il margine più a sinistra del secondo livello.


Passaggio 5

Qui puoi vedere i due strati quasi a contatto. Riuniscili in modo che non ci siano bianchi in mezzo e unisci i due livelli in uno solo.


Passaggio 6

Ora utilizziamo nuovamente lo strumento patch per tracciare una forma ruvida attorno al bordo in cui i due strati si incontrano, quindi usa il mouse per trascinare un'area vicina per ricollegarlo.


Passaggio 7

Lo strumento patch rende questo tipo di operazione veramente facile, soprattutto con uno sfondo rumoroso come questa erba. Come puoi vedere, a meno che tu non guardi con attenzione non è evidente dove si trova la linea di fusione. Se lo volessi, potresti entrare nei dettagli e clonare i singoli fili d'erba, ma questo va bene per i nostri scopi.


Passaggio 8

Ora ripetiamo lo stesso processo verticalmente. Quindi duplica il livello e spostane uno in basso e uno in alto finché i bordi inferiore e superiore non si incontrano. Unisci il livello e usa lo strumento di correzione per sbarazzarti del bordo.


Passaggio 9

E ora siamo pronti per la piastrellatura!

Il motivo per cui questo funzionerà è che siamo riusciti a sbarazzarci di quei bordi, i nuovi bordi del documento sono già allineati perché abbiamo spostato gli strati a destra e sinistra in modo che il bordo destro di questo documento sia effettivamente è il prossimo pixel lungo dal bordo sinistro.


Passaggio 10

Quindi premere CTRL-A per selezionare tutto e andare a Modifica> Definisci modello.


Passaggio 11

Ora diamo un nome al modello


Passaggio 12

Ora su qualsiasi livello se selezioni le opzioni di fusione e spunta la casella Sovrapposizione modello puoi scegliere dal tuo set di modelli personalizzati come mostrato, incluso quello di erba che abbiamo appena creato. Nell'immagine qui sopra puoi vedermi applicare il modello su uno sfondo di un sito web.

Ovviamente dovresti anche salvare l'immagine del pattern come PSD o JPG stesso poichè potresti averne bisogno come immagine standalone. Ad esempio, se dovessi utilizzarlo come immagine di sfondo in un documento HTML, avresti bisogno della singola immagine JPG, non di un "Pattern" di Photoshop.


Finito!

Ecco la nostra erba piastrellata. Come puoi vedere, c'è un po 'di una patch scura che dà via, ma visto che userò questo come sfondo per un sito web non è un grosso problema dato che ci saranno cose sopra le righe. Tuttavia si potrebbe facilmente tornare indietro e correggere quel punto per renderlo più semplice.


Aggiorna - Filtro> Altro> Offset

Grazie ai commentatori che hanno sottolineato che esiste un modo più semplice per compensare lo sfondo usando un filtro! Basta andare su Filtro> Altro> Offset e selezionare una quantità di pixel per spostare l'immagine sia orizzontalmente che verticalmente. Grazie per il suggerimento ragazzi! Imparo qualcosa di nuovo ogni giorno :-)

Questo post è il giorno 9 della nostra sessione di Web Design. Sessioni creative "Sessione 8 ° giorno