Divi로 이중 레이어 배경 스크롤 효과를 만드는 방법

웹 사이트를 눈에 띄게 만드는 방법을 찾고 있다면 이중 레이어 배경을 만드는 방법을 배우고 싶을 수 있습니다. 이중 레이어 배경을 만들면 움직임을 통해 배경 이미지에 생기를 불어넣을 수 있습니다. 오늘 튜토리얼에서는 Divi로 이중 레이어 배경 디자인을 만드는 방법을 보여줍니다. 이 자습서는 세 부분으로 구성되어 있습니다.

1. Adobe Photoshop에서 두 개의 이미지 파일 준비
2. Divi에서 디자인 만들기
3. 스크롤 효과를 적용하여 배경 애니메이션하기

JSON 및 이미지 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

이동하는

무료로 레이아웃 다운로드

무료 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

1. Photoshop에서 이미지 파일 만들기

배경이 깨끗한 제품 이미지 선택 및 Photoshop에서 열기

이 자습서의 첫 번째 부분에서는 Divi 자습서 전체에서 사용할 이미지 파일을 만들 것입니다. 이를 만들기 위해 Adobe Photoshop을 사용하지만 원하는 다른 이미지 편집 소프트웨어를 자유롭게 사용할 수 있습니다. 이중 레이어 배경 이미지 효과는 작업 중인 이미지가 다음과 같은 경우에 가장 잘 작동합니다.

1. 이미지 내부의 개체에 대한 명확한 초점
2. 깨끗한 배경

아래 이미지는 완벽한 예입니다. 이 이미지 파일은 이 게시물의 다운로드 영역에 공유된 압축 폴더에서 찾을 수 있습니다.

중복 레이어

Photoshop에서 이미지를 연 후 원본 레이어를 한 번 복제합니다. 우리는 복제 레이어에서 작업할 것입니다.

원본 레이어 숨기기

자습서 아래로 이동할 때 결과를 확인하려면 원본 레이어를 숨깁니다.

이미지의 개체 선택에서 PNG 만들기

플레이트에서 빠른 선택 도구 사용

튜토리얼에는 총 두 개의 이미지 파일이 필요합니다.

1. 개체의 PNG, 이 경우에는 플레이트
2. 개체가 없는 배경의 JPEG

개체를 배경에서 분리하므로 Divi 환경 내에서 개체를 개별적으로 조작할 수 있습니다.

개체 선택을 시작하려면 도구 모음에서 "빠른 선택 도구"를 선택하고 개체를 가능한 한 많이 가리십시오.

선택 + 마스크 선택

개체 선택이 여전히 충분하지 않다는 것을 알 수 있습니다. 선택 영역을 마우스 오른쪽 버튼으로 클릭할 때 "선택 및 마스크" 옵션을 사용하여 선택 영역이 어떻게 보이는지 미세 조정할 수 있습니다. 일단 거기에 있으면 불투명도, 부드러움 등을 가지고 놀 수 있습니다.

선택 영역에서 레이어 마스크 만들기

부드러운 선택을 만들었지만 아직 선택되지 않은 부분이 개체 내부에 있습니다. 아래 인쇄 화면에서 볼 수 있는 레이어 마스크 버튼을 클릭하여 이러한 부분을 선택 항목에 수동으로 추가합니다.

브러시로 마스크 내부 미세 조정

레이어 마스크가 생성되면 브러시를 사용하여 레이어 마스크를 수정할 수 있습니다. 레이어 마스크가 선택되어 있는지 확인하십시오.

• 검은색 브러시(#000)를 사용하면 레이어 마스크의 일부가 제거됩니다.
• 흰색 브러시(#fff)를 사용하면 레이어 마스크의 뒷부분이 추가됩니다.

너무 딱딱하지 않은 브러시를 사용하므로 초정밀화할 필요가 없습니다.

컬러 레이어가 있는 이중 체크 마스크

레이어 마스크 아래에 컬러 레이어를 배치하여 언제든지 레이어 마스크를 다시 확인할 수 있습니다. 당신이 한 자리를 놓친 경우 컬러 레이어는 더 쉽게 그것을 줄 것입니다.

PNG 선택 항목을 별도의 이미지 파일로 저장

새 파일 만들기

이제 개체의 PNG 선택 항목이 있으므로 전체 레이어를 복제할 수 있으므로 언제든지 다시 돌아갈 수 있습니다. 다음 부분에서는 복제 레이어를 사용하여 개체가 없는 배경 이미지를 만듭니다.

객체의 크기가 초기 파일 크기보다 훨씬 작으므로 객체에 대한 새 파일을 만들어 가져옵니다.

새 파일에 선택 영역 맞추기

생성한 새 파일 내부에 레이어 마스크가 있는 레이어를 복사하여 붙여넣습니다.

웹용으로 내보내기

그리고 웹용으로 PNG로 내보냅니다.

이미지 파일 압축

배경이 투명한 PNG는 파일 크기가 더 큰 경향이 있으므로 원하는 도구를 사용하여 파일을 압축하는 것이 좋습니다.

원본 이미지에서 개체 제거

레이어 마스크 선택

초기 Photoshop 파일로 돌아가십시오! 여기에서 개체가 없는 배경 이미지를 만들 것입니다. 이를 위해 파일 내부의 최상위 레이어를 사용하고 있습니다. 먼저 레이어 마스크가 선택되어 있는지 확인합니다.

마스크 반전

그런 다음 이 레이어의 속성으로 이동하여 "반전"을 클릭합니다.

레이어 마스크 적용

이제 개체가 초기 레이어 내부에서 투명하다는 것을 알 수 있습니다. 마우스 오른쪽 버튼을 클릭하고 "레이어 마스크 적용"을 선택하여 레이어 마스크를 레이어에 적용합니다.

복제 도구를 사용하여 빈 공간 채우기

아직 중간에 구멍이 있어서 채워야 합니다. 바로 여기에서 복제 도구가 유용합니다. 원하는 브러시 크기를 선택하고 이미지를 채웁니다. 이것에 대해 매우 정확할 필요는 없습니다. Divi 튜토리얼 내에서 그 위에 객체를 배치할 것입니다.

개체 없이 이미지 저장

웹용으로 내보내기

개체 없이 배경 이미지를 완성하면 70% 품질의 JPEG 파일로 저장할 수 있습니다.

이미지 파일 압축

이 이미지도 압축하십시오.

2. Divi에서 이중 레이어 배경 효과 만들기

새 섹션 추가

배경 이미지 업로드

두 이미지 파일이 모두 손에 닿으면 Divi로 전환할 시간입니다! 새 페이지를 열고 새 섹션을 추가합니다. 자습서의 첫 번째 부분에서 만든 배경 이미지를 업로드합니다.

간격

섹션의 디자인 탭으로 이동하여 사용자 정의 간격 값을 적용합니다. 우리가 추가하는 하단 여백은 효과가 제자리에 들어가는 것을 보는 데 도움이 될 것입니다. 일반적으로 이 여백은 디자인의 다음 섹션으로 대체됩니다.

• 하단 여백: 100vh
• 탑 패딩:
  • 데스크탑: 100px
  • 태블릿 및 휴대전화: 50px
• 하단 패딩:
  • 데스크탑: 100px
  • 태블릿: 600px
  • 전화: 500px

행 #1 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 너비와 최대 너비를 변경합니다. 이 설정을 사용하면 행이 항상 섹션 컨테이너의 왼쪽과 오른쪽에 닿을 수 있습니다. 이렇게 하면 모든 화면 크기에서 PNG와 배경 이미지의 균형이 동일한지 확인할 수 있습니다.

• 폭: 100%
• 최대 너비: 100%

간격

다음 행의 간격 설정으로 이동하여 모든 기본 상단 및 하단 패딩을 제거하십시오.

• 상단 패딩: 0px
• 하단 패딩: 0px

위치

그런 다음 전체 행의 위치를 ​​변경합니다.

• 위치: 절대
• 위치:
  • 데스크탑: 중앙
  • 태블릿 및 휴대전화: 중앙 하단
• 수직 오프셋:
  • 데스크탑: /
  • 태블릿 및 전화: 30vh

행에 이미지 모듈 추가

PNG 이미지 업로드

행 설정을 완료했으면 행에 이미지 모듈을 추가하고 튜토리얼의 첫 번째 부분에서 생성한 PNG 파일을 업로드합니다.

조정

디자인 탭으로 이동하여 이미지 정렬을 변경합니다.

• 이미지 정렬: 중앙

사이징

다음으로 크기 설정을 변경합니다.

• 너비:
  • 데스크탑: 36%
  • 태블릿 및 전화: 60%

행 #2 추가

열 구조

그런 다음 다음 열 구조를 사용하여 섹션에 다른 행을 추가합니다.

배경색

행 설정을 열고 배경색을 변경합니다.

• 배경색: #ffffff

사이징

다음으로 크기 설정을 수정합니다.

• 폭: 90%
• 최대 너비: 550px
• 행 정렬:
  • 데스크탑: 왼쪽
  • 태블릿 및 전화: 센터

간격

그런 다음 일부 사용자 지정 패딩 값을 적용합니다.

• 탑 패딩: 11%
• 하단 패딩: 11%
• 왼쪽 패딩: 5%
• 오른쪽 패딩: 5%

수평 오프셋

위치 설정에도 수평 오프셋을 추가하고 있습니다.

• 수평 오프셋:
  • 데스크탑: 5%
  • 태블릿 및 전화: 0%

열 1에 텍스트 모듈 #1 추가

H2 콘텐츠 추가

일부 H2 콘텐츠가 포함된 첫 번째 텍스트 모듈부터 시작하여 모듈을 추가할 시간입니다.

H2 텍스트 설정

다음과 같이 H2 텍스트의 스타일을 지정합니다.

• 제목 2 글꼴: Kumbh Sans
• 제목 2 텍스트 크기:
  • 데스크탑: 90px
  • 태블릿: 60px
  • 전화: 45px

열 1에 텍스트 모듈 #2 추가

설명 콘텐츠 추가

이전 모듈 바로 아래에 다른 텍스트 모듈을 추가하고 원하는 설명 내용을 삽입하십시오.

텍스트 설정

이에 따라 모듈의 텍스트 설정을 변경합니다.

• 텍스트 글꼴: Kumbh Sans
• 텍스트 줄 높이: 2em

열 1에 버튼 모듈 추가

사본 추가

이 칼럼에서 필요한 마지막 모듈은 버튼 모듈입니다. 원하는 사본을 추가하십시오.

버튼 설정

그에 따라 버튼의 스타일을 지정합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 20px
• 버튼 텍스트 색상: #6b6443
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 0px

• 버튼 글꼴: Kumbh Sans
• 버튼 글꼴 두께: 굵게
• 버튼 아이콘 표시: 예
• 버튼 아이콘 배치: 왼쪽
• 버튼에 대한 호버 시 아이콘만 표시: 아니오

박스 섀도우

상자 그림자도 포함하십시오.

• 상자 그림자 수평 위치: 0px
• 상자 그림자 수직 위치: 2px
• 그림자 색상: #6b6443

3. 스크롤 효과 추가

이미지 수직 모션

이 튜토리얼의 마지막 부분에서는 PNG 이미지 파일이 포함된 이미지 모듈에 스크롤 효과를 추가하는 데 중점을 둘 것입니다. 모듈의 설정을 열고 고급 탭으로 이동하여 다음 수직 모션 설정을 적용합니다.

• 수직 모션 활성화: 예
• 시작 오프셋:
  • 데스크탑: 0
  • 태블릿 및 휴대폰: 4(0%에서)
• 중간 오프셋:
  • 데스크탑: 0
  • 태블릿 및 전화: 0(97%에서)
• 끝 오프셋:
  • 데스크탑: 0
  • 태블릿 및 전화: -2(100%에서)

이미지 수평 모션

다음 수평 모션 설정을 사용하여 디자인을 완료하고 있습니다.

• 수평 동작 활성화: 예
• 시작 오프셋:
  • 데스크탑: 0(0%에서)
  • 태블릿 및 전화: 0
• 중간 오프셋:
  • 데스크탑: 0(65%에서)
  • 태블릿 및 전화: 0(97%에서)
• 끝 오프셋:
  • 데스크탑: -10(100%에서)
  • 태블릿 및 전화: 0

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

이동하는

마지막 생각들

이 게시물에서 우리는 이중 레이어 배경을 만들고 Divi의 내장 스크롤 효과로 애니메이션을 만드는 방법을 보여주었습니다. 튜토리얼의 첫 번째 부분에서는 Adobe Photoshop 내부에 이미지 파일을 준비했습니다. 튜토리얼의 2부에서는 Divi 내부의 이미지 파일을 사용하여 반응형 디자인을 만드는 데 중점을 두었습니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.