- 본 포스트는 이미지가 축소되어있으므로 이미지를 클릭하면 확대된 이미지를 볼수 있습니다. -

실버라이트는 벡터기반이기 때문에 그림자를 만들기 까다롭다.
png파일을 불러올수도 있지만 확대시 계단현상이 일어날수 있다.
그래서 가장 효과적인 그림자만들기를 해보도록 하자.
우선, Adobe사의  일러스트레이터(Illustrator)프로그램이 필요하다. 반드시 필요한건 아니지만 가장 깔끔한 모양을 위해서 사용하도록 한다.
정 없다면 Expression Blend에서 작업을 해주어도 크게 상관은 없다.
그리고 일러스트레이터는 기본적으로 xaml파일을 지원하지 않기 때문에 플러그인이 필요하다. xaml플러그인 을 'C:\Program Files\Adobe\Illustrator CS\플러그-인' 폴더에 복사 (CS버젼 기준)한다음 실행하면 된다.

먼저 일러스트레이터에서 둥근 사각형을 하나 만든다.

둥근 사각형은 일반 사각형모양의 툴에
마우스를 누르고 있으면 추가메뉴가 나오는데 추가메뉴에서 선택해주면 된다.
해당 아이콘에서 마우스를 더블클릭하면 라운드 크기를 조절할수도 있다.

어쨋든 원하는 그림자 모양대로 그려준다.
꼭 둥근 사각형이 아니라도 좋다.
원으로 해도된다.
사각형은 그림자가 대부분 둥근 사각형으로 보이기때문에 사각형의 그림자는 둥근사각형으로 만들어 준다.

그리고 그린 사각형 위에 좀더 작은 사각형을 하나더 그려준다.
그림자 는 서서히 어두워지기 때문에 그것을 표현하기 위한것이다.
이제 큰 사각형은 테두리(stroke)가 없고 하얀바탕으로, 작은 사각형은 테두리가 없고 검은색 바탕으로 색을 바꿔준다.
이 작업은 굳이 해줄필요는 없다.
나중에 Blend에서 색을 다시 바꿔줄것이기 때문이다.
그러나 그림자효과가 재대로 만들어졌는지 확인이 용이하기 때문에
이렇게 해준다.

이제 자연스럽게 두개의 사각형을
연결해주면 된다.


일러스트레이터의 블렌드 툴을 이용하여 만든다. 블렌드 툴아이콘을 더블클릭해보자.
그럼 블렌드 옵션창이 팝업되는데 간격에서 지정된 단계 를 선택하고 단계를 10정도로 지정하자. 숫자가 높아질수록 더욱 자연스러운 효과를 볼수 있다. 그러나 그만큼 선이 많아지기때문에 크기가 커진다. 5또는 10정도가 적당하다.

승인을 하고 먼저,
큰 사각형의 포인트하나를 클릭한다.
그리고 작은 사각형의 같은 위치의 포인트를
클릭하면 중간에 10단계에 걸쳐 자연스럽게 연결된다.
사실 이렇게 하면 10단계에 걸치면서 중간에 사각형들이
만들어지는 원리이다.
그래서 자연스럽게 연결되는것처럼 보여진다.


이제 그림자같은 효과를 만들었다. 이제 이걸 Expression Blend로 가져가보도록 하자.
XAML Pugin 을 설치하였으면 File>내보내기에 Xaml파일을 선택할수 있다.
원하는 파일명을 타이핑한뒤 저장한다.
이제 Blend에서 저장한 xaml파일을 불러온다.
이렇게 불러온 그림자는 하얀색 바탕에서는 자연스럽지만 다른 바탕색에서는 어울리지 않는다.
Object를 자세히 보면 Path가 12개가 있다.
처음 크고 작은 사각형 2개를 그리고
10단계로 블렌딩 시켰으니 12개가 생성된것이다.
12개모두 동시에 선택하도록 한다.
첫번째 Path를 선택한뒤 Shift키를 누른상태로 마지막 Path를 선택하면 모두 선택이 된다.

이제 이것을 모두 검색은색으 바꿔주고 투명도를 10으로 줄것이다.
그럼 서로 겹치면서 점점점 어두워지는 효과를 낼수 있다.

모든 Path가 선택된 상태에서 Fill을 검은색으로 설정하고 투명도를 10으로 지정한다.
만약 상위 Canvas가 배경이 없거나 검은색으로 되어있다면 볼수가 없다.
하얀색으로 바꿔서 본다.
그림자같은 효과가 나타난다.
이런식으로 사각형모양뒤족에 만든 그림자를 배치하면 그럴듯한 그림자 효과를 낼 수 있다.
일러스트레이터가 없다면 블렌딩을 시킬수가 없기때문에 일일이 Expression Blend에서 각 단계의 사각형을 만들어 주면 된다. 매우 번거롭고 라운딩처리가 까다롭기 때문에 그냥
일러스트레이터를 사용하는것이 편하다.