前提

  • ペイントソフトところぺたを使います
  • 透過pngを使うのでSSP専用シェル
  • ベース画像が透過png、合成する表情差分が非透過のpng
  • 基本の事だけ書いてます

差分を切り取って作るのはファイルサイズを小さくするためです
気にしない場合は１つの立ち絵ごとに「surface半角数字.png」で画像を保存していけば大丈夫です
surface000.png 〜 surface009.png　←基本側（￥０）
surface010.png 〜 surface019.png　←相手側（￥１）
surface020.png 〜 ←基本側、相手側のどっちでも使用可

工程

絵を描く

レイヤー機能と透過png保存機能のあるお絵かきソフトならなんでもいいです
例）ファイヤーアルパカ、AzPainter2、PictBear　など
画像はアルパカ
わたしは一つのファイルに全部（キャラクター全員、アニメーション差分の目閉じ・口パクなど）描きます

※アルパカの場合の注意事項
「ペン」で塗ると不透明度100％でも透過状態なので「鉛筆」か「バケツ」で下塗りをします

↑二度塗りしてもまだ透けてる
眉毛、目、口、そのほかでパーツを分けています
全部作り終わったらキャラクターごとに分けて一度psdで保存します
縮小する場合はここで縮小します
縮小後、差分を作る際に不要な部分を消す画像を作る

差分は左上1pxの色で透過される
新規レイヤーを一番上に作って左上から一色で差分以外を塗りつぶす
顔がカンバスの中央にくるようにすると立たせた時バルーンの位置がきれいになります
⇒図説

立ち絵（透過pngの画像）を保存する

立ち絵の「surface000.png」を透過pngで保存します
目・眉などをバラバラにして作りたいところですがSiReFaSoはsurface000.pngをそのまま表示するのでちゃんと表情付きで保存すること
※ surface0、surface00 でも0が揃っていれば大丈夫
わたしは三ケタにしてます（surface000）
アルパカの場合
透過がある画像のみを表示します
表示→透明背景のチェックにオン、png保存
AzPainter2の場合
透過がある画像のみを表示します
別名で保存→png指定→アルファつき32bitにチェックして保存
PictBearの場合
背景レイヤーを捨てて画像を統合していく
透過がある画像1枚だけにしてpng保存

表情差分（透過しない画像）を保存する

psdファイルをpxiaで開いて表情差分のpngを保存します
（アルパカ・アズペは別名保存の度にpng指定にするのが面倒なのでpxiaを使う）
※ 作者さんによって保存方法がバラバラなのでここから先は「こういうやり方でもできる」という参考程度にお願いします
差分画像について
画像は左上から切り取ります

左上で切り取るとあとの作業が楽。追加シェルを作る時も楽
サイズが気にならないなら切り取らなくても大丈夫
差分ファイル名について
始めは表情番号の数字だけ付けて保存します
リネームソフトを使ってあとから文字を追加します

リネームソフトでファイル名の頭に「surface」、後ろに「x」を追加します
mac）http://manytricks.com/namemangler/
win）http://www.vector.co.jp/soft/winnt/util/se477323.html

※ 差分画像名とシェル名が被るのは良くないので差分には後ろに「x」をつけて区別します
※ ぶっちゃけ差分ファイル名は何でも大丈夫です。ただしアニメーションのパーツは「surface半角数字.png」にしておきます

ベーステキストを作る

surfaces.txtというテキストファイルを作ります
切り取った画像を合成するために「element」というものを指定します
※surface0など合成しない画像は書く必要はありません
例）サーフェス１の画像の場合

//サーフェス１
surface1
{
//ベース画像
element0,overlay,surface000.png,0,0
//表情差分画像
element1,overlay,surface001x.png,0,0
}

surface000.png、surface001x.pngがファイル名です。 ベース⇒差分　の順で書きます
0,0が座標です。 左上で合成なら常に0です
//　でコメントアウトです

いつもはこれを改変して使ってます

他には一枚ゴーストに「element合成-簡易.zip」のサプリメントをインストールしても簡単に作れるかもしれません
その際はあとでファイル名を「surfaces.txt」に変更してください
//分かりづらいと言われたのでどなたか最適なwebサービスに作り直してくださいお願いします

elementを指定し終わったらころぺたでdescript.txt、readme.txtを作ります
ころぺたを使用する前に必ずシェルフォルダのバックアップをとってください

その他＞環境設定　がこんな感じ
外見と外観はOSにあわせます

ファイル＞シェルを開く
でシェルの入っているフォルダを開きます
ころぺたは透過png画像を読み込めないので残念な表示になりますが気にしなくて大丈夫です

シェル＞シェル情報
でメタ情報（＝descript.txt）とReadme（＝readme.txt）を入力して保存します
メタ情報 はテキストボックス上でオンマウスにすると詳細が出ます（ascii文字＝半角英数字）
idは入力しなくても大丈夫です
参考：descript.txt
Readme はファイルがないと「N/A」と表示されるので空文字でも入れておいた方がいいと思います

あたり判定をつくる

ころぺたを使用する前に必ずシェルフォルダのバックアップをとってください

シェルをダブルクリック＞あたり判定＞あたり判定追加
で追加していきます
識別子は半角英数字で、Bust、Head、Hand　など
「この画面について」で説明が出ます
※ 複数の画像に一括で指定することもできます

アニメーションを作る

ころぺたを使用する前に必ずシェルフォルダのバックアップをとってください

シェルをダブルクリック＞アニメーション＞グループ追加
で追加していきます
グループIDは数字です。0から順番に指定していきます
アニメーションの種類を指定したら「パターン追加」で追加していきます
間隔はミリ秒なのでまばたきなら70〜90くらいです（surfaces.txt作成の際に下一桁は消えます）
参考：Shell設定 - surfaces.txt、 ueda/memo＞シェルアニメーションの所
※ 複数の画像に一括で指定することもできます

あたり判定、アニメーションを一括で指定する

※ 注意！ SSPでは同じあたり判定やアニメーションはまとめて指定できるのですが、ころぺたが対応していないのでまとめて指定する書き方をした場合、再度ころぺたで開くと設定が消えます

例）サーフェス0から5と、8に同じあたり判定と瞬きを追加する
//サーフェス番号
surfac0-5,8
{
//あたり判定の指定
collision0,57,10,145,41,Head
collision1,66,106,116,148,Bust
collision2,57,235,95,273,Hand
//瞬きの指定
0interval,sometimes
0pattern0,100,7,overlay,0,0
0pattern1,101,7,overlay,0,0
0pattern2,-1,7,overlay,0,0
}

100、101がファイル名（それぞれsurface100.pngとsurface101.png）、-1でアニメーション前の状態に戻します
0,0が座標です。左上で合成なら常に0です
「7」がアニメーションのスピードです。ころぺた上では「70」という表示です

立たせる

立たせてみて確認します

画像が透過できていない

  • descript.txtに「seriko.use_self_alpha,1」を記入します
  • 透過画像になっているか確認します

上手く表情が合成されない

1.ファイル名が間違っている
ファイル名を直す
2.差分画像が透過情報を含んでいる
ファイルを非透過に変換します
mac）プレビュー＞別名保存＞png保存、アルファのチェックを外す
win）http://www.vector.co.jp/soft/win95/art/se242146.html

その他

余力があればやるもの

オーナードロー画像・メニューを作る
省略可
参考：descript.txt
thumbnail.pngを作る
省略可
メニューツリーでゴースト・シェルの選択時に表示されるサムネイル
pngをpnrにリネームすると画像左上の1ドット(座標0,0)と同色が透過される
install.txtと同じ所に置く
画像の容量を小さくする
mac）http://imageoptim.com/
win）http://pnggauntlet.com/

最後に

追加シェルの場合

  • install.txtを書くためにゴーストの名前を調べる
  • install.txtを書く。参考：install.txt　※画像と同じフォルダに入れる
  • ファイルの中身をまとめてzipする
  • 拡張子をnarに変える　※必須ではない

公開

  • スクリーンショットを撮る
  • サイトに貼付ける
  • サイトを更新する
  • Disc-2に作りましたって書く

オマケ・・・
当たり反応箇所を丸とか多角形にすることもできます
ただしころぺたにそういう機能はついていないので手書きです
書き方も通常とは異なります。参考：Shell設定 - surfaces.txt
多角形にする場合は、GIMP2のイメージマップを製作する機能を使えば座標の取得が楽にできます。
totetiteta さんに教えてもらいましたありがとうございます。

うにゅう＠もどき
わからないことがあれば「ＦＡＱ・総合質問スレ」で聞けば誰かが答えてくれると思います
シェルを描く
saiを使用
サーフィスの作り方
Photoshopを使用（詳細
SAIでフチを綺麗に見せるpnaの作り方
sai＋pnaファイル
深く考えずにつける着せ替え機能のつけかた
着せ替えの作り方
UKADOC Project
仕様書(の解説)、SSPの公式文章

サイト： AZ store、 CSS着せ替えテンプレートプロジェクト