Jak tworzyć i używać teksturowanych tła z opcjami projektowania Divi

W dzisiejszym samouczku Divi pokażemy, jak tworzyć proste tła z teksturą i używać ich jako tła dla sekcji, aby Twoja witryna wyglądała nieco bardziej autentycznie. Jeśli zapoznasz się z naszym najnowszym bezpłatnym układem zarządzania nauką, zobaczysz, że na wszystkich stronach użyliśmy również teksturowanego tła.

Teraz zaczniemy od pokazania dwóch rodzajów tekstur, które odtworzymy w Photoshopie; tekstury wykonane za pomocą kształtów i tekstury wykonane za pomocą pędzli. Gdy już wiesz, jak to zrobić, możesz być tak kreatywny, jak chcesz i tworzyć autentyczne teksturowane tła. Następnie pokażemy Ci, jak możesz uzyskać oszałamiające rezultaty, łącząc teksturowane tła i opcje projektowe Divi.

Wynik obrazu wykonany za pomocą kształtów

Pierwszy obraz, który pokażemy, jak tworzyć w Photoshopie, wygląda tak:

Wynik z opcjami projektowymi Divi

A po zintegrowaniu z Divi możesz uzyskać oszałamiające rezultaty, takie jak:

Wynik obrazu wykonany za pomocą pędzli

Drugi obraz, który zrobimy, wygląda tak:

Wynik z opcjami projektowymi Divi

I może dostarczyć następujący piękny efekt, gdy użyjesz go w swojej witrynie:

Jak tworzyć i używać teksturowanych tła z opcjami projektowania Divi

Subskrybuj nasz kanał YouTube

Twórz teksturowane tło za pomocą Photoshopa

Wykonane z kształtami

Pierwsze teksturowane tło, które pokażemy, jak odtworzyć, zawiera głównie kształty utworzone za pomocą narzędzia Lasso wielokątne i narzędzia Gumka. Poprowadzimy Cię krok po kroku, jak utworzyć następujący wynik:

Nowy plik

Otwórz Photoshopa i zacznij od dodania nowego pliku. Ten plik będzie wymagał szerokości 1920px i wysokości 847px.

Dodaj kolor tła

Następnie dodaj kolor tła do właśnie utworzonego pliku. Upewnij się, że w całym procesie używasz nieco ciemniejszych szarych kolorów. Konieczne jest użycie nieco ciemniejszego koloru, ponieważ pomoże ci to później w tym poście przy dodawaniu opcji projektowania Divi. W tym przykładzie użyliśmy „#626262” jako koloru tła i użyliśmy narzędzia Wiadro z farbą, aby dodać kolor do warstwy.

Dodaj warstwę 2

Kontynuuj, dodając nową warstwę tuż nad pierwszą warstwą.

Dodaj pierwszy kształt do warstwy 2

Następnie wybierz narzędzie Lasso wielokątne i zacznij tworzyć kształt, mając wybraną warstwę 2.

Po zakończeniu wybierz narzędzie Wiadro z farbą i użyj „#747474”, aby pokolorować wybraną część.

Dodaj warstwę 3

Następnie dodaj kolejną warstwę tuż nad warstwą 2.

Dodaj drugą warstwę kształtu 3

Kontynuuj, tworząc inny kształt, taki jak ten na poniższym zrzucie ekranu, za pomocą narzędzia Polygonal Lasso.

Wybierz narzędzie Wiadro z farbą i tym razem użyj „#6a6a6a”.

Do tej pory Twój obraz powinien wyglądać tak:

Użyj narzędzia Gumka na warstwie 3

Idąc dalej, wybierz narzędzie Gumka, mając wybraną warstwę 3.

Użyj narzędzia Eraser razem z pędzlem o twardości 0% i rozmiarze 338px.

Następnie idź dalej i usuń obszar, którego chcesz zniknąć. Celowo zostawiliśmy tylko niewielką część warstwy 3, gdzie widać przejście między warstwą 2 a warstwą 3.

Duplikuj, przekształcaj, obracaj i umieszczaj warstwy po przeciwnej stronie

Teraz, gdy stworzyliśmy lewą stronę, druga strona pójdzie znacznie szybciej. Chcemy, aby było dokładnie tak samo, dlatego wybierzemy zarówno warstwę 2, jak i warstwę 3. Następnie zduplikujemy warstwy.

Po zduplikowaniu zobaczysz je na liście warstw.

Mając zaznaczone obie zduplikowane warstwy, przejdź do Edycja > Przekształć > Obróć o 180° i przeciągnij warstwy na drugą stronę obrazu.

Zapisz dla sieci

Jedyne, co pozostało do zrobienia, to zapisanie obrazu. Aby to zrobić, kliknij Plik > Eksportuj > Zapisz dla Internetu .

Na koniec upewnij się, że plik jest plikiem JPG lub PNG i zapisz go.

Wykonane za pomocą pędzli

Następnie pokażemy, jak tworzyć teksturowane tła za pomocą pędzli. Teksturowane tło, które pokażemy, jak odtworzyć, wygląda w tym przypadku tak:

Nowy plik

Zacznij od nowa, tworząc nowy dokument o szerokości 1920 pikseli i wysokości 847 pikseli.

Dodaj kolor tła

Gdy to zrobisz, dodaj tło do pierwszej warstwy z kodem koloru „#8f8f8f”.

Wyszukaj pasujący pędzel online

Następnym krokiem jest znalezienie pędzla pasującego do stylu sekcji bohatera. Istnieje wiele darmowych pędzli Photoshop, które są oszałamiające i za darmo. Możesz znaleźć i pobrać ten, którego będziemy używać w tym samouczku, przechodząc na następną stronę.

Prześlij pędzel

Znajdź plik ABR na swoim komputerze i przejdź do programu Photoshop, aby załadować pędzle. Wybierz Edytuj > Ustawienia wstępne > Menedżer ustawień > Pędzle > Załaduj i wybierz plik ABR zapisany na komputerze.

Dodaj warstwę 2

Po zakończeniu dodaj kolejną warstwę tuż nad warstwą 1.

Użyj pędzla z najjaśniejszym kolorem

Następnie możesz zacząć używać pędzla do tworzenia teksturowanego tła, które chcesz, wybierając narzędzie Pędzel.

Wybierz odpowiedni pędzel o rozmiarze 600px i użyj krycia 60%.

'

Pierwszy kolor, którego użyjemy, to „#a0a0a0”. Śmiało i utwórz pierwszą warstwę pędzla na swoim obrazie.

Użyj tego samego pędzla z ciemniejszym kolorem

Następnie zamień poprzedni kolor na „#ababab” i zrób to samo.

Użyj tego samego pędzla z najciemniejszym kolorem

Na koniec musisz użyć koloru „#686868”, aby zakończyć teksturowane tło.

Zapisz dla sieci

Teraz, gdy tło z teksturą jest gotowe, jedyne, co pozostało do zrobienia, to zapisanie obrazu. Aby to zrobić, wybierz Plik > Eksportuj > Zapisz dla Internetu .

Jeszcze raz wybierz, czy chcesz zapisać obraz jako plik JPG czy PNG.

Dodaj teksturowane tła do sekcji

Teksturowane tło wykonane z kształtów

Możesz bawić się ustawieniami tła Divi, aby osiągnąć dokładnie pożądany efekt po utworzeniu obrazów. W przypadku teksturowanego tła utworzonego z kształtów wybierzemy gradient promieniowy, aby jeden z kolorów gradientu znajdował się pośrodku, a drugi był w harmonii z naszym obrazem tła.

Tło gradientowe

Użyj następującego tła gradientowego dla swojej sekcji:

• Pierwszy kolor: #474ab6
• Drugi kolor: #9271f6
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 41%
• Pozycja końcowa: 100%

Opcje mieszania obrazu

Następnie prześlij obraz i użyj następujących ustawień:

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: nakładka

Teksturowane tło wykonane za pomocą pędzli

Tło gradientowe, którego użyjemy dla teksturowanego tła wykonanego za pomocą pędzli, jest liniowe. Wykonamy subtelne przejście, które nadal będzie nieco oddzielać używany kolor w harmonii z obrazem tła.

Tło gradientowe

Otwórz ustawienia sekcji i użyj następujących ustawień dla podkategorii Tło:

• Pierwszy kolor: #474ab6
• Drugi kolor: #9271f6
• Typ gradientu: liniowy
• Kierunek gradientu: 270 stopni
• Pozycja początkowa: 70%
• Pozycja końcowa: 100%

Opcje mieszania obrazu

Następnie prześlij obraz tła i użyj wraz z nim następujących ustawień:

• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: nakładka

Wynik

Teraz, gdy wykonaliśmy już wszystkie kroki, jeszcze raz przyjrzyjmy się efektowi końcowemu.

Wynik obrazu wykonany za pomocą kształtów

Wynik z opcjami projektowania Divi

Wynik obrazu wykonany za pomocą pędzli

Wynik z opcjami projektowania Divi

Końcowe przemyślenia

W tym poście pokazaliśmy, jak możesz użyć teksturowanego tła, aby Twoja witryna była bardziej autentyczna. Pokazaliśmy ci, jak możesz tworzyć dwa rodzaje tekstur za pomocą Photoshopa, a następnie pokazaliśmy, jak możesz ich używać w swoich sekcjach wraz z opcjami projektowania Divi. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa WEB-DESIGN / shutterstock.com