Cum să creați un efect de derulare a fundalului cu două straturi cu Divi

Dacă sunteți în căutarea unei modalități prin care site-ul dvs. să iasă în evidență, vă recomandăm să aflați cum să creați fundaluri cu două straturi. Crearea fundalurilor cu două straturi vă va ajuta să aduceți viața imaginii de fundal prin mișcare. În tutorialul de astăzi, vă vom arăta cum să creați un design de fundal cu două straturi cu Divi. Acest tutorial conține trei părți:

1. Pregătirea a două fișiere imagine în Adobe Photoshop
2. Crearea designului în interiorul Divi
3. Aplicarea efectelor de derulare pentru a anima fundalul

Veți putea descărca gratuit fișierele JSON și imagini!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspectul liber, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Creați fișiere imagine în Photoshop

Alegeți imaginea produsului cu fundal curat și deschideți în Photoshop

În prima parte a acestui tutorial, vom crea fișierele de imagine pe care le vom folosi în tutorialul Divi. Pentru a le crea, vom folosi Adobe Photoshop, dar nu ezitați să utilizați orice alt software de editare a imaginilor la alegere. Efectul imaginii de fundal cu două straturi va funcționa cel mai bine dacă imaginea cu care lucrați are:

1. O focalizare clară asupra unui obiect din interiorul imaginii
2. Un fundal curat

Imaginea de mai jos este un exemplu perfect. Puteți găsi acest fișier imagine în folderul zip partajat în zona de descărcare a acestei postări.

Strat duplicat

După ce ați deschis imaginea în Photoshop, clonați stratul original o dată. Vom lucra la stratul duplicat.

Ascundeți stratul original

Pentru a ne asigura că vedem rezultatul în timp ce ne deplasăm în jos, ascundeți stratul original.

Creați PNG din selecția obiectului în imagine

Utilizați instrumentul de selecție rapidă pe placă

În total, vom avea nevoie de două fișiere imagine pentru tutorial:

1. un PNG al obiectului, în acest caz, placa
2. un JPEG al fundalului fără obiect

Separăm obiectul de fundalul său, astfel încât să le putem manipula individual o dată în mediul Divi.

Pentru a începe să selectați obiectul, alegeți „Instrumentul de selecție rapidă” din bara de instrumente și încercați să acoperiți cât mai mult din obiect posibil.

Selectați + Selecție mască

Veți observa că selecția obiectului încă nu este suficient de bună. Puteți perfecționa aspectul selecției dvs. utilizând opțiunea „Selectare și mascare” atunci când faceți clic dreapta pe selecție. Odată ajuns acolo, vă puteți juca cu opacitatea, netezimea etc.

Creați o mască de straturi din selecție

Deși am creat o selecție lină, există încă părți în interiorul obiectului care nu sunt încă selectate. Vom adăuga manual aceste părți la selecția noastră făcând clic pe butonul de mască de strat pe care îl puteți vedea în ecranul de imprimare de mai jos:

Masca Finetune Selection Inside cu pensule

Odată ce masca de strat a fost creată, puteți începe să utilizați o pensulă pentru a modifica masca de strat. Asigurați-vă că masca dvs. de strat este selectată.

• Folosind o perie neagră (# 000) veți elimina părți ale măștii de straturi
• Folosind o perie albă (#fff) se vor adăuga părți din spate ale măștii de strat

Folosiți o perie care nu are prea multă duritate, astfel încât să nu fiți foarte preciți.

Verificați de două ori masca cu stratul colorat

Puteți verifica întotdeauna masca de strat plasând un strat colorat sub ea. Straturile colorate îl vor oferi mai ușor dacă ați ratat un loc.

Salvați selecția PNG ca fișier imagine separat

Creați un fișier nou

Acum că aveți selecția PNG a obiectului dvs., puteți clona întregul strat, astfel încât să puteți reveni oricând la acesta. În partea următoare, vom folosi stratul duplicat pentru a crea imaginea de fundal fără obiect.

Dimensiunea obiectului nostru este mult mai mică decât dimensiunea inițială a fișierului, așa că vom crea un fișier nou pentru obiectul nostru și îl vom aduce.

Ajustați selecția în fișier nou

Copiați-lipiți stratul cu masca sa de strat în noul fișier pe care l-ați creat.

Export pentru web

Și exportați-l pentru web ca PNG.

Comprimă fișierul imagine

PNG-urile cu fundal transparent tind să aibă o dimensiune mai mare a fișierului, de aceea este recomandat să comprimați fișierul utilizând un instrument la alegere.

Eliminați obiectul din imaginea originală

Selectați Layer Mask

Înapoi la fișierul Photoshop inițial! Acolo, vom crea imaginea de fundal fără obiect. Pentru a face acest lucru, folosim stratul superior din fișierul nostru. Mai întâi, asigurați-vă că masca dvs. de strat este selectată.

Inversează masca

Apoi, accesați proprietățile acestui strat și faceți clic pe „Invertire”.

Aplicați Layer Mask

Veți observa acum că obiectul este transparent în interiorul stratului inițial. Vom aplica masca de strat stratului nostru făcând clic dreapta și selectând „Aplică masca de strat”.

Umpleți spațiu gol folosind instrumentul de clonare

Mai avem o gaură în mijloc, pe care trebuie să o umplem. Acolo este instrumentul de clonare la îndemână. Selectați dimensiunea pensulei la alegere și completați imaginea. Nu trebuie să fiți foarte exacți cu acest lucru, în cadrul tutorialului Divi, vom plasa obiectul deasupra acestuia.

Salvați imaginea fără obiect

Export pentru web

După ce ați finalizat imaginea de fundal fără obiect, o puteți salva ca fișier JPEG la o calitate de 70%.

Comprimă fișierul imagine

Asigurați-vă că comprimați și această imagine.

2. Construiți un efect de fundal cu două straturi în Divi

Adăugați o secțiune nouă

Încărcați imaginea de fundal

Odată ce aveți ambele fișiere imagine la îndemână, este timpul să treceți la Divi! Deschideți o pagină nouă și adăugați o nouă secțiune. Încărcați imaginea de fundal pe care ați creat-o în prima parte a tutorialului.

Spațiere

Treceți la fila de proiectare a secțiunii și aplicați câteva valori de spațiere personalizate. Marja inferioară pe care o adăugăm ne va ajuta să vedem efectul căderea la locul său. În mod normal, această marjă va fi înlocuită de următoarele secțiuni din proiectarea dvs.

• Marja inferioară: 100vh
• Căptușeală superioară:
  • Desktop: 100 px
  • Tabletă și telefon: 50 px
• Căptușeală inferioară:
  • Desktop: 100 px
  • Tabletă: 600 px
  • Telefon: 500 px

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați lățimea și lățimea maximă. Aceste setări vor permite rândului să atingă tot timpul stânga și dreapta containerului secțiunii. În acest fel, ne putem asigura că imaginile PNG și de fundal au același echilibru pe toate dimensiunile ecranului.

• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Mergeți la setările de spațiere ale rândului în continuare și eliminați toate umpluturile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Poziţie

Apoi, repoziționați întregul rând.

• Poziție: Absolută
• Locație:
  • Desktop: Centru
  • Tabletă și telefon: Centrul de jos
• Decalaj vertical:
  • Desktop: /
  • Tabletă și telefon: 30vh

Adăugați modulul imagine la rând

Încărcați imaginea PNG

După ce ați completat setările de rând, adăugați un modul de imagine pe rând și încărcați fișierul PNG pe care l-ați creat în prima parte a tutorialului.

Aliniere

Treceți la fila de proiectare și schimbați alinierea imaginii.

• Aliniere imagine: centru

Dimensionare

Modificați setările de dimensionare în continuare.

• Lăţime:
  • Desktop: 36%
  • Tabletă și telefon: 60%

Adăugați rândul # 2

Structura coloanei

Apoi, adăugați un alt rând la secțiune folosind următoarea structură de coloane:

Culoare de fundal

Deschideți setările rândului și schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Dimensionare

Modificați setările de dimensionare în continuare.

• Lățime: 90%
• Lățime maximă: 550 px
• Alinierea rândurilor:
  • Desktop: stânga
  • Tabletă și telefon: Centru

Spațiere

Apoi, aplicați câteva valori de umplere personalizate.

• Căptușeală superioară: 11%
• Căptușeală inferioară: 11%
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Decalaj orizontal

Adăugăm și niște offset orizontal la setările de poziție.

• Decalaj orizontal:
  • Desktop: 5%
  • Tabletă și telefon: 0%

Adăugați modulul de text nr. 1 în coloana 1

Adăugați conținut H2

Este timpul să adăugați module, începând cu un prim modul de text care conține un conținut H2.

Setări text H2

Stilizați textul H2 după cum urmează:

• Rubrica 2 Font: Kumbh Sans
• Rubrica 2 Dimensiune text:
  • Desktop: 90 px
  • Tabletă: 60 px
  • Telefon: 45 px

Adăugați modulul de text nr. 2 în coloana 1

Adăugați conținut de descriere

Adăugați un alt modul de text chiar sub cel precedent și introduceți un conținut de descriere la alegere.

Setări text

Modificați setările de text ale modulului în consecință:

• Font text: Kumbh Sans
• Înălțimea liniei de text: 2em

Adăugați modulul buton la coloana 1

Adăugați o copie

Ultimul modul de care avem nevoie în această coloană este un modul buton. Adăugați o copie la alegere.

Setări buton

Stilează butonul în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 20 px
• Culoarea textului butonului: # 6b6443
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px

• Buton Font: Kumbh Sans
• Buton Font Greutate: Bold
• Afișează pictograma buton: Da
• Plasare pictogramă buton: stânga
• Afișați pictograma doar pe cursor pentru buton: Nu

Box Shadow

Includeți și o umbră de cutie.

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 2 px
• Culoare umbră: # 6b6443

3. Adăugați efecte de derulare

Mișcare verticală a imaginii

În ultima parte a acestui tutorial, ne vom concentra pe adăugarea efectelor de derulare la modulul imagine care conține fișierul imagine PNG. Deschideți setările modulului, navigați la fila avansată și aplicați următoarele setări de mișcare verticală:

• Activați mișcarea verticală: da
• Offset de pornire:
  • Desktop: 0
  • Tabletă și telefon: 4 (la 0%)
• Decalaj mediu:
  • Desktop: 0
  • Tabletă și telefon: 0 (la 97%)
• Offset final:
  • Desktop: 0
  • Tabletă și telefon: -2 (la 100%)

Mișcare orizontală a imaginii

Ne finalizăm proiectarea utilizând următoarele setări de mișcare orizontală:

• Activați mișcarea orizontală: Da
• Offset de pornire:
  • Desktop: 0 (la 0%)
  • Tabletă și telefon: 0
• Decalaj mediu:
  • Desktop: 0 (la 65%)
  • Tabletă și telefon: 0 (la 97%)
• Offset final:
  • Desktop: -10 (la 100%)
  • Tabletă și telefon: 0

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un fundal cu două straturi și să îl animați cu efectele de defilare încorporate ale Divi. În prima parte a tutorialului, am pregătit fișierele de imagine din Adobe Photoshop. În partea a doua a tutorialului, ne-am concentrat pe utilizarea fișierelor de imagine din interiorul Divi pentru a crea un design receptiv. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.