피그마 마스크 기능으로 도형에 맞춰 그림 자르기

 

 

포트폴리오를 만들던 중, 동일한 위치에 있는 부분들만 크롭해야 하는 일이 생겼다. 

 

 

이 3개의 사진에서, 내가 원하는 부분은 상단의 "연,월, 러닝 횟수, km" 부분이었다. 

 

 

처음엔 별 생각없이 그냥 아이폰에서 이미지를 편집했더니, 크기가 다 제각각이라서 깔끔한 느낌이 들지 않았다. 

 

혹시 피그마로 한 번에 해결할 수 없을까? 하고 알아보니 가능하길래!! ㅎㅎ 바로 블로그에 기록 남겨본다!

 

피그마 마스크 기능으로 도형에 맞춰 그림 자르기

 

일단 이렇게 피그마에 내가 자르고 싶은 사진들을 나열해준다.

 

그 다음 사진들을 전부 프레임에 넣어준다. 

나의 경우는 Shift+A로 오토레이아웃으로 프레임 처리를 해주었다. 

 

프레임에 넣어주는 이유?
복수의 사진들에 동일한 크기의 사각형을 동일한 위치에 넣어주기 위함이다! 

 

Frame1에 내가 원하는 위치, 크기에 맞춰서 사각형을 만들어준다. 

 

이때 사각형의 투명도를 조절해주면 더 편하게 위치랑 사이즈를 정할 수 있다!!

Frame 1에서 사각형의 위치와 크기를 정했다면 ctrl+c로 복사한 다음,

Frame 2를 클릭해서 ctrl+v를 눌러주면 이렇게 프레임의 동일한 위치에 사각형이 복사가 된다. 

 

이제 프레임을 사용한 이유는 끝! 

ctrl+shift+g를 이용해서 프레임을 해제해준다.

 

프레임을 해제한 다음, 단축키 '[' 혹은 ']'을 이용해서 사각형을 이미지의 맨 아래로 보내준다. 

이미지와 사각형을 '드래그'로 모두 선택한 다음에, 단축키 [Ctrl]+[Alt]+[m]를 입력해준다.

 

마스크 영역은 화면 뒤쪽에, 보여질 오브젝트는 화면 앞쪽에 위치해야한다
때문에 마스크 영역으로 쓸 사각형이 반드시 이미지의 하단에 위치해야 하는 것을 명심하자!

 

 

그러면 이렇게 내가 잡아놨던 사각형의 크기와 위치에 맞춰서 이미지가 잘린다!

 

마스크 기능을 이용해서 이렇게 편하게 복수의 이미지를 편집할 수 있다니!!

디자인 툴을 처음 써보는 나에게는 너무나 신세계다ㅎㅎㅎ

 

잘린 이미지들끼리는 오토 레이아웃을 걸어서 간격까지 주면 깔끔해진당 ㅎㅎ