Divi 그라디언트 빌더를 사용하여 여러 그라디언트 색상을 손쉽게 혼합하는 방법

Divi의 새로운 Gradient Builder는 원하는 모든 유형의 그라디언트 배경을 생성하는 강력한 도구입니다. 사용하기 쉽고 여러 색상을 추가하여 흥미롭고 독특한 그라디언트를 만들 수 있습니다. 그러나 더 많은 색상을 추가하면 디자인 프로세스에서 더 많은 생각이 필요할 수 있습니다. 이 게시물에서는 Divi Gradient Builder를 사용하여 여러 그라디언트 색상을 손쉽게 혼합하여 자신만의 다중 색상 그라디언트 생성을 시작하는 방법을 알아보겠습니다.

여러 그라디언트 색상 미리보기

먼저 이 튜토리얼에서 빌드할 내용을 살펴보겠습니다. 동일한 레이아웃을 사용하여 4개의 다른 그라디언트를 만듭니다.

첫 번째 예제 결과

두 번째 예시 결과

세 번째 예시 결과

네 번째 예시 결과

여러 그라디언트 색상을 결합하기 위한 모범 사례

모든 디자인 원칙과 마찬가지로 여러 그라디언트 색상을 결합할 때 염두에 두어야 할 몇 가지 사항이 있습니다. 다음은 웹 사이트에 대한 최상의 모양과 느낌을 얻기 위해 여러 그라디언트 색상을 결합할 때 염두에 두어야 할 몇 가지 사항입니다.

유색 계열에 초점

같은 색상의 다른 음영을 사용하면서 같은 색상 계열에 머무르십시오. 이렇게 하면 배경색 간의 대비가 낮아져 배경이 너무 산만해지지 않습니다. 우리는 첫 번째 예에서 이 기술을 사용할 것입니다.

톤다운된 색상 시도

같은 레벨로 톤다운된 다양한 음영을 시도해보세요. 이렇게 하면 색상 간의 대비를 낮게 유지하면서 더 많은 색상을 얻을 수 있습니다. 파스텔은 이에 대한 좋은 예입니다. 이렇게 하면 전경에서 산만해지지 않으면서 배경에 다양한 색상 음영을 제공합니다. 두 번째 예에서 이 방법을 사용합니다.

가독성 우선

디자인에서 항상 가독성을 우선시하십시오. 그라디언트로 색상과 패턴을 디자인할 때 콘텐츠를 항상 읽을 수 있는지 확인하세요. 이를 수행하는 한 가지 방법은 그라디언트를 화면의 한쪽으로 밀어 넣는 것입니다. 이를 통해 콘텐츠에 방해가 되지 않고 눈에 띄는 그라디언트를 디자인할 수 있습니다. 세 번째 예에서는 이 방법을 사용합니다.

교차 및 혼합 그라디언트 사용

교차 그라디언트와 혼합 그라디언트를 결합하여 단단한 선과 부드러운 톤을 만듭니다. 콘텐츠를 방해하지 않으면서 흥미로운 패턴을 만들 수 있습니다. 레이아웃에 가장 적합한 것이 무엇인지 확인하려면 다양한 방향과 그라디언트 정지점을 시도하십시오. 이 설정을 사용하여 원, 굵은 선 등을 만듭니다. 세 번째 예제에서도 이 방법을 사용할 것입니다.

다양한 그라디언트 유형 사용

독특한 결과를 얻으려면 다양한 그라디언트 유형으로 실험하십시오. 예를 들어 원뿔형은 다양한 그라디언트 색상으로 독특한 모양과 느낌을 만드는 훌륭한 그라디언트 유형입니다. 네 번째 예에서는 원뿔형을 사용합니다.

너무 많은 색상을 사용하지 마십시오

더 많은 색상을 갖기 위해 더 많은 색상을 사용하지 마십시오. 일반적으로 2~3가지 색상이 이상적이지만 주의하면 더 많이 사용할 수 있습니다. 더 많은 색상을 사용할 때는 최대한 유사하게 유지하여 뚜렷한 대비가 아닌 음영이 되도록 합니다.

무작위로 색상을 선택하지 마십시오

콘텐츠 및 웹사이트와 잘 어울리는 색상을 사용하세요. 이렇게 하면 콘텐츠를 읽을 수 있을 뿐만 아니라 웹사이트에 있는 것처럼 보입니다.

UX 기억하기

항상 사용자 경험을 고려하십시오. 콘텐츠가 있는 그라디언트를 확인하여 제대로 작동하는지 확인하세요. 여러 사용자가 콘텐츠와 그라디언트를 보고 잘 작동하는지 확인하게 합니다.

그라디언트 테스트

최상의 결과를 얻기 위해 / b 테스트를 통해 다양한 유형과 색상의 그라디언트를 시도하십시오.

다중 그라디언트 색상의 예

이제 몇 가지 Gradient Builder 예제를 살펴보겠습니다. 이 예에서는 Divi 내에서 사용할 수 있는 무료 바닥재 레이아웃 팩의 정보 페이지에서 영웅을 조정했습니다. 새 배경색 #6294d1과 새 버튼 색상 #c1fff4를 지정했습니다.

• 배경색: #6294d1
• 버튼 색상: #c1fff4

Divi 그라디언트 빌더로 여러 그라디언트 색상을 만드는 방법

먼저 Divi Gradient Builder 내에서 조정하는 방법을 살펴보겠습니다. 섹션의 배경에 그라디언트를 추가합니다. 시작하려면 섹션의 설정 아이콘을 클릭하십시오.

그런 다음 배경 까지 아래로 스크롤합니다. 배경 그라디언트 탭을 선택하고 배경 그라디언트 추가 를 클릭합니다.

그라디언트는 두 가지 색상으로 시작됩니다. 그라디언트 정지 막대에서 그라디언트를 선택하여 색상을 변경하고 새 시작 위치로 드래그합니다. 원하는 만큼 그라디언트를 추가합니다. 더 추가, 삭제, 편집 등을 할 수 있습니다.

Type , Direction , Repeat , Unit 을 조정하고 원하는 디자인을 얻기 위해 배경 이미지 위에 배치 할지 여부를 조정합니다.

Divi 그라디언트 빌더에 대한 자세한 개요는 Divi용 고급 그라디언트 빌더 소개 문서를 참조하세요.

다중 그라디언트 색상 예 1

첫 번째 예에서는 4개의 그래디언트 정지점을 만듭니다. 배경 그라디언트 탭을 열고 첫 번째 그라디언트 를 선택합니다. 그라디언트 위치를 0%로 두고 그라디언트 색상을 #6294d1로 변경합니다.

• 그라디언트가 첫 번째 포인트 위치를 멈춥니다: 0%
• 색상: #6294d1

그런 다음 그라디언트 정지 막대를 클릭하여 새 색상 정지 점을 추가합니다. 그라디언트 위치를 29%로 이동하고 색상을 #b5bfd1로 변경하고,

• 그라디언트가 두 번째 포인트 위치를 멈춥니다: 29%
• 색상: #b5bfd1

다음으로 세 번째 Gradient Stop 을 추가하고 해당 위치 를 84%로 이동합니다. 색상을 #8eacd1로 변경합니다.

• 그라디언트 스톱 세 번째 포인트 위치: 84%
• 색상: #8eacd1

마지막으로 네 번째 Gradient Stop 의 색상을 #b5bfd1로 변경합니다. 이 그라디언트 위치를 100%로 둡니다.

• 네 번째 포인트 위치에서 그라디언트 중지: 100%
• 색상: #b5bfd1

다음으로 그라디언트 설정을 조정합니다. 방향 을 225deg로 변경합니다. 나머지 설정은 기본값으로 둡니다. 이러한 설정을 볼 수 있도록 여기에 포함하겠습니다. 이제 모듈의 설정을 닫고 작업을 저장할 수 있습니다.

• 유형: 선형
• 방향: 225deg
• 그라디언트 반복: 아니오
• 기울기 단위: 백분율
• 배경 이미지 위에 그라디언트 배치: 아니요

다중 그라디언트 색상 예제 2

두 번째 예에서는 3개의 그라디언트 정지점을 만듭니다. 배경 그라디언트 설정을 열고 첫 번째 그라디언트 정지 의 색상을 #bffffc로 변경합니다. 위치를 0%로 둡니다.

• 첫 번째 기울기 정지 위치: 0%
• 색상: #bffffc

새 그래디언트 정지 점을 추가하고 해당 위치를 42%로 이동합니다. 색상을 #bbc7f9로 변경합니다.

• 두 번째 기울기 정지 위치: 42%
• 색상: #bbc7f9

다음으로 세 번째 그래디언트 정지 점의 색상을 #adbdd1로 변경합니다. 그래디언트 위치를 100%로 둡니다.

• 세 번째 기울기 정지 위치: 100%
• 색상: #adbdd1

다음으로 그라디언트 유형 을 원형으로 변경합니다. 나머지 설정은 기본값으로 둡니다. 이렇게 하면 섹션 중앙에 핫스팟이 생성됩니다. 설정을 닫고 작업을 저장합니다.

• 그라디언트 유형: 원형

다중 그라디언트 색상 예 3

세 번째 예에서는 3개의 그라디언트 정지점을 사용하여 그라디언트를 만듭니다. 첫 번째 그래디언트 의 위치를 ​​15%로 이동하고 색상을 #afc3ed로 변경합니다.

• 첫 번째 기울기 정지 위치: 15%
• 색상: #afc3ed

다음으로 두 번째 그래디언트 정지 점을 33%로 이동하고 색상을 #adbdd1로 변경합니다.

• 두 번째 기울기 정지 위치: 33%
• 색상: #bffffc

다음으로 세 번째 그라디언트 정지 점을 두 번째 그라디언트 정지점 바로 위의 33%로 이동하고 해당 색상을 #adbdd1로 변경합니다. 그라디언트 정지 막대에 2개의 그라디언트가 있는 것처럼 보일 것입니다.

• 3차 기울기 정지 위치: 33%
• 색상: #adbdd1

이것은 우리가 설정으로 만들 흥미로운 아치를 가질 것입니다. 그라디언트 유형 을 원형으로 변경하고 그라디언트 위치 를 오른쪽으로 변경합니다. 설정을 닫고 작업을 저장합니다.

• 유형: 원형
• 위치: 오른쪽

다중 그라디언트 색상 예 4

네 번째 예에는 5개의 그래디언트 스톱이 포함되어 있습니다. 첫 번째 그라디언트 정지 의 경우 색상을 #878ebc로 변경합니다. Position에 대해 이것을 0%로 둡니다.

• 첫 번째 기울기 정지 위치: 0%
• 색상: #878ebc

22%의 위치에 두 번째 그래디언트 정지점 을 추가합니다. 색상을 #a0c1d6으로 변경합니다.

• 두 번째 기울기 정지 위치: 22%
• 색상: #a0c1d6

다음으로 48%의 위치에 세 번째 그래디언트 정지점 을 추가합니다. 색상을 #bffffc로 변경합니다.

• 3차 기울기 정지 위치: 48%
• 색상: #bffffc

네 번째 그래디언트 스톱 의 경우 73% 위치에 놓고 색상을 #d3d8ff로 변경합니다.

• 4차 정지 위치: 73%
• 색상: #d3d8ff

다섯 번째 그래디언트 정지 점의 경우 77% 위치로 이동하고 색상을 #c6dfff로 변경합니다.

• 5차 기울기 정지 위치: 77%
• 색상: #c6dfff

마지막으로 Gradient Type 을 Conical로 변경하고 Gradient Direction을 233deg로 변경합니다. 설정을 닫고 작업을 저장합니다.

• 유형: 원추형
• 방향: 233deg

여러 그라디언트 색상 결과

첫 번째 예제 결과

두 번째 예시 결과

세 번째 예시 결과

네 번째 예시 결과

여러 그라디언트 색상에 대한 생각 끝내기

Divi Gradient Builder를 사용하여 여러 그라디언트 색상을 손쉽게 혼합하는 방법을 살펴보았습니다. Gradient Builder는 재미있게 놀 수 있습니다. 원하는 만큼 색상을 추가할 수 있지만 함께 멋지게 보이도록 하려면 몇 가지 간단한 디자인 원칙을 따라야 합니다. 이 예는 3~5가지 색상을 사용하여 웹사이트 디자인과 잘 어울리는 그라디언트를 만드는 것이 얼마나 쉬운지 보여줍니다.

우리는 당신의 의견을 듣고 싶습니다. Divi의 새로운 Gradient Builder로 여러 그라디언트 색상을 만드는 데 이 방법을 사용했습니까? 의견에 귀하의 경험에 대해 알려주십시오.