Blend에서 색, 브러시 및 마스크 설정

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

공용 모양 속성

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

브러시

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

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

브러시 리소스

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

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

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

자세한 내용은 Blend에서 브러시 리소스 또는 색 리소스 만들기 및 Blend에서 브러시를 사용하여 개체 모양 수정를 참조하십시오.

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

색 및 색 공간

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%)

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

스포이트 및 페인트 통 도구

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

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

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

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

그라데이션

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

속성 패널에서 브러시 아래의 그라데이션 브러시 를 클릭하여 그라데이션을 만듭니다. 색 편집기 아래의 선형 그라데이션 브러시  및 방사형 그라데이션 을 클릭하여 두 그라데이션 브러시 유형 간에 전환합니다. 두 가지 유형의 그라데이션 브러시를 사용하여 그라데이션 채우기, 그라데이션 스트로크, Foreground 속성에 그라데이션이 적용된 텍스트 또는 Background 속성이 있는 모든 개체의 그라데이션 배경을 만들 수 있습니다.

그라데이션 브러시를 선택하면 색 편집기의 색 스포이트가 그라데이션 스포이트 가 됩니다. 그라데이션 스포이트를 선택한 상태에서 마우스로 Blend 내부 또는 바탕 화면 위의 색을 가리키면 색이 선택된 색 중지점에 미리 보기로 나타납니다. 그라데이션 스포이트를 사용하여 색을 클릭하면 색이 선택된 그라데이션 중지점에 적용됩니다. 또한 Blend 내부 또는 바탕 화면에서 그라데이션 스포이트를 기존 그라데이션으로 끌어 기존 개체에 그라데이션을 적용할 수 있습니다.

기존 그라데이션을 가로질러 그라데이션 스포이트를 끌면 Blend에서 그라데이션이 복제됩니다.

개체에 그라데이션을 적용하면 그라데이션 중지점 아이콘 이 나타납니다. 각 그라데이션 중지점의 색을 변경할 수 있을 뿐 아니라 그라데이션 슬라이더를 클릭하여 그라데이션 중지점을 원하는 만큼 그라데이션 슬라이더에 추가할 수 있습니다. 또한 필요 없는 중지점은 그라데이션 슬라이더의 아래쪽으로 끌어 제거할 수 있습니다. 슬라이더에서 옆이나 위쪽으로 끌면 중지점이 제거되지 않습니다. 그라데이션 선을 따라 중지점을 끌거나 선택된 그라데이션 중지점 오프셋 필드의 값을 수정하여 선택된 그라데이션 중지점의 오프셋 값을 수정할 수도 있습니다.

그라데이션을 반전하려면 그라데이션 중지점 반전 을 클릭합니다. 이전 그라데이션 중지점 선택 및 다음 그라데이션 중지점 선택 화살표 를 사용하여 이전 및 다음 그라데이션 중지점으로 이동할 수 있습니다.

여러 개체에 그라데이션을 적용하려면 그라데이션을 적용할 개체를 모두 선택한 후 그라데이션을 적용합니다.

속성 패널에서 직접 수정할 수 있는 추가 속성을 보려면 고급 속성 표시를 클릭합니다.

선형 그라데이션 브러시 속성은 속성 패널에서 다음 속성을 수정할 수 있습니다.

• StartPoint   선형 그라데이션의 시작점 좌표를 지정합니다.

• EndPoint   선형 그라데이션의 끝점 좌표를 지정합니다.

• MappingMode  그라데이션 브러시를 절대적으로 배치할지 아니면 경계 상자에 상대적으로 배치할지 여부를 지정합니다.

• SpreadMethod   경계 상자 내에서 시작하고 끝나는 그라데이션을 그리는 방법을 지정합니다. Pad는 가장 바깥쪽 그라데이션 중지점 색을 개체 가장자리로 확장합니다. Reflect는 그라데이션 채우기를 반사합니다. Repeat는 그라데이션 채우기를 반복합니다.

• 불투명도   그라데이션 브러시의 불투명도를 지정합니다.

방사형 그라데이션 브러시 속성은 속성 패널에서 다음 속성을 수정할 수 있습니다.

• GradientOrigin   그라데이션의 시작 좌표를 지정합니다.

• 가운데   가장 바깥쪽 방사형 그라데이션을 지정합니다.

• RadiusX   방사형 그라데이션의 가장 바깥쪽 원 가로 반경을 지정합니다.

• RadiusY   방사형 그라데이션의 가장 바깥쪽 원 세로 반경을 지정합니다.

• MappingMode  그라데이션 브러시를 절대적으로 배치할지 아니면 경계 상자에 상대적으로 배치할지 여부를 지정합니다.

• SpreadMethod   경계 상자 내에서 시작하고 끝나는 그라데이션을 그리는 방법을 지정합니다. Pad는 가장 바깥쪽 그라데이션 중지점 색을 개체 가장자리로 확장합니다. Reflect는 그라데이션 채우기를 반사합니다. Repeat는 그라데이션 채우기를 반복합니다.

• 불투명도   그라데이션 브러시의 불투명도를 지정합니다.

그라데이션 브러시의 두 유형은 속성 패널에서 RelativeTransform 상자의 다음 탭을 클릭한 후 연관된 값을 수정하여 RelativeTransform 속성을 수정할 수도 있습니다.

• 좌표 이동

• 회전

• 규모

• 기울이기

• 대칭 이동

그라데이션 도구 또는 브러시 변형도구 를 사용하여 아트보드에서 선형 및 방사형 그라데이션 브러시를 모두 수정할 수도 있습니다. 자세한 내용은 아래의 "그라데이션 도구" 및 "브러시 변형 도구"를 참조하십시오.

그라데이션 도구

아트보드에서 개체에 직접 적용된 그라데이션 브러시의 채우기, 스트로크 또는 불투명도 마스크를 수정하려면 속성 패널에서 브러시 속성을 선택한 다음 도구 패널의 그라데이션 도구 i를 선택합니다.

그라데이션을 수정할 수 있는 화살표가 아트보드에 나타납니다. 화살표의 시작점 및 끝점은 색 막대 양 끝의 그라데이션 중지점에 해당됩니다. 그라데이션 중지점은 파란색 테두리가 있고 내부가 그라데이션과 같은 색으로 채워진 원으로 표시됩니다.

선형 그라데이션 화살표

방사형 그라데이션 화살표

그라데이션 중지점을 클릭하면 선택되고 선택은 굵은 파란색 테두리로 표시됩니다. 그라데이션 중지점을 두 번 클릭하면 색 선택이 표시되며 선택된 그라데이션 중지점의 색을 수정할 수 있습니다.

화살표의 아무 지점이나 클릭하여 그라데이션 중지점을 추가할 수 있습니다. 그라데이션 중지점을 나타내는 원을 클릭하고 화살표에서 멀리 끌어 그라데이션 중지점을 제거할 수 있습니다.

그라데이션 속성은 다음과 같은 방법으로 수정할 수도 있습니다.

• 시작점 또는 끝점을 끄는 동안 SHIFT 키를 눌러 시작점 및 끝점 사이의 직선을 따르도록 움직임을 제한합니다.

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

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

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

브러시 변형 도구

브러시 변형 도구 에서는 선형 및 방사형 그라데이션 모두의 RelativeTransform 등 브러시 리소스의 RelativeTransform 속성을 수정합니다. 브러시 변형 도구는 브러시 패널에서 선택되어 아트보드의 선택된 개체에 적용되는 브러시를 수정합니다.

아트보드에서 개체에 직접 적용된 브러시의 변형을 수정하려면 속성 패널에서 브러시 속성을 선택한 후 도구 패널의 브러시 변형 도구 를 선택합니다.

파란색 테두리의 표시기(Adorner)가 개체 주위에 나타납니다. 브러시 변형 도구로 개체를 선택한 상태에서 다음과 같은 방법으로 선택된 개체를 수정할 수 있습니다.

• 브러시를 이동하려면 개체 내부로 끕니다. 이 동작은 속성 패널에서 RelativeTransform 상자의 변형 탭에 해당됩니다.

• 브러시를 회전하려면 개체 주위의 경계 윤곽선 모퉁이 바깥쪽에 포인터를 놓고 포인터가 회전 핸들 로 바뀌면 끕니다. 이 동작은 속성 패널에서 RelativeTransform 상자의 회전 탭에 해당됩니다.

• 타일 브러시나 방사형 그라데이션 브러시 배율을 재조정하려면 개체의 측면 또는 모퉁이에 있는 핸들에 포인터를 놓은 다음 끕니다. 이 동작은 속성 패널에서 RelativeTransform 상자의 배율 탭에 해당됩니다.

• 브러시를 기울이려면 측면 핸들 바깥쪽에 포인터를 놓고 포인터가 기울이기 핸들 로 바뀌면 끕니다. 이 동작은 속성 패널에서 RelativeTransform 상자의 기울이기 탭에 해당됩니다.

변형을 대칭 이동할 수도 있습니다. 속성 패널의 브러시 범주에서 고급 옵션 표시 를 클릭합니다. RelativeTransform 상자에서 대칭 이동 탭을 클릭한 후 X 축 대칭 이동 또는 Y 축 대칭 이동을 클릭합니다.

클리핑

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

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

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

스트로크

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

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

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

  

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

  

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

  

• StrokeDashArray   StrokeDashArray는 대시와 간격의 패턴을 사용한 선입니다. StrokeDashCap과 StrokeDashOffset는 StrokeDashArray 에 특별히 적용되는 속성입니다.

  다음 이미지는 StrokeDashArray 값이 5 4(첫 번째 값은 파선의 길이, 두 번째 값은 간격의 길이)이고 StrokeDashCap 값이 Round이며 StrokeDashOffset(파선이 시작되는 파선 패턴 내의 거리)이 2인 단일 사각형을 나타냅니다.

불투명도 및 표시 유형

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

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

참고 항목

개념

Blend에서 효과 적용