마스크를 사용하여 이미지와 다른 콘텐츠의 일부분을 숨길 수 있습니다.

필요 항목

샘플 파일은 튜토리얼의 학습 내용을 연습하기 위해 사용할 수 있는 Adobe Stock 에셋입니다. 이 튜토리얼이 아닌 실제 프로젝트에 이 샘플 파일을 사용하려면 Adobe Stock에서 라이선스를 구매해야 합니다. 샘플 파일의 사용 약관을 살펴보려면 폴더에 있는 ReadMe 파일을 참조하십시오.

학습한 내용: XD에서 다양한 유형의 마스크를 사용하여 콘텐츠의 일부분을 가리거나 숨기는 방법

Adobe XD에서 마스크를 적용하는 방법

마스크 적용은 XD 문서에서 콘텐츠의 일부분을 숨기는 방법으로, 예를 들어 헤더용 큰 이미지의 일부분을 표시할 수 있습니다. XD에서 마스크를 적용하는 두 가지 방법이 있습니다. 이미지와 같은 에셋을 모양으로 드래그하거나 문서에서 콘텐츠에 적용할 마스크로 모양을 사용할 수 있습니다.

에셋을 모양으로 드래그

프로필 사진 자리의 원과 같이 자리 표시자 그래픽을 사용하여 디자인을 시작하는 경우 에셋을 모양에 놓을 수 있습니다. 이미지와 같은 에셋은 모양 비율에 맞춰지고 모양 경계선 밖에 있는 에셋의 일부분은 숨겨지고 가려집니다.

  • 폴더에 있는 에셋을 열린 XD 문서의 모양으로 드래그합니다. 모양이 강조 표시되면 마우스를 놓습니다. 그러면 에셋이 모양 안에 배치됩니다.
  • 선택된 모양에 있는 점을 드래그하여 모양과 그 안에 있는 콘텐츠의 크기를 조정합니다.

팁: 모양 안의 콘텐츠를 교체하려면 폴더에 있는 에셋을 모양으로 드래그합니다. 새 콘텐츠의 크기는 모양 비율에 맞게 조정됩니다.

모양 또는 마스크가 적용된 콘텐츠 편집

  • 모양 안의 콘텐츠를 편집하기 위해 모양을 두 번 클릭하면 그 안의 콘텐츠가 선택됩니다. 그런 다음 다양한 방식으로 콘텐츠를 변형할 수 있습니다.

모양을 사용하여 마스크 적용

  • 마스크로 사용할 모양을 콘텐츠의 일부분으로 드래그하거나 배치합니다. 모양 밖에 있는 콘텐츠는 가려지거나 숨겨집니다.
  • 이미지와 모양(마스크)을 선택합니다.
  • 오브젝트 > 모양으로 마스크 만들기(macOS)를 선택하거나 선택된 콘텐츠를 마우스 오른쪽 버튼으로 클릭하고 모양으로 마스크 만들기(Windows)를 선택합니다.

마스크 또는 콘텐츠 편집

  • 선택된 모양에 있는 점을 드래그하여 모양과 그 안에 있는 콘텐츠의 크기를 조정합니다.
  • 마스크 모양 안의 콘텐츠를 편집하려면 마스크가 적용된 콘텐츠를 두 번 클릭합니다. 마스크는 선택되고, 다양한 방식으로 변형할 수 있습니다.
  • 마스크가 적용된 콘텐츠를 클릭하고 다양한 방식으로 변형할 수 있습니다.

팁: 가져온 간단한 SVG 콘텐츠는 마스크로 사용할 수 있습니다 폴더에 있는 이미지를 XD 문서의 SVG 콘텐츠로 드래그하면 SVG 콘텐츠는 마스크 모양이 됩니다. 또한 폴더에 있는 간단한 SVG 파일을 XD의 이미지로 드래그하면 SVG 콘텐츠는 마스크가 됩니다.

09/02/2020
이 페이지가 도움이 되었습니까?