Come creare e utilizzare sfondi strutturati con le opzioni di design di Divi

Nel tutorial Divi di oggi, ti mostreremo come creare semplici sfondi con texture e usarli come sfondi per le tue sezioni per rendere il tuo sito web un po' più autentico. Se dai un'occhiata al nostro recente layout gratuito per la gestione dell'apprendimento, vedrai che abbiamo utilizzato anche uno sfondo strutturato in tutte le pagine.

Ora, inizieremo mostrandoti due tipi di trame che ricreeremo con Photoshop; texture realizzate con forme e texture realizzate con pennelli. Una volta che sai come farlo, puoi essere creativo quanto vuoi e creare autentici sfondi con texture. Successivamente, ti mostreremo come creare risultati sorprendenti combinando gli sfondi con texture e le opzioni di design di Divi.

Risultato immagine realizzato con forme

La prima immagine che ti mostreremo come creare con Photoshop è simile a questa:

Risultato con le opzioni di design di Divi

E una volta integrato in Divi, puoi ottenere risultati sorprendenti come questo:

Risultato dell'immagine realizzato con i pennelli

La seconda immagine che faremo è simile a questa:

Risultato con le opzioni di design di Divi

E può fornire il seguente bellissimo risultato quando lo usi sul tuo sito web:

Come creare e utilizzare sfondi strutturati con le opzioni di design di Divi

Iscriviti al nostro canale Youtube

Crea uno sfondo strutturato con Photoshop

Fatto con le forme

Il primo sfondo strutturato che ti mostreremo come ricreare ha principalmente forme su di esso create con lo strumento Lazo poligonale e lo strumento Gomma. Ti guideremo passo dopo passo su come creare il seguente risultato:

Nuovo file

Apri Photoshop e inizia aggiungendo un nuovo file. Questo file avrà bisogno di una larghezza di 1920 px e un'altezza di 847 px.

Aggiungi colore di sfondo

Quindi, aggiungi un colore di sfondo al file che hai appena creato. Assicurati di utilizzare colori grigi leggermente più scuri durante l'intero processo. È essenziale utilizzare un colore un po' più scuro poiché ti aiuterà più avanti in questo post quando aggiungi anche le opzioni di design Divi. In questo esempio, abbiamo usato '#626262' come colore di sfondo e abbiamo usato lo strumento Secchiello per aggiungere il colore al livello.

Aggiungi livello 2

Continua aggiungendo un nuovo livello proprio sopra il primo livello.

Aggiungi la prima forma al livello 2

Quindi, seleziona il Strumento lazo poligonale e inizia a creare una forma mentre hai selezionato il livello 2.

Una volta terminato, seleziona lo strumento Secchio di vernice e usa '# 747474' per colorare la parte selezionata.

Aggiungi livello 3

Quindi, aggiungi un altro livello proprio sopra il livello 2.

Aggiungi il secondo livello di forma 3

Continua creando un'altra forma, come quella nella schermata di stampa qui sotto, usando lo strumento Lazo poligonale.

Seleziona lo strumento Secchio di vernice e usa "# 6a6a6a" questa volta.

Finora, la tua immagine dovrebbe essere simile a questa:

Usa lo strumento gomma sul livello 3

Andando avanti, seleziona lo strumento Gomma pur avendo selezionato il Livello 3.

Usa lo strumento Gomma insieme a un pennello con una durezza dello 0% e una dimensione di 338 px.

Quindi, vai avanti e cancella l'area che vuoi sparire. Abbiamo deliberatamente lasciato solo una piccola parte del livello 3 in cui puoi vedere una transizione tra il livello 2 e il livello 3.

Duplica, trasforma, ruota e posiziona i livelli sul lato opposto

Ora che abbiamo creato il lato sinistro, l'altro lato andrà molto più velocemente. Vogliamo che sia esattamente lo stesso, ecco perché selezioneremo sia Livello 2 che Livello 3. Quindi, duplicheremo i livelli.

Una volta duplicati, li vedrai apparire nell'elenco dei livelli.

Pur avendo entrambi i livelli duplicati selezionati, vai a Modifica> Trasforma> Ruota di 180 ° e trascina i livelli sull'altro lato dell'immagine.

Salva per Web

L'unica cosa che resta da fare è salvare l'immagine. Per farlo, fai clic su File > Esporta > Salva per Web .

Infine, assicurati che il file sia un file JPG o PNG e salvalo.

Fatto con i pennelli

Successivamente, ti mostreremo come creare sfondi con texture usando i pennelli. Lo sfondo strutturato che ti mostreremo come ricreare sembra in questo caso come questo:

Nuovo file

Ricomincia creando un nuovo documento utilizzando una larghezza di 1920 px e un'altezza di 847 px.

Aggiungi colore di sfondo

Una volta fatto, aggiungi uno sfondo al primo livello con il codice colore "# 8f8f8f".

Cerca spazzole abbinate online

Il prossimo passo è trovare un pennello che corrisponda allo stile della tua sezione degli eroi. Ci sono un sacco di pennelli Photoshop gratuiti là fuori che sono sbalorditivi e anche gratuiti. Puoi trovare e scaricare quello che useremo in questo tutorial andando alla pagina seguente.

Carica pennello

Individua il file ABR sul tuo computer e vai su Photoshop per caricare i pennelli. Seleziona Modifica > Predefiniti > Gestione predefiniti > Pennelli > Carica e seleziona il file ABR che hai salvato sul tuo computer.

Aggiungi livello 2

Una volta fatto, aggiungi un altro livello proprio sopra il livello 1.

Usa il pennello con il colore più chiaro

Quindi, puoi iniziare a usare il pennello per creare lo sfondo strutturato che desideri selezionando lo strumento Pennello.

Scegli il pennello che desideri con una dimensione di 600 px e usa un'opacità del 60%.

'

Il primo colore che useremo è '#a0a0a0'. Vai avanti e crea il primo livello di pennello sulla tua immagine.

Usa lo stesso pennello con un colore più scuro

Quindi, sostituisci il colore precedente con '#ababab' e fai la stessa cosa.

Usa lo stesso pennello con il colore più scuro

Infine, dovrai utilizzare il colore "# 686868" per completare lo sfondo con texture.

Salva per Web

Ora che lo sfondo con texture è pronto, l'unica cosa che resta da fare è salvare l'immagine. Per farlo, seleziona File > Esporta > Salva per Web .

Ancora una volta, scegli se vuoi salvare la tua immagine come file JPG o PNG.

Aggiungi sfondi strutturati alle sezioni

Sfondo strutturato realizzato con forme

Puoi giocare con le impostazioni di sfondo di Divi per ottenere il risultato esatto che desideri una volta create le immagini. Per lo sfondo strutturato realizzato con forme, sceglieremo un tipo di sfumatura radiale per avere uno dei colori sfumati al centro e l'altro in armonia con la nostra immagine di sfondo.

Sfondo sfumato

Usa il seguente sfondo sfumato per la tua sezione:

• Primo colore: #474ab6
• Secondo colore: #9271f6
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 41%
• Posizione finale: 100%

Opzioni di fusione delle immagini

Quindi, carica l'immagine e utilizza le seguenti impostazioni:

• Dimensione immagine di sfondo: copertina
• Posizione immagine di sfondo: Centro
• Ripetizione immagine di sfondo: nessuna ripetizione
• Miscela immagine di sfondo: sovrapposizione

Sfondo strutturato realizzato con pennelli

Lo sfondo sfumato che useremo per lo sfondo strutturato realizzato con i pennelli è lineare. Faremo una sottile transizione che separerà ancora leggermente il colore che viene utilizzato in armonia con l'immagine di sfondo.

Sfondo sfumato

Aprire le impostazioni della sezione e utilizzare le seguenti impostazioni per la sottocategoria Sfondo:

• Primo colore: #474ab6
• Secondo colore: #9271f6
• Tipo di gradiente: lineare
• Direzione del gradiente: 270 gradi
• Posizione di partenza: 70%
• Posizione finale: 100%

Opzioni di fusione delle immagini

Quindi, carica l'immagine di sfondo e usa le seguenti impostazioni insieme ad essa:

• Posizione immagine di sfondo: Centro
• Ripetizione immagine di sfondo: nessuna ripetizione
• Miscela immagine di sfondo: sovrapposizione

Risultato

Ora che abbiamo seguito tutti i passaggi, diamo ancora una volta un'occhiata al risultato finale.

Risultato immagine realizzato con forme

Risultato con le opzioni di design di Divi

Risultato dell'immagine realizzato con i pennelli

Risultato con le opzioni di design di Divi

Pensieri finali

In questo post, ti abbiamo mostrato come puoi utilizzare sfondi con texture per rendere il tuo sito web più autentico. Ti abbiamo mostrato come puoi creare due tipi di texture con Photoshop e abbiamo seguito mostrandoti come puoi usarli all'interno delle tue sezioni insieme alle opzioni di design di Divi. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in evidenza di WEB-DESIGN / shutterstock.com