[일러스트레이터] 직접 그린 그림 Image trace하고 SVG 파일로 저장하기

직접 그린 그림을 사진찍거나 스캔한 다음 일러스트레이터에서 벡터 파일로 변환할 수 있다. 그리고 패스를 수정한 다음 SVG 형식으로 저장을 해서 다양한 곳에 적용할 수 있다. 요즘 크리컷, 실루엣같은 프린터에도 많이 사용하는 듯~

• Image trace (구버전 - live tracing) : jpg같은 비트맵 이미지를 벡터 파일로 변환해주는 기능 
• SVG (Scalable Vector Graphics) : 벡터 그래픽을 XML 기반의 파일 형식으로 표현해주는 파일, 코드를 복사해서 코

1. 이미지 트레이스

File -> Open 에서 그린 이미지를 열어준다. 선택하고 Open 클릭!

 

그럼 이미지가 이렇게 열렸다. 선택툴로 이미지를 선택하고 상단에 Image trace 버튼을 누르면 된다

 

+ 컨트롤 패널이 보이지 않는다면 아래 포스트 참조. 

[일러스트레이터] 패널 Panel 에 대해 알아보자

 

이때 image trace 옆에 화살표를 클릭하면 타입을 고를 수가 있는데 특별한 설정을 하지 않으면 Default로 적용된다.

무난하게 Default로 하고 나머지는 하나씩 눌러보면 되고, 최종 Expand하기 전에 다른 걸로 변경할 수 있다.

뭐 이미 다 해버려도 Ctrl/ Cmd + Z (Undo)를 눌러서 처음으로 얼마든지 돌리면 됨

 

 

 

 

 

Default로 적용했더니 블랙 & 화이트 색상만으로 단순하게 벡터 모양이 만들어졌다. 

이걸로 결정했으면 Expand를 눌러줘야 최종적으로 적용된다. 

 

 

Expand를 클릭하면 이렇게 패스로 완전 변환된 것을  확인할 수 있고 이 상태에서 Ungroup(그룹해제)을 꼭 해줘야 된다!

파일 전체가 Group된 상태로 만들어지기 때문에 이후 수정을 위해서 Ungroup을 해야 된다. 

Ungroup 은 마우스 우클릭해도 나오고 단축키로 Ctrl/Cmd + G 를 누르면 된다. 

 

 

Ungroup후에 흰배경을 지워버린다. 까만 패스만 남은 상태. 그리고 옆에 스프링도 지워버림. 

Ctrl/Cmd + shift + D 를 클릭해서 투명 그리드로 바꾸면 흰색이 다 지워졌나 확인가능. 

 

[일러스트레이터] 배경 투명하게 보기 & 선택박스 숨기기 - View(뷰) 기능들

 

 

 

 

 

 

그리고 다시 원래 배경으로 돌아와서 보면 요렇게 검정 라인만 남은 벡터 파일로 만들어진 것을 확인할 수 있다. 

---

2 SVG파일로 저장하기

File - Save As (Ctrl/Cmd + S) 를 클릭한다

 

하단 Format 선택에서 SVG를 찾아서 선택하기.

 

옵션에서는 딱히 건드릴 필요없고 OK를 클릭함

그리고 파일을 확인하면 이렇게 SVG 파일로 저장된 걸 알 수 있다. 

이걸 어도비 일러스트레이터에서 열어서 수정해도 되고 텍스트 편집을 해도 되고 HTML소스 코드에 붙여넣어도 된다. 

요즘 활용도가 높은 SVG~