문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

실습 정보: Blend에서 아트보드 개체의 반사 만들기

Blend for Visual Studio의 변형 및 그라데이션 도구를 사용하여 아트보드에서 개체의 반사 효과를 만들 수 있습니다.

아트보드에서 이미지의 반사를 만들려면 먼저 이미지를 프로젝트에 추가합니다. 그런 다음, 이미지의 컨테이너를 만든 후 컨테이너의 높이, 너비 및 위치를 조정하여 미러 이미지를 만듭니다. 컨테이너를 만들어 이미지를 추가한 후 변형 및 그라데이션을 적용하여 이미지의 반사 효과를 만들 수 있습니다.

프로젝트에 이미지 추가

  1. 프로젝트 메뉴에서 기존 항목 추가를 클릭합니다.

  2. 기존 항목 추가 대화 상자에서 추가할 이미지를 찾은 후 열기를 클릭합니다.

    이미지 크기가 250KB를 초과하므로 이미지를 포함할 것을 권장하는 경고 메시지가 나타날 수도 있습니다. 이 메시지가 나타나면 를 클릭합니다.

    팁

    이 예제에서는 예제 그림 폴더의 이미지를 사용합니다.

프로젝트 패널에 이미지가 추가됩니다.

미러 이미지 만들기

  1. 아트보드에 StackPanel 컨트롤을 추가합니다. 자산 패널에서 패널을 클릭한 후 StackPanel을 두 번 클릭합니다. 개체 및 타임라인 패널에서 StackPanel을 선택한 후 속성 패널의 레이아웃 범주에서 방향을 찾아 세로 StackPanel 컨트롤을 사용하는지 확인합니다. 방향 값이 세로로 설정되어야 합니다.

    팁

    여러 가지 유형의 컨트롤을 사용하여 반사를 만들 수 있습니다. StackPanel 컨트롤을 사용하면 개체를 "쌓을" 수 있으므로 단일 컨트롤을 사용하여 쉽게 개체를 정렬하고 개체 컬렉션을 이동할 수 있습니다.

  2. 개체 및 타임라인 패널에서 StackPanel을 선택한 상태로 프로젝트 패널에서 이미지 파일을 마우스 오른쪽 단추로 클릭한 후 삽입을 클릭합니다.

  3. 속성 패널의 레이아웃 범주에서 높이너비를 수정하여 이미지의 크기를 조정합니다. 이 예제에서 높이200이고 너비267입니다.

    팁

    이미지의 배율을 조정할 수도 있습니다. 속성 패널의 변형 범주에서 배율을 클릭한 후 XY에 원하는 값을 입력합니다. 가로 세로 비율을 유지하려면 XY 모두에 같은 값을 사용합니다.

  4. 개체 및 타임라인 패널에서 StackPanel을 선택한 후 속성 패널의 레이아웃 범주에서 높이너비를 수정하여 StackPanel의 높이 및 너비를 조정합니다. 너비는 선택한 이미지의 너비와 같아야 합니다. 두 이미지를 사용하여 반사를 만드므로 높이는 선택한 이미지 높이의 두 배여야 합니다. 이 예제에서 높이400이고 너비267입니다.

  5. 2 단계를 반복하여 같은 이미지의 두번째 인스턴스를 삽입합니다. 세로 StackPanel 컨트롤을 사용하고 있으므로 이미지는 처음 이미지 아래에 나타납니다. 속성 패널의 레이아웃 범주에서 높이 오른쪽의 자동으로 설정JJ170084.aa9ec064-22f8-4b62-9eed-3f4772362d22(ko-kr,VS.120).png을 클릭하여 높이를 조정합니다.

  6. 개체 및 타임라인 패널에서 StackPanel을 클릭한 후 StackPanel을 아트보드 중간으로 끕니다.

  7. Objects and Timeline 패널에서 두 번째 이미지(StackPanel의 아래쪽 이미지)를 선택한 상태로 속성 패널의 변형 범주에서 대칭 이동JJ170084.2ba85702-e92f-4341-9497-9c9fb8af9c75(ko-kr,VS.120).png 탭의 Y 축 대칭 이동을 클릭합니다.

이제 미러 이미지의 효과를 만들었으므로 불투명도를 조정하고, 그라데이션을 적용하고, 이미지를 변형하여 반사 효과를 만들 수 있습니다.

반사 만들기

  1. Objects and Timeline 패널에서 두 번째 이미지(StackPanel의 아래쪽 이미지)를 선택한 상태로 브러시 범주에서 그라데이션 브러시를 클릭한 후 OpacityMask를 클릭합니다.

  2. 색 편집기에서 왼쪽 그라데이션 중지점을 클릭한 후 알파 채널 텍스트 상자에 0을 입력합니다.

    팁

    값을 클릭하여 알파 채널 텍스트 상자로 끌 수도 있습니다.

  3. 왼쪽 그라데이션 중지점을 이동하여 불투명도를 조정하거나 선택된 그라데이션 중지점 오프셋 텍스트 상자에 값을 입력합니다. 이 예제에서는 선택된 그라데이션 중지점 오프셋 텍스트 상자에 20을 입력합니다.

  4. 색 편집기에서 오른쪽 그라데이션 중지점을 클릭한 후 알파 채널 텍스트 상자에 70을 입력합니다.

  5. Objects and Timeline 패널에서 두 번째 이미지(StackPanel의 아래쪽 이미지)를 선택한 상태로 기울이기 포인터 JJ170084.2be41f49-8a61-4966-bf08-598f4253b610(ko-kr,VS.120).png가 나타날 때까지 포인터를 이미지 핸들 위로 이동합니다. 핸들을 클릭하여 이미지가 원하는 방식으로 나타날 때까지 끕니다.

    팁

    기울이기 포인터는 속성 패널에서 RelativeTransform 상자의 기울이기 탭에 해당됩니다.

  6. 배율 포인터 JJ170084.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(ko-kr,VS.120).png가 나타날 때까지 포인터를 이미지 핸들 위로 이동합니다. 핸들을 클릭하여 이미지가 원하는 방식으로 나타날 때까지 끕니다.

    팁

    배율 포인터는 속성 패널에서 RelativeTransform 상자의 배율 탭에 해당됩니다.

  7. F5 키를 눌러 프로젝트를 빌드하고 실행합니다.

이미지와 반사가 나타납니다.

유사한 방법을 사용하여 Blend에서 다양한 컨트롤의 반사를 만들 수 있습니다.

표시: