본문 바로가기
디자인/피그마

[피그마] figma에서 이미지 누끼 따기(배경 제거 하기)

by 친절한 당근 2020. 7. 29.
반응형

[피그마] figma에서 이미지 누끼 따기(배경 제거 하기)

안녕하세요. 당근입니다.

오늘은 피그마에서 이미지 누끼따는 두 가지 방법을 소개해드리려고 해요.

사실 피그마에서는 디테일하게 얇은 선으로 이루어진 부분을 포토샵과 같은 그래픽 툴만큼 세세하게 따기는 어렵습니다. (머리카락이라던가.. 머리카락이라던가... 머리카락이라던가!)

좋은 이미지 퀄리티를 유지하기 위해서는 별도의 배경이 제거된 이미지를 불러와서 쓰시는 것을 권장합니다.

하지만 그럼에도 불구하고! 정말로 간단한 용도라던가, 아니면 정말로 간단한 이미지라던가 하는 경우에는 피그마에서 직접 따는 편이 편할 때도 있겠죠.

그런 분들을 위한 포스팅입니다.

 

1. figma 펜툴로 누끼 따기

포토샵이나 기타 어도비 그래픽 툴을 사용해보신 분들이라면 익숙하실, 펜툴로 누끼따는 방법입니다.

이미지 불러오기

먼저 이미지를 불러와야겠죠. 저는 귀여운 물고기 사진을 가져왔습니다. 물고기를 제외한 나머지 배경을 없애볼게요.

figma pen tool

피그마 메뉴 상단에서 펜툴을 선택하시고요.

펜 툴

이렇게 따 줍니다.

펜툴로 따실 때는 앵커포인트 제거하는 방법이 일러스트랑 똑같아요. 아무것도 누르지 않고 가운데 있는 앵커포인트를 찍어주시면 삭제됩니다. 

Use as Mask

그 다음에는 펜툴로 딴 벡터 이미지와 사진을 복수 선택해서 Use as Mask(Ctrl+Alt+M)을 눌러주시면 되는데요.

이 때 주의할 점!

fill

여러분이 펜툴로 딴 마스크 이미지는 테두리가 없이 이렇게 채워진 상태여야합니다. 테두리인 상태로 마스크를 먹이면 테두리에만 이미지가 적용돼요.

그리고 또 하나, 포토샵이나 일러스트와 다르게 figma에서는 마스크가 이미지 뒤에 위치해야 합니다.

그래서 최종적으로는 이미지만 보이고 그 뒤에 펜툴로 딴 벡터 이미지가 있는 상태로 복수 선택을 해서 마스크를 먹여야 한다는 것이죠.

완성

그러면 짜잔~ 이렇게 이미지 누끼를 딸 수 있습니다. 아마 어도비 툴에 익숙하신 분들은 제가 펜툴을 클릭하세요 하는 부분부터 마지막 쯤에 마스크 씌우는 부분만 보고도 금방 해내셨겠죠. 

 

자, 이렇게 펜툴로 누끼따는 법 말고도 피그마에서는 세팅 하고 나면 좀 더 쉽지만, 추천드리지는 않는 또 다른 방법이 있습니다.

 

 

2. Remove.bg

피그마에서 이미지 배경 제거 하는 방법 두번째, remove.bg 플러그인을 이용하는 방법입니다.

여기에 들어가셔서 remove be 플러그인을 설치하세요.

figma remove.bg

https://www.figma.com/community/plugin/738992712906748191/Remove-BG

 

Figma - Remove BG | Remove the background of images automatically with just a single click - using the remove.bg API....

Remove the background of images automatically with just a single click - using the remove.bg API. Note: You will need a remove.bg account for this plugin.

www.figma.com

Set API Key

햄버거 버튼 - 플러그인에 들어가시면 플러그인이 설치된 걸 보실 수 있는데요, 여기에서 처음 사용할 때는 먼저 API Key를 세팅해주셔야합니다.

Plugins - Remove BG - Set API Key

Set API Key

눌러보면 이런 가이드가 뜨죠? 간단히 말하면 remove.bg 사이트에 가셔서 가입을 하고 그 이메일로 받은 API Key를 입력하라는 말입니다. 가입하시고 피그마에 떠있는 저 링크로 들어가면(~profile#api-key) 아래와 같은 화면이 떠요.

 

Set API Key

Show 버튼을 눌러 API를 확인한 후 피그마에서 입력합니다.

figma there was an erro reading the image

"there was an erro reading the image" 라는 메세지가 뜨시나요? 이것은... 지금 remove bg가 뭐가 배경인지 인식을 못하고 있다는 뜻입니다. 즉 이미지가 복잡해서 자동으로 배경 제거가 불가능 하다는 말이죠.

 

이렇듯 remove.bg 플러그인을 사용하시면 애초에 이미지가 배경이 적당히 깨끗하고 초점이 주제에 맞춰있어야하고, 그외 등등의 제약이 있습니다. 

어쨋든 여러분이 가진 이미지가 적당히 자동으로 배경제거 될만한 이미지라고 가정하고 다음 과정을 진행해볼게요.

 

remove bg on figma

Plugins - Remove BG - Run을 누릅니다.

remove bg on figma

이렇게 누끼 자체는 잘 따지는 걸 보실수가 있어요. 하지만. 무료버전이라면 화질은.............

확대해보면 더 심각합니다.

이런 문제로 사실 remove bg는 별로 추천드리지 않아요.

왜 굳이 설명을 했냐? 여러분의 시간낭비를 방지하기 위해서죠.

 

그럼 이렇게 피그마로 배경제거 하는 두 가지 방법에 대한 포스팅, 마무리해볼게요.

당근이었습니당.

반응형

댓글