Divi의 디자인 옵션으로 질감 있는 배경을 만들고 사용하는 방법

오늘의 Divi 튜토리얼에서는 단순한 질감의 배경을 만들고 이를 섹션의 배경으로 사용하여 웹사이트를 좀 더 사실적으로 보이게 하는 방법을 보여 드리겠습니다. 최근 무료 학습 관리 레이아웃을 확인하면 모든 페이지에서도 질감 있는 배경을 사용했음을 알 수 있습니다.

이제 Photoshop으로 다시 만들 두 가지 유형의 텍스처를 보여 주는 것으로 시작하겠습니다. 모양으로 만든 질감과 브러시로 만든 질감. 방법을 알면 원하는 만큼 창의적으로 실제 질감 배경을 만들 수 있습니다. 그런 다음 질감 있는 배경과 Divi의 디자인 옵션을 결합하여 멋진 결과를 만드는 방법을 보여드리겠습니다.

모양으로 만든 이미지 결과

Photoshop으로 만드는 방법을 보여드릴 첫 번째 이미지는 다음과 같습니다.

Divi의 디자인 옵션을 사용한 결과

Divi에 통합되면 다음과 같은 놀라운 결과를 얻을 수 있습니다.

브러시로 만든 이미지 결과

두 번째로 만들 이미지는 다음과 같습니다.

Divi의 디자인 옵션을 사용한 결과

웹사이트에서 사용할 때 다음과 같은 아름다운 결과를 제공할 수 있습니다.

Divi의 디자인 옵션으로 질감 있는 배경을 만들고 사용하는 방법

YouTube 채널 구독

Photoshop으로 질감 배경 만들기

모양으로 만든

다시 만드는 방법을 보여드릴 첫 번째 질감 배경에는 다각형 올가미 도구와 지우개 도구로 만든 모양이 대부분 있습니다. 다음 결과를 생성하는 방법을 단계별로 안내해 드립니다.

새로운 파일

Photoshop을 열고 새 파일을 추가하여 시작합니다. 이 파일의 너비는 1920px, 높이는 847px입니다.

배경색 추가

그런 다음 방금 만든 파일에 배경색을 추가합니다. 전체 프로세스에서 약간 더 어두운 회색을 사용하고 있는지 확인하십시오. 나중에 이 게시물에서 Divi 디자인 옵션을 추가할 때 도움이 될 것이므로 약간 더 어두운 색상을 사용하는 것이 중요합니다. 이 예에서는 '#626262'를 배경색으로 사용했으며 페인트 통 도구를 사용하여 레이어에 색상을 추가했습니다.

레이어 2 추가

첫 번째 레이어 바로 위에 새 레이어를 추가하여 계속합니다.

레이어 2에 첫 번째 모양 추가

그런 다음 다각형 올가미 도구를 선택하고 레이어 2를 선택한 상태에서 모양 만들기를 시작합니다.

완료되면 페인트 통 도구를 선택하고 '#747474'를 사용하여 선택한 부분에 색상을 지정합니다.

레이어 3 추가

그런 다음 레이어 2 바로 위에 다른 레이어를 추가합니다.

두 번째 모양 레이어 3 추가

다각형 올가미 도구를 사용하여 아래 인쇄 화면과 같은 다른 모양을 계속 만듭니다.

페인트 통 도구를 선택하고 이번에는 '#6a6a6a'를 사용합니다.

지금까지 이미지는 다음과 같아야 합니다.

레이어 3에서 지우개 도구 사용

계속해서 레이어 3을 선택한 상태에서 지우개 도구를 선택합니다.

경도가 0%이고 크기가 338px인 브러시와 함께 지우개 도구를 사용합니다.

그런 다음 가고 싶은 영역을 지우십시오. 레이어 2와 레이어 3 사이의 전환을 볼 수 있는 레이어 3의 일부만 의도적으로 남겨 두었습니다.

반대쪽에 레이어 복제, 변형, 회전 및 배치

이제 왼쪽을 만들었으므로 다른 쪽이 훨씬 더 빨리 진행됩니다. 우리는 정확히 동일하기를 원하기 때문에 레이어 2와 레이어 3을 모두 선택합니다. 그런 다음 레이어를 복제합니다.

복제되면 레이어 목록에 나타나는 것을 볼 수 있습니다.

복제된 두 레이어를 모두 선택한 상태에서 편집 > 변형 > 180° 회전으로 이동 하여 레이어를 이미지의 다른 쪽으로 드래그합니다.

웹용으로 저장

이미지를 저장하는 일만 남았습니다. 그렇게 하려면 파일 > 내보내기 > 웹용으로 저장을 클릭합니다.

마지막으로 파일이 JPG 또는 PNG 파일인지 확인하고 저장합니다.

브러시로 만든

다음으로 브러시를 사용하여 질감 있는 배경을 만드는 방법을 보여 드리겠습니다. 이 경우 모양을 다시 만드는 방법을 보여드릴 질감 있는 배경은 다음과 같습니다.

새로운 파일

너비 1920px, 높이 847px를 사용하여 새 문서를 만들어 다시 시작합니다.

배경색 추가

완료되면 '#8f8f8f' 색상 코드로 첫 번째 레이어에 배경을 추가합니다.

일치하는 브러시 온라인 검색

다음 단계는 영웅 섹션의 스타일과 일치하는 브러시를 찾는 것입니다. 놀랍고 무료인 무료 Photoshop 브러시가 많이 있습니다. 다음 페이지로 이동하여 이 튜토리얼에서 사용할 것을 찾고 다운로드할 수 있습니다.

브러시 업로드

컴퓨터에서 ABR 파일을 찾고 Photoshop으로 이동하여 브러시를 로드합니다. 편집 > 사전 설정 > 사전 설정 관리자 > 브러시 > 로드를 선택하고 컴퓨터에 저장한 ABR 파일을 선택합니다.

레이어 2 추가

완료되면 레이어 1 바로 위에 다른 레이어를 추가합니다.

가장 밝은 색상의 브러시 사용

그런 다음 브러시 도구를 선택하여 브러시를 사용하여 원하는 질감 배경을 만들 수 있습니다.

600px 크기로 원하는 브러시를 선택하고 불투명도 60%를 사용합니다.

'

우리가 사용할 첫 번째 색상은 '#a0a0a0'입니다. 계속해서 이미지에 첫 번째 브러시 레이어를 만드십시오.

더 어두운 색상의 동일한 브러시 사용

그런 다음 이전 색상을 '#ababab'로 바꾸고 동일한 작업을 수행합니다.

가장 어두운 색상의 동일한 브러시 사용

마지막으로 질감 배경을 완성하려면 '#686868' 색상을 사용해야 합니다.

웹용으로 저장

질감 배경이 완성되었으므로 이제 이미지를 저장하는 일만 남았습니다. 이렇게 하려면 파일 > 내보내기 > 웹용으로 저장을 선택 합니다.

다시 한 번 이미지를 JPG 또는 PNG 파일로 저장할지 선택합니다.

섹션에 질감 배경 추가

모양으로 만든 질감된 배경

이미지를 만든 후에는 원하는 정확한 결과를 얻기 위해 Divi의 배경 설정을 가지고 놀 수 있습니다. 모양으로 만든 질감 배경의 경우 방사형 그라디언트 유형을 선택하여 중간에 그라디언트 색상 중 하나를 포함하고 배경 이미지와 조화를 이루는 다른 1개를 갖습니다.

그라데이션 배경

섹션에 다음 그라데이션 배경을 사용하십시오.

• 첫 번째 색상: #474ab6
• 두 번째 색상: #9271f6
• 그라디언트 유형: 방사형
• 방사형 방향: 중심
• 시작 위치: 41%
• 최종 위치: 100%

이미지 혼합 옵션

그런 다음 이미지를 업로드하고 다음 설정을 사용합니다.

• 배경 이미지 크기: 표지
• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 오버레이

브러시로 만든 질감된 배경

브러시로 만든 질감 배경에 사용할 그라데이션 배경은 선형입니다. 배경 이미지와 조화롭게 사용되는 색상을 여전히 약간 분리하는 미묘한 전환을 만들 것입니다.

그라데이션 배경

섹션 설정을 열고 배경 하위 범주에 대해 다음 설정을 사용합니다.

• 첫 번째 색상: #474ab6
• 두 번째 색상: #9271f6
• 그라디언트 유형: 선형
• 기울기 방향: 270deg
• 시작 위치: 70%
• 최종 위치: 100%

이미지 혼합 옵션

그런 다음 배경 이미지를 업로드하고 다음 설정을 함께 사용합니다.

• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 오버레이

결과

이제 모든 단계를 거쳤으므로 최종 결과를 다시 한 번 살펴보겠습니다.

모양으로 만든 이미지 결과

Divi의 디자인 옵션을 사용한 결과

브러시로 만든 이미지 결과

Divi의 디자인 옵션을 사용한 결과

마지막 생각들

이 게시물에서는 질감 있는 배경을 사용하여 웹사이트를 더욱 실감나게 만드는 방법을 보여주었습니다. Photoshop을 사용하여 두 가지 유형의 텍스처를 만드는 방법을 보여주었고 Divi의 디자인 옵션과 함께 섹션 내에서 사용하는 방법을 보여주었습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

WEB-DESIGN/Shutterstock.com의 주요 이미지