Cum să creați și să folosiți fundaluri texturate cu opțiunile de proiectare Divi

În tutorialul Divi de astăzi, vă vom arăta cum puteți crea fundaluri texturate simple și le puteți folosi ca fundaluri pentru secțiunile dvs. pentru a face site-ul dvs. să arate puțin mai autentic. Dacă consultați aspectul nostru recent de gestionare a învățării, veți vedea că am folosit și un fundal texturat în toate paginile.

Acum, vom începe prin a vă arăta două tipuri de texturi pe care le vom recrea cu Photoshop; texturi realizate cu forme și texturi realizate cu pensule. Odată ce știi cum să o faci, poți fi creativ cât vrei și să creezi fundaluri texturate autentice. După aceea, vă vom arăta cum puteți crea rezultate uimitoare combinând fundalurile texturate și opțiunile de proiectare ale Divi.

Rezultatul imaginii realizat cu forme

Prima imagine pe care o vom arăta cum să creați cu Photoshop arată astfel:

Rezultate cu opțiunile de proiectare Divi

Și odată integrat în Divi, puteți obține rezultate uimitoare precum acesta:

Rezultatul imaginii realizat cu pensule

A doua imagine pe care o vom face arată astfel:

Rezultate cu opțiunile de proiectare Divi

Și poate furniza următorul rezultat frumos atunci când îl utilizați pe site-ul dvs. web:

Cum să creați și să folosiți fundaluri texturate cu opțiunile de proiectare Divi

Abonați-vă la canalul nostru Youtube

Creați fundal texturat cu Photoshop

Făcut cu forme

Primul fundal texturat, vă vom arăta cum să recreați, are în principal forme care sunt create cu instrumentul poligonal Lasso și Eraser Tool. Vă vom ghida pas cu pas cum să creați următorul rezultat:

Fișier nou

Deschideți Photoshop și începeți prin adăugarea unui fișier nou. Acest fișier va avea nevoie de o lățime de 1920px și o înălțime de 847px.

Adăugați o culoare de fundal

Apoi, adăugați o culoare de fundal la fișierul pe care tocmai l-ați creat. Asigurați-vă că utilizați culori gri puțin mai închise pe tot parcursul procesului. Este esențial să folosiți o culoare puțin mai închisă, deoarece vă va ajuta mai târziu la această postare și când adăugați opțiuni de design Divi. În acest exemplu, am folosit „# 626262” ca culoare de fundal și am folosit Instrumentul Bucket Paint pentru a adăuga culoarea stratului.

Adăugați stratul 2

Continuați adăugând un strat nou chiar deasupra primului strat.

Adăugați prima formă la stratul 2

Apoi, selectați instrumentul poligonal Lasso și începeți să creați o formă în timp ce selectați stratul 2.

După ce ați terminat, selectați Paint Bucket Tool și utilizați „# 747474” pentru a colora partea selectată.

Adăugați stratul 3

Apoi, adăugați un alt strat chiar deasupra stratului 2.

Adăugați al doilea strat de formă 3

Continuați făcând o altă formă, cum ar fi cea de pe ecranul de imprimare de mai jos, utilizând instrumentul Lasso poligonal.

Selectați instrumentul Găleată de vopsea și utilizați de data aceasta „# 6a6a6a”.

Până în prezent, imaginea dvs. ar trebui să arate astfel:

Folosiți Eraser Tool pe Layer 3

Continuând, selectați Instrumentul de ștergere în timp ce selectați Stratul 3.

Utilizați Instrumentul de ștergere împreună cu o perie cu o duritate de 0% și o dimensiune de 338 px.

Apoi, continuați și ștergeți zona pe care doriți să o pierdeți. Am lăsat în mod deliberat doar o mică parte din Stratul 3, unde puteți vedea o tranziție între Stratul 2 și Stratul 3.

Duplicați, transformați, rotiți și plasați straturile pe partea opusă

Acum că am creat partea stângă, cealaltă parte va merge mult mai repede. Vrem să fie exact același, de aceea vom selecta atât stratul 2, cât și stratul 3. Apoi, vom dubla straturile.

După duplicare, le veți vedea în lista de straturi.

În timp ce aveți ambele straturi duplicate selectate, accesați Editare> Transformare> Rotire 180 ° și trageți straturile pe cealaltă parte a imaginii.

Salvați pentru web

Singurul lucru care rămâne de făcut este salvarea imaginii. Pentru aceasta, faceți clic pe Fișier> Export> Salvare pentru web .

În cele din urmă, asigurați-vă că fișierul este un fișier JPG sau PNG și salvați-l.

Făcut cu pensule

În continuare, vă vom arăta cum să creați fundaluri texturate folosind pensule. Fundalul texturat pe care vă vom arăta cum să îl recreați arată în acest caz astfel:

Fișier nou

Începeți din nou prin crearea unui document nou folosind o lățime de 1920px și o înălțime de 847px.

Adăugați o culoare de fundal

Odată ce ați terminat, adăugați un fundal la primul strat cu codul de culoare „# 8f8f8f”.

Căutați online pensula potrivită

Următorul pas este găsirea unei pensule care să se potrivească cu stilul secțiunii erou. Există o mulțime de pensule Photoshop gratuite, care sunt uimitoare și gratuite. Puteți găsi și descărca pe cel pe care îl vom folosi în acest tutorial accesând pagina următoare.

Încărcați pensula

Găsiți fișierul ABR pe computer și accesați Photoshop pentru a încărca pensulele. Selectați Editare> Presetări> Preset Manager> Pensule> Încărcare și selectați fișierul ABR pe care l-ați salvat pe computer.

Adăugați stratul 2

După ce ați terminat, adăugați un alt strat chiar deasupra stratului 1.

Utilizați Pensula cu cea mai deschisă culoare

Apoi, puteți începe să utilizați pensula pentru a crea fundalul texturat pe care îl doriți selectând Instrumentul Pensulă.

Alegeți pensula dorită cu o dimensiune de 600 px și utilizați o opacitate de 60%.

'

Prima culoare pe care o vom folosi este „# a0a0a0”. Continuați și creați primul strat de perie pe imagine.

Utilizați aceeași pensulă cu o culoare mai închisă

Apoi, înlocuiți culoarea anterioară cu „#ababab” și faceți același lucru.

Utilizați aceeași perie cu cea mai închisă culoare

În cele din urmă, va trebui să utilizați culoarea „# 686868” pentru a finaliza fundalul texturat.

Salvați pentru web

Acum că fundalul dvs. texturat este terminat, singurul lucru care mai rămâne de făcut este să salvați imaginea. Pentru aceasta, selectați Fișier> Export> Salvare pentru web .

Încă o dată, alegeți dacă doriți să salvați imaginea ca fișier JPG sau PNG.

Adăugați fundaluri texturate la secțiuni

Fundal texturat realizat cu forme

Puteți juca cu setările de fundal ale lui Divi pentru a obține rezultatul exact pe care îl doriți odată ce ați creat imaginile. Pentru fundalul texturat realizat cu forme, vom alege un tip de gradient radial pentru a avea una dintre culorile de gradient în mijloc și cealaltă în armonie cu imaginea noastră de fundal.

Fundal de gradient

Utilizați următorul fundal de gradient pentru secțiunea dvs.:

• Prima culoare: # 474ab6
• A doua culoare: # 9271f6
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 41%
• Poziție finală: 100%

Opțiuni de amestecare a imaginii

Apoi, încărcați imaginea și utilizați următoarele setări:

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: Suprapunere

Fundal texturat realizat cu pensule

Fundalul degradat pe care îl vom folosi pentru fundalul texturat realizat cu pensule este liniar. Vom face o tranziție subtilă, care va separa ușor culoarea care este utilizată în armonie cu imaginea de fundal.

Fundal de gradient

Deschideți setările secțiunii și utilizați următoarele setări pentru subcategoria Background:

• Prima culoare: # 474ab6
• A doua culoare: # 9271f6
• Tipul gradientului: liniar
• Direcția gradientului: 270 de grade
• Poziția inițială: 70%
• Poziție finală: 100%

Opțiuni de amestecare a imaginii

Apoi, încărcați imaginea de fundal și utilizați următoarele setări împreună cu aceasta:

• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: Suprapunere

Rezultat

Acum, că am parcurs toți pașii, să analizăm din nou rezultatul final.

Rezultatul imaginii realizat cu forme

Rezultate cu opțiunile de proiectare Divi

Rezultatul imaginii realizat cu pensule

Rezultate cu opțiunile de proiectare Divi

Gânduri finale

În această postare, v-am arătat cum puteți utiliza fundaluri texturate pentru a face site-ul dvs. să se simtă mai autentic. V-am arătat cum puteți crea două tipuri de texturi cu Photoshop și le-am urmărit arătându-vă cum le puteți utiliza în secțiunile dvs., împreună cu opțiunile de proiectare ale Divi. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de WEB-DESIGN / shutterstock.com