스프라이트 이미지와 SVG를 효율적으로 내보내기/코딩하기위한 고찰 [내보내기 편]

우선 소재를 내보내는 도구에 대해

3개의 아이콘 소재를 다음의 3종류의 형식으로 내보내는 것을 목표로 한다.


이미지
이름



icon-facebook


icon-twitter


icon-github


형식
- 1x 크기 (48px x 48px) PNG
- 2x 크기 (96px x 96px) PNG
- 2x 사이즈 SVG

Photoshop의 Generator 기능을 사용하여 내보내기

Photoshop의 자산 내보내기 기능 설정 에서 소개한 방법으로 PNG, SVG를 일괄적으로 내보낸다.

크기, 형식별로 내보내기 대상을 초기 설정으로 지정하는 방법이 없을 것 같았으므로 이번에는
2x/icon-facebook.png, 50% 1x/icon-facebook.png, 100% svg/icon-facebook.svg
라고 하는 레이어명으로 소재마다 지정.

장점

모든 폴더에 여러 크기의 PNG와 SVG를 동시에 내보낼 수 있습니다. 명명도 컨트롤할 수 있다.

단점

Generator 기능으로 SVG를 쓰려고 하면, 마스크에 의한 구형 영역의 지정이 올바르게 인식되지 않는다.

참고 : SVG export doesn't honor bounding box (layer mask) #354

요약

상기 단점은 CSS상에서 개별적으로 아이콘의 위치 조정을 할 필요가 생겨 코딩, 운용에 악영향이 있다.

현재 포토샵은 코딩용 SVG를 내보내는 데 적합하지 않으므로 PNG만 내보내기로 제한한다.

SVG를 사용하고 싶은 부분은 Illustrator에서 소재 작성, 내보내기?

SVG의 자동 내보내기는 나머지 반년 기다려 본다.

주변 현상의 해결책?

Illustrator 아트보드로 내보내기

이라레 ファイル > 書き出し 에서 아트보드별로 PNG 및 SVG를 내보냅니다.

장점

SVG도 의도한 직사각형 영역에서 내보낼 수 있고, 수수는 많지만 PNG, SVG 모두 의도한 보이는 방법으로 내보낼 수 있었다.

단점

PNG, SVG는 동시에 내보내지 않고 순서대로 내보낼 필요가 있다.

파일명이 ai 파일명에 의존한다 (아트보드명과는 연동하지 않는다) 때문에 리네임이 번거롭다.

리사이즈 내보내는 기능이 없기 때문에, 1x소재는 나중에 Photoshop의 배치 처리로 처리.

정중하게 작업하지 않으면 아트 보드의 위치와 크기에 소수점이 들어갈 수 있습니다

요약

파일 점수가 적은 경우는 좋지만, 많이 있을 때는 적합하지 않다.

로고와 같은 요소 요소에서 Illustrator에서 재료를 관리하고 내보내는 것이 낫습니다.

덧붙여 쓰여진 파일명에 흔들리는 일련번호는, 아트보드의 중첩 순서에 의존한다.

도전

대량의 아이콘 데이터를 이라레로 작성해, PNG, SVG로 내보내·소재 관리하고 싶은 경우의 베스트 솔루션을 알고 싶다. → 스스로 스크립트 작성?

→ [12/6 추가] 스크립트를 도입하여 내보낼 수있었습니다.
이라레로 만든 아이콘을 아트 보드마다 SVG로 내보내기

Sketch로 내보내기

Sketch에는 슬라이스를 내보내는 기능도 있습니다.

장점

복수의 사이즈, 형식을 지정해, 일괄 써내기 가능.

어쩌면 타사 스크립트로 더 효율화할 여지가 있다.

단점

크기, 형식별로 내보내기 위치를 변경할 수 없습니다. (suffix와 확장자로 구별)

Sketch 메인으로 디자인 워크를 할 수 없는 결함 있다

요약

그리고 한숨에 Photoshop을 버리고, Sketch로 완전 이행할 수 있는 날이 올지도 모른다.

이번에 작성한 샘플 파일

사용 앱: Photoshop CC 2015, Illustrator CC 2015, Sketch 3.4.2