자세히보기

영상편집&디자인 초보여도 괜찮아/피그마 완전정복

피그마에서 이미지를 다양한 크기로 불러오는 3가지 방법(클리핑마스크기능)

갓찌뇽 2024. 9. 13. 09:56
반응형

 

 

피그마를 이용하다 보면 사진을 다양한 크기로 표현하는 경우가 꽤 있죠~! 그래서 오늘은 피그마에서 이미지를 다양한 모양으로 불러오고 수정하는 방법을 알려드려보려고 합니다~!^^

 

01 도형안에 이미지 바로 불러오기


STEP 01 도형크기에 맞게 이미지 불러오기

 

STEP 1. 도형에서 Place Image를 선택하면 이미지를 불러올 수 있는 창이 열리고 +버튼이 생기는데 원하는 도형을 클릭하면 도형크기에 맞춰 이미지가 쏙 들어갑니다~!

 

STEP 02 도형안에 이미지 크기 조절

첫번째 [Fill]은 도형안에 이미지가 꽉차는 걸 볼 수 있어요~!

 

두번째 [Fit]은 도형에 딱맞게 사이즈를 조절해줍니다~!

 

세번째 [Crop]은 도형크기를 바로 자를 수 있어요~!

 

네번째 [Tile]은 바둑판 모양으로 이미지를 여러가지로 보여줄 수있게 조절되는 기능입니다~! (이미지의 위치를 조금조절해볼수는 있지만 도형크기가 변경될 수 있기 때문에 이미지를 여러가지로 보여주고싶을때 활용하면 좋아요~!)

 


02. 프레임안에 도형불러오기 (이미지 사이즈와 위치를 자유자재로 조절하고 싶을 때)

도형크기에 맞게 이미지를 불러올 수는 있지만 도형안에서 자유자재로 이미지의 사이즈나 위치를 변경하기에는 어렵기 때문에 도형안에서 이미지를 자유롭게 변경하려면 프레임을 활용해줍니다~!

 

STEP 01 상단에서 프레임선택하고 프레임을 그려줍니다.

 

STEP 02 Place Image를 클릭해서 이미지를 불러옵니다.

 

STEP 03 프레임 안에서는 이미지를 이렇게 움직일 수 있습니다~!

 

STEP 04 피그마에서 프레임을 다양한 모양으로 변경하는 방법

 

프레임을 선택하고 오른쪽 디자인패널에서 모서리 둥글기 크기를 변경해줍니다~!

 

조금 더 둥근 원형으로 변경하고 싶으면 1000으로 변경 후 프레임을 드래그해서 모양을 잡아줍니다~!

 

03 피그마에서 이미지를 마스크처리하는 방법

이제 마지막 방법인데요~! 바로 피그마에서 이미지 마스크처리하는 방법입니다. 가장 추천하고 싶은 방법이기도 해요

 

STEP 01 원형 도형을 그려줍니다.

 

STEP 02 마우스 우클릭 [Use as mask]를 선택하거나 상단에서 마스크를 선택합니다.

 

STEP 03 마스크 그룹이 생기면 이미지를 불러와서 Mask Group안에 불러와줍니다.

 

STEP 04 마스크 안에서 자유자재로 이미지 사이즈 및 위치를 조절할 수 있습니다~!

 

직접 실습파일을 통해 어떤식으로 이미지를 불러왔는지 불러온 이미지가 어떻게 완성되었는지 확인할 수 있어요~!

 

728x90
반응형