Share
Ti sei mai chiesto come creare pattern di sfondo perfetti e senza interruzioni che funzionano su Photoshop e sul Web? Non cercare oltre perché oggi lo scomporremo per te - passo dopo passo. Creerai i tuoi pattern di sfondo in pochissimo tempo!
Ciao a tutti! Oggi continuiamo la nostra serie di tutorial sulla creazione di pattern di sfondo che possono essere utilizzati sul web (e durante la fase di progettazione) con la nostra quarta edizione: Textures di tessuto sintetico. Vedremo come creare modelli di tessuto credibili e compatibili con le tessere iniziando con un semplice approccio alla vaniglia e adottando gli stessi principi per creare versioni avanzate.
Il nostro obiettivo è semplice: Insegnare a chiunque come creare pattern di sfondo destinati al web (ma che possono anche essere usati facilmente durante il processo di progettazione). Saremo "programma agnostici", il che significa che la maggior parte dei suggerimenti funzionerà sia in Photoshop che in Fireworks.
Assicurati di controllare il resto della serie, inclusi Carbon Fiber, Noisy Backgrounds e Intro to Patterns post!
Oggi è il quarto giorno della nostra serie, ma vale la pena ricordare che tutti questi tutorial sono "standalone", il che significa che dovresti essere in grado di riprendere direttamente dalla Parte 4, anche se ti sei perso le prime due parti.
Lo schema che tratteremo oggi è come creare un'efficace "trama del tessuto sintetico" che può essere utilizzata come pattern in Photoshop e uno sfondo di piastrellatura sulle tue pagine web. Lo faremo in 4 passaggi:
Negli ultimi mesi, le trame sottili e rumorose sono state molto apprezzate dai web designer (consulta il nostro tutorial su come crearle qui). Tuttavia, nelle ultime settimane ho notato sempre più trame sonore "avanzate"? il che vuol dire che le persone vanno oltre il semplice approccio "add noise pattern" e provano effetti più funky. Ci sono due cose principali che vorrei sottolineare:
1: Le trame che copriremo oggi sono tutte create al 100% in Photoshop. Tratteremo come creare trame fotografiche nel prossimo tutorial.
2. Queste trame dovrebbero essere sottili e usate con parsimonia. Niente urla il 1995 come una texture di sfondo fugace usando i filtri di Photoshop dalle mani pesanti.
Tutto apposto? sei stato avvertito. Facciamolo!
Questa trama introduttiva è incredibilmente semplice da creare, ma può essere utilizzata per ottenere risultati dall'aspetto professionale se usata correttamente.
Ad esempio, controlla la trama dietro il piè di pagina del tema WordP 'qop':
Non male vero? Iniziamo con una tela bianca. Imposta la dimensione a 400 x 400 per adesso. La dimensione può essere modificata in seguito, ma non vuoi che sia troppo piccola perché avremo bisogno di un po 'di spazio intorno ai bordi per lavorare con.
Crea un nuovo livello e riempilo con Nero colore.
Vai avanti e chiamalo Black Layer solo per motivi organizzativi.
Ora vogliamo applicare un filtro rapido per stabilire le fondamenta della nostra trama della linea di massima. Mentre sei sul livello Nero, applica il seguente filtro: Filtri> Schizzo> Carta ad acqua.
Puoi regolare le impostazioni finché non hai il tuo effetto personalizzato, ma la texture demo utilizza le seguenti impostazioni:
Impostare la modalità di fusione del livello Nero su Schermo in modo che solo le linee bianche mostrano attraverso. A questo punto puoi anche aggiungere un rettangolo di sfondo per stabilire un colore per la tua texture. Si noti che è possibile cambiare il colore in qualsiasi momento in questo processo.
Non possiamo davvero vedere altro che bianco ora? quindi aggiungiamo un semplice rettangolo colorato e lo chiamiamo Colore sfondo. Ho usato il colore # 242d34, ma sentiti libero di usare qualsiasi cosa desideri.
Ah, molto meglio! Ora possiamo vedere la nostra trama. È un po 'piatto però. Quindi, aggiungiamo un po 'di profondità alla nostra trama: lo faremo creando un nuovo livello e riempiendolo con il nero (di nuovo). Dai un nome a questo livello "Bianco" (vedrai perché nei passaggi successivi).
Ora stiamo andando ad aggiungere il Filtri> Schizzo> Carta ad acqua effetto di nuovo, ma questa volta vogliamo aggiungere molto più luminosità e contrasto alle impostazioni:
Ora, basta invertire i colori per quello stesso livello (Immagine> Regolazioni> Inverti) e impostare la modalità di fusione su Moltiplicare. Riduci l'opacità dello strato a circa il 90% in modo che l'effetto non sia troppo abrasivo.
Whallah! Non troppo malandato, giusto?
Il prossimo passo è quello di ritagliare i bordi di questo modello perché Photoshop tende ad avere un po 'di mano pesante attorno ai bordi. Ritaglia in circa 50 px da ciascun lato usando il raccolto strumento.
Perché l'abbiamo raccolto? Perché Photoshop tende ad avere un po 'di mano pesante attorno ai bordi del filtro Water Paper, il che significa che se proviamo a farlo diventare uno schema, otterremo evidenti "cuciture". Ritagliarsi dal bordo ci aiuta ad eliminare queste cuciture visibili quando usiamo questo come modello o sul web.
Il passaggio finale è semplice: basta impostare il colore di sfondo sul colore desiderato, regolare l'opacità di ciascun livello del filtro fino ad ottenere il livello desiderato di texture, quindi trasformarlo in un motivo (Modifica> Definisci modello). Tutto fatto!
E, il prodotto finale dovrebbe assomigliare a questo quando usato come modello:
Questo potrebbe essere un po 'troppo drammatico in termini di contrasto da usare (di solito compongo l'intensità per i tutorial per rendere evidenti gli effetti), quindi sentitevi liberi di giocare con l'opacità dei livelli di texture per farlo "giusto" per il tuo particolare design.
Per personalizzare questo effetto: Le cose principali che potresti essere interessato a mettere a punto sono le "lunghezze delle fibre" del filtro Carta in acqua e il colore di sfondo. Inoltre, può anche essere divertente scherzare con la scala del modello finale. Dopo aver ritagliato, prova a ridimensionare l'intera immagine per modificare la densità della texture (e usa lo strumento Contrasta per modificare la nitidezza).
Questa prossima trama è probabilmente la più semplice di tutte e quattro oggi. Tre semplici passaggi completeranno l'effetto:
Innanzitutto, crea un nuovo documento (400 x 400) e disegna un rettangolo colorato sul documento. Lo useremo in seguito per regolare il colore del modello finale.
Successivamente, crea un nuovo livello, inseriscilo con il nero e aggiungi il filtro: Filtro> Texture> Texturizer. Usa le seguenti impostazioni:
Imposta la modalità di fusione su quel livello su Schermo.
Quindi, crea un nuovo livello, riempilo con Bianco questa volta. Aggiungi lo stesso filtro esatto: Filtro> Texture> Texturizer. Usa le seguenti impostazioni:
Ora basta impostare la modalità di fusione di quel livello su Color Burn in modo da poter vedere attraverso il colore di sfondo.
Infine, adattiamo il colore dello sfondo a qualcosa di più sottile. Nota che mentre regoli il colore di sfondo, potresti anche voler regolare l'opacità e i metodi di fusione dei due strati superiori finché l'effetto non è come desideri.
Il modello finale come mostrato nella demo:
Puoi creare il modello da qui (Modifica> Definisci motivo), oppure puoi giocare con il colore di sfondo, opacizzare i livelli dei filtri e ritagliare fino a ottenere un disegno che è senza cuciture e adatto al tuo disegno.
Questa trama successiva è un po 'più avanzata, quindi fai particolare attenzione se stai cercando di ricreare questo effetto.
Inizia con un nuovo documento (400 x 400) e inizia disegnando un rettangolo blu (# 2b4891) come sfondo. In realtà puoi scegliere qualsiasi colore, ma siamo abituati a vedere il blue denim, quindi per ora continueremo a farlo.
Quindi, crea un nuovo livello e Riempire con il 50% di grigio (puoi usare il tasto di scelta rapida Maiusc + Backspace / Elimina). Dagli il nome di Horizontal Layer per ora.
Quindi, imposta il Primo piano e sfondo colore al bianco e nero predefinito premendo D. Dobbiamo aggiungere le basi per il nostro modello di denim. Sul nostro livello grigio, applica il filtro: Filtro> Schizzo> Motivo mezzitoni.
Usa le seguenti impostazioni:
Questo dovrebbe produrre un modello di linea di base? ma il denim è "sfocato", quindi vorremmo rovinare un po 'usando un altro filtro: Filtro> Pixelate> Mezzotinta. Imposta il tipo su Punti fini.
Ora crea una copia duplicata di questo livello (Cntrl + J) e chiamarlo "Vertical Layer".
Usa lo strumento Trasformazione libera (Cntrl + T) per ruotarlo di 45 gradi e ridimensionarlo abbastanza lontano in modo che corrisponda a ogni angolo del nostro documento. Mi è capitato di ridimensionarlo del 145% nel caso steste cercando di far combaciare esattamente il mio.
Non preoccuparti se ridimensionare il pattern in modo così grande creerà alcune imperfezioni del raster. In realtà vogliamo quelli. In effetti, vai avanti e aggiungi ulteriore sfocatura (Filtro> Sfocatura gaussiana impostato su 0.3) su entrambi i livelli e sul primo livello non trasformato.
Infine, imposta la modalità di fusione sul livello diagonale su multiplo con 70% di opacità -- e impostare la modalità di fusione sul livello della striscia orizzontale su Luce soffusa con 60% di opacità.
Questo completa l'effetto denim! Puoi armeggiare con i colori dello sfondo e poi trasformarlo in un motivo (Modifica> Definisci modello).
Nota: Se noti delle cuciture evidenti nel tuo schema, avrai bisogno di giocare un po 'con il ritaglio. Il trucco qui è semplicemente assicurarsi che non ci siano linee innaturalmente brillanti o scure vicino a nessuno dei bordi. Prova alcuni diversi tagli fino a quando il modello è senza soluzione di continuità.
Se hai seguito la demo alla lettera, puoi semplicemente ritagliare l'altezza del documento a 400px per 396px. Ciò renderà remote le cuciture (sotto):
Whallah! Come funziona? Se ti ricordi di nuovo nel nostro primo tutorial di pattern, l'idea generale qui è che i pochi pixel finali sul lato destro e inferiore del nostro pattern avranno sempre bisogno di collegarsi al lato sinistro e all'inizio del documento. Ritagliare quei 4px in questo caso aiuta la corrispondenza in basso verso l'alto. Visto che la destra e la sinistra sono già abbinate, siamo a posto!
Tutto apposto! Siamo arrivati alla trama finale della giornata. Ormai abbiamo impiegato alcune tecniche piuttosto complicate, quindi questo passaggio finale sembrerà piuttosto semplice.
Creare un 200 x 240 documento. Vai avanti e trascina i tre livelli grezzi che abbiamo utilizzato per il nostro modello denim (i due livelli di texture + il colore di sfondo).
Raggruppa questi strati insieme (Ctrl + G) e impostare una maschera larga 50px sull'intera cartella del gruppo. Se non hai ancora creato una maschera di gruppo come questa, è facile: basta usare il Marquee rettangolare strumento di selezione per disegnare una selezione di 50 px che riempie il documento dall'alto verso il basso (guarda il Informazioni pannello per verificare la tua misura). Quindi premi il pulsante "Aggiungi maschera vettoriale" nella parte inferiore del pannello dei livelli:
Perché 50px? Perché con un documento di 200 px di larghezza, vorremmo inserire 4 strisce di 50 px.
Quindi, duplica questo gruppo di livelli, spostalo a destra del primo gruppo, quindi (facoltativamente) ruotalo orizzontalmente per creare un modello diagonale opposto.
Per aggiungere un po 'di contrasto nelle strisce, cambia semplicemente il colore di sfondo (le modifiche più sottili sono le migliori qui) a qualcosa di un po' più luminoso o più scuro del colore originale).
Infine, duplica ENTRAMBI i nostri gruppi di strisce e spostali nello spazio vuoto del nostro documento.
Siamo ancora abbastanza informati - per aggiungere un po 'di interesse visivo, deselezioniamo le maschere di gruppo per queste ultime due strisce, quindi spostiamo i 3 strati di denim all'interno di circa 100px per creare una striatura leggermente diversa. Il risultato finale non è drammaticamente diverso, ma le persone in cerca di cuciture nel modello verranno eliminate da questo ultimo passaggio.
Congratulazioni! Selezionare Modifica> Definisci modello, e inizia a usarlo nei tuoi progetti. Come ultimo pensiero, puoi ovviamente fare molto di più aggiungendo le tue personalizzazioni. L'esempio seguente cambia i colori in una tonalità marrone, quindi ha anche ridotto la "lavorazione" del disegno ridimensionando le dimensioni dell'immagine. Guarda il nostro ultimo esempio:
Tutto apposto! Quindi ora dovresti avere una buona conoscenza di base per creare le tue variazioni personalizzate di questi modelli in fibra sintetica - giocare con i livelli, i colori, le dimensioni dei documenti e altro ancora per aggiungere il tuo tocco personale a questi. Diamine, puoi persino invertire l'ombreggiatura per creare motivi sottili e chiari.
Nelle prossime parti di questa serie ti mostreremo come creare alcuni modelli strutturali basati sulle foto, più modelli basati sulla forma, modelli trasparenti e molto altro ancora in futuro.
Iscriviti o ricontrolla sul sito per vedere tutti gli aggiornamenti di questa serie man mano che accadono!
Accentsconagua