인스타그램 필터만들기! 누구나 쌉가능 SparkAR 사용방법! [step2]

이전 단계인 [step1]에서는 인스타그램 필터를 만들기 위한 sparkARstudio를 다운로드하고 설치한 후, 얼굴 방향을 인식할 수 있는 facetracker를 추가하였습니다.

이번 단계에서는 얼굴에 붙일 이미지 만들어 보겠습니다.

​

​

얼굴에 붙일 이미지를 만들려면 원하는 이미지를 그리거나, 다운로드해서 배경을 잘라주어야 합니다.

배경이 있는 파일을 사용하게 되면 그 자체로 화면에 보이기 때문에 화면에 띄우고 싶은 부분만 잘라내어야 합니다.

​

저는 Figma라는 웹 디자인 툴을 이용하여 이미지를 잘라내었습니다.

무료로 사용할 수 있어서 좋습니다.

​

이미 편집된 이미지를 가지고 계시다면 step3로 넘어가시면 됩니다.

<---- 이번 설명은 이미지를 원형으로만 자르는 방법이라서 복잡한 모양으로 자르는 데에는 한계가 있다는 것에 주의해 주시기 바랍니다. --->

​

https://www.figma.com/files/recent?fuid=1073861570434334647

Figma

아무것도 없는 디자인 파일을 생성해 준 후

이미지를 가져와야 합니다.

위와 같이 file -> place image를 선택

편집할 이미지를 가져온 후

원하는 위치에 놓고 클릭하시면 이미지를 가져온 겁니다.

이미지를 잘라보겠습니다.

위 사진과 같이 맨 위 자르기 버튼을 눌러줍니다.

​

파란색 가장자리를 잘 조정하여 최대한 빈부분을 잘라줍니다.

 

 

그리고 Frame을 만들어야 합니다.

프레임을 사진에 맞춰서 생성해 줍니다.

​

여기서 중요한 점은 이미지 파일이 생성된 Frame 1 안으로 넣어져야 합니다.

왼쪽 사진과 오른쪽 사진의 다른 점은 Frame 1으로 이미지 파일을 넣지 않고 넣고의 차이입니다.

오른쪽 사진과 같이 Frame 1 안으로 넣으셔야 합니다.

그리고 Design 탭에 Frame에 모서리를 부드럽게 만드는 탭이 존재합니다.

숫자를 조금씩 높여서 원형만 남기도록 높여줍니다.

그러면 원형만 남게 됩니다.

​

이대로 다운로드하시면 됩니다.

오른쪽 탭에 Export를 선택한 후, Preview를 클릭하시면 다운로드하기 전 미리 보기를 보실 수 있습니다.

그리고 편집한 파일을 다운로드하기 위해서는 EXportFrame 1이라고 적혀진 버튼을 누르시면 다운로드됩니다.

 

 

 

 

여기까지 이미지 편집하기 [step2]를 마치겠습니다.

고생하셨습니다.

​

[step3]에서는 [step2]에서 편집한 이미지를 사용하여 얼굴에 붙이는 과정을 배워보겠습니다.