피그마에서 포토샵을 사용하지 않고 이미지 잘라내기

디자인을 하다보면 이미지 사이즈를 편집하거나 특정 부위만 Crop해야 하는 경우가 빈번하게 발생하는데요 오늘은 포토샵을 이용하지 않고 피그마 툴에서 이미지를 자르는 방법에 대해 알아보겠습니다.

첫번째 방법은 이미지의 Crop 기능을 사용하는 방법입니다.

  1. 자르려는 이미지를 선택합니다.
  2. 이미지를 더블 클릭하면 이미지 옵션을 지정할 수 있는 패널이 나옵니다. Select 옵션 기본 값은 Fill 입니다.
  3. 옵션 값을 선택해 Crop으로 변경합니다.
  4. 프레임 안에 각도를 움직여 원하는 비율에 맞춰 이미지를 자를 수 있습니다.

 

두번째 방법은 이미지에 Frame을 씌워서 노출되는 영역만 보이게 하는 방법입니다.

  1. Frame 내부에 이미지를 넣습니다.
  2. 프레임을 선택한 뒤 우측에 Clip content 옵션을 선택합니다. (기본 값은 체크가 되지 않은 상태)
     
  3. Clip content 옵션을 선택하면 선택한 프레임 영역 밖의 이미지는 잘려서 노출되지 않는걸 확인할 수 있습니다.
     
  4. 프레임 내부의 이미지를 Drag 기능을 이용해 원하는 위치로 배치 시키면 됩니다.

 

마지막 방법은 Slice 툴을 이용하는 방법입니다.

  1. 상단 메뉴 영역에서 Frame 툴을 길게 눌러서 추가 옵션을 열어줍니다. 
    Frame → Slice

  2. Slice 메뉴를 선택 후 이미지 위에 Slice 하고 싶은 영역만큼 Drag 해서 영역을 만들어줍니다.  
    그러면 레이어 패널에 Slice 라는 레이어가 생긴걸 확인할 수 있습니다.

  3. Slice 레이어에 Export 옵션을 적용하면 해당 영역만큼 이미지를 Export 할 수 있습니다.