Adobe XD에서 그레이디언트를 제작하고 가져오고 사용할 수 있습니다. 그레이디언트 패널을 사용하여 색상 변환점을 추가하고 그레이디언트의 불투명도를 조절할 수 있습니다.

그레이디언트는 두 가지 이상의 색상이나 여러 농도의 동일한 색상 또는 다른 색상을 여러 단계로 나눠 혼합한 것입니다. 그레이디언트를 사용하여 색상 혼합을 만들고 벡터 오브젝트에 볼륨을 추가하고 디자인에 빛과 그림자 효과를 줄 수 있습니다.

XD는 선형 및 방사형 그레이디언트를 지원합니다.

선형 그레이디언트

XD가 시작점에서 끝점까지 직선으로 음영을 나타냅니다.

방사형 그레이디언트

XD가 시작점에서 끝점까지 원형 패턴으로 음영을 나타냅니다.

그레이디언트 색상 피커

XD의 그레이디언트 색상 피커를 이용하려면 오브젝트를 선택하고 속성 관리자에서 채우기를 클릭합니다. XD에서 선형 또는 방사형 그레이디언트를 만들 수 있습니다.

색상 피커의 상단에 있는 드롭다운 목록에서 선형 그레이디언트 또는 방사형 그레이디언트를 선택합니다.

그레이디언트 색상 피커
그레이디언트 색상 피커

A. 그레이디언트 편집기 B. 색상 변환점 C. 불투명도 슬라이더 D. 색상 필드 E. 색상 견본으로 저장 F. 캔버스 상의 그레이디언트 편집기 

그레이디언트 색상 피커를 사용하여 그레이디언트에 대한 색상을 선택하고 불투명도를 설정할 수 있습니다.

그레이디언트 색상 피커에는 그레이디언트에서 사용되는 모든 색상에 대한 빠른 미리보기를 표시하는 그레이디언트 편집기가 있습니다. 격자 줄무늬가 투명한 부분을 나타냅니다.

그레이디언트 편집기도 그레이디언트에서의 색상 변환점을 표시합니다. 작은 원이 색상 변환점을 나타냅니다. 각 색상 변환점 사이의 거리에 따라 색상이 변하고 혼합됩니다. 색상 변환점은 그레이디언트가 적용된 오브젝트 위에 나타나는 캔버스 상의 그레이디언트 편집기에서도 표시됩니다. 

기본적으로 두 개의 색상 변환점을 사용할 수 있습니다. 그레이디언트 편집기를 클릭하여 색상 변환점을 더 추가할 수 있습니다. 그레이디언트 편집기를 따라 색상 변환점을 드래그하여 색상 변환점의 위치를 변경하고 각각의 색상을 다양하게 바꿀 수 있습니다. 색상 변환점을 삭제하거나 제거하려면 그레이디언트 색상 피커의 그레이디언트 편집기 밖으로 드래그합니다. 또는 캔버스 상의 그레이디언트 편집기에서 색상 변환점을 클릭하고 [삭제]를 누릅니다.

캔버스 상의 그레이디언트 편집기를 사용하여 그레이디언트의 방향을 쉽게 바꿀 수 있습니다.

모퉁이 핸들은 방사형 그레이디언트의 포인트와 각도를 바꾸는 데 유용합니다.

그레이디언트 색상 피커의 오른쪽에 있는 슬라이더를 사용하여 색상 변환점의 불투명도를 조절할 수 있습니다.

선형 또는 방사형 그레이디언트 채우기 적용

  1. 속성 관리자에서 오브젝트를 선택하고 [채우기]를 클릭합니다.

  2. 색상 피커의 드롭다운 목록에서 선형 그레이디언트 또는 방사형 그레이디언트를 선택합니다.

    색상 피커의 선형 및 방사형 그레이디언트 옵션
    색상 피커의 선형 및 방사형 그레이디언트 옵션
  3. 그레이디언트 편집기에서 색상 변환점을 클릭하고 색상 피커를 사용하여 필요한 색상을 선택합니다. 

    • 색상 변환점을 더 추가하려면 그레이디언트 편집기를 클릭합니다.
    • 색상 변환점에 할당된 색상을 바꾸려면 해당 색상 변환점을 클릭합니다.
    • 색상 변환점을 옮기려면 그레이디언트 편집기를 따라 드래그합니다.
      참고: 색상 변환점을 그레이디언트 편집기의 양 끝으로 옮길 수는 없습니다.
    • 색상 변환점을 삭제하려면 그레이디언트 편집기 밖으로 드래그합니다. 캔버스 상의 그레이디언트 편집기를 사용하는 경우에는 해당 색상 변환점을 클릭하고 [삭제]를 누릅니다.
    • 색상 변환점 간 전환하려면 Tab 키를 사용합니다.
    • 방사형 그레이디언트의 원래 포인트 및 각도를 바꾸려면 모퉁이 핸들을 드래그합니다.
    방사형 그레이디언트로 작업
    방사형 그레이디언트로 작업
  4. 그레이디언트의 방향을 바꾸려면 캔버스 상의 그레이디언트 편집기 세그먼트(오브젝트에 위치)를 원하는 방향으로 드래그합니다.

    캔버스 상의 그레이디언트 편집기 세그먼트의 끝점을 오브젝트의 경계 밖으로 드래그할 수도 있습니다. 색상 변환점이 오브젝트의 경계 밖에 놓이면 이 색상 변환점에 연계된 색상은 해당 오브젝트에서 표시되지 않습니다.

    참고:

    화살표 키와 Shift-화살표 키를 사용하여 캔버스 상의 그레이디언트 편집기 세그먼트의 끝점을 옮길 수 있습니다. 안쪽 색상 변환점을 선택하고 나면 화살표 키와 Shift-화살표 키를 사용하여 세그먼트를 따라 옮길 수 있습니다.

    Tab 키를 눌러 캔버스 상의 그레이디언트 편집기를 따라 색상 변환점을 바꿀 수도 있습니다. 

  5. 그레이디언트를 만든 다음 에셋 패널에서 나중에 다시 사용하기 위해 저장할 수 있습니다. 그레이디언트가 적용된 오브젝트를 클릭하고 에셋 패널의 색상 옆에 있는 + 아이콘을 클릭하여 저장합니다. 

    에셋 패널에 저장된 그레이디언트
    에셋 패널에 저장된 그레이디언트

그레이디언트 채우기가 적용된 오브젝트 가져오기

  1. 파일을 Adobe XD로 가져오기 전에 .svg 파일로 저장해야 합니다.

  2. 파일 > 가져오기를 클릭하고 SVG 파일을 선택한 다음 [가져오기]를 클릭합니다.

그레이디언트를 SVG로 가져오면 색상 피커는 기본적으로 해당 그레이디언트 옵션을 표시합니다. XD에 오브젝트를 복사하고 붙여넣으면 그레이디언트 채우기도 함께 복사됩니다. 가져온 그레이디언트의 색상 및 색상 변환점을 수정할 수 있습니다.

참고:

중심에서 벗어난 원점을 가진 가져오기한 방사형 그레이디언트는 XD에서 편집할 수 없습니다. 

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책