일러스트레이터(Illustrator)에서 SVG 파일 만들기
미리캔버스에서 PNG파일 제출하니까, SVG파일로 업로드 가능한 건이라고 반려 당해서 만드는 글
SVG가 뭔지몰라서 검색해서 배운내용을 토대로 작성합니다.
전문가가 아니라서 그냥 느낌적으로 설명한 부분이 꽤 많습니다. ㅎㅎㅎ
아래는 음슴체로 ㄱㄱ
SVG 파일 대충 이해하기
SVG파일이 PNG와 뭐가 다르냐면, PNG와 다르게 아래와 같이 색상을 설정할 수 있음
PNG는 전체 그림 하나가 1개의 이미지 요소라면
SVG는 선,면 모든 요소를 그룹으로 만든 이미지 요소 느낌?
PPT파일에서 그림 만들때도 여로 도형들을 겹쳐서 하나의 이미지로 만드는 거랑 같은 원리라고 생각하면됨
그래서 SVG 파일을 열어보면
레이어가 이렇게 되어 있음.
테스트 해보니 선은 설정이 안되는 것 같음
그래서 선도 결국은 면으로 만들어야 색 설정이 가능함
여기서 말하는 면이란 패스로 만들어진 면을 의미함.
만들기
1. 새 파일 생성하기
단축키 : ctrl+N
설정 : 사이즈는 자유롭게, 생상은 RGB, 래터스효과는 72ppi로
사이즈는 어차피 만들어진 요소에 따라서 대지 크기를 바꿀 거라서 아무렇게나 해도 됨
★ 만들 것 : 삼각형 금지 표지판
아래와 같은 도형을 모두 면으로 만들어야 하는데 색상은 다르게 설정하고 싶음.
1) 배경 색 2) 금지표지판 색 3) 삼각형 색
2. 원형 테두리 만들기
3. 직선 추가
4. 두개요소 선택 후 그룹
5. 선을 면으로 만들기
상단 메뉴 > 오브젝트 > 패스 > 윤곽
왼쪽과 같이 레이어가 바뀐 것을 볼 수 있음
원형 도구로 만든 원형 인 경우 레이어에 <원형>, <선> 이런식으로 되어 있는데
패스로 만들어버리면 다음과 같이 <패스>, <컴파운드 패스> 로 바뀜
6. 배경 요소 만들기
원형 도구로 원형 하나 더 만들기, 위치는 금지판이 위로 가고 원형이 아래로 가도록
7. 면을 패스로 만들기
컴파운드 패스 만드는 두가지 방법
첫째. 요소를 선택하고 오른쪽 클릭 > 컴파운드 패스 만들기
둘째. 메뉴 > 오브젝트 > 컴파운드 패스 만들기
★ 여기서 확인 가능한것
선 > 윤곽선 만들기 > 패스 생성
원형 > 컴파운드패스 만들기 > 패스 생성
8. 삼각형 만들기
왼쪽 툴바에서 '다각형 도구' 클릭 하고, 아무 화면에 대고 클릭
다각형 면을 3으로 설
9. 삼각형 색변경, 컴파운드 패스 만들기(7번 참고)
10. 레이어 순서 정렬
레이어 창과 같은 순서로 만들어주면 됨
11. 모두 선택 후 그룹(ctrl+G)
* 그룹해제 : ctrl + shift + G
12. 대지 사이즈 조절
상단메뉴 > 오브젝트 > 아트웍 테두리에 맞추기
13. SVG로 저장
ctrl+shift+S : 다른이름으로 저장
파일 형식 SVG로 하고 저장 클릭
SVG 옵션 오른쪽 이미지와 동일하게 맞추기
14. 생성된 파일 확인
브라우저 모양의 아이콘이 생김
미리캔버스를 불러와서 작업보드에 드래그앤 드롭하기
15. 색상 표 확인
요소를 클릭하면 왼쪽과 같이 '색상' 표가 뜨게 됨
클릭해서 색 변환 시키면 됨
이상 끝!
