17

MASK

MASK

마스크의 여러가지 사용법

이번장에는 마스크에 대해서 알아보도록 하겠다. 마스크는 어떠한 객체들을 내가 원하는 모양 만큼만 보여지게 하는 것이다. AdobeXD 는 두가지 형태로 마스크를 사용할 수 있는데 이 두가지에 대해서 알아보고 그 개념에 대해서도 알아보도록 하자. 

기본 마스크

마스크 만들기 ( Cmd + Shift + M )

마스크를 만들기 위해서는 아래와 같은 조건이 필요하다. 

  • 맨 앞에 존재하는 마스크 모양 - 이미지, 문자 등은 불가능
  • 마스크 모양 뒤에 존재하는 마스크할 대상(이미지, 문자, 심볼, 반복 그리드, 그룹 등)
  • 두개 이상의 레이어

조건이 충족되면 마스크를 만들 수 있다. 객체들을 다중 선택한 후 단축키 Cmd + Shift + M 으로 간단하게 실행 할 수 있다. 또는 상단 메뉴 바에서 Object/Mask with Shape 을 사용하면 된다.
아쉽게도 마우스 우 클릭 메뉴에는 마스크 실행 메뉴가 존재 하지 않는다. 

마스크 수정

마스크의 속성을 수정하기 위해서는 마스크된 객체를 두번 클릭한 후 마스크 된 객체들의 속성들을 변경 할 수 있다. 마스크 된 객체들은 그 속성을 잃지 않고 그대로 가지고 있기 때문에 모든 속성을 변경 하거나 삭제가 가능하다.

마스크의 해체

마스크의 해체는 그룹, 심볼, 반복 그리드, 조합의 해체와 마찬가지로 단축키 Cmd + Shift + G 를 사용하면 된다. 마스크는 속성이 그대로 살아 있기 때문에 해체 후에도 마스크 전과 똑같은 속성을 가진다.

이미지의 마스크

마스크 개념의 이미지 크롭핑

위의 기본 마스크와는 조금 다르게 이미지는 기본적으로 마스크 속성을 가지고 있는데 이미지 자체가 AdobeXD 에서는 마스크 개념을 가지게 된다. 쉽게 말하면 이미지는 처음 부터 그 자체 모양의 마스크를 포함하고 있다고 생각하면 된다. 그래서 이미지는 두번 클릭하여 위치 크기등을 수정하여 원하는 상태로 크롭핑을 다시 할 수 있다. 이미지를 굳이 크롭핑 해서 가져올 필요가 없다는 이야기 이다. 이 기능으로 프로그램내에서 이미지를 언제든지 크롭핑을 할 수 있으니 말이다. 
또한, 그 크롭핑된 이미지는 진짜로 잘려지는 것이 아닌 마스크 개념이기 때문에 언제든지 다시 수정 할 수 있다.

AdobeXD 에서는 기본 마스크 개념과 이미지의 마스크 개념을 기억 해야 한다. 기본 마스크는 우리가 알고 있는 마스크 개념으로 사용하면 되지만 이미지의 마스크 개념은 다른 프로그램에서는 보지 못한 개념이다. 하지만 이 개념은 프로그램을 사용하는 데에 사용성을 크게 높여 주고 있다. 이미지 크롭핑을 마스크 개념으로 한다는 것을 잘 기억하면 꼭 유용하게 쓰일 것이다.

AdobeXD Classes

01 . INTROAdobeXD의 대한 소개

02 . INTERFACEAdobeXD의 인터페이스 소개

03 . ARTBOARDSArtboards 에 대한 이해

04 . PANNING & ZOOMING화면 움직이기와 화면 확대 축소

05 . SHAPES도형 그리기와 활용

06 . TEXT문자 쓰기와 활용

07 . PEN TOOL펜 도구의 이용 및 활용

08 . SELECT MOVE RESIZE오브젝트 선택하기, 움직이기, 크기변경하기

09 . STYLING APPEARANCE오브젝트의 면과 선의 색상, 그림자, 흐림 효과

10 . LAYERS레이어 패널의 사용과 관리

11 . DUPLICATE오브젝트 복제의 여러가지 방법

12 . ALIGN & DISTRIBUTE객체의 정렬과 각 객체들간의 공간 분배

13 . UNION두개 이상 객체의 조합 만들기

14 . GROUPAdobeXD 에서의 그룹의 의미와 활용

15 . SYMBOLS심볼 만들기와 응용

16 . REPEAT GRID반복 그리드 사용법과 활용

17 . MASK마스크의 여러가지 사용법

18 . ASSETS PANEL에셋 패널의 사용법과 활용

logo_basic@2x

Copyright © 2018 AdobeXD.info & Bandy garnet.
All Rights Reserved.

E-mail: bandygarnet@gmail.com
Slack: adobexdclass.slack.com