Spineへ取り込むSDイラスト（ちびキャラ）を、IllustratorとPhotoshopで準備する作業例です。
この記事は2020年3月の作業記録です。現行版の実機での再現確認は行っていません。
動かす部位を別レイヤーで描き、PSDからPNGと配置情報のJSONを書き出してSpineへ取り込みます。
本記事の範囲は素材の準備と取り込みまでで、骨入れやアニメーション設定は末尾の関連記事へ続きます。
2026年10月26日にAdobeのPSD書き出し案内とSpine公式資料、PhotoshopToSpine 7.42を照合しました。
以下の画像と制作例は2020年の記録で、使用したIllustrator・Photoshop・Spineの細かな版は未特定です。
IllustratorでのSDイラスト作成と作画ポイント
Illustratorではベクターデータで作画します。
Spine用にPNGへ書き出した後はピクセル画像になるため、最終表示サイズに合う解像度で用意してください。
IllustratorでのSDイラスト作成
全体のバランスを見ながらパスを引いて作画していきます。
土曜の午前中に、まとめて描き上げています。
朝から無の気持ちでイラレで作成。
せっかくSpine買ったので
ささっと土日でセットアップの検証を終わらせたい…#ねむいねこ pic.twitter.com/gGE8TXWWuk— すいみん💤@CGブロガー (@cg_method) March 7, 2020
作画ポイント1：関節部分は円を意識して作成する
この作例では、ボーン（回転や移動の軸）で動かす関節の接合部を円形に寄せて描いています。
作画ポイント2：関節部分の輪郭線はクリッピングマスクで隠す
各パーツに輪郭線を設定している場合、重なる関節部分の線が見えると不自然になるため、マスク処理で非表示にします。
作画ポイント3：パーツの分割
アニメーションで動かす部位ごとにパーツを分けます。
目・口・眉などは、個別に動かす部分を別レイヤーのままグループで整理します。
グループ化と1枚への結合は区別してください。
IllustratorからPhotoshopへの書き出し
この作例では、線や面のデータをピクセル画像に変えるラスタライズ後の寸法と色を確認するため、PSDをPhotoshopで開きます。
- ・非表示のレイヤーは格納されないので、必要なパーツは表示をONに。
- この例では背景をサイズの目安にしました。実際の書き出し範囲はアートボードの使用設定などで変わるため、PSDを開いてカンバス寸法を確認します。
- ・ファイル＞書き出し＞書き出し形式
- 形式をPhotoshop（PSD）にし、元ドキュメントと同じカラーモードで
Write Layers（レイヤーを保持）を選びます。Adobe：Illustratorの書き出し
書き出したPSDファイルをPhotoshopで開き、レイヤー構成や解像度を確認します。
Adobeの案内では、書き出し時にカラーモードを変えるとレイヤーを保持できません。
また、5階層を超える入れ子のレイヤーは結合されるため、必要なパーツが分かれているか確認します。
目・口・腕の各レイヤーを個別に表示し、欠落、マスクの見え方、色、カンバス寸法を元データと比較してください。
パーツが結合されていたら元のIllustratorデータへ戻り、階層を浅くして別名で書き出し直します。
セットアップ方法に応じた腕や足のパーツ設計
関節の変形方式やリギングの手法に合わせて、パーツを分割して書き出すか、統合して1枚にするかを決めます。
- 骨を入れるだけでそのまま関節を曲げる場合は関節ごとにパーツを分けておきましょう。
手・前腕（前腕部）・上腕の3パーツに細かく分割する構成です。
- メッシュとウェイトで曲げる場合は、腕を1枚にまとめる構成も選べます。必須ではなく、描画順や差し替え、変形範囲に合わせて分割を決めます。
メッシュは画像に頂点を置いて変形する仕組みで、ウェイトは各ボーンから受ける影響の割合です。
公式のメッシュ解説では、Spine Essentialでメッシュは使えないと案内されています。
1枚の腕をメッシュとウェイトで曲げる構成は、Professionalの機能を前提に選んでください。
PhotoshopからSpineへの書き出し
Photoshopでレイヤー名や構造を整理し、Spine用のデータを出力します。
- カラーモードをRGBに変更（※CMYKだとPNG保存できない）
- この例ではカンバスを1024×1024pxにします。Spine共通の必須サイズではありません。
- スクリプト用にルーラーの原点を足元へ移し、復元の目安となるガイドを残します。PSDを開き直すと原点が戻る場合があるため再確認します。
- レイヤー名と階層を確認します。この例では半角英数字で統一します。日本語が一律に禁止という意味ではなく、書き出し先のファイル名制限や同じ出力パスになる名前の重複を避けてください。
- この例のbgは背景レイヤーへ変換し、後の
Ignore background layerで出力対象から外します。
レイヤー名における左右の表記は、画面基準で手前側を「Outer」、奥側を「Inner」として整理しています。
Photoshopの上部メニューから「ファイル」＞「スクリプト」＞「PhotoshopToSpine」を実行します。
- 背景レイヤーを無視するにチェック
- 余白をトリミングするにチェック
- 倍率を50%にします。カンバス全体を換算すると512×512pxですが、余白をトリミングする場合はパーツごとに画像サイズが異なり、Paddingの設定も寸法に影響します。
Write Spine JSONと画像・JSONの出力先を確認して実行します。元PSDは保管し、既存出力を上書きしない作業フォルダーで結果を確認してください。公式PhotoshopToSpine README
出力先のファイル名が重複していないか確認します。旧環境では警告とerror.txtを確認しましたが、警告やログの形式は版で異なります。表示されたエラーを読み、該当するレイヤー名やパスを修正してください。
Spineを起動し、左上のSpineメニューから「データのインポート」を選択して、書き出されたJSONファイルを読み込みます。
現行の公式Import Data手順では、JSONを指定して新規または既存プロジェクトへ取り込めます。
最初は New project を選び、新しいプロジェクトで確認してください。
- 目・口・腕など、分けたパーツが欠けずに表示されるか。
- 足元の原点、パーツの位置、前後の重なり順が意図どおりか。
- 背景が出力対象から外れ、50%で書き出したサイズが用途に合うか。
欠落があればPNGの出力先とレイヤー名、位置が違えば書き出し前の定規原点を確認します。
確認後はプロジェクトを別名で保存し、元PSDと出力画像も保管して骨入れへ進みます。
3DCGやSpineに関する他の解説記事は、まとめ一覧より確認できます。
Photoshopからの詳細な書き出し手順はこちらで解説しています。
Spineの記事は、ほかにもあります。
Spine SDイラスト制作のまとめ
本記事では、SDイラストの作成からSpineへのインポート手順について解説しました。
Illustratorでベクター作画を行うことで、後からのプロポーション調整や修正を容易にしています。
PhotoshopToSpineで画像と配置情報を出力するほか、現行SpineにはPSDを直接取り込む方法もあります。直接取り込みではガイドなどで原点を指定し、対応しないレイヤー効果もあるため公式の制限を確認してください。
この記事は2020年3月の作業記録です。
IllustratorやSpineの書き出し設定は版によって項目名が変わることがあるので、お使いの版の画面と見比べてください。
