Jak stworzyć dwuwarstwowy efekt przewijania tła za pomocą Divi

Jeśli szukasz sposobu na wyróżnienie swojej witryny, możesz dowiedzieć się, jak tworzyć dwuwarstwowe tła. Tworzenie dwuwarstwowego tła pomoże ożywić obraz tła poprzez ruch. W dzisiejszym samouczku pokażemy, jak stworzyć dwuwarstwowy projekt tła za pomocą Divi. Ten samouczek składa się z trzech części:

1. Przygotowywanie dwóch plików graficznych w Adobe Photoshop
2. Tworzenie projektu wewnątrz Divi
3. Stosowanie efektów przewijania do animacji tła

Będziesz mógł również bezpłatnie pobrać pliki JSON i obrazy!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ za DARMO

Aby położyć swoje ręce na darmowym układzie, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Twórz pliki obrazów w Photoshopie

Wybierz obraz produktu z czystym tłem i otwórz w Photoshopie

W pierwszej części tego samouczka utworzymy pliki obrazów, których będziemy używać w samouczku Divi. Aby je utworzyć, użyjemy Adobe Photoshop, ale możesz użyć dowolnego innego oprogramowania do edycji obrazów. Efekt dwuwarstwowego obrazu tła będzie działał najlepiej, jeśli obraz, z którym pracujesz, ma:

1. Wyraźne skupienie się na przedmiocie wewnątrz obrazu
2. Czyste tło

Poniższy obrazek jest doskonałym przykładem. Możesz znaleźć ten plik graficzny w spakowanym folderze udostępnionym w obszarze pobierania tego posta.

Powiel warstwę

Po otwarciu obrazu w Photoshopie sklonuj oryginalną warstwę raz. Będziemy pracować nad zduplikowaną warstwą.

Ukryj oryginalną warstwę

Aby upewnić się, że wynik jest widoczny podczas przechodzenia w dół samouczka, ukryj oryginalną warstwę.

Utwórz PNG z zaznaczenia obiektów w obrazie

Użyj narzędzia szybkiego wyboru na płycie

W sumie do samouczka będziemy potrzebować dwóch plików graficznych:

1. PNG obiektu, w tym przypadku płyty
2. JPEG tła bez obiektu

Oddzielamy obiekt od jego tła, dzięki czemu możemy manipulować nimi pojedynczo w środowisku Divi.

Aby rozpocząć wybieranie obiektu, wybierz „Narzędzie szybkiego zaznaczania” na pasku narzędzi i spróbuj pokryć jak najwięcej obiektu.

Wybierz + wybór maski

Zauważysz, że wybór obiektów nadal nie jest wystarczająco dobry. Możesz dostosować wygląd swojego wyboru, korzystając z opcji "Wybierz i maskuj" po kliknięciu zaznaczenia prawym przyciskiem myszy. Tam możesz bawić się kryciem, gładkością itp.

Utwórz maskę warstwy z zaznaczenia

Chociaż stworzyliśmy płynny wybór, wewnątrz obiektu nadal znajdują się części, które nie zostały jeszcze wybrane. Ręcznie dodamy te części do naszego wyboru, klikając przycisk maski warstwy, który można zobaczyć na poniższym ekranie drukowania:

Precyzyjne dostrajanie maski wewnętrznej za pomocą pędzli

Po utworzeniu maski warstwy możesz zacząć używać pędzla do modyfikowania maski warstwy. Upewnij się, że wybrana jest twoja maska ​​warstwy.

• Użycie czarnego pędzla (#000) usunie części maski warstwy
• Użycie białego pędzla (#fff) doda tylne części maski warstwy

Użyj pędzla, który nie ma zbyt dużej twardości, dzięki czemu nie musisz być superprecyzyjny.

Sprawdź maskę z kolorową warstwą

Zawsze możesz dokładnie sprawdzić maskę warstwy, umieszczając pod nią kolorową warstwę. Kolorowe warstwy łatwiej go zdradzą, jeśli przegapiłeś jakieś miejsce.

Zapisz zaznaczenie PNG jako oddzielny plik obrazu

Utwórz nowy plik

Teraz, gdy masz już wybór PNG swojego obiektu, możesz sklonować całą warstwę, aby zawsze móc do niej wrócić. W następnej części użyjemy zduplikowanej warstwy, aby utworzyć obraz tła bez obiektu.

Rozmiar naszego obiektu jest znacznie mniejszy niż początkowy rozmiar pliku, więc utworzymy nowy plik dla naszego obiektu i przeniesiemy go.

Dopasuj zaznaczenie w nowym pliku

Skopiuj i wklej warstwę z maską warstwy do nowego pliku, który utworzyłeś.

Eksportuj do internetu

I wyeksportuj go do Internetu jako PNG.

Skompresuj plik obrazu

Pliki PNG z przezroczystym tłem mają zwykle większy rozmiar, dlatego zaleca się skompresowanie pliku za pomocą wybranego narzędzia.

Usuń obiekt w oryginalnym obrazie

Wybierz maskę warstwy

Wróć do początkowego pliku Photoshopa! Tam stworzymy obraz tła bez obiektu. W tym celu używamy górnej warstwy w naszym pliku. Najpierw upewnij się, że wybrana jest twoja maska ​​warstwy.

Odwróć maskę

Następnie przejdź do właściwości tej warstwy i kliknij „Odwróć”.

Zastosuj maskę warstwy

Zauważysz teraz, że obiekt jest przezroczysty wewnątrz warstwy początkowej. Zamierzamy zastosować maskę warstwy do naszej warstwy, klikając prawym przyciskiem myszy i wybierając „Zastosuj maskę warstwy”.

Wypełnij pustą przestrzeń za pomocą narzędzia klonowania

W środku mamy jeszcze dziurę, którą musimy wypełnić. Tutaj przydaje się narzędzie do klonowania. Wybierz odpowiedni rozmiar pędzla i wypełnij obraz. Nie musisz być z tym bardzo dokładny, w samouczku Divi umieścimy na nim obiekt.

Zapisz obraz bez obiektu

Eksportuj do internetu

Po zakończeniu tworzenia obrazu tła bez obiektu możesz zapisać go jako plik JPEG w jakości 70%.

Skompresuj plik obrazu

Pamiętaj, aby skompresować również ten obraz.

2. Zbuduj dwuwarstwowy efekt tła w Divi

Dodaj nową sekcję

Prześlij obraz tła

Gdy masz oba pliki graficzne w zasięgu ręki, nadszedł czas, aby przełączyć się na Divi! Otwórz nową stronę i dodaj nową sekcję. Prześlij obraz tła, który utworzyłeś w pierwszej części samouczka.

Rozstaw

Przejdź do karty projektu przekroju i zastosuj kilka niestandardowych wartości odstępów. Dodawany przez nas dolny margines pomoże nam zobaczyć, jak efekt się zgadza. Zwykle ten margines zostanie zastąpiony kolejnymi sekcjami w twoim projekcie.

• Dolny margines: 100vh
• Górna wyściółka:
  • Pulpit: 100px
  • Tablet i telefon: 50px
• Dolna wyściółka:
  • Pulpit: 100px
  • Tablet: 600px
  • Telefon: 500px

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wierszy i zmień szerokość i maksymalną szerokość. Dzięki tym ustawieniom wiersz będzie zawsze dotykał lewej i prawej strony kontenera sekcji. W ten sposób możemy upewnić się, że obrazy PNG i tła mają taką samą równowagę na wszystkich rozmiarach ekranu.

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Przejdź do ustawień odstępów między wierszami i usuń wszystkie domyślne górne i dolne dopełnienie.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Pozycja

Następnie zmień położenie całego rzędu.

• Pozycja: bezwzględna
• Lokalizacja:
  • Pulpit: środek
  • Tablet i telefon: środkowy dół
• Przesunięcie w pionie:
  • Pulpit: /
  • Tablet i telefon: 30vh

Dodaj moduł obrazu do wiersza

Prześlij obraz PNG

Po zakończeniu ustawień wiersza dodaj do niego moduł obrazu i prześlij plik PNG, który utworzyłeś w pierwszej części samouczka.

Wyrównanie

Przejdź do zakładki projektu i zmień wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Rozmiary

Następnie zmień ustawienia rozmiaru.

• Szerokość:
  • Komputer stacjonarny: 36%
  • Tablet i telefon: 60%

Dodaj wiersz nr 2

Struktura kolumny

Następnie dodaj kolejny wiersz do sekcji, korzystając z następującej struktury kolumn:

Kolor tła

Otwórz ustawienia wiersza i zmień kolor tła.

• Kolor tła: #ffffff

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru.

• Szerokość: 90%
• Maksymalna szerokość: 550px
• Wyrównanie wierszy:
  • Pulpit: lewy
  • Tablet i telefon: centrum

Rozstaw

Następnie zastosuj niestandardowe wartości dopełnienia.

• Górna wyściółka: 11%
• Dolna wyściółka: 11%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Przesunięcie poziome

Dodajemy też pewne przesunięcie w poziomie do ustawień pozycji.

• Przesunięcie w poziomie:
  • Pulpit: 5%
  • Tablet i telefon: 0%

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H2

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego zawierającego trochę treści H2.

Ustawienia tekstu H2

Stylizuj tekst H2 w następujący sposób:

• Czcionka nagłówka 2: Kumbh Sans
• Rozmiar tekstu nagłówka 2:
  • Pulpit: 90px
  • Tablet: 60px
  • Telefon: 45px

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj treść opisu

Dodaj kolejny moduł tekstowy tuż pod poprzednim i wstaw dowolną treść opisu.

Ustawienia tekstu

Zmień odpowiednio ustawienia tekstowe modułu:

• Czcionka tekstu: Kumbh Sans
• Wysokość linii tekstu: 2em

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Ostatnim modułem, którego potrzebujemy w tej kolumnie, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Stylizuj przycisk odpowiednio:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 20px
• Kolor tekstu przycisku: #6b6443
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 0px

• Czcionka przycisku: Kumbh Sans
• Waga czcionki przycisku: pogrubiona
• Pokaż ikonę przycisku: Tak
• Umieszczenie ikony przycisku: w lewo
• Pokaż tylko ikonę po najechaniu na przycisk: Nie

Cień Pudełka

Uwzględnij również cień pudełka.

• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: 2px
• Kolor cienia: #6b6443

3. Dodaj efekty przewijania

Ruch pionowy obrazu

W ostatniej części tego samouczka skupimy się na dodawaniu efektów przewijania do modułu obrazu zawierającego plik obrazu PNG. Otwórz ustawienia modułu, przejdź do zakładki Zaawansowane i zastosuj następujące ustawienia ruchu w pionie:

• Włącz ruch w pionie: Tak
• Odsunięcie początkowe:
  • Pulpit: 0
  • Tablet i telefon: 4 (przy 0%)
• Przesunięcie środkowe:
  • Pulpit: 0
  • Tablet i telefon: 0 (przy 97%)
• Odsunięcie końcowe:
  • Pulpit: 0
  • Tablet i telefon: -2 (w 100%)

Ruch poziomy obrazu

Kończymy nasz projekt przy użyciu następujących ustawień ruchu w poziomie:

• Włącz ruch poziomy: Tak
• Odsunięcie początkowe:
  • Pulpit: 0 (przy 0%)
  • Tablet i telefon: 0
• Przesunięcie środkowe:
  • Komputer stacjonarny: 0 (przy 65%)
  • Tablet i telefon: 0 (przy 97%)
• Odsunięcie końcowe:
  • Pulpit: -10 (przy 100%)
  • Tablet i telefon: 0

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć dwuwarstwowe tło i animować je za pomocą wbudowanych efektów przewijania Divi. W pierwszej części samouczka przygotowaliśmy pliki graficzne w programie Adobe Photoshop. W drugiej części samouczka skupiliśmy się na wykorzystaniu plików graficznych w Divi do stworzenia responsywnego projektu. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.