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 terza edizione: Trame in fibra di carbonio. Vedremo come creare modelli eleganti e professionali in fibra di carbonio, iniziando con un approccio semplice 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 primo post della serie se ti sei perso!
Oggi è il terzo 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.
Il modello di cui ci occuperemo oggi è come creare un'effettiva "trama in fibra di carbonio" che può essere utilizzata come pattern in Photoshop e come sfondo di affiancamento sulle pagine Web. Lo faremo in 4 passaggi:
Pronto? Facciamolo!
La trama di base in fibra di carbonio è in realtà abbastanza semplice da creare. Ci sono tonnellate di tutorial per questo schema di base là fuori sul web, quindi non creeremo alcun nuovo terreno qui. Ciò che è importante in questo primo passo è che raccogli i principi di base che useremo nelle fasi più avanzate. I trucchi principali sono:
Iniziamo la nostra versione di base creando un documento 4x4:
Successivamente, prendi una selezione 2x4 px dello sfondo (mostrato) e crea un nuovo livello da esso (Ctrl + J):
Sul nuovo livello 2x4px, aggiungiamo una sfumatura di base dal pannello Stili livello (fai doppio clic sul livello, oppure fai clic con il pulsante destro del mouse e seleziona Stili livello). Il gradiente che aggiungeremo verrà eseguito dal basso verso l'alto e utilizzerà i colori Nero (# 000000) in basso a Grigio scuro (# 4f4f4f) sulla cima:
Questo gradiente sarà il fondamento della nostra fibra di carbonio? quindi puoi sempre tornare a questo passaggio per cambiare il risultato del prodotto finale.
Successivamente, prendiamo una selezione di 1x4 pixel del livello sfumatura usando lo strumento Selezione rettangolare e creiamo un nuovo livello tagliandolo (Clic con il tasto destro> Livello tramite taglio).
Ora imposta l'opacità su questo secondo livello a 92%.
Perché? Stiamo cercando di creare variazioni molto sottili nei toni di grigio in modo che la fibra di carbonio sembra avere una fonte di luce credibile. Ovviamente, non c'è una vera fonte di luce e non possiamo crearne una senza avere un'immagine massiccia (che sconfigge il punto di un pattern web), ma piccoli cambiamenti nell'ombreggiamento inganneranno l'occhio nel pensare che ci sia profondità.
Unisci i due strati 1x4 px insieme (sopra) e poi, usando di nuovo lo strumento marchio, prendi una selezione 2x2 nella parte superiore del nuovo livello:
Quindi, per creare il nostro effetto pattern, scambia l'ordine delle due tessere 2x2 px dall'alto verso il basso e viceversa:
Il nostro modello è ora completo! Semplice salvalo nella tua libreria di modelli usando il Modifica> Definisci modello strumento. Dagli un nome di tua scelta, e apparirà ora ogni volta che usi il Stili livello> Sovrapposizione modello biblioteca.
Tutto apposto! Quindi abbiamo una fibra di carbonio molto semplice completa? passiamo al prossimo passaggio, dove creeremo alcune modifiche a questa idea.
La fibra di carbonio base può essere manipolata abbastanza facilmente. In questo breve esempio, useremo lo stesso identico processo e principi per creare una trama in fibra leggermente più grande.
Nota: Sto volutamente saltando su alcuni degli screenshot ripetitivi che abbiamo esaminato nell'ultimo passaggio, quindi metterò in evidenza solo nuove tecniche.
Inizia questa volta con un documento 8px per 8px.
Nel primo modello in fibra di carbonio che abbiamo creato, abbiamo preso una scorciatoia creando una sfumatura unica per l'intero lato sinistro del documento. Questo ha funzionato perché il documento era solo 4x4 e in realtà non poteva gestire più dettagli di quanti ne abbiamo passati.
In questa seconda versione avremo un po 'più meticoloso con la nostra forma. Inizia sul tuo documento aggiungendo un rettangolo 4x4:
Aggiungi un altro rettangolo 4x4 per lo spazio in basso (l'ho colorato in modo da poterlo vedere meglio):
Ora abbiamo bisogno di aggiungere una leggera sfumatura al quadrato inferiore. Ricorda, la regione in basso a sinistra è scura? quasi nero, quindi usa un gradiente molto scuro:
Ripeti il gradiente per il livello superiore 4x4, ma questa volta sarà un gradiente leggero:
Duplica entrambi i layer 4x4 ed esegui il trucco "fliperoo" in cui scambiamo la posizione di ogni quadrato con gli angoli opposti del documento.
Ora abbiamo il nostro modello base in fibra di carbonio, ma aggiungiamo un livello di personalizzazione aggiungendo un livello di regolazione dei livelli. Fai questo dal menu Livelli in alto; Stai cercando il pulsante "Livello> Nuovo livello di regolazione> Livelli".
Lo strato di regolazione dei livelli ci consentirà di armeggiare con la luminosità e il contrasto del nostro modello di fibra. Quando hai finito, definisci il pattern (Modifica> Definisci pattern) e sarai pronto per partire. Ecco come sarà il tuo modello:
Nota: Quando cerchi di utilizzare lo strumento Definisci modello, assicurati di non essere selezionato sul livello di regolazione? per qualche motivo Photoshop non ti consente di utilizzare "Definisci pattern" quando ti trovi su livelli come questo (verrà disattivato fino a quando non selezioni un altro livello).
Ora abbiamo un secondo modello in fibra di carbonio completo! È possibile utilizzare lo stesso processo di base più e più volte per creare le proprie varianti. Prova formati di documenti diversi, aggiungendo colori, regolando il contrasto delle sfumature e qualsiasi altra cosa che puoi inventare per creare effetti unici.
Ok, quindi hai le nozioni di base? è fantastico! In questo prossimo passo, creeremo un modello in fibra di carbonio diagonale utilizzando gli stessi principi di base che abbiamo usato nei primi due passaggi, ma useremo una svolta radicale sul layout della griglia del nostro modello per creare un effetto unico.
Inizia con un documento di 30 x 30 px. Una volta terminato questo passaggio, puoi ripetere il processo utilizzando una diversa dimensione del documento, ma questo dovrebbe essere un buon punto di partenza.
Lavoreremo in celle di "5px" come regola generale? quindi iniziamo il nostro modello creando un rettangolo alto 5px di 15px.
Successivamente, aggiungi un gradiente sulla nostra prima forma:
Ora aggiungi una forma quadrata 5px per 5px con il colore di # 191919 direttamente accanto alla nostra forma rettangolare.
Mancia: Usa lo strumento "Converti punto" (sotto il pannello Strumento penna) in cui devi regolare o rendere più nitidi i bordi. Le tue forme dovrebbero finire esattamente sui pixel definiti, non mostrare nessun "mezzo pixel" sfocato.
Quello che abbiamo qui è il nostro schema di base che ripeteremo diverse volte? quindi convertiamo queste due forme in un singolo "oggetto intelligente" in modo che possiamo sempre tornare a loro per modificare il gradiente.
Nota: Puoi sempre tornare indietro e modificare i tuoi oggetti intelligenti facendo clic con il tasto destro sul livello e selezionando "Modifica contenuto". Questo modificherà ogni istanza dell'oggetto intelligente? che rende le modifiche facili e veloci quando si hanno 10 o più duplicati in giro.
Successivamente, abbiamo bisogno di duplicare l'oggetto smart e spostarlo di 5px verso sinistra di 5px.
Ripeti lo stesso processo "Duplica, poi sposta" ripetutamente finché non hai coperto il documento. Fai riferimento allo screenshot se ti perdi, ma ci dovrebbe sempre essere un'unità di misura 5px tra tutte le parti principali.
Ora aggiungiamo un livello di colore di sfondo. Ho usato un semplice rettangolo per questo - imposta il colore su # 1e1e1e:
Infine, per sicurezza, aggiungiamo un altro di quei fidati livelli di regolazione del livello in modo che possiamo armeggiare con l'oscurità e il contrasto al volo.
Whallah! Ora puoi usare di nuovo lo strumento Definisci modello e usare il modello dove vuoi, in questo modo:
Per quest'ultimo passaggio, utilizzeremo di nuovo gli stessi principi di base? ma questa volta capovolgere le cose di 45 gradi per creare un altro effetto diagonale in fibra di carbonio.
Questo modello finale è in realtà il più facile da padroneggiare, quindi questa dovrebbe essere una passeggiata se ce l'hai fatta fino a questo punto!
Inizia con un documento 8x8 e aggiungi un colore di sfondo. Ho usato il nero (# 000000), puoi usare quello che vuoi? basta tenere a mente il colore esatto per il prossimo passo:
Ora aggiungi un rettangolo, misurato a 4px di larghezza per 8px di altezza:
Ora dovrebbe essere tutto familiare - aggiungere un gradiente sottile - il colore finale deve corrispondere al nostro colore di sfondo (il mio gradiente è da # 555555 a # 000000). Nota l'angolo: lo impostiamo su 135 (o -45 a seconda di come lo vuoi tu) in modo che corrisponda bene quando ruotiamo il livello:
Bingo! Abbiamo il nostro modello finale? regola le dimensioni del documento e i colori del gradiente per ottenere le tue varianti personalizzate:
? ed eccolo qui:
Tutto apposto! Quindi ora dovresti avere una buona conoscenza di base per creare le tue variazioni personalizzate di questi modelli in fibra di carbonio - giocare con le forme, 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 avanzati, 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