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 seconda edizione. Vedremo come creare i modelli di "disturbo" sempre più popolari che tanti siti Web hanno utilizzato ultimamente. Assicurati di controllare il primo post della serie se ti sei perso!
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.
Oggi è il secondo 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'effettiva "trama del rumore" che può essere utilizzata come pattern in Photoshop e uno sfondo di affiancamento sulle tue pagine web. Lo faremo in 4 passaggi:
Pronto? Facciamolo!
Il primo passo nel tutorial di oggi è probabilmente il più cruciale, perché stiamo impostando gli elementi fondamentali. Esistono molti modi diversi per creare questi modelli di rumore? ma ti mostrerò uno dei migliori (e più flessibili!) metodi per risparmiare frustrazione e mal di testa lungo la linea.
Inizia aprendo un nuovo documento. Le dimensioni non contano molto (stiamo usando 200px per 200px nella demo), ma è meglio tenerlo sopra 75px per garantire che il tuo pattern di rumore sia credibile aleatorio. I documenti più piccoli possono sembrare come "tessere ripetute": i documenti che sono molto più grandi aumentano le dimensioni del file senza molto valore aggiunto.
Aggiungiamo una forma rettangolare di base e la chiamiamo "Base Color" (l'organizzazione renderà la vita più facile in seguito!). Puoi usare qualsiasi colore desideri (abbiamo usato #EBEBEB), ma assicurati che il rettangolo occupi l'intero spazio.
Ora apriamo un nuovo layer e lo chiamiamo "Noise Layer". È solo un livello vuoto in questo momento?
Usando lo strumento "Perimetro rettangolare" (M), disegna una selezione sull'intero documento mentre selezioni il livello di rumore. Quindi seleziona "Riempi?" Dal menu di scelta rapida (fai clic con il pulsante destro del mouse sopra la selezione o è anche sotto il pannello Modifica) e riempilo con il colore Bianco.
Mancia: Quindi vogliamo convertire il "Noise Layer" in uno Smart Object. Puoi farlo facendo clic con il pulsante destro sul livello e selezionando "Converti in oggetto avanzato" o selezionando "Converti per filtri avanzati" dal menu Filtri.
Perché renderlo un oggetto intelligente? Perché questo ci permetterà di mantenere la capacità di modificare l'intensità della trama del rumore più tardi! Potrebbero esserci dei passi in avanti in cui dovremmo finire per appiattire la trama, ma è sempre meglio mantenere le cose modificabili il più a lungo possibile.
Bene, oggetto intelligente in mano, vogliamo aggiungere la trama del rumore.
Infine, imposta il metodo di fusione sul livello del rumore su "Moltiplica" in modo che siano visibili solo i pixel del disturbo più scuro. Ora puoi cambiare il colore sul livello di base per diversi colori rumorosi.
Whallah! Ora abbiamo stabilito gli elementi fondamentali per il nostro modello di rumore di base?
? e quella sarebbe la fine di questo umile tutorial se fossimo pigri?
Nei prossimi passi mostreremo come invertire, alterare e aggiungere profondità e vivacità credibili al modello di rumore per far sì che si distingua davvero dalla confezione!
Prima di andare avanti: Vai avanti e raggruppa i tuoi strati (il livello base e il livello del rumore) usando Ctrl + G per creare una cartella di livelli. Duplicalo una volta e nascondi l'originale in modo da averne sempre una copia. Per ogni nuovo passaggio, creeremo un nuovo gruppo duplicato. Questa è solo una buona abitudine di base perché garantisce di avere sempre un backup del nostro modello di base.
Bene, trasformiamo questo schema di rumore in qualcosa di oscuro e delizioso ora. Ti mostrerò come creare un pattern di rumore invertito che sembra avere una sottile scintilla.
Inizia con una copia del gruppo rumore originale (vedi la fine del passaggio 01). La prima cosa che vogliamo fare è rendere il colore di sfondo nero, quindi andare avanti e farlo sul tuo livello base.
Quindi, poiché il nostro pattern di rumore è composto solo da pixel "scuri", dobbiamo essenzialmente invertirlo. Sfortunatamente, non possiamo farlo come un effetto "Smart", quindi abbiamo bisogno di appiattire il pattern di rumore. Assicurati di avere il livello di intensità impostato su ciò che desideri, quindi "Rasterizza" il livello. Puoi farlo facendo clic con il pulsante destro sul livello e selezionando Rasterizza dal menu di scelta rapida o dal menu di scelta rapida Livello> Rasterizza> Rasterizza livello menu.
Ora che abbiamo sostanzialmente appiattito il nostro schema di rumore, vogliamo invertirlo. Fai questo da "Immagine> Regolazioni> Inverti"pannello.
Cosa c'è che non va? Non puoi più vedere il Noise Pattern?
Dovremo apportare alcune lievi modifiche per vedere il nostro pattern di rumore invertito. Per prima cosa, imposta la modalità di fusione sul livello del rumore su "Schermo".
Quindi, regola i "livelli" del modello di rumore (Ctrl + Alt + L? O Immagine> Regolazioni> Livelli).
Metodo alternativo: Puoi anche semplicemente aggiungere un livello di regolazione per i livelli (Livello> Nuovo livello di regolazione> Livelli). Potresti preferirlo in questo modo se vuoi modificare l'intensità in un secondo momento.
Presto! Ora abbiamo un modello di rumore scintillante e invertito. Ovviamente, puoi adattarlo al contenuto del tuo cuore - renderlo più scuro e più sommesso - o più luminoso e più intenso. Puoi anche cambiare il colore del livello di base in blu scuro o rosso per ottenere altri effetti. Andare fuori di testa!
Ricorda - salvate salvate come "Pattern" in Photoshop selezionando "Modifica> Definisci modello". Fai questo e più tardi sarai in grado di utilizzare questi modelli più e più volte. Puoi anche salvare i tuoi modelli come librerie e condividerle con amici e colleghi.
In seguito ti mostreremo come aggiungere profondità e vivacità ai tuoi schemi acustici?
Aggiungiamo un po 'di colore e vivacità al nostro schema di rumore ora. Vale la pena ricordare che nei passaggi seguenti useremo alcune tecniche generali? non è necessario seguirli alla lettera, è sufficiente tenere a mente ognuno di essi quando si va a creare i propri schemi personalizzati.
Inizia aggiungendo del colore al tuo livello base.
Ora crea una copia del tuo livello di rumore e imposta entrambi i metodi di fusione su Color Burn. Il livello duplicato ci aiuterà a rendere più scuro lo strato inferiore. Ci darà anche la possibilità di spostare l'opacità su una scala più fine in seguito.
Crea un'altra copia, ma questa volta lo rasterizziamo e lo invertiamo (vedi Passaggio 2, Black Noise, per i dettagli se ti sei perso).
Imposta la modalità di fusione sul nostro nuovo livello su Schermo. Vogliamo anche aggiungere un nuovo livello di regolazione (Livelli> Nuovo livello di regolazione> Livelli) in modo da poter controllare l'intensità del rumore della luce.
Ora creiamo un leggero spostamento spostando lo strato di luce dal livello scuro (1px su e 1px verso sinistra) usando lo strumento Sposta (V) e la tastiera.
Successivamente, aggiungi una maschera di livello sopra il tuo livello di rumore leggero, in modo che possiamo giocarci.
Usando un pennello approssimativamente strutturato (impostato su circa 130px e il colore Nero), vogliamo essenzialmente mascherare un po 'del nostro leggero rumore dipingendo lontano dalla Maschera di livello. Un colpo di pennello dovrebbe fare il trucco, ma usare il proprio giudizio. L'idea qui è di creare un modello approssimativo e casuale.
Imposta l'opacità del livello su circa il 45%. Puoi fare meno o più secondo le tue preferenze? stiamo solo cercando di abbassare un po 'l'intensità del contrasto.
Ora abbiamo un bel modello con un po 'di profondità. Se non stai scavando la profondità, puoi armeggiare con questo semplicemente capovolgendo il livello di rumore della luce orizzontalmente per rimuovere l'offset e creare un semplice effetto "scintilla".
Alacadabra! Non male, eh? Ecco quale sarà la texture finale:
Suggerimento bonus: Se noti delle "cuciture" sottili quando usi il tuo nuovo motivo, prova a ritagliare il tuo modello originale di 5 o 10 pixel su tutti i bordi. Otterrai spesso cuciture se Photoshop decide di raggruppare i pixel più scuri attorno ai bordi del tuo Noise Layer, in modo tale che il semplice ritaglio dei bordi risulti in un modello pulito e senza cuciture.
I prossimi due passi andranno rapidamente. A questo punto abbiamo stabilito i principi fondamentali che abbiamo bisogno di creare praticamente qualsiasi modello di rumore che possiate immaginare - quindi vi mostreremo come si presenta questa texture quando inizi a giocare con il Colore e l'Intensità del contrasto. Diamo un'occhiata alla versione verde?
Inizia con una copia del gruppo di livelli Blue Noise. Vai avanti e cambia il colore del livello di base in verde.
Noterai una cosa divertente quando cambierai i colori? il contrasto proveniente dal rumore tende a passare da sottile a drammatico con colori diversi. Ciò significa essenzialmente che vorremmo regolare l'opacità dei livelli di rumore per tenere conto dell'intensità di spostamento. Per questo non esiste una regola hard-set: basta giocare con le impostazioni di opacità fino a ottenere l'aspetto desiderato.
Infine, ecco il modello di rumore finito:
Lo menzionerò ancora una volta per essere sicuro: se noti delle cuciture sul tuo modello quando usi una forma più grande o sul tuo sito web, ciò che devi fare è ritagliare circa 10px intorno alla tua forma rimuovere i pixel "di bordo" che possono essere più scuri quando Photoshop li aggiunge durante il primo passaggio "Filtro> Aggiungi disturbo".
Bene, quindi ho solo un ultimo asso nella manica per questo tutorial. Fino ad ora, abbiamo solo regolato il livello base quando volevamo un nuovo colore. Tutto va bene e bene quando vogliamo un modello di rumore di base? ma cosa succede se vogliamo qualcosa con un po 'di vita in più ad esso?
Bene, questo ultimo passo se per voi ragazzi che vogliono solo quello - un doppio strato di rumore colorito che ha un po 'di "scintilla" ad esso.
Vai avanti e avvialo cambiando il nostro colore di sfondo. Regola la tua opacità del livello di rumore a tuo piacimento (non ho fatto niente per questa particolare demo).
Ecco dove lanciamo la palla curva - aggiungi un nuovo livello di regolazione (Livelli> Nuovo livello di regolazione> Tonalità / saturazione) e renderlo una maschera di ritaglio sul livello "rumore leggero". Adesso aggiusta le impostazioni finché non ottieni un bel colore dorato proveniente dallo strato di luce.
L'effetto finale è qui:
È sottile, ma il "bagliore" leggero proveniente da quel livello di rumore superiore aggiungerà una grande vita a qualsiasi progetto in cui lo si utilizza. Goditelo e create le vostre variazioni!
Tutto apposto! Quindi spero che tu abbia ottenuto qualcosa da questa seconda sessione. A questo punto dovresti avere una buona comprensione dei pattern di rumore e come usarli nei tuoi progetti. Puoi salvare tutti i file che abbiamo creato qui come file .GIF, .PNG o .JPG e usarli immediatamente anche sul web? ma abbiamo appena iniziato.
Nel prossimo livello di questa serie ti mostreremo come creare alcuni modelli strutturali avanzati, 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