색, 브러시 및 마스크 설정

개체의 시각적 모양을 변경하는 것은 Microsoft Expression Blend에서 기본적인 작업입니다. 속성 패널의 모양 및 브러시 아래 속성을 사용하여 선택한 개체의 스트로크 색, 채우기 색, 불투명도 및 표시 유형을 변경할 수 있습니다. Expression Blend 프로젝트에서 선택하는 개체의 형식에 따라 모양 및 브러시 범주의 속성에서 개체의 콘텐츠가 동적으로 조정되어 적절한 시각적 특성을 반영합니다.

공용 모양 속성

대부분의 개체 모양 변경 작업은 특정 속성에 브러시를 적용하는 작업과 관련이 있습니다. 다음 표에서 이러한 속성에 대해 설명합니다.

속성	설명
Fill	도형이나 패스의 내부에 적용되는 브러시를 설정합니다.
Stroke	도형이나 패스의 윤곽선(테두리)에 적용되는 브러시를 설정합니다.
Background	개체의 배경에 적용되는 브러시를 설정합니다. 일반적으로 이 속성은 Button, TextBlock 등 텍스트를 표시하는 컨트롤의 배경에 적용됩니다.
Foreground	개체의 전경에 적용되는 브러시를 설정합니다. 일반적으로 이 속성은 Button, TextBlock 등의 컨트롤에 표시되는 텍스트에 적용됩니다.
BorderBrush	특정 컨트롤의 테두리에 적용되는 브러시를 설정합니다.
Opacity	전체 개체의 불투명도를 설정합니다.
Visibility	런타임에 개체를 표시할지 숨길지를 결정합니다. 부모 요소의 표시 유형 설정이 자식 개체에도 적용될 수 있습니다.
OpacityMask	색은 무시되고 불투명도는 마스크된 개체에 전달되는 브러시를 설정합니다. OpacityMask가 불투명한 모든 위치에서는 마스크된 개체가 불투명하게 되고, OpacityMask가 투명한 모든 위치에서는 마스크된 개체가 투명하게 됩니다.

브러시

브러시는 아트보드에 있는 개체의 시각적 모양을 설정하는 데 사용됩니다. 예를 들어 다음 첫 번째 그림처럼 사각형의 채우기에 파란색의 단색 브러시를 사용할 수 있습니다. 브러시는 단순한 단색 또는 그라데이션 브러시에서 보다 복잡한 타일 브러시에 이르는 여러 가지 형태로 제공됩니다. 다음 표에 Expression Blend에서 사용할 수 있는 브러시에 대한 설명이 나와 있습니다. 브러시 없음을 사용하여 선택한 속성에서 색을 모두 제거할 수도 있습니다. 예를 들어 사각형의 Fill 속성을 브러시 없음으로 설정하고 Stroke 속성을 단색 브러시로 설정하면 사각형의 윤곽선을 만들 수 있습니다.

브러시	모양			설명
단색 브러시				단색으로 구성됩니다.
선형 그라데이션 브러시				선형 색 그라데이션으로 구성됩니다.
방사형 그라데이션 브러시				방사형 색 그라데이션으로 구성됩니다.
이미지 브러시				이미지로 만듭니다. 왼쪽에서 오른쪽으로 초기 이미지 브러시, 타일 방식으로 구성된 이미지 브러시, 대칭 이동된 이미지 브러시입니다.
드로잉 브러시				벡터 드로잉으로 만듭니다. 왼쪽에서 오른쪽으로 초기 드로잉 브러시, 타일 방식으로 구성된 드로잉 브러시, 대칭 이동된 드로잉 브러시입니다.
비주얼 브러시				단추(Button)와 같은 컨트롤로 만듭니다. 왼쪽에서 오른쪽으로 초기 단추, 타일 모드가 Tile로 설정된 브러시입니다. 비주얼 브러시는 비주얼 브러시를 만드는 데 사용되는 컨트롤의 복잡성으로 인해 실행되고 있는 응용 프로그램의 성능을 저하시킬 수 있습니다.

브러시 리소스

개체에서 브러시를 만든 후에는 해당 브러시를 리소스로 변환하여 다른 개체에 적용할 수 있습니다.

브러시 리소스는 단일 브러시 속성이나 색 속성으로만 만들어야 하는 것은 아니며, 아트보드의 여러 개체를 사용하여 브러시 리소스를 만들 수도 있습니다. 뿐만 아니라 만드는 데 사용한 개체가 런타임에 변경될 경우 그에 따라 런타임에 모양이 업데이트되는 VisualBrush도 만들 수 있습니다.

선택한 브러시에 대한 리소스 사전을 만들어 프로젝트 전체에서 재사용하거나 다른 프로젝트에서 재사용할 수 있습니다.

자세한 내용은 브러시 또는 색 리소스 만들기 및 개체를 재사용 가능한 브러시 리소스로 변환을 참조하십시오.

리소스에 대한 자세한 내용은 재사용 가능한 리소스 만들기를 참조하십시오.

색 및 색 공간

Expression Blend에는 속성 패널의 브러시에 색 편집기가 있습니다. 색 편집기는 리소스 패널에서 브러시 리소스를 수정하는 경우에도 나타납니다. 색 편집기에는 16진수 모드(#AARRGGBB)뿐만 아니라 다음과 같은 네 가지 색 공간이 있습니다.

• RGB 빨강(0-255), 녹색(0-255), 파랑(0-255)

• HLS 색상(360도 색상표), 명도(0% ~ 100%), 채도(0% ~ 100%)

• HSB 색상(360도 색상표), 채도(0% ~ 100%), 밝기(0% ~ 100%)

• CMYK 녹청(0% ~ 100%), 자홍(0% ~ 100%), 노랑(0% ~ 100%), 검정(0% ~ 100%)

색 공간을 변경하려면 현재 색 공간에서 밑줄이 그어진 문자 중 하나를 클릭하여 팝업 메뉴를 표시하고 다른 색 공간을 선택합니다.

스포이트 및 페인트 통 도구

Expression Blend는 개체 간에 특성을 복사하고 적용할 수 있도록 특별히 제작된 두 가지 도구를 제공합니다. 스포이트 및 페인트 통 액션 중에는 다음과 같은 속성이 복사되거나 적용됩니다.

• 브러시 Foreground, Background, BorderBrush, Fill, Stroke 및 OpacityMask

• 모양 Opacity, StrokeThickness, StrokeMiterLimit, StrokeStartLineCap, StrokeEndLineCap, StrokeLineJoin 및 StrokeDashCap

• 텍스트 FontFamily, FontSize, FontWeight, FontStyle, Text Decorations, Line Height, Text Indent 및 TextAlignment

	스포이트 도구	다른 개체의 모양을 현재 선택한 개체에 복사합니다.
	페인트 통 도구	현재 선택한 개체의 모양을 다른 개체에 복사합니다.

스포이트 및 페인트 통 도구에 대한 자세한 내용은 개체에 특성 복사 또는 적용을 참조하십시오.

단색 브러시 또는 그라데이션 브러시의 그라데이션 중지점을 수정하는 경우 색 스포이트가 색 편집기 오른쪽 맨 아래에도 나타납니다. 이 스포이트를 선택한 상태에서, 데스크톱의 아무 위치에서나 색 견본을 가져와서 선택한 브러시에 적용할 수 있습니다. 언제든지 Esc 키를 눌러 스포이트 실행을 취소할 수 있습니다.

그라데이션

그라데이션을 사용하면 개체에 단계적으로 혼합된 색을 적용하여 색이 부드럽게 변화하는 모양을 표현하고 깊이감을 추가할 수 있습니다. 이 개체를 배경으로 사용하여 개체의 왼쪽에 적용된 단색이 오른쪽으로 갈수록 점차 흰색으로 희미해지도록 할 수도 있습니다. 이런 방식으로 평면 개체에 서로 구분되는 두 영역을 만든 다음

속성 패널의 브러시에서 선형그라데이션 브러시 및 방사형 그라데이션을 클릭하여 두 그라데이션 브러시 형식 간에 전환합니다.

두 가지 형식의 그라데이션 브러시를 사용하여 그라데이션 채우기, 그라데이션 스트로크, Foreground 속성에 그라데이션이 적용된 텍스트 또는 Background 속성이 있는 모든 요소의 그라데이션 배경을 만들 수 있습니다. 모양 속성에 그라데이션을 적용하면 작은 그라데이션 중지점 아이콘 이 그라데이션 슬라이더에 나타납니다. 각 그라데이션 중지점의 색을 변경할 수 있을 뿐 아니라 그라데이션 슬라이더를 클릭하여 그라데이션 중지점을 원하는 만큼 그라데이션 슬라이더에 추가할 수 있습니다. 또한 필요 없는 중지점은 그라데이션 슬라이더의 아래쪽으로 끌어 제거할 수 있습니다. 슬라이더에서 옆이나 위쪽으로 끌면 중지점이 제거되지 않습니다.

그라데이션 브러시를 사용할 때 몇 가지 옵션을 설정할 수도 있습니다. 속성 패널의 브러시 아래에서 고급 속성 옵션을 클릭하여 SpreadMethod 속성을 다음 중 하나로 설정합니다.

• Pad 가장 바깥쪽 그라데이션 중지점 색을 개체 가장자리로 확장합니다.

• Reflect 그라데이션 채우기를 반전시킵니다.

• Reflect 그라데이션 채우기를 반복합니다.

이 옵션은 브러시 변형 도구를 사용하여 브러시를 수정할 때 선형 및 방사형 그라데이션 브러시에 모두 적용됩니다. 자세한 내용은 아래 나오는 "브러시 변형 도구" 섹션을 참조하십시오.

브러시 변형 도구

개체에 적용되는 채우기(Fill), 스트로크(Stroke), 불투명 마스크(OpacityMask) 또는 기타 브러시를 변형하려면 속성 패널에서 브러시 속성을 선택한 다음 도구 패널에서 브러시 변형을 선택합니다. 마우스 포인터를 사용하여 수정할 수 있는 브러시 변형 화살표가 아트보드에 나타납니다. 그라데이션 브러시를 사용하고 있는 경우 변형 화살표의 끝점은 색 막대의 양쪽 끝에 있는 그라데이션 중지점에 해당합니다. 다음과 같은 방법으로 브러시 변형 도구의 동작을 변경할 수 있습니다.

• 끝점 사이의 직선을 따라서 움직이도록 제한하려면 Shift 키를 누른 상태로 끝점 중 하나를 끕니다.

• X 평면 또는 Y 평면을 따라서 움직이도록 제한하려면 Shift 키를 누른 상태로 전체 화살표를 이동합니다.

• 15도 간격으로 맞추려면 Shift 키를 누른 상태로 끝점을 회전합니다.

• 두 끝점을 동시에 움직여 중심점의 위치를 유지하려면 Alt 키를 누른 상태로 끝점 중 하나를 끕니다.

다음 그림에서는 Fill 속성의 그라데이션 브러시에 다양한 변형을 적용한 후의 사각형(Rectangle) 개체 모양을 보여 줍니다.

사각형(Rectangle)의 선형 그라데이션 브러시에 적용된 변형

사각형(Rectangle)의 방사형 그라데이션 브러시에 적용된 변형

필요한 경우 속성 패널의 브러시에서 고급 속성 옵션을 클릭할 때 그라데이션 브러시의 확산 방법을 설정하고 SpreadMethod 속성을 설정합니다. 위 그림에서는 Pad 옵션이 선택되어 있습니다. Reflect 또는 Repeat 옵션을 선택한 다음 변형 화살표를 개체보다 짧게 만들면 주름 효과가 나타납니다.

그라데이션 브러시가 아닌 다른 브러시로 브러시 형식을 변형할 수 있습니다. 브러시 변형에 대한 자세한 내용은 그라데이션 또는 타일 브러시 변형을 참조하십시오.

클리핑

브러시를 변형하면 개체의 일부가 클리핑되는 경우가 있습니다. 즉, 경계 상자의 바깥쪽에 있는 부분이 잘립니다. 다음과 같은 방법으로 이러한 클리핑 문제를 해결할 수 있습니다.

• 속성 패널의 모양에서 ClipToBounds 속성에 대한 확인란의 선택을 취소합니다.

• 속성 패널의 변형에서 RenderTransform이 아닌 LayoutTransform 범주의 속성을 사용합니다. 이 방법은 비주얼 브러시를 변형하는 경우에 특히 유용합니다.

스트로크

스트로크는 개체의 테두리입니다. 개체에서 스트로크의 브러시(단색, 그라데이션 또는 타일), 불투명도, 너비 및 각 이음 제한뿐만 아니라 모통이 이음 및 끝 단면 스타일도 변경할 수 있습니다. 개체에 채우기가 적용되지 않은 경우에도 개체의 스트로크는 항상 채우기의 위에 적용됩니다. 개체의 스트로크를 변경하려면 속성 패널의 브러시 아래 목록에서 Stroke를 선택해야 합니다.

• 스트로크 너비 개체의 스트로크 너비는 픽셀 단위 또는 약 1/96인치의 장치 독립적 단위로 측정되며 0에서 도형의 너비 또는 높이의 절반 사이에 있는 값을 지정할 수 있습니다. 일반적으로 스트로크 두께가 도형의 너비 및 높이의 절반에 도달하면 스트로크가 전체 채우기를 덮습니다. 속성 패널의 모양에서 StrokeThickness 속성을 사용하여 스트로크 너비 값을 설정할 수 있습니다.

• 모퉁이 이음  사각형처럼 모퉁이가 날카로운 개체는 Miter 이음, Round 이음 및 Bevel 이음의 세 가지 모퉁이 이음(Join) 스타일 중 하나를 적용하여 각 꼭짓점의 스트로크 모양을 변경할 수 있습니다. 속성 패널의 모양에서 StrokeLineJoin 속성을 사용하여 모퉁이 이음 스타일을 설정할 수 있습니다.

  

• 각 이음 제한  각 이음 제한(MiterLimit)은 자동으로 직각을 이루어 사선 이음으로 전환되기 전까지 각 이음의 꼭짓점이 취할 수 있는 길이를 조정합니다. 속성 패널의 모양에서 StrokeMiterLimit 속성을 사용하여 각 이음 제한을 설정할 수 있습니다. 다음 이미지는 StrokeThickness가 40이고 StrokeMiterLimit이 각각 1 , 2.2 , 4 인 세 개의 각을 보여 줍니다. 각의 크기와 스트로크 두께에 따라 각 이음 제한의 시각적 효과가 달라집니다.

  

• 끝 단면  선처럼 끝이 연결되지 않은 패스는 Flat 단면, Round 단면, Square 단면 및 Triangle 단면의 네 가지 끝 단면(EndCap) 스타일 중 하나를 적용하여 각 끝의 스트로크 모양을 변경할 수 있습니다. 속성 패널의 모양에서 StrokeEndLineCap 또는 StrokeStartLineCap 속성을 사용하여 끝 단면 스타일을 설정할 수 있습니다.

  

불투명도 및 표시 유형

개체의 불투명도를 줄이면 투명성이 증가하여 해당 개체 뒤에 있는 다른 개체가 표시됩니다. 불투명도는 개체, 그라데이션 또는 불투명 마스크에 대한 모든 투명성 정보가 저장되는 알파 채널에 의해 제어됩니다. 다음 표에서는 개체의 불투명도를 변경하는 세 가지 방법을 설명합니다.

방법	결과
Opacity 개체의 모든 시각적 특성을 포함하여 전체 개체의 투명성을 변경합니다. 오른쪽 이미지에서는 불투명도 값이 60%로 설정되어 있음을 보여 줍니다.
Transparency 단일 개체의 특성을 모두 변경하지 않고도 채우기나 스트로크와 같은 개체에 적용되는 개별 브러시 특성의 알파 값(A)을 약간 투명하게 설정합니다. 오른쪽 이미지에서는 채우기의 알파 값이 50%로 설정되어 있으므로 타원의 채우기만 더 투명해짐을 보여 줍니다. 타원의 스트로크는 100%로 유지됩니다.
Visibility  상황에 따라 개체를 표시하거나 숨길 수 있습니다. 이 옵션은 애니메이션에서 아트보드의 개체를 완전히 제거하지는 않고 숨기기만 하려는 경우 특히 유용합니다. 오른쪽 이미지에서는 파란색 채우기 및 검정색의 두꺼운 스트로크가 적용되고 이 표에서 위에 있는 두 이미지의 일부인 왼쪽 개체가 현재 Hidden으로 설정되어 있음을 보여 줍니다.

참조

개념

효과 적용