고객의 브랜드 색상을 Divi 5 컬러 시스템으로 전환

브랜드 색상은 일반적으로 제목, 버튼 및 배경에 적용되는 16 진 코드로 시작합니다. 처음에는 충분히 간단하지만 레이아웃이 증가함에 따라 종종 가벼운 색상 변형, 호버 상태 또는 보완 액센트가 필요합니다. 수동으로 관리하면 지저분해질 수 있습니다.

Divi 5의 새로운 색상 시스템을 사용하면 팔레트를 한 번 정의하고 초기 색상 팔레트에서 연결된 색조를 구축 할 수 있습니다. 설계가 발전하더라도 각 색상은 동기화됩니다. 이 안내서에서는 고객 사이트에서 모든 것을 일관성있게 유지하는 유연하고 확장 가능한 색상 시스템을 만드는 방법을 배웁니다.

Divi 5의 컬러 시스템 이해

Divi 4의 글로벌 색상으로 작업 한 경우 이미 색상을 한 번 정의하고 사이트에 적용하는 것이 얼마나 유용한 지 알고 있습니다. Divi 5는 같은 아이디어를 구축하지만 이번에는 색상이 당신과 함께하는 완전한 시스템으로 바뀝니다.

YouTube 채널을 구독하십시오

다음은 세 가지 주요 업그레이드입니다.

설계 변수로 시작합니다. 가변 관리자의 색상 탭 내부의 브랜드 팔레트를 정의하면 이러한 값이 기초가됩니다. 일단 정의되면 모든 모듈이나 섹션에서 사용할 준비가되었습니다. 그리고 브랜드가 라인 아래로 진화하면 변수를 한 곳에서만 업데이트하면됩니다. 그들과 연결된 모든 것이 자체적으로 조정됩니다.

두 번째 업그레이드는 HSL 컬러 필터입니다. 슬라이더를 사용하면 색조, 채도 및 가벼움을 조정할 수 있으므로 톤과 대비로 작업 할 때 더 많은 제어 기능을 제공합니다.

기본 녹색이 배경에 너무 가혹한 느낌이라면 약간 부드럽게 연화하고 밝기를 조정하고 해당 버전을 변수로 저장할 수 있습니다. 이것은 새로운 색상이지만 여전히 원래 색상과 연결되어 있습니다.

이것은 또한 고립 된 값보다는 관계에서 생각할 공간을 열어줍니다. 변수를 서로 연결하여 어둡고 가벼우거나 약간 더 따뜻하거나 더 정복 된 것과 같이 항상 다른 거리와 일정 거리를 유지할 수 있습니다. 이를 상대 색상이라고하며 세 번째 개선입니다.

예를 들어 호버 색상은 1 차보다 20% 어두운 것으로 정의 할 수 있습니다. 기본 색상이 변경되면 호버 상태는 수동 조정없이 관계를 유지합니다.

이 3 부 시스템은 유연하고 접지 된 작업 색상 시스템을 만듭니다. 한 번에 하나의 모듈을 색상을 적용하는 것이 아닙니다. 디자인을 일관되고 깨끗하게 유지하면서 필요에 따라 변속 할 수있는 팔레트를 구축합니다.

Divi의 새로운 색상 시스템에 대한 모든 것을 배우십시오

지금까지 16 진 코드에 의존하고 있다면, 이것이 워크 플로가 제한적이라고 느끼기 시작하는 시점입니다. 그리고 그것은 미래의 준비된 컬러 시스템으로 이동하기위한 당신의 신호입니다.

고객의 브랜드 색상을 Divi 5 컬러 시스템으로 전환

Divi 5의 컬러 시스템이 어떻게 작동하는지 알았으므로 실제 프로젝트에서 어떻게 보이는지 살펴 보겠습니다. 이 예에서는 Divi 라이브러리에서 증강 현실 홈페이지 레이아웃을 가져 왔습니다.

시나리오를 구축합시다. 클라이언트가 사이트 전체에 사용 된 굵은 녹색의 균형을 맞추기 위해 보완 색상을 추가하려고한다고 가정합니다. 몇 개의 지점에 수동으로 추가하는 대신 레이아웃을 Divi 5의 컬러 시스템으로 전환 할 수있는 기회로 가져 가겠습니다. 따라서 다시 요청하면 향후 수동으로 변경할 필요가 없습니다.

레이아웃을 살펴보면 제목, 버튼 및 악센트 요소와 같은 여러 장소에 동일한 녹색이 나타납니다. 각각 고정 된 16 진 코드를 사용합니다. 우리의 목표는 그것들을 색상 변수로 교체하고 나중에 변경에 적응할 수있는 팔레트를 구축하는 것입니다.

일반적으로 이와 같은 레이아웃을 업데이트하면 각 모듈을 직접 편집하는 것을 의미합니다. 그러나 다음 몇 단계에서는 색상 변수, HSL 필터 및 연결된 색상 로직을 사용하여보다 안정적인 것을 구축 할 것입니다. 동일한 레이아웃을 따르거나 프로젝트를 기본으로 사용할 수 있습니다.

1. 고객의 기본 색상을 설계 변수로 저장하십시오.

고객이 새로운 16 진 코드를 공유했거나 기존 브랜드 색상을 고수하는 경우 첫 번째 단계는 디자인 변수 관리자에 추가하는 것입니다. 이것은 당신의 기본 색상이되어 주변에 구축하는 색상 변형의 기초가 될 것입니다.

기본 색상 추가

시작하려면 변수 관리자를 열고 색상 탭으로 전환하십시오.

패널에는 이미 1 차, 보조, 제목 및 신체 텍스트에 대한 기본값이 포함될 수 있습니다. 기본 색상 필드에서 기본 브랜드 색상의 HEX 코드를 입력하고 변수 저장을 클릭하십시오.

보조 색상 추가

다음으로, 기본을 기본으로 사용 하여이 보조 색상의 상대 버전을 만들 것입니다. 이렇게하면 기본 색상의 향후 변경 사항이 자동으로 수행됩니다.

이 예에서는 기존 녹색의 균형을 맞추기 위해 상보적인 색상을 추가하기 때문에이를 보조 색상으로 할당합니다. 레이아웃의 배경은 검은 색 이므로이 페어링은 명확하게 두드러집니다.

지금은 하나의 색상으로 만 작업하는 경우 2 차 슬롯을 검은 색으로 남겨 두십시오.

보조 색상 견본을 클릭하여 색상 창을 열어줍니다. 저장된 모든 값은 전역 색상 아래에 나열되며 기본 색상이 먼저 나열됩니다.

선택하십시오. 이것은 기본 색상을 출발점으로 가져옵니다.

이제 견본을 다시 클릭하여 창을 다시 열린 다음 컬러 필터 드롭 다운을 엽니 다. 이것은 색조, 채도 및 가벼움을 조정할 수있는 HSL 슬라이더를 보여줍니다.

이 슬라이더를 사용하여 새 색상을 형성하십시오. 만족하면 저장하십시오. 그리고 마찬가지로, 당신은 1 차에 연결된 보조 색상이 있습니다.

보조 색상을 검은 색으로 유지하려면 1 차에 여전히 연결하려면 가벼움 과 채도 슬라이더를 모두 -100으로 돌립니다.

대신 어두운 그늘을 만들려면 색조와 채도를 그대로두고 가벼움 만 줄입니다.

이 시점에서 자유롭게 실험 할 수 있습니다. 톤이 디자인에 적합 할 때까지 값을 조정하십시오. 새로운 색상이 브랜드 팔레트와 부드럽게 혼합 되든 대비로 두드러 지든 1 차와 연결되어 있으며 이와 함께 진화합니다.

2. HSL 조정을 사용하여지지 색상을 빌드하십시오

기본 및 보조 색상이 제자리에 있으면 다음 단계는 팔레트를 확장하는 것입니다. 이지지 색상은 디자인 공간을 호흡 할 수 있습니다. 레이아웃 전체에서 유연성, 미묘한 대비 및 시각적 리듬을 추가합니다.

이러한 변형을 만들려면 HSL 패널을 열고 슬라이더를 조정하십시오.

• 주의를 끌지 않고 대비가 필요한 섹션이나 배경에 더 가벼운 색조를 만듭니다.
• 버튼, 호버 상태 또는 눈에 띄는 대담한 헤드 라인에는 약간 어두운 색조를 사용하십시오.
• 색조 또는 채도를 약간 바꾸어 악센트 색상을 형성합니다. 이 색상은 분배기, 아이콘 또는 기타 작은 시각적 하이라이트에 적합합니다.

한 번 수행하는 방법을 보여 드리며 동일한 접근 방식을 따라 원하는 모든 새로운 색상을 정의 할 수 있습니다. 보조 색상의 호버 버전을 만들고 싶다고 가정 해 봅시다. 새로운 색상 변수를 만들고, 명확한 이름을주고, 슬라이더를 조정하여 톤을 올바르게 만들고 저장합니다.

변수가 저장되었으므로 다른 색상과 마찬가지로 버튼의 호버 상태에 적용 할 수 있습니다.

지원 색상을 추가 할 때 브랜드의 색조 표현, 다양한 강조, 대비 또는 분위기를 반영하는 변형으로 생각하십시오. 예를 들어, 소프트 톤은 배경에 잘 작동하며, 굵은 톤은 콜로그 호출에주의를 기울이고, 음소거 톤은 오버레이 또는 보조 텍스트에 유용합니다.

Techally는 16 진 코드를 사용하여 기술적으로 이러한 모든 수동으로 만들 수 있습니다. 그리고 만약 당신이 단 한 페이지를 구축한다면, 그것은 괜찮을 것입니다. 그러나 고객이 핵심 색상을 변경하려는 순간 모든 지름길은 한계를 표시하기 시작합니다. 우리가 의미하는 바는, 웹 사이트에서 배경 음영을 얼마나 많이 사용했는지 추적하지 않을 것입니다. 이 시나리오에서는 연결된 변수로 이러한 변수를 구축하는 데 약간의 시간이 걸리지만 일단 제자리에 설치되면 상황이 얼마나 자주 변화하든 디자인을 일관되게 유지합니다.

3. 기존 정적 색상을 변수로 바꾸십시오

새로운 색상 변수가 저장되면 레이아웃 전체에 사용되는 하드 코드 헥스 값을 대체 할 때입니다. 여기서 정적에서 동적으로 이동하면 일관성뿐만 아니라 시간이 지남에 따라 디자인을 유지하는 것이 얼마나 쉬운 지에 따라 실제 차이를 만들기 시작합니다.

고정 된 색상 값을 사용하는 모든 요소에 대한 레이아웃을 스캔하여 시작하십시오. 여기에는 버튼, 제목, 배경, 아이콘 또는 단면 분배기가 포함될 수 있습니다. 브랜드 색상이 수동으로 적용되는 곳은 이제 새 시스템에 연결할 수있는 기회입니다.

이를 위해 Divi는 두 가지 옵션을 제공합니다. 속성을 확장하고 찾아서 교체하십시오. 둘 다 여러 요소를 빠르게 업데이트 할 수 있지만 각각은 약간 다른 상황에서 빛납니다.

• 올바른 변수를 하나의 요소에 이미 적용하고 나머지를 일치시키려는 경우 확장 속성 사용 속성을 사용하십시오.
• 다른 요소에 적용 되더라도 특정 16 진수 값이 나타나는 곳에서 특정 16 진수 값을 교체하려는 경우 찾기 및 교체를 사용하십시오.

확장 속성부터 시작하겠습니다.

확장 속성 사용

이 예에서는 레이아웃의 모든 H2에 새로운 보조 색상을 할당하려고합니다. 우리 중 하나에 적용하여 시작합니다.

완료되면 요소를 마우스 오른쪽 버튼으로 클릭하고 속성 확장을 선택합니다. 나타나는 패널에서는 범위를 전체 페이지 로 설정하고 요소 유형을 텍스트로 설정합니다.

한 번의 클릭으로, 페이지의 모든 H2는 동일한 보조 색상을 채택하여 기본 색상이 변경되면 기본 색상과 연결되어 있기 때문에 동기화됩니다.

찾기 및 교체 사용

이제 사이트 전체에서 특정 색상 값을 교체하고 싶을 때 특히 잘 작동하는 Find and Relect를 시도해 봅시다.

이 경우 바디 텍스트 색상을 업데이트하려고합니다. 그렇게하려면 설정> 디자인> 바디 텍스트 색상 , 마우스 오른쪽 버튼을 클릭하고 찾기 및 교체로 이동합니다. 그런 다음 교체 값 필드를 가리키고 새 변수를 선택합니다.

그게 전부입니다. 그 이전 색상의 모든 인스턴스는 이제 새 변수로 업데이트됩니다.

여기서 따라야 할 단일 방법은 없습니다. 확장 속성은 이미 하나의 모듈을 수동으로 업데이트 한 경우 유사한 요소에 걸쳐 해당 변경을 수행하는 빠른 방법입니다. 여전히 정적 16 진 코드로 작업하고 대량으로 변경하려는 경우 찾아서 교체하면 빠르게 이동하는 데 도움이됩니다.

어떤 접근 방식을 선택하면 정리를 더 쉽게 할 수 있습니다. 일단 완료되면이 시스템의 실제 이점을 볼 수 있습니다. 하나의 색상 만 변경할 때 디자인이 어떻게 반응하는지.

새로운 색 구성표를 테스트합니다

당신이 한 모든 일은 설정에 관한 것입니다. 이제 전체 설정이 그 값을 표시하기 시작할 때입니다.

시스템이 제자리에 있으면 기본 색상을 변경하십시오. 전체 레이아웃은 배경, 버튼, 호버 효과 및 기타 연결된 요소가 즉시 업데이트됩니다.

향후 업데이트도 그 어느 때보 다 쉬워집니다. 고객이 네온 그린에서 따뜻한 노란색으로 전환하려고한다고 가정 해 봅시다. 이는 전체 웹 사이트, 모든 페이지 및 각 모듈을 수동으로 업데이트하는 것을 의미합니다.

고통 스럽지만 당신에게는 그렇지 않습니다. 기본 색상을 업데이트하면 사이트의 나머지 부분이 다음과 같습니다.

아니면 블랙 프라이데이 일 수도 있고 그들은 빨간 골드 블랙 색 구성표를 요청했습니다. 기본을 금색으로 업데이트 한 다음 보조를 더 깊은 빨간색으로 조정합니다. 레이아웃은 마지막 세부 사항까지 즉시 적응합니다.

경우에 따라 브랜드 색상이 동일하게 유지 될 수 있지만 보조에는 새로 고침이 필요합니다. 그것은 HSL 슬라이더를 조정하는 문제 일뿐입니다. 각 버튼이나 배경을 개별적으로 터치 할 필요가 없습니다.

컬러 작업의 많은 부분은 균형을 유지하는 것입니다. 핵심 색상이 변할 때에도 변형을 정렬합니다. 이 시스템은 단계를 되돌릴 필요없이 디자인의 톤, 대비 및 강조를 제어 할 수있는 방법을 제공합니다.

그리고 우리가 여기서 한 일은 한 페이지 일뿐입니다. 디자인 변수는 전 세계적 이므로이 설정은 헤더, 바닥 글, 블로그 게시물, 방문 페이지 및 팔레트에 연결된 기타를 포함하여 전체 사이트로 확장됩니다.

즉, 계절 캠페인, 브랜드 새로 고침 또는 새로운 색 방향 등 모든 미래의 업데이트가 단일 장소에서 시작됩니다. 몇 가지 변수를 업데이트하고 모든 것이 새 색 구성표와 일치하는 것을 지켜 봅니다.

Divi는 컬러 워크 플로우를 미래 방지시킵니다

파란색 음영을 선택하는 것은 어렵지 않습니다. 어려운 점은 수십 개의 모듈, 레이아웃, 페이지 및 캠페인에서 파란색을 일관성있게 유지하고 나중에 프로세스에서 무언가를 깨지 않고 업데이트하는 것입니다.

Divi 5는 그것을 완전히 단순화합니다. 새로운 색상 시스템, HSL 필터 및 설계 변수와 같은 도구를 사용하면 한 곳에서 전체 시각적 아이덴티티를 관리 할 수 있습니다. 모든 레이아웃에서 모든 색상이 일관되고 업데이트하기 쉬운 모든 색상을 알면 Divi 5가 약속하는 것입니다.

그리고 그것은 루프 빌더, Flexbox 레이아웃 및 현대 웹 디자이너를위한 완전히 재구성 된 인터페이스를 포함하여 지난 몇 개월 동안 우리가 만든 많은 것 중 하나 일뿐입니다. 아직 탐색하지 않았다면 지금은 완벽한 시간입니다.