Vi siete mai chiesti come alcuni web designer hanno creato trame di sfondo così fantastiche? In realtà è molto più semplice di quanto tu possa pensare. Bastano pochi minuti e un singolo filtro Photoshop che probabilmente non hai mai usato.
Incuriosito? Continua a leggere per vedere le istruzioni passo passo per la creazione di trame piastrellabili su quasi tutte le immagini.
La via facile o la via difficile
Ci sono due modi in cui puoi iniziare a iniziare questo progetto. Puoi andare a prendere una texture pre-costruita o crearne una nuova da zero. Per questo tutorial voglio darti il valore dei tuoi soldi quindi prenderemo la strada maestra e creeremo la nostra trama iniziale da zero.
Tuttavia, se sei di fretta, prendi una texture libera da qualche parte e salta i primi passi. Ecco tre grandi risorse per iniziare (dal nostro articolo? 40 Amazing Resources for Design Freebies?).
Perso e preso
CG Textures
Texture King
Se vuoi qualcosa di più unico, apri Photoshop e segui.
Passaggio 1: nuova tela
Affiancare le immagini di sfondo può essere abbastanza facile da individuare quando sono piccole, quindi renderò le mie abbastanza grandi. Lo salveremo come JPG, quindi le dimensioni del file dovrebbero essere abbastanza piccole da poter essere caricate rapidamente sulla maggior parte delle connessioni. Se non sei d'accordo con le grandi dimensioni, rendi semplicemente le tue più piccole!
In Photoshop, crea un nuovo documento di 800 pixel per 800 pixel a 72 DPI e in RGB.
Ora riempi la tua tela con una gamma media a tinta unita scura. Puoi scegliere qualsiasi cosa tu voglia, ma sono andato con # 80ac4b.
Passaggio 2: crea un pennello personalizzato
Ho notato che le texture bokeh sembrano essere molto popolari ultimamente. Ho deciso di mostrarti come costruirne una. È un buon esempio perché creerà una trama che è un po 'più complicata da tessere rispetto alla maggior parte.
Per iniziare, crea un nuovo documento, afferra un pennello rotondo e fai clic una volta al centro della tela per creare un punto nero. Ho dato al mio un leggero bagliore esterno nero per aggiungere un po 'all'effetto bokeh. Ora vai su Modifica> Definisci preset pennello.
Assegna un nome al pennello, salvalo e torna all'altra area di disegno.
Ora seleziona quel pennello, vai alla tavolozza dei tuoi pennelli e applica le seguenti opzioni per dargli un piacevole effetto scatter.
Ste 3: Paint It
Ora che hai un bel pennello con cui lavorare, dipingi un po 'di bokeh. Non farti prendere troppo in giro, ricorda che più è complesso il difficile da inserire e fissare quando lo convertiamo in un pattern ripetuto.
Ecco lo schema che mi è venuto in mente:
Step 4: Offset
Questa è la parte in cui Photoshop prende il sopravvento e fa un trucco accurato che ci fa risparmiare un sacco di tempo. Prima assicurati che i tuoi livelli siano uniti in un documento piatto. Ora vai al menu e scegli Filtro> Altro> Offset.
Imposta l'offset orizzontale e verticale a metà delle dimensioni in pixel della tela e seleziona l'opzione di avvolgimento.
Ecco! Una trama di sfondo senza soluzione di continuità. Ok forse no. Tuttavia, gran parte del lavoro è stato fatto per noi e abbiamo solo bisogno di un po 'di pulizia per farlo funzionare.
Passaggio 5: pulizia delle giunzioni
Se stessimo lavorando con una trama fotografica, andavamo dentro e clonavamo lungo le cuciture per assicurarci che tutto fosse dignitoso. Tuttavia, qui abbiamo uno sfondo a tinta unita, quindi in realtà possiamo solo dipingere con un pennello verde.
Entra e dipingi completamente su tutte le aree problematiche. Va bene se distruggi qualche bokeh nel processo. Come puoi vedere nella foto qui sotto, ho appiattito un po 'le mie cerchie mentre riparavo la texture. Lo risolveremo nel prossimo passaggio.
Passaggio 6: aggiunta di un altro Bokeh
Ora prendi il pennello bokeh che hai creato e disattiva gli effetti di dispersione attivati in precedenza. Aggiungi un po 'di bokeh in più un clic alla volta dove ci sono degli spazi evidenti nel centro dell'immagine (stai lontano dai bordi!). Usa pochi strati e varie opacità per renderlo bello e sostituisci tutte le cerchie che hai incasinato con il passaggio precedente dipingendo sopra le loro parti.
Quando hai finito con questo passaggio, dovresti avere una grafica di sfondo bella e perfettamente piastrellabile. Ora salvalo come JPG, mantenendo le dimensioni del tuo file il più basso possibile mantenendo un'immagine nitida. Ho deciso di salvare il mio a 500px per 500px in modo da poter individuare facilmente il pattern ripetuto e cercare aree problematiche.
Quindi lo testeremo su un browser web per assicurarci che funzioni.
Passaggio 7: gettalo in una pagina Web
Il modo migliore per testare la trama è solo quello di creare una pagina web veloce. Creare un documento HTML vuoto e modellare il corpo con il seguente CSS:
Ora visualizzalo in anteprima nel tuo browser per vedere come hai fatto. Non preoccuparti se non è perfetto, torna indietro e modifica le aree che devono essere corrette. Come puoi vedere nell'immagine qui sotto, stiamo piastrellando abbastanza bene! Non male per solo pochi minuti di lavoro.
Textures organiche
Per essere esauriente, voglio anche mostrarti come funziona con una trama un po 'più tipica delle risorse che troverai online. Eccone uno che ho preso da Flickr.
Prima di tagliare i bordi, saranno troppo facili da individuare in uno schema ripetuto. Quindi esegui il comando offset come facevamo prima.
Come puoi vedere nell'immagine qui sopra, questa texture è così perfetta per questa tecnica che è difficile individuare le cuciture anche prima di fare qualsiasi pulizia! Ancora, vai lungo le cuciture con lo strumento clone o con il pennello di guarigione per assicurarti che le transizioni siano gradevoli e graduali.
Quando hai finito, salvalo e caricalo nel browser come prima per vedere se hai qualche brutta area.
L'immagine in alto mostra il mio prodotto finale. Passandoci una seconda volta con una trama molto più semplice con cui lavorare, sono riuscito a ridurre il mio tempo a circa due minuti!
Conclusione
Questo metodo è così semplice e veloce che non hai nessuna scusa per non dargli una possibilità la prossima volta che vuoi rendere più vivace lo sfondo del tuo web design. Creare le tue trame piastrellate invece di afferrare un ready made ti aiuterà a mantenere un aspetto del tuo sito unico e ti darà molta più libertà nel tipo di texture che desideri.
Facci sapere nei commenti qui sotto se sei riuscito a trovare una tessera decente usando questo metodo. Lascia un link al tuo prodotto finale in modo che possiamo verificarlo!