스파인은 이미지 생성 프로그램에서 빠르게 이미지 추출 및 가져오기 위해서 스크립트를 제공하고 있습니다. 이번 포스팅에서는 스파인 스크립트 중 가장 많은 기능을 제공하는 포토샵의 스크립트를 다운로드하는 방법부터 적용 및 옵션 설명까지 알려드리도록 하겠습니다.
스파인이 지원하는 스크립트는 포토샵 외에도 에프터이팩트 일러스트레이터, 잉크스케이프, 김프, 어피니티 디자이너(프로그램이 스파인을 지원) 등이 있습니다. 포토샵 외의 프로그램에서 스크립트를 사용하여 이미지 추출이 필요하신 분은 이곳을 클릭해 다운로드를 받아 사용하시기 바랍니다.
포토샵 스크립트 PhotoshopToSpine.jsx 파일은 포스팅 상단에 첨부하였습니다.
스파인 스크립트 다운로드 및 포토샵 적용 방법
스파인 스크립트는 스파인 공식 홈페이지가 아닌 GitHub 웹 저장소에서 다운받을 수 있기에 다운로드 방법과 포토샵에 적용하는 방법까지 알아보도록 하겠습니다.
1. 스파인 스크립트 다운로드 사이트 접속
아래 사이트는 GitHub라는 유명한 웹 저장소입니다. 사이트가 스파인 공식 홈페이지가 아니지만 스파인에서 지원하는 정식 다운로드 페이지입니다.
GitHub - EsotericSoftware/spine-scripts: Scripts to export from PhotoShop and other tools to Spine's JSON data format.
Scripts to export from PhotoShop and other tools to Spine's JSON data format. - GitHub - EsotericSoftware/spine-scripts: Scripts to export from PhotoShop and other tools to Spine's JSON dat...
github.com
2. 포토샵 항목 선택
스파인에서 스크립트를 지원하는 프로그램 리스트 중 Photoshop 항목을 선택합니다.
3. 스크립트 다운로드
다운로드 항목에서 PhotoshopToSpine.jsx 를 마우스 왼쪽 클릭하면 다운로드 폴더에 저장이 됩니다.
4. 포토샵이 설치된 경로에 스크립트 붙여넣기
다운로드받은 스크립트를 아래 경로에 복사 붙여넣기 합니다. 포토샵 설치시 경로를 변경하지 않았어도 경로 중 Adobe Photoshop 2020은 포토샵 버전마다 이름이 다를 수 있습니다.
포토샵 설치 경로 : C:\Program Files\Adobe\Adobe Photoshop 2020\Presets\Scripts
포토샵을 다른 경로에 설치한 경우 아래 위치에서 포토샵 경로를 찾을 수 있습니다.
포토샵 메뉴 Help > System Info > Application folder : 설치 경로 확인
5. 포토샵에 적용한 스크립트 확인
포토샵 스크립트 활성화 메뉴는 아래 경로입니다.
File > Scripts > PhotoshopToSpine
스파인 스크립트 옵션
스파인 스크립트는 몇 가지 옵션이 있고 필요에 따라 옵션값을 변경해야 합니다. 스파인 스크립트의 옵션에 대해 알아보도록 하겠습니다.
1. Ignore hidden layers
포토샵 레이어 항목 중 숨겨진 그룹 및 레이어는 출력하지 않습니다. 이미지가 복잡해 질 수록 내보낼 이미지를 잘 확인하고 레이어에 이름을 정확하기 입력해야 합니다. 아래의 눈이 꺼진 레이어는 출력되지 않게 합니다.
2. Ignore background layer
포토샵 레이어 항목 중 Backgound 항목을 출력하지 않는 옵션입니다. 해당 옵션을 체크하면 1번 항목 처럼 Background 레이어를 숨기지 않아도 됩니다.
3. Trim whitespace
레이어의 공백 부분을 제거하여 출력할 수 있는 옵션입니다. 일반적으로 체크를 하여 사용하며 체크를 해제하면 캔퍼스 사이즈로 출력됩니다.
4. Write Spine JSON
JSON 파일의 생성 여부를 변경하는 옵션입니다. 보통 처음 캐릭터를 내보낼 때 주로 사용하며 캐릭터의 특정 부위를 수정하거나 추가 이미지를 내보낼 때는 체크를 해제하여 사용합니다.
5. Write template image
출력하는 이미지의 전체 모습을 파일로 생성하는 옵션입니다. 거의 사용하진 않지만 가끔 캐릭터의 전체 모습을 뽑아 두고 싶을 경우 사용합니다. 포토샵에서 다른 이름으로 저장하여 PNG 파일로 만든 것과 동일합니다.
6. Scale
포토샵에서 캐릭터를 큰 해상도로 작업을 한 후 포토샵에서 해상도를 낮춰 출력하게 되면 이미지가 흐릿해지는 현상이 있는데, 스크립트의 스케일 값을 변경하여 사이즈를 줄이면 깨짐 현상이 포토샵에서 직접 작업한 것보다 줄어들기 때문에 고해상도 작업이 필요할 경우 사용하면 좋습니다.
7. Padding
패딩 값은 이미지 추출 시 빈 영역을 픽셀 단위로 추가하는 방법입니다. 정확한 사이즈로 이미지 추출이 필요한 경우 0 값으로 진행하고 스파인에서 메쉬를 정교하게 나누고 싶을 경우 패딩값을 입력하여 추출합니다.
8. Output Paths - Images
이미지가 저장될 경로를 입력합니다. 스파인에서 이미지를 불러올 경로이므로 자주 변경되는 곳으로 지정하지 않는 편이 좋습니다.
9. Output Paths - JSON
4번 항목인 Wirie Spines JSON을 체크하였을 경우 JSON 파일을 생성하는데 .json 파일이 저장될 경로를 입력합니다. JSON 파일을 한곳에 저장하고 있지 않다면 보통 이미지 저장 경로와 동일하게 입력 합니다.
'2D 디자인' 카테고리의 다른 글
| [Spine] 스파인 기초 튜토리얼 4편 - 스파인 캐릭터 걷기(Walk) 애니메이션 만들기 (0) | 2022.09.12 |
|---|---|
| [Spine] 스파인 기초 튜토리얼 3편 - 스파인 캐릭터 숨쉬기(Idle) 애니메이션 만들기 (0) | 2022.09.11 |
| [Spine] 스파인 기초 튜토리얼 2편 - 스파인 캐릭터 리깅 (1) | 2022.09.09 |
| [Spine] 스파인 뼈 생성 및 리깅 하기 (0) | 2022.09.08 |
| [Spine] 스파인 기초 튜토리얼 1편 - 포토샵 캐릭터를 스파인에 불러오기 (0) | 2022.09.07 |
댓글