일러스트레이터에서 대지 기반 디자인 리소스 추출하기 / Illustrator‎ asset 저장하기

일러스트레이터에서 디자인 리소스 추출하기

Illustrator‎ asset 저장하기

본 포스팅은 디자인 툴(Illustrator‎) 사용 방법을 몰라도 바로 디자인 파일(*.ai)에서 디자인 리소스(asset)을 추출하는 방법입니다. 

단순히 자원 추출이 아닌 대지를 기반으로 서로 다른 크기를 가진 아이콘을 균일하게 추출하는 방법을 알아보겠습니다. 

* 디자인 파일은 개발중인 달핑 웹 플랫폼을 기반으로 작성하였습니다.

방법은 매우 간단합니다.(정말?) 익숙해 지시면 단축키가 쉽겠죠??

일단 일러스트레이터를 처음 쓰신다면 간단한 사용법부터 아셔야 합니다.

일러스트레이터는 기본적으로 드넓은 대지(작업공간)가 특징이죠!

이 작업 공간을 확대하고 축소하고 화면을 상하좌우로 이동시킬때 꼭 필요한 단축키!

확대: 'cmd' + '+'

축소: 'cmd' + '-'

이동: 'space bar' + '마우스 드래그'

정도가 되겠습니다. 참 쉽죠? 이제 절반 왔습니다(?)

자 이제 이미 에셋을 분리하는 팁입니다.

기본적으로 일러스트레이터는 포토샵과는 다르게 대지를 여러개 설정할 수 있습니다.

바로 왼쪽에 있는

이 대지도구(Shift+O)로 말이죠! ㅎㅎ

asset을 분리하는데 왠 대지 이야기냐! 간단하다며! 쉽다며! 하시는 분들도 계시겠지만

이게 바로 꿀팁입니다.

바로 예제로 들어가죠

자 브라우저 오른쪽 상단에 있는 소셜 아이콘들의 이미지 리소스를 저장하고싶습니다.

방법은 다 선택해서

파일 > 내보내기 > 화면에 맞게 내보내기

파일 > 내보내기 > 내보내기 형식

파일 > 내보내기 > 웹용으로 저장(레거시)

로 저장하면 되겠으나..

이렇게 간단한거 포스팅할꺼면 시작도 안했습니다 (처음 말과 다르잖아!!)

자 진정하시고 끝까지 지켜봐 주세요

대지를 이용한 추출을 사용하는 이유 1

자 위 사진을 보면 페북 로고와 유튜브 로고 가로 세로 사이즈가 다른걸 보실 수 있습니다.

이렇게 가로 세로가 다른 이미지를 단순히 자원추출(asset) 한다면 웹이나 앱 구현시

약간 불편할 수 있고 터치 영역을 넓게 잡아주기 위해서

가운데 정렬을 하고 padding값을 넣어주거나 해야합니다.

물론 해결책은 있지만 깔끔하진 않다고 생각하여 저는 균일한 크기의 대지를 만들고

디자인 리소스(asset) 를 저장하는 방법을 권장드리고 싶습니다.

대지를 이용한 추출을 사용하는 이유 2

또한 대지 없이 asset만 따로 저장하다보면 외곽선이 살짝 잘리는 현상을 보실 수 있습니다.

(위 사진은 크게 잘리지 않았지만 경우에 따라 심하게 잘리는 경우가 있습니다)

또한 면으로 작업된 도형에 stroke가 들어가 있으면 외곽선이 더 잘리는 경우가 있고요

이에 대한 해결책으로도 대지를 이용해서 이미지를 추출하는 방법을 추천드리고 싶네요

아까 이 대지 도구를 이용하여 

요래 딱 맞는 정사각형을 만들고 대지에 아이콘 이름까지 붙여줍니다 흐흤

정확한 픽셀 입력이 어렵다면 오른쪽 위에 정확한 수치를 입력해서 작업하면 됩니다

그리고 난 후 

파일 > 내보내기 > 화면에 맞게 내보내기

를 선택하면!

일러스트레이터에서 만든 대지들이 다 나오는데

여기서 제가 추출하고 싶은 아이콘만 선택 후 대지내보내기를 합니다.

여기서 일러스트레이터 최신버전에서만 사용할 수 있는 기능이 오른쪽에 있습니다.

참 유용하죠 모바일 환경은 해상도별로 서로 다른 크기의 asset을 준비해야할 필요가 있는데

이때 매우 유용합니다.

배수가 아니라 픽셀 지정도 가능해서 참 쉽죠!

이렇게 분리하면 개발자도 누구나 쉽게 디자인 파일을 바로 열어서 asset추출이 가능하다는거!

참 쉽죠??

저는 그래서 CSS로 표현할 수 없는 이미지 파일은

제가 원하는 크기대로 대지를 만들어 놓고 복사해서 놓습니다.

이렇게 해두면 나중에 추출하기도 편하죠

신세대 개발자들이나 디자이너들은 비웃을수도 있습니다.

제플린(Zeplin) 사용 안하고 이게 뭔 귀찮은 짓이냐구요..

아직 게을러서 시도해보지 않았는데.. 시도해 본다면 포스팅 올리겠습니다!

- 끝 -